MC Board Phase 1: Desktop Polish

Compact cards, icon-based metadata, list view toggle, and collapsible empty columns. Inspired by Linear's design patterns documented in Linear App Architecture Deconstruction.

1. Problem Statement and Goal

The current MC kanban board works but cards are visually heavy. Each card shows a text badge for priority ("medium"), a text label for assignee, a 4-line description excerpt, explicit Edit/Delete/Drag buttons, and arrow buttons for column movement. This makes the board hard to scan when there are more than a few tasks per column. There's also no list view, which is the better layout for mobile and for quickly scanning all tasks at once.

Goal: Make the board scannable at a glance. Reduce card height by ~50%. Add a list view as an alternative layout. Collapse empty columns to save horizontal space.

2. Success Metric

Pete can scan the full board without scrolling vertically when there are 5 or fewer tasks per column. Cards communicate status, priority, assignee, and blocked state through icons, not text labels.

3. Current State

Board (TasksWorkspace.tsx, ~412 lines):

• 5 columns: Backlog, Up Next, In Progress, Needs Review, Done
• CSS grid layout with .tasks-board-grid
• Drag-and-drop between columns (native HTML drag)
• Metric tiles at top: In play, Needs review, Done, Linked

Cards (TaskCard.tsx, ~223 lines):

• Top row: priority badge (text) + blocked pill + project pill + tag badges + drag pill
• Middle: title (bold) + assignee (text) + 4-line description excerpt
• Bottom: left/right arrow buttons + Edit/Delete buttons
• All buttons always visible (not hover-revealed)

Editor modal (TaskEditorModal.tsx, ~271 lines):

• Full form: title, description (markdown), priority dropdown, tags input,

status dropdown, project dropdown, assignee dropdown, blocked toggle

No list view exists. Board is the only layout.

Task data model (lib/tasks.ts):

• id, title, description, priority, tags[], status, projectId?, assignee?,

blocked?, createdAt, updatedAt

4. Platform Capabilities

This is pure frontend work in Next.js/React. No OpenClaw platform capabilities needed. The task API (PUT /api/tasks) and data model remain unchanged.

5. Community Patterns

Linear's board cards show: issue ID + status icon + title + priority icon + assignee avatar + date. No description, no explicit buttons. Actions via context menu on hover. This is the industry standard for task boards (Notion, Asana, Monday all converge on similar density).

6. Options

Option A: Incremental card cleanup

Shrink current cards by removing description excerpt and hiding buttons behind hover. Keep text badges for priority.

• Pro: Minimal code change
• Con: Still text-heavy, no icon language, no list view

Option B: Full Linear-inspired redesign (recommended)

Replace card internals with icon-based compact layout. Add list view with layout toggle. Collapse empty columns.

• Pro: Achieves the visual density target, adds list view
• Con: More code, ~4-6 hours of David's time

Option C: Scrap board, go list-only

Replace board with a grouped list view like Linear's default.

• Pro: Simpler code
• Con: Loses the kanban visual that Pete already uses for drag-and-drop

7. Recommendation

Option B. The card redesign and list view are complementary. The card changes alone cut card height in half. The list view adds a second layout that works better for scanning and mobile. Both reference the same task data and share status/priority icon components.

8. Security Considerations

No new data exposure. No new API endpoints. No auth changes. The task API already requires local network access (bound to 0.0.0.0:3100 behind Tailscale).

9. Implementation Scope

9.1 New shared components

StatusIcon component (components/tasks/StatusIcon.tsx)

• Renders a colored circle SVG for each status:
• backlog: gray dotted circle
• up-next: gray empty circle
• in-progress: amber/yellow half-filled circle
• needs-review: amber circle with eye or checkmark
• done: green filled circle with checkmark
• Size prop (default 14px for cards, 16px for list)

PriorityIcon component (components/tasks/PriorityIcon.tsx)

• Renders priority as a small icon:
• urgent: red filled bar (4 bars)
• high: orange (3 bars)
• medium: yellow (2 bars)
• low: blue (1 bar)
• none/default: gray dot
• Size prop, tooltip with priority name on hover

AssigneeAvatar component (components/tasks/AssigneeAvatar.tsx)

• Renders a small circle with initials (first letter of assignee name)
• Color derived from assignee string (hash to palette)
• Tooltip shows full assignee name
• Size prop (default 22px)

9.2 Compact card redesign

Replace TaskCard.tsx internals:

New card anatomy (top to bottom):

┌────────────────────────────┐
│ ○ Task title here      P 👤│
│   #tag1 #tag2              │
└────────────────────────────┘

• Line 1: StatusIcon + title (bold, single line, ellipsis overflow)

+ PriorityIcon + AssigneeAvatar (right-aligned)

• Line 2 (optional): Activity tags and blocked indicator only. No

regular tags unless they're activity tags. No description excerpt.

• No visible buttons. Edit/Delete/Move appear on hover as a small

floating toolbar (or via right-click context menu).

• Blocked indicator: Red left border (keep current) + small red dot

or icon next to title

• Card padding: Reduce from 14px to 10px 12px
• Card border-radius: Keep 16px (matches MC design language) or

reduce to 12px for density

• Drag: Entire card is still draggable (keep draggable attribute).

Remove the explicit "Drag" pill.

Hover actions toolbar:

• Small floating row that appears on card hover (absolute positioned,

top-right or bottom of card)

• Icons only: ← → (move columns), pencil (edit), trash (delete)
• Semi-transparent background, subtle border
• Disappears on mouse leave

9.3 List view

New component: TaskListView.tsx

Layout: grouped by status, each group has a sticky header.

○ Backlog  3                                    +
─────────────────────────────────────────────────
  ○  Notion Integration           #spec    P  👤
  ○  Design token architecture    #build   P  👤
  ○  Gmail model routing                   P  👤

◐ In Progress  2                                +
─────────────────────────────────────────────────
  ◐  MC Board Phase 1 build      #build   P  👤
  ◐  Job search pipeline                   P  👤

Group header: StatusIcon + status name + count + add button (+) Row anatomy (left to right):

1. StatusIcon (matches group, but shown per-row for visual rhythm)
2. Title (primary text, flex-grow, single line ellipsis)
3. Activity tags (compact pills)
4. Blocked indicator (red dot if blocked)
5. PriorityIcon
6. AssigneeAvatar
7. Updated date (gray, compact like "Apr 2")

Row interactions:

• Click row to open editor modal
• Hover shows move arrows or context menu
• Sticky group headers when scrolling

9.4 Layout toggle

In the Tasks page header (SectionHeader area):

• Two icon buttons: grid icon (board) and list icon (list)
• Active view gets accent color, inactive gets muted
• State persisted to localStorage
• Default: board view (current behavior)

9.5 Collapsible empty columns

In board view only:

• Columns with 0 tasks collapse to a thin vertical strip showing:

status icon + column name (rotated vertical text) + "0"

• Click to expand (temporarily, until page reload)
• Or: collect all empty columns into a "Hidden" section on the right

(Linear pattern)

9.6 Files to create/modify

9.7 What NOT to change

• Task data model (lib/tasks.ts): no changes
• Task API (api/tasks/route.ts): no changes
• TaskEditorModal: no changes (still opens the same way)
• Metric tiles at top: keep as-is
• Drag-and-drop behavior: keep native HTML drag between columns

10. Validation Criteria

1. Board view: cards show status icon + title + priority icon + assignee

avatar on one line. No text badges for priority. No description excerpt. No always-visible buttons.

1. Board view: hover over a card reveals action buttons (edit, delete,

move arrows).

1. Board view: empty columns collapse or show as thin strips.
2. List view: tasks grouped by status with sticky headers. Rows show

status icon + title + tags + priority icon + assignee avatar.

1. List view: click a row opens the editor modal.
2. Layout toggle: two buttons in the header switch between board and list.

Selection persists across page loads.

1. All existing functionality still works: create, edit, delete, drag

between columns, blocked indicator, activity tags.

11. Category

Tool (UI component changes to Mission Control)

12. Context Loading

David needs to read:

• This spec
• components/tasks/TaskCard.tsx (current card implementation)
• components/tasks/TasksWorkspace.tsx (current board layout)
• components/tasks/TaskBoardColumn.tsx (column component)
• lib/tasks.ts (task types and column definitions)
• artifacts/research_linear_ui_deconstruction.md sections 3, 4, 8

(board view, list view, visual language) for icon/color reference

13. Guardrails

• Do not change the task data model or API
• Do not change the editor modal behavior
• Do not add new npm dependencies for icons (use inline SVGs or existing

lucide-react icons)

• Do not implement dark mode or theme switching (that's a future phase)
• Do not add keyboard shortcuts (future phase)
• Keep the existing light color palette and CSS custom properties
• Cards must remain draggable between columns (don't break DnD)

14. Handoff

David builds, rebuilds MC (npm run build), and restarts the service. Vinny verifies against the validation criteria, takes screenshots, and moves the task to Needs Review for Pete. Pete verifies at the Tailscale URL: http://vinnys-mac-mini.tail31784c.ts.net:3100/tasks