Mission Control

Artifacts

K
← Back to artifactsOpen JAM-11 →

Linear App Architecture Deconstruction

Research BriefDraftJAM-11Created Apr 2, 20269 min readFull screen ↗

Linear App Architecture Deconstruction

Design reference for Mission Control UI redesign. All observations from hands-on exploration of Linear's web app (desktop) on April 2, 2026, supplemented by Linear's docs and changelog.

1. Information Architecture

Linear organizes everything into a clear three-level hierarchy:

Workspace
  └─ Team (e.g., "Peteos")
       ├─ Issues (the atomic unit)
       ├─ Projects (groups of issues with a goal)
       └─ Views (saved filters/groupings)

Key insight for MC: We have one "team" (Pete/Vinny/David) and no need for the workspace/team layer. Our hierarchy is simpler:

Mission Control
  ├─ Tasks (the atomic unit, equivalent to Linear's Issues)
  └─ Views (Board view, List view, filtered views)

Projects in Linear are first-class objects with their own health, status, lead, target date, and progress percentage. For MC, projects are just tags on tasks. This is intentional: we don't need the overhead until the task count justifies it.

2. Navigation Architecture

[Workspace name] [Search] [+ New]
─────────────────────────────────
Inbox
My Issues
─────────────────────────────────
Workspace
  Projects
  Views
  [More]
─────────────────────────────────
Your Teams
  Peteos ▼
    Issues     (current view indicator)
    Projects
    Views
─────────────────────────────────
Try ▼
  Import issues
  Invite people
  Connect GitHub

Observations:

  • Sidebar is collapsible but always present on desktop
  • Primary actions (Search, New Issue) are pinned at top
  • "My Issues" is a first-class nav item, not a filter
  • Teams section is expandable with sub-nav
  • Active view gets a highlight/bold treatment

For MC: Our sidebar can be much simpler:

Mission Control
─────────────────────
Tasks          (Board | List toggle)
Artifacts
─────────────────────
[Automation]   (future)
[Settings]     (future)

Top bar (within content area)

Linear uses a horizontal tab bar at the top of the issues view:

[All Issues]  [Active]  [Backlog]  [⚙]     [Filter] [Display] [Layout]
  • All Issues / Active / Backlog are pre-built view tabs
  • ⚙ opens view settings
  • Filter opens a filter builder (status, assignee, priority, label, project)
  • Display controls which properties show on cards/rows
  • Layout toggles between list and board view (two icon buttons)

For MC: Keep the layout toggle (board vs list). Skip filter builder for now. The pre-built tabs map to our columns, which serve the same purpose visually.

3. Board View (Kanban)

Column anatomy

○ Todo  4   ···  +
┌─────────────────┐
│ PET-1            │
│ ○ Get familiar   │
│ ···              │
│ Created Apr 2    │
├─────────────────┤
│ PET-2            │
│ ○ Set up teams   │
│ ···              │
│ Created Apr 2    │
└─────────────────┘

Column header: Status icon (colored circle) + status name + issue count + overflow menu (···) + add button (+)

Card anatomy:

  • Issue ID (light gray, e.g., PET-1)
  • Status circle icon (matches column color)
  • Title (bold, primary text)
  • Priority icon (dots pattern for No Priority, bars for set priority)
  • Created date (light gray, bottom)
  • Assignee avatar would appear top-right if assigned

What's NOT on the card:

  • No description preview
  • No labels/tags
  • No project indicator
  • No subtask count

Cards are extremely minimal. The philosophy is: scan titles fast, click for detail.

Hidden columns

Empty columns are collapsed into a "Hidden columns" panel on the right:

▼ Hidden columns
  ○ Backlog       0
  ◐ In Progress   0
  ● Done          0
  ⊘ Cancelled     0
  ⊘ Duplicate     0

Each shows status icon + name + count. Click to expand.

For MC: Good pattern. If Needs Review or Done are empty, collapse them to save space.

4. List View

Row anatomy (from board view observation, list is similar)

Linear's list view uses a grouped layout:

○ Todo  4   ···  +
─────────────────────────────────────────────────
  ···  PET-1  ○  Get familiar with Linear    Apr 2    👤
  ···  PET-2  ○  Set up your teams           Apr 2    👤
  ···  PET-3  ○  Connect your tools          Apr 2    👤
  ···  PET-4  ○  Import your data            Apr 2    👤

Row elements (left to right):

  1. Context menu (··· on hover)
  2. Issue ID (gray)
  3. Status icon (colored circle)
  4. Title (primary text, takes most width)
  5. Date (far right, gray)
  6. Assignee avatar (far right)
  7. Priority icon (between title and date, if set)

Display properties are configurable via the Display Options panel (docs):

  • Toggle on/off: Issue ID, Priority, Status, Labels, Project, Cycle,

Created, Updated, Assignee, Estimate

  • Each property appears as an icon or compact text on the row

Grouping options: Status (default), Assignee, Project, Priority, Cycle, or no grouping

Group headers are sticky when scrolling (critical for long lists).

For MC: The row should be: status icon + title + activity tag + assignee avatar + blocked indicator. Keep it to one line. Priority icon if set.

5. Issue Detail View

Clicking an issue opens a full-page detail view (not a modal or side panel on desktop):

┌──────────────────────────────────────────────────────────┐
│  < Back   PET-1 Get familiar with Linear  ☆  ···        │
├──────────────────────────────┬───────────────────────────┤
│                              │ Properties ▼              │
│  Get familiar with Linear    │   ○ Todo                  │
│                              │   ··· Set priority        │
│  Welcome to Linear!          │   👤 Assign               │
│                              │                           │
│  Watch an introductory       │ Labels ▼                  │
│  video and access a list     │   ⊕ Add label             │
│  of resources below.         │                           │
│                              │ Project ▼                 │
│  [video embed]               │   ⊕ Add to project        │
│                              │                           │
│                              │                           │
└──────────────────────────────┴───────────────────────────┘

Left panel (60-70% width):

  • Title (large, editable inline)
  • Description (markdown, full-width, editable)
  • Embedded content (videos, images)
  • Activity/comments below description

Right sidebar (30-40% width):

  • Properties section: Status, Priority, Assignee (each clickable to change)
  • Labels section: tag pills, add button
  • Project section: link to project, add button
  • Additional metadata: Due date, Cycle, Estimate
  • Top-right icons: Activity log, copy link, share, settings

Key pattern: Properties are compact vertical list with icon + value. Click any to open a dropdown/selector inline. No save button; changes are instant.

For MC task detail: Same split layout. Left: title + description (markdown). Right: status selector, assignee selector, priority, tags, blocked toggle, created/updated dates. Changes save instantly on selection.

6. Issue Creation Modal

┌───────────────────────────────────────────────────┐
│  🟥 PET  ▸  New issue                    □  ✕    │
│                                                    │
│  Issue title                                       │
│  Add description...                                │
│                                                    │
│  ○ Backlog  ··· Priority  👤 Assignee              │
│             ⊕ Project   🏷 Labels  ···             │
│                                                    │
│              □ Create more     [Create issue]      │
└───────────────────────────────────────────────────┘

Observations:

  • Modal, not full page
  • Title is the only required field
  • Bottom bar: status selector + metadata pills (all optional, inline)
  • "Create more" checkbox for rapid entry
  • Attachment button (paperclip) on left of bottom bar
  • Keyboard shortcut: C from any view
  • Expand button (□) to go full-screen for longer descriptions

For MC: Our creation is primarily chat-based ("track this:"), but the web form should match this pattern: title field, optional description, metadata bar at bottom with status/assignee/priority/tags. Single "Create" button.

7. Projects View

Projects
[All projects]  [⚙]                    [Filter] [Display] [Layout]

Name                Health        Priority  Lead  Target date  Status
─────────────────────────────────────────────────────────────────────
⊕ UI Sandbox    ○ No updates    ···       👤    📅           ○ 0%

Row elements:

  • Icon + Name
  • Health indicator (No updates / On track / At risk / Off track)
  • Priority dots
  • Lead avatar
  • Target date
  • Status percentage (completion)

Project detail page includes: description/brief, linked issues, milestones, documents, activity.

For MC: We don't need a Projects view. Projects are tags on tasks. But the health/status pattern is interesting for future: a tag summary could show "job-search: 3 tasks, 1 needs review."

8. Visual Language

Status indicators (colored circles)

  • Backlog: Gray dotted circle (○ with dots)
  • Todo: Gray empty circle (○)
  • In Progress: Yellow/amber half-filled circle (◐)
  • Done: Purple/blue filled circle with check (●✓)
  • Cancelled: Gray circle with X (⊘)

Priority indicators

  • No Priority: Three gray dots (···)
  • Urgent: Red filled exclamation
  • High: Orange three bars
  • Medium: Yellow two bars
  • Low: Blue one bar

Color philosophy

From Linear's UI redesign post:

  • Use LCH color space for perceptually uniform colors
  • Minimize chrome color; let status colors be the primary visual signal
  • Dark-on-light for text, subtle gray for secondary info
  • Team/project gets an accent color (the red square for Peteos)

Typography

  • Inter Display for headings
  • Inter for body text
  • Monospace for issue IDs
  • Font weight hierarchy: bold titles, regular body, light metadata

For MC: Adopt the icon-based status indicator system. Use colored circles for status, priority bars, and avatar initials for assignee. This is the single biggest density improvement over text labels.

9. Interaction Patterns

Keyboard shortcuts (observed)

  • C - Create new issue
  • / - Search
  • Escape - Close modal/panel
  • Arrow keys - Navigate between issues

Drag and drop

  • Board view: drag cards between columns
  • List view: drag to reorder within groups

Inline editing

  • Click any property to change it (no edit mode toggle)
  • Title is editable inline on the detail page
  • Description supports full markdown editing

Context menus

  • Three-dot menu (···) on every card/row
  • Right-click support

For MC: Keyboard shortcuts are a nice-to-have. The critical interaction patterns are: drag between columns (already have), click card to open detail, click property to change it inline.

10. What We Should Borrow

Must-have (directly applicable)

  1. Icon-based status indicators instead of text labels on cards
  2. Compact card anatomy: ID + status icon + title + priority icon + assignee avatar. One line where possible.
  3. Layout toggle in the header: board icon vs list icon
  4. Group-by-status list view with sticky headers for mobile/narrow screens
  5. Detail view with left/right split: content left, properties right
  6. Inline property editing on the detail view (click to change, no save button)
  7. Hidden/collapsed empty columns on the board
  8. "Create more" pattern for rapid task entry from the web UI

Should-have (worth implementing soon)

  1. "My Issues" as a first-class view (filter to assignee=Pete)
  2. Display options toggle for which properties show on cards
  3. Keyboard shortcut for new task (C key)

Skip for now

  • Teams and workspace layers
  • Cycles/sprints
  • Custom views and saved filters
  • Estimates
  • Inbox with snooze/archive
  • Project health tracking
  • Activity feed / comments
  • GitHub integration
  • Notification setup

Phase 1: Desktop board polish (current scope)

  • Add icon-based status indicators (colored circles)
  • Compact card design: one-line title + icon metadata
  • Add list view with group-by-status headers
  • Layout toggle in header
  • Collapsible empty columns

Phase 2: Detail view upgrade

  • Split layout: content left, properties right
  • Inline property selectors (click status circle to change)
  • Markdown rendering for descriptions

Phase 3: Mobile optimization

  • List view as default on narrow screens
  • Sticky group headers
  • Tap-to-open detail sheet (bottom drawer, not full page nav)
  • Bottom toolbar: List / Board / Mine / + New

Phase 4: Power features

  • Keyboard shortcuts
  • "My tasks" filter view
  • Display options panel
  • Rapid entry mode