Dashboard 2.0: Complete UI/UX Specification

Document Version: 1.0 Last Updated: November 27, 2025 Author: Hal Casteel, Founder/CEO/CTO, AZ1.AI INC Status: APPROVED - Ready for Implementation Related: PROJECT-PLAN.md § Dashboard 2.0, TASKLIST.md § Dashboard 2.0

Executive Summary
Design Philosophy
Overall Architecture
Navigation System
Portfolio Overview
Multi-Project Kanban Board
Timeline Chart (Gantt)
Analytics Dashboard
Filter Modal
Task Detail Modal
Global Search
Responsive Design
Accessibility (WCAG 2.1 AA)
Technical Implementation
User Stories & Scenarios
References & Research

1. Executive Summary

1.1 Purpose

This document provides complete UI/UX specifications for Dashboard 2.0, a multi-project portfolio management system designed to manage 46 submodules across 8 categories with 530+ tasks.

Dashboard 2.0 evolves from static JSON (v1.5) to a database-driven, interactive system (v2.0) with:

Project management integration (PROJECT-PLAN.md)
Task tracking (TASKLIST.md with checkbox status)
Real-time analytics (burndown, velocity, completion rates)
Multi-project visualization (Kanban swimlanes, Gantt timeline)

1.2 Target Users

User Type	Primary Use Cases	Key Requirements
Executive (CEO)	Portfolio overview, budget tracking, risk monitoring	High-level KPIs, quick status at-a-glance
Project Manager	Task assignment, progress tracking, milestone monitoring	Detailed task views, filtering, Kanban board
Developer	Task status updates, dependency tracking, time logging	Simple task updates, clear blockers, linked commits
Stakeholder	Read-only access, status reports, timeline visibility	Clean visualizations, export capabilities

1.3 Success Criteria

Quantitative:

Dashboard loads in <2 seconds with 14,321 messages + 530 tasks
100% of TASKLIST.md tasks visible and trackable
100% of PROJECT-PLAN.md phases/milestones displayed
WCAG 2.1 AA accessibility compliance
Works in Chrome, Firefox, Safari, Edge (latest 2 versions)

Qualitative:

Team uses dashboard daily (replaces status meetings)
Reduces status meeting time by 30% (260 hours/year)
Enables data-driven sprint planning
Single source of truth for project status

1.4 Design Principles

Data First: Functionality over aesthetics, information density balanced with clarity
Progressive Disclosure: Show overview first, drill down on demand
Keyboard First: All features accessible via keyboard
Mobile Ready: Responsive from 320px to 4K displays
Zero Learning Curve: Familiar patterns from Jira, Monday.com, Asana

2. Design Philosophy

2.1 Research Foundation

This design is based on comprehensive research of industry best practices:

Multi-Project Management:

Wrike: Multiple Project Dashboard - Filter customization, widget-based design
Justinmind: Dashboard Design Best Practices - Minimalist interfaces, data clarity
Teamhood: Project Portfolio Dashboard - KPI visualization, executive summaries

Kanban for Multiple Projects:

Ones.com: Kanban Board for Multiple Projects in Jira - Swimlane patterns, project separation
Kanban Multiple Projects Best Practices - Horizontal categorization, row-based organization
Atlassian: Jira Boards Overview - Board navigation, sidebar patterns

Portfolio Management:

Visor: Project Portfolio Dashboard Software - Filter logic (AND/OR), interactive widgets
Smartsheet: Project Portfolio Dashboards - Multiple project tracking, resource allocation
Monday.com: Portfolio Management Dashboard - Up to 200 project boards, automatic data retrieval

2.2 Key Insights from Research

Navigation Patterns:

Left sidebar with hierarchical tree navigation (most intuitive for 46 projects)
Breadcrumbs for context awareness
Global search with keyboard shortcut (Cmd+K standard)

Filtering Best Practices:

Multi-select with AND/OR logic
Save filter presets for common views
Show task count next to each filter option
Instant preview of filter results

Kanban Board Design:

Swimlanes (horizontal rows) for project separation
Collapsible rows to reduce visual clutter
Lazy loading (10 projects initially, load on scroll)
Drag-drop with visual feedback and validation

Accessibility Standards:

WCAG 2.1 AA compliance (minimum 4.5:1 contrast ratio)
Keyboard navigation with visible focus indicators
ARIA labels for screen readers
Semantic HTML structure

2.3 Design Constraints

Technical Constraints:

Pure JavaScript (no framework required for v1)
Static JSON files (generated from knowledge.db)
Browser-based rendering (no server-side runtime)
Must work offline after initial load

Performance Constraints:

Page load <2 seconds (including 14,321 messages + 530 tasks)
Smooth 60fps animations (drag-drop, transitions)
Memory usage <500MB (browser tab)

Browser Support:

Chrome 120+ (latest 2 versions)
Firefox 120+ (latest 2 versions)
Safari 17+ (latest 2 versions)
Edge 120+ (latest 2 versions)

3. Overall Architecture

3.1 Three-Panel Layout

Desktop (≥1024px):

┌────────────────────────────────────────────────────────────────────────────┐
│  Top Bar (60px height)                                                     │
│  🔍 Search | 🎛️ Filters (3) | Breadcrumbs | 👤 User | ❓ Help             │
├─────────────┬──────────────────────────────────────────────────────────────┤
│             │                                                              │
│  Left       │  Main Content Area (fluid width)                            │
│  Sidebar    │                                                              │
│  (280px)    │  ┌────────────────────────────────────────────────────┐     │
│             │  │                                                    │     │
│  Dashboard  │  │  Active View:                                      │     │
│  ├─ 📊 Port │  │  - Portfolio Overview (default)                    │     │
│  ├─ 📋 Task │  │  - Multi-Project Kanban Board                      │     │
│  ├─ 📈 Anal │  │  - Timeline Chart (Gantt)                          │     │
│  ├─ 🔍 Sear │  │  - Analytics Dashboard                             │     │
│             │  │                                                    │     │
│  Projects   │  │  Content rendered based on view selection          │     │
│  ├─ Core(3) │  │  (see sections 5-8 for detailed specs)             │     │
│  ├─ Cloud(4)│  │                                                    │     │
│  ├─ Dev(10) │  │                                                    │     │
│  ├─ ...     │  │                                                    │     │
│             │  └────────────────────────────────────────────────────┘     │
│  Milestones │                                                              │
│  ├─ Beta    │                                                              │
│  ├─ Pilot   │                                                              │
│  └─ GTM     │                                                              │
│             │                                                              │
└─────────────┴──────────────────────────────────────────────────────────────┘

Dimensions:

Top Bar: 100% width × 60px height (fixed)
Left Sidebar: 280px width × calc(100vh - 60px) height (fixed)
Main Content: calc(100vw - 280px) width × calc(100vh - 60px) height (fluid)

Behavior:

Top Bar: Fixed position (always visible on scroll)
Left Sidebar: Fixed position (always visible, scrollable internally)
Main Content: Scrollable (overflow-y: auto)

3.2 Color System

Brand Colors:

/* Primary */
--primary-blue: #0066CC;      /* Links, CTAs, focus states */
--primary-blue-dark: #004C99; /* Hover states */
--primary-blue-light: #E6F2FF; /* Backgrounds, highlights */

/* Status Colors */
--status-green: #00A651;   /* >70% complete, success */
--status-yellow: #FFB700;  /* 40-70% complete, warning */
--status-red: #DC3545;     /* <40% complete, error */
--status-blue: #17A2B8;    /* 100% complete, info */

/* Priority Colors */
--priority-p0: #DC3545;    /* P0 - Critical */
--priority-p1: #FF6B00;    /* P1 - High */
--priority-p2: #FFB700;    /* P2 - Medium */
--priority-p3: #6C757D;    /* P3 - Low */

/* Neutrals */
--gray-900: #212529;       /* Primary text */
--gray-700: #495057;       /* Secondary text */
--gray-500: #ADB5BD;       /* Tertiary text, borders */
--gray-300: #DEE2E6;       /* Dividers */
--gray-100: #F8F9FA;       /* Backgrounds */
--white: #FFFFFF;          /* Cards, modals */

Accessibility Notes:

All text colors meet WCAG 2.1 AA contrast ratio (≥4.5:1 for normal text, ≥3:1 for large text)
Status colors have distinct shapes (●■▲◆) for color-blind users
Focus indicators use 2px solid blue outline (#0066CC)

3.3 Typography

/* Font Stack */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

/* Font Sizes */
--font-size-xs: 0.75rem;    /* 12px - Labels, badges */
--font-size-sm: 0.875rem;   /* 14px - Secondary text */
--font-size-base: 1rem;     /* 16px - Body text */
--font-size-lg: 1.125rem;   /* 18px - Headings H4 */
--font-size-xl: 1.25rem;    /* 20px - Headings H3 */
--font-size-2xl: 1.5rem;    /* 24px - Headings H2 */
--font-size-3xl: 2rem;      /* 32px - Headings H1 */

/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line Heights */
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-relaxed: 1.75;

3.4 Spacing System (8px Grid)

--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */
--spacing-2xl: 3rem;     /* 48px */
--spacing-3xl: 4rem;     /* 64px */

Grid Usage:

All margins, padding, and gaps use multiples of 8px
Exception: Fine-tuning allowed for 4px (half-grid)

Full Specification:

┌─────────────────────────────────────────┐
│  DASHBOARD 2.0                          │ ← Header (sticky)
├─────────────────────────────────────────┤
│  🔍 Filter projects...                  │ ← Search input (instant filter)
├─────────────────────────────────────────┤
│                                         │
│  VIEWS                                  │ ← Section header (uppercase, gray-500)
│  📊 Portfolio Overview              ←   │ ← Active view (blue background)
│  📋 All Tasks                           │
│  📈 Analytics & Reports                 │
│  🔍 Search Results          (12)        │ ← Badge: result count
│                                         │
│  PROJECTS (8 categories, 46 total)      │ ← Section header with count
│  ▼ Core (3 projects)                    │ ← Category (collapsible, bold)
│    ├─ 🟢 coditect-core          78%  ← │ ← Project (status color, % badge)
│    │   530 tasks • Beta Phase          │ ← Metadata (gray-700, 12px)
│    ├─ 🟡 coditect-core-framework  40%  │
│    │   45 tasks • Planning             │
│    └─ 🔵 coditect-core-architecture ✓  │ ← Blue = 100% complete
│        12 tasks • Complete             │
│                                         │
│  ▼ Cloud (4 projects)                   │
│    ├─ 🟢 coditect-cloud-backend   65%  │
│    │   89 tasks • Beta Phase           │
│    ├─ 🟡 coditect-cloud-ide       45%  │
│    │   134 tasks • Development         │
│    ├─ 🟢 coditect-cloud-infra     70%  │
│    │   67 tasks • Beta Phase           │
│    └─ 🔴 coditect-cloud-monitoring 10% │ ← Red = <40% (needs attention)
│        23 tasks • Not Started          │
│                                         │
│  ▶ Dev (10 projects)              [+]  │ ← Collapsed (click to expand)
│  ▶ Frontend (8 projects)          [+]  │
│  ▶ Security (5 projects)          [+]  │
│  ▶ Testing (6 projects)           [+]  │
│  ▶ Docs (4 projects)              [+]  │
│  ▶ Tools (6 projects)             [+]  │
│                                         │
│  MILESTONES & GATES                     │ ← Section header
│  ◆ Beta Analysis         Dec 10, 2025  │ ← Diamond icon for milestones
│  ◆ Pilot Launch          Feb 15, 2026  │
│  ◆ Public GTM             Mar 11, 2026  │
│                                         │
└─────────────────────────────────────────┘

Detailed Element Specifications:

4.1.1 Search Input

<div class="sidebar-search">
  <input
    type="text"
    placeholder="Filter projects..."
    aria-label="Search projects"
    class="search-input"
  />
  <svg class="search-icon" aria-hidden="true"><!-- magnifying glass --></svg>
</div>

.sidebar-search {
  position: sticky;
  top: 0;
  background: var(--white);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-300);
  z-index: 10;
}

.search-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: var(--font-size-sm);
}

.search-input:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-color: var(--primary-blue);
}

.search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-500);
}

Behavior:

Instant filtering: Filter on keyup (no debounce, instant feedback)
Fuzzy matching: Match substring anywhere in project name
Highlight matches: Bold matching text in results
Empty state: Show "No projects match 'search term'" if no results
Clear button: Show ✕ icon when text entered (click to clear)

4.1.2 Category Headers

<button
  class="category-header"
  aria-expanded="true"
  aria-controls="category-core"
>
  <svg class="chevron" aria-hidden="true"><!-- down chevron --></svg>
  <span class="category-name">Core</span>
  <span class="category-count">(3 projects)</span>
</button>

.category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-100);
  border: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.category-header:hover {
  background: var(--gray-300);
}

.category-header:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

.chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.category-header[aria-expanded="false"] .chevron {
  transform: rotate(-90deg); /* Point right when collapsed */
}

.category-count {
  margin-left: auto;
  color: var(--gray-500);
  font-weight: var(--font-weight-normal);
}

Behavior:

Click to toggle: Expand/collapse category
Keyboard: Space or Enter to toggle
Animation: 200ms ease transition for chevron rotation and height
State persistence: Remember expanded/collapsed state in localStorage

4.1.3 Project Items

<a
  href="#/project/coditect-core"
  class="project-item"
  aria-current="page"
>
  <span class="status-indicator status-green" aria-label="78% complete"></span>
  <div class="project-content">
    <div class="project-header">
      <span class="project-name">coditect-core</span>
      <span class="project-progress">78%</span>
    </div>
    <div class="project-meta">
      530 tasks • Beta Phase
    </div>
  </div>
</a>

.project-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  color: var(--gray-900);
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.project-item:hover {
  background: var(--gray-100);
  border-left-color: var(--gray-300);
}

.project-item[aria-current="page"] {
  background: var(--primary-blue-light);
  border-left-color: var(--primary-blue);
  font-weight: var(--font-weight-medium);
}

.project-item:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: -2px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.status-green { background: var(--status-green); }
.status-yellow { background: var(--status-yellow); }
.status-red { background: var(--status-red); }
.status-blue { background: var(--status-blue); }

.project-content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 0.25rem;
}

.project-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-progress {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  flex-shrink: 0;
}

.project-meta {
  font-size: var(--font-size-xs);
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Behavior:

Click: Navigate to project detail view (updates main content)
Hover: Show tooltip with full project name (if truncated) + next milestone
Keyboard: Tab to focus, Enter to navigate
Right-click: Show context menu (Open in new tab, Copy link, Add to favorites)

Tooltip Example:

┌────────────────────────────────────────┐
│ coditect-core                          │
│ 530 tasks (415 complete, 115 pending) │
│ Next milestone: Beta Analysis (Dec 10) │
└────────────────────────────────────────┘

4.2 Top Bar - Global Controls

Full Specification:

┌──────────────────────────────────────────────────────────────────────────────┐
│  🔍 Search...           │  🎛️ Filters (3)  │  Home > Projects > Core        │
│  [Cmd+K]                │                  │  👤 Hal Casteel  │  ❓ Help      │
└──────────────────────────────────────────────────────────────────────────────┘
   ↑                        ↑                  ↑                  ↑
   Global Search            Filter Badge       Breadcrumbs        User Menu

Detailed Layout:

<header class="top-bar">
  <div class="top-bar-left">
    <!-- Global Search -->
    <button class="search-trigger" aria-label="Search" data-shortcut="⌘K">
      <svg class="icon"><!-- search icon --></svg>
      <span>Search...</span>
      <kbd>⌘K</kbd>
    </button>

    <!-- Filters -->
    <button class="filters-trigger" aria-label="Open filters">
      <svg class="icon"><!-- filter icon --></svg>
      <span>Filters</span>
      <span class="badge" aria-label="3 filters active">3</span>
    </button>
  </div>

  <div class="top-bar-center">
    <!-- Breadcrumbs -->
    <nav aria-label="Breadcrumb">
      <ol class="breadcrumb">
        <li><a href="#/">Home</a></li>
        <li><a href="#/projects">Projects</a></li>
        <li aria-current="page">Core</li>
      </ol>
    </nav>
  </div>

  <div class="top-bar-right">
    <!-- User Menu -->
    <button class="user-menu-trigger" aria-haspopup="true" aria-expanded="false">
      <img src="avatar.jpg" alt="Hal Casteel" class="avatar" />
      <span>Hal Casteel</span>
      <svg class="icon"><!-- chevron down --></svg>
    </button>

    <!-- Help -->
    <button class="help-trigger" aria-label="Help">
      <svg class="icon"><!-- question mark --></svg>
    </button>
  </div>
</header>

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-lg);
  z-index: 100;
  gap: var(--spacing-lg);
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.top-bar-center {
  flex: 1;
  min-width: 0; /* Allow breadcrumb truncation */
}

/* Search Trigger */
.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  cursor: pointer;
  min-width: 200px;
  transition: all 0.2s;
}

.search-trigger:hover {
  background: var(--white);
  border-color: var(--gray-500);
}

.search-trigger:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.search-trigger kbd {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-family: monospace;
}

/* Filters Trigger */
.filters-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.filters-trigger:hover {
  background: var(--gray-100);
}

.filters-trigger .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.375rem;
  background: var(--primary-blue);
  color: var(--white);
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  color: var(--gray-500);
  font-size: var(--font-size-lg);
}

.breadcrumb a {
  color: var(--primary-blue);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--gray-900);
  font-weight: var(--font-weight-medium);
}

/* User Menu */
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.user-menu-trigger:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

Behavior:

Search Trigger:

Click: Opens global search modal (see Section 11)
Keyboard: Cmd+K (Mac) or Ctrl+K (Windows/Linux)
Focus: Tab to focus, Enter to open

Filters Trigger:

Click: Opens filter modal (see Section 9)
Badge: Shows number of active filters (0 = hidden)
Badge color: Blue (#0066CC)

Breadcrumbs:

Click link: Navigate to that level
Truncation: Show last 3 levels if path too long ("... > Projects > Core")
Mobile: Hide breadcrumbs <768px (show in hamburger menu)

User Menu:

Click: Open dropdown menu
Menu items: Profile, Settings, Sign Out
Menu position: Right-aligned below trigger
Close on: Click outside, Esc key, or menu item click

5. Portfolio Overview

5.1 Layout - 4-Quadrant Dashboard

Purpose: Executive summary showing high-level KPIs, timeline progress, priorities, and risks at-a-glance.

Full Specification:

┌───────────────────────────────────────────────────────────────────┐
│  Portfolio Overview                                               │
│  Last updated: Nov 27, 2025 2:35 PM                   [Refresh]   │
├─────────────────────────────┬─────────────────────────────────────┤
│  KEY METRICS                │  TIMELINE PROGRESS                  │
│                             │                                     │
│  📦 Projects                │  Beta → Pilot → GTM                 │
│     46 total                │  ████████████████░░░░░ 78%          │
│     12 active • 34 complete │                                     │
│                             │  🎯 Current Phase: Beta Testing     │
│  ✓ Tasks                    │     Week 2 of 4 (50% complete)      │
│     530 total               │                                     │
│     415 complete (78%)      │  📅 Next Milestone:                 │
│     115 in progress         │     Beta Analysis - Dec 10, 2025    │
│                             │     (13 days remaining)             │
│  💰 Budget                  │                                     │
│     $884K allocated         │  Timeline Health: ✅ ON TRACK       │
│     $450K spent (51%)       │  Completion Rate: +8% this week     │
│     $434K remaining         │                                     │
│                             │                                     │
│  🎯 Success Rate            │                                     │
│     95% on-time delivery    │                                     │
│     4% overdue              │                                     │
│     1% at risk              │                                     │
│                             │                                     │
└─────────────────────────────┴─────────────────────────────────────┘
┌─────────────────────────────┬─────────────────────────────────────┐
│  TOP PRIORITIES (P0/P1)     │  ACTIVE RISKS                       │
│                             │                                     │
│  1. 🔴 License Manager (P0) │  ⚠️  R-001: NESTED LEARNING (HIGH)  │
│     5 tasks • Due: Dec 5    │      Impact: Feature complexity     │
│     Status: In Progress     │      Mitigation: MVP + iterate      │
│     [View Tasks]            │      Owner: Architecture Team       │
│                             │                                     │
│  2. 🟡 Dashboard 2.0 (P1)   │  ⚠️  R-003: Performance (MEDIUM)    │
│     80 tasks • Due: Jan 31  │      Impact: Page load times        │
│     Status: Scheduled       │      Mitigation: Load testing       │
│     [View Tasks]            │      Owner: DevOps Team             │
│                             │                                     │
│  3. 🟡 Cloud Deploy (P1)    │  ✅ R-005: Architecture (RESOLVED)  │
│     23 tasks • Due: Dec 20  │      Previous: HIGH → MEDIUM        │
│     Status: In Progress     │      Resolution: Visual diagrams    │
│     [View Tasks]            │      Closed: Nov 16, 2025           │
│                             │                                     │
│  [View All 46 Projects →]   │  [View Risk Register →]             │
│                             │                                     │
└─────────────────────────────┴─────────────────────────────────────┘

5.2 Implementation Prompt - Portfolio Overview

Prompt for AI/Developer:

Create a Portfolio Overview dashboard with 4 quadrants in a 2×2 grid layout.

LAYOUT:
- Container: CSS Grid with 2 columns, 2 rows
- Gap: 24px between quadrants
- Responsive: Stack vertically on mobile (<768px)
- Max width: 1400px, centered with auto margins

QUADRANT 1: KEY METRICS (Top Left)
Content:
- Projects: Total count, active count, complete count
- Tasks: Total (530), complete count with percentage, in progress count
- Budget: Total allocated ($884K), spent with percentage, remaining
- Success Rate: On-time delivery %, overdue %, at risk %

Visual Design:
- Icons: Use emoji or SVG icons (📦 ✓ 💰 🎯)
- Font size: 24px for numbers, 14px for labels
- Color: Gray-900 for numbers, Gray-700 for labels
- Spacing: 16px between metrics
- Dividers: 1px solid Gray-300 between sections

Data Source: Fetch from data/portfolio-metrics.json

QUADRANT 2: TIMELINE PROGRESS (Top Right)
Content:
- Phase progression: Beta → Pilot → GTM with completion bar
- Progress bar: 78% filled (green), 22% empty (gray-300)
- Current phase: Name, week count (Week X of Y), percentage
- Next milestone: Name, date, days remaining
- Timeline health: Status indicator (✅ ON TRACK, ⚠️ AT RISK, 🔴 DELAYED)
- Completion rate: Change from last week (+8%)

Visual Design:
- Progress bar: 100% width, 12px height, rounded corners (6px)
- Filled portion: Green gradient (linear-gradient(90deg, #00A651, #00D668))
- Phase labels: 14px, positioned above bar
- Milestone icon: 🎯 (target)
- Health indicator: Large emoji with colored text

Data Source: Fetch from data/projects.json (calculate from phase data)

QUADRANT 3: TOP PRIORITIES (Bottom Left)
Content:
- Show top 3 P0/P1 projects sorted by due date (ascending)
- For each project:
  - Priority badge (P0 red circle, P1 orange circle)
  - Project name
  - Task count + due date
  - Status (In Progress, Scheduled, etc.)
  - [View Tasks] button

Visual Design:
- List layout: Vertical stack with 12px gap
- Priority badge: 12px circle, inline with project name
- Project name: 16px, semibold, truncate with ellipsis
- Metadata: 12px, Gray-700
- Button: Small, primary blue, hover state darker
- Empty state: "No high-priority projects" (if P0/P1 list empty)

Interaction:
- Click project name: Navigate to project detail
- Click [View Tasks]: Open project with filters (Priority: P0/P1, Status: Pending/In Progress)
- Click [View All]: Navigate to all projects page

Data Source: Fetch from data/tasks.json, filter by priority P0/P1, sort by due_date

QUADRANT 4: ACTIVE RISKS (Bottom Right)
Content:
- Show active risks from risk register (top 3 by severity)
- For each risk:
  - Severity indicator (⚠️ HIGH, ⚠️ MEDIUM, ✅ LOW/RESOLVED)
  - Risk ID + description
  - Impact statement
  - Mitigation strategy
  - Owner/team
  - Status (if resolved: show resolution date)

Visual Design:
- List layout: Vertical stack with 16px gap
- Severity icon: ⚠️ for active, ✅ for resolved
- Risk ID: Bold, 14px (e.g., "R-001")
- Impact: 12px, italic, Gray-700
- Mitigation: 12px, Gray-900
- Resolved items: Strike-through text, Gray-500

Interaction:
- Click risk: Expand to show full details (inline expansion)
- Click [View Risk Register]: Navigate to full risk register page

Data Source: Fetch from data/project-plan.json (parse risk register section)

ACCESSIBILITY:
- Use semantic HTML: <section>, <h2>, <ul>, <li>
- Add ARIA labels: aria-label="Key metrics", aria-label="Timeline progress"
- Keyboard: Tab through interactive elements, Enter to activate
- Focus indicators: 2px blue outline on all focusable elements
- Screen reader: Announce metric changes on refresh

RESPONSIVE DESIGN:
Desktop (≥1024px): 2×2 grid
Tablet (768px-1023px): 2×2 grid, smaller padding
Mobile (<768px): 1 column stack (Metrics → Timeline → Priorities → Risks)

REFRESH BEHAVIOR:
- Auto-refresh: Every 60 seconds (fetch new data)
- Manual refresh: Click [Refresh] button in header
- Loading state: Show spinner overlay during data fetch
- Error state: Show error message if fetch fails, retry button

PERFORMANCE:
- Lazy load: Only fetch data when Portfolio Overview tab active
- Cache: Cache data for 60 seconds (localStorage)
- Animation: Smooth transitions for metric changes (0.3s ease)

6. Multi-Project Kanban Board

6.1 Swimlane Pattern - Horizontal Project Rows

Purpose: Visualize tasks across all 46 projects with drag-drop status management.

Full Specification:

┌─────────────────────────────────────────────────────────────────────────────┐
│  Multi-Project Kanban Board                                                 │
│  ┌─────────────┬─────────────┬─────────────┐  [⚙️ Board Settings]          │
│  │ All Projects│ All Phases ▼│ All Priority│  [Show: Active (12) ▼]        │
│  └─────────────┴─────────────┴─────────────┘                                │
├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ Project          │ To Do            │ In Progress      │ Done              │
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟢 coditect-core │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse     │ │ Create TASK  │ │ │ Update gen-  │ │ │ Fix messages │││
│ 78% • 530 tasks  │ │ parser       │ │ │ dashboard.py │ │ │ not showing  │││
│                  │ │ P1 • 2h      │ │ │ P1 • 4h      │ │ │ P0 • Done ✓  │││
│                  │ └──────────────┘ │ └──────────────┘ │ └──────────────┘││
│                  │ ┌──────────────┐ │ ┌──────────────┐ │ (415 tasks)     ││
│                  │ │ Write tests  │ │ │ Add task     │ │                 ││
│                  │ │ P2 • 3h      │ │ │ board UI     │ │ [Load more...] ││
│                  │ └──────────────┘ │ │ P1 • 8h      │ │                 ││
│                  │ (45 tasks)       │ └──────────────┘ │                 ││
│                  │                  │ ┌──────────────┐ │                 ││
│                  │ [Add task +]     │ │ Database     │ │                 ││
│                  │                  │ │ schema       │ │                 ││
│                  │                  │ │ P1 • 6h      │ │                 ││
│                  │                  │ └──────────────┘ │                 ││
│                  │                  │ (70 tasks)       │                 ││
│                  │                  │                  │                 ││
│                  │                  │ [Add task +]     │                 ││
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟡 cloud-backend │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse     │ │ API endpoint │ │ │ Auth middle  │ │ │ User model   │││
│ 65% • 89 tasks   │ │ P0 • 5h      │ │ │ ware         │ │ │ P1 • Done ✓  │││
│                  │ └──────────────┘ │ │ P1 • 3h      │ │ └──────────────┘││
│                  │ (31 tasks)       │ └──────────────┘ │ (38 tasks)      ││
│                  │                  │ (20 tasks)       │                 ││
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤
│ [+] Show 44 more projects...                                                │
└─────────────────────────────────────────────────────────────────────────────┘

Swimlane Collapsed State:

├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ 🟡 cloud-ide     │      74 tasks    │      40 tasks    │      20 tasks     │
│ [+] Expand       │                  │                  │                   │
│ 45% • 134 tasks  │                  │                  │                   │
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤

6.2 Task Card Design

Standard Card:

┌────────────────────────────────┐
│ Create TASKLIST.md parser      │ ← Title (14px, semibold, truncate 2 lines)
│                                │
│ 🏷️ P1  ⏱️ 2h  📅 Dec 5        │ ← Metadata badges
│                                │
│ 👤 @hal  ⚠️ 1 blocker          │ ← Assignee, dependency count
│                                │
│ [▼] Move to In Progress        │ ← Quick action (hover only)
└────────────────────────────────┘

Dragging State:

┌────────────────────────────────┐
│ Create TASKLIST.md parser      │ ← Semi-transparent (opacity: 0.6)
│ ...                            │ ← Slightly rotated (transform: rotate(2deg))
└────────────────────────────────┘
                 ↓ Cursor shows drag icon

Drop Target Indicator:

┌────────────────────────────────┐
│ To Do Column                   │
│ ┌────────────────────────────┐ │
│ │ Existing task              │ │
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │ ← Blue dashed border (2px, blue)
│ │ Drop here                  │ │ ← Drop zone highlighted
│ └────────────────────────────┘ │
└────────────────────────────────┘

6.3 Implementation Prompt - Kanban Board

Prompt for AI/Developer:

Create a multi-project Kanban board with swimlane pattern (horizontal rows per project).

OVERALL LAYOUT:
- Table-like structure: <div> with CSS Grid
- Columns: Project name (250px) | To Do (flex:1) | In Progress (flex:1) | Done (flex:1)
- Rows: 1 row per project (dynamic height based on card count)
- Sticky header: Column labels stick to top on scroll
- Sticky first column: Project names stick to left on horizontal scroll
- Max height: calc(100vh - 120px) with vertical scroll

FILTERS (Top Bar):
- Project filter: Multi-select dropdown (All | Core | Cloud | Dev | etc.)
- Phase filter: Multi-select dropdown (All | Phase 0 | Phase 1 | Dashboard 2.0)
- Priority filter: Multi-select dropdown (All | P0 | P1 | P2 | P3)
- Show dropdown: Radio select (All 46 | Active 12 | My Projects 5)
- Clear filters button: Reset all to "All"

SWIMLANE DESIGN:
HTML Structure:
<div class="kanban-board">
  <div class="swimlane" data-project-id="coditect-core">
    <div class="swimlane-header">
      <button class="collapse-toggle" aria-expanded="true">[-]</button>
      <span class="status-indicator status-green"></span>
      <span class="project-name">coditect-core</span>
      <span class="project-stats">78% • 530 tasks</span>
    </div>
    <div class="swimlane-columns">
      <div class="column" data-status="pending">
        <div class="task-card" draggable="true" data-task-id="123">
          <!-- Task card content -->
        </div>
        <!-- More cards -->
        <button class="add-task-btn">+ Add task</button>
      </div>
      <div class="column" data-status="in_progress">
        <!-- In Progress cards -->
      </div>
      <div class="column" data-status="complete">
        <!-- Done cards -->
      </div>
    </div>
  </div>
  <!-- More swimlanes -->
</div>

CSS:
.kanban-board {
  display: grid;
  grid-template-columns: 250px 1fr 1fr 1fr;
  gap: 16px;
  overflow: auto;
  max-height: calc(100vh - 120px);
}

.swimlane {
  display: contents; /* Children participate in grid */
}

.swimlane-header {
  position: sticky;
  left: 0;
  background: var(--gray-100);
  padding: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.swimlane-columns {
  display: contents;
}

.column {
  background: var(--gray-50);
  border-radius: 4px;
  padding: 12px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 12px;
  cursor: grab;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.task-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.task-card.dragging {
  opacity: 0.6;
  transform: rotate(2deg);
  cursor: grabbing;
}

.column.drag-over {
  background: var(--primary-blue-light);
  border: 2px dashed var(--primary-blue);
}

TASK CARD DESIGN:
Content Elements:
1. Title: 14px, semibold, line-clamp: 2 (truncate after 2 lines)
2. Priority badge: P0/P1/P2/P3 with colored circle
3. Effort estimate: ⏱️ icon + hours (e.g., "2h")
4. Due date: 📅 icon + date (e.g., "Dec 5")
5. Assignee: 👤 icon + username or avatar
6. Dependency count: ⚠️ icon + count if >0 (e.g., "1 blocker")
7. Quick action (hover only): Dropdown menu (▼ icon)

Priority Colors:
- P0: Red circle (#DC3545)
- P1: Orange circle (#FF6B00)
- P2: Yellow circle (#FFB700)
- P3: Gray circle (#6C757D)

DRAG-DROP BEHAVIOR:
1. Dragstart: Add .dragging class, set dataTransfer
2. Dragover: Prevent default, add .drag-over class to column
3. Drop:
   - Get task ID from dataTransfer
   - Get new status from column data-status
   - Validate: Check if move allowed (e.g., can't move to Done if has blockers)
   - If valid: Update task status in database, move DOM element, show success toast
   - If invalid: Show error toast, return to original position
4. Dragend: Remove .dragging class

Validation Rules:
- Can't move to Done if task has active blockers
- Can't move to In Progress if dependencies not complete
- Warn if moving P0 task back to To Do (confirm dialog)

COLLAPSE/EXPAND:
- Click [-]: Collapse swimlane (hide columns, show task counts)
- Click [+]: Expand swimlane (show columns and cards)
- Animation: 300ms ease transition for height
- State: Save in localStorage (key: swimlane-collapsed-{projectId})

LAZY LOADING:
- Initial load: Show 10 projects (sorted by recent activity)
- Load more: Click "[+] Show 36 more projects..." button
- Infinite scroll: Load 10 more when scrolled to bottom
- Performance: Virtualize cards (render only visible cards)

CARD CLICK:
- Click card: Open task detail modal (see Section 10)
- Right-click: Show context menu (Edit, Delete, Copy link)

ADD TASK:
- Click "+ Add task": Show inline form in column
- Form fields: Title (required), Priority, Effort, Due date, Assignee
- Submit: Create task with status = column status, add to DOM
- Cancel: Hide form

ACCESSIBILITY:
- Keyboard: Tab to navigate cards, Enter to open detail modal
- Drag-drop: Alternative keyboard controls (Space to grab, Arrow keys to move, Space to drop)
- ARIA: aria-label for columns ("To Do column for coditect-core")
- Focus: Visible focus indicator on all cards

RESPONSIVE:
Desktop (≥1024px): 3 columns + project name
Tablet (768px-1023px): 2 columns (To Do+In Progress | Done), collapse project name to icon
Mobile (<768px): 1 column, tabs for To Do/In Progress/Done, vertical project list

DATA SOURCE:
- Fetch from data/tasks-with-deps.json
- Group by project_id
- Sort cards within column by: Priority (P0 first) → Due date (ascending)
- Filter based on active filters

PERFORMANCE:
- Virtual scrolling: Render only visible swimlanes (10 at a time)
- Card limit: Show max 20 cards per column, "[Load more...]" button for rest
- Debounce drag-drop: Wait 300ms before saving to database
- Optimistic updates: Update UI immediately, rollback if save fails

7. Timeline Chart (Gantt)

7.1 Gantt Visualization

Purpose: Visualize project phases and milestones over time.

Full Specification:

┌─────────────────────────────────────────────────────────────────────────────┐
│  Timeline Chart                                            [Today: Dec 1]    │
│  Zoom: [Day] [Week ✓] [Month]  |  Filter: [All Projects ▼]                 │
├─────────────────────────────────────────────────────────────────────────────┤
│              │Nov 15│Nov 22│Nov 29│Dec 6 │Dec 13│Dec 20│Dec 27│Jan 3│Jan 10│
│              │      │      │  ↓   │      │      │      │      │     │      │
│              │      │      │TODAY │      │      │      │      │     │      │
├──────────────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴─────┴──────┤
│ Phase 0      █████████████ ✅ COMPLETE                                      │
│ Foundation   Nov 1 ────── Nov 16                                            │
│              350 tasks • 100% complete                                       │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 1           ████████████████████████░░░░░░░░░░ 78%                   │
│ Beta Testing      Nov 18 ────────────────────────── Feb 15                  │
│                   530 tasks • 415 complete • 115 in progress                 │
│                        ◆ Beta Analysis (Dec 10)                             │
├──────────────────────────────────────────────────────────────────────────────┤
│ Dashboard 2.0           ████████░░░░░░░░░░░░░░░░░░░░ 0%                    │
│                         Dec 2 ───────────── Jan 31                          │
│                         80 tasks • 0 complete • 0 in progress                │
│                              ◆ Quick Wins (Dec 6)                           │
│                                   ◆ Sprint 1 (Dec 20)                       │
│                                        ◆ Sprint 2 (Jan 17)                  │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 2                                     ████████████░░░░░░ 0%           │
│ Pilot                                       Feb 15 ───── Mar 15             │
│                                             120 tasks • 0 complete            │
│                                                  ◆ Pilot Launch (Feb 15)    │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 3                                                    ████████░░ 0%    │
│ GTM                                                        Mar 15 ─ May 15  │
│                                                            90 tasks          │
│                                                                 ◆ Public GTM │
└──────────────────────────────────────────────────────────────────────────────┘

Legend:  █ Complete  ░ Remaining  ◆ Milestone  │ Today

7.2 Implementation Prompt - Timeline Chart

Prompt for AI/Developer:

Create a Gantt-style timeline chart showing project phases and milestones over time.

LAYOUT:
- Container: Full width, responsive
- Header: Zoom controls + date range display + filters
- Time axis: Horizontal, shows date labels based on zoom level
- Rows: 1 row per phase/project, stacked vertically
- Today indicator: Vertical line showing current date

TIME AXIS:
Zoom Levels:
- Day: Show each day as column (e.g., "Mon 1", "Tue 2")
- Week: Show each week as column (e.g., "Nov 15", "Nov 22")
- Month: Show each month as column (e.g., "Nov", "Dec", "Jan")

Default: Week zoom

Time Scale:
- Calculate: Auto-fit date range from earliest start to latest end
- Padding: Add 1 week before/after for context
- Grid lines: Vertical lines for each time unit (light gray, 1px)

HTML Structure:
<div class="timeline-chart">
  <div class="timeline-header">
    <div class="zoom-controls">
      <button data-zoom="day">Day</button>
      <button data-zoom="week" class="active">Week</button>
      <button data-zoom="month">Month</button>
    </div>
    <div class="date-range">Nov 1, 2025 - May 15, 2026</div>
    <select class="project-filter">
      <option value="all">All Projects</option>
      <option value="core">Core</option>
      <option value="cloud">Cloud</option>
    </select>
  </div>

  <div class="timeline-axis">
    <div class="axis-label" style="left: 0%">Nov 15</div>
    <div class="axis-label" style="left: 7%">Nov 22</div>
    <!-- More labels -->
  </div>

  <div class="timeline-rows">
    <div class="timeline-row" data-phase="phase-0">
      <div class="row-label">
        <div class="phase-name">Phase 0</div>
        <div class="phase-subtitle">Foundation</div>
        <div class="phase-stats">350 tasks • 100%</div>
      </div>
      <div class="row-bar-container">
        <div class="row-bar complete" style="left: 0%; width: 10%;">
          <div class="bar-fill"></div>
          <div class="bar-label">✅ COMPLETE</div>
        </div>
        <div class="date-label start">Nov 1</div>
        <div class="date-label end">Nov 16</div>
      </div>
    </div>
    <!-- More rows -->
  </div>

  <div class="today-indicator" style="left: 20%">
    <div class="today-line"></div>
    <div class="today-label">TODAY</div>
  </div>
</div>

CSS:
.timeline-chart {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 24px;
  overflow-x: auto;
}

.timeline-axis {
  position: relative;
  height: 40px;
  border-bottom: 2px solid var(--gray-900);
  margin-bottom: 16px;
}

.axis-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}

.timeline-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
}

.row-label {
  width: 150px;
  flex-shrink: 0;
}

.phase-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.phase-subtitle {
  font-size: 14px;
  color: var(--gray-700);
}

.phase-stats {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.row-bar-container {
  position: relative;
  flex: 1;
  height: 60px;
}

.row-bar {
  position: absolute;
  height: 40px;
  background: var(--gray-300);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.row-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.row-bar.complete {
  background: linear-gradient(90deg, #00A651, #00D668);
}

.row-bar.in-progress {
  background: linear-gradient(90deg, #0066CC, #3399FF);
}

.row-bar.not-started {
  background: var(--gray-300);
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
  border-radius: 4px 0 0 4px;
}

.bar-label {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}

.date-label {
  position: absolute;
  font-size: 11px;
  color: var(--gray-700);
}

.date-label.start {
  top: -20px;
  left: 0;
}

.date-label.end {
  top: -20px;
  right: 0;
}

.today-indicator {
  position: absolute;
  top: 80px;
  bottom: 0;
  width: 2px;
  z-index: 10;
  pointer-events: none;
}

.today-line {
  width: 2px;
  height: 100%;
  background: var(--primary-blue);
}

.today-label {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-blue);
  color: var(--white);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

CALCULATIONS:
Calculate Bar Position:
- Total days: end_date - start_date of entire timeline
- Phase start offset: (phase_start - timeline_start) / total_days * 100%
- Phase width: (phase_end - phase_start) / total_days * 100%

Calculate Today Position:
- today_offset: (today - timeline_start) / total_days * 100%

Calculate Completion Fill:
- fill_width: (complete_count / total_count) * bar_width

MILESTONES:
Display milestones as diamond markers (◆) below phase bars
- Position: Calculate percentage along timeline
- Label: Milestone name + date
- Click: Show milestone details in popover

HTML for Milestone:
<div class="milestone" style="left: 15%">
  <span class="milestone-marker">◆</span>
  <span class="milestone-label">Beta Analysis (Dec 10)</span>
</div>

CSS:
.milestone {
  position: absolute;
  top: 50px;
  transform: translateX(-50%);
}

.milestone-marker {
  font-size: 20px;
  color: var(--primary-blue);
}

.milestone-label {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gray-700);
  white-space: nowrap;
  background: var(--white);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--gray-300);
}

INTERACTIONS:
Click Phase Bar:
- Show phase detail modal with:
  - Phase name, dates, duration
  - Task breakdown (total, complete, in progress, pending)
  - Progress chart (pie or bar)
  - Key deliverables
  - Assigned team members
  - [View Tasks] button → Navigate to task list filtered by phase

Hover Phase Bar:
- Show tooltip with quick stats
- Highlight connected milestones

Drag Phase Bar (Advanced):
- Drag to reschedule phase
- Validate: Can't move before dependencies complete
- Update: Save new dates to database, recalculate dependent phases

ZOOM BEHAVIOR:
- Click zoom button: Recalculate time scale, re-render axis and bars
- Smooth animation: 300ms ease transition for bar positions
- Persist: Save zoom level in localStorage

RESPONSIVE:
Desktop (≥1024px): Full timeline, horizontal scroll if needed
Tablet (768px-1023px): Reduce label widths, smaller fonts
Mobile (<768px): Vertical timeline (bars stack vertically, dates on left)

DATA SOURCE:
- Fetch from data/projects-with-milestones.json
- Calculate dates, durations, completion percentages
- Sort phases by start_date (ascending)

ACCESSIBILITY:
- Keyboard: Tab through phases, Enter to open detail modal
- ARIA: aria-label for bars ("Phase 0: 100% complete, Nov 1 to Nov 16")
- Focus: Visible outline on focused bars
- Screen reader: Announce phase progress on focus

8. Analytics Dashboard

8.1 Layout - Data Visualization

Purpose: Provide actionable insights through charts and metrics.

Full Specification:

┌─────────────────────────────────────────────────────────────────────────────┐
│  Analytics & Reports                                      [Export PDF]       │
│  Date Range: [Last 30 Days ▼]  |  Projects: [All 46 ▼]                     │
├─────────────────────────────┬───────────────────────────────────────────────┤
│  COMPLETION RATE BY PHASE   │  VELOCITY TREND (Tasks/Week)                  │
│                             │                                               │
│  ╔═══════════════════════╗  │     120┤                                      │
│  ║ Phase 0     100% ████ ║  │        │                                  ●   │
│  ║ Phase 0.5    20% █    ║  │     100┤                              ●       │
│  ║ Phase 1      78% ███  ║  │        │                          ●           │
│  ║ Dashboard    0%       ║  │      80┤                      ●               │
│  ║ Phase 2      0%       ║  │        │                  ●                   │
│  ╚═══════════════════════╝  │      60┤              ●                       │
│                             │        │          ●                           │
│  Total: 530 tasks           │      40┤      ●                               │
│  Complete: 415 (78%)        │        │  ●                                   │
│  In Progress: 115 (22%)     │      20┤                                      │
│                             │        └───┬───┬───┬───┬───┬───┬───┬───      │
│  [View Details]             │            W1  W2  W3  W4  W5  W6  W7  W8    │
│                             │                                               │
│                             │  Trend: ▲ +15% increase this week             │
│                             │  Average: 85 tasks/week                       │
│                             │  [View Details]                               │
└─────────────────────────────┴───────────────────────────────────────────────┘
┌─────────────────────────────┬───────────────────────────────────────────────┐
│  BURNDOWN CHART             │  TASK DISTRIBUTION BY PRIORITY                │
│                             │                                               │
│  530┤●                      │      ╔════════════════════════════════════╗  │
│     │ ●                     │      ║ P0 (Critical)     23 tasks █      ║  │
│  400┤  ●●                   │      ║ P1 (High)        156 tasks ████   ║  │
│     │     ●●                │      ║ P2 (Medium)      198 tasks █████  ║  │
│  300┤       ●●              │      ║ P3 (Low)         153 tasks ████   ║  │
│     │         ●●            │      ╚════════════════════════════════════╝  │
│  200┤           ●●          │                                               │
│     │             ●●        │  Total: 530 tasks                             │
│  100┤               ●●      │  P0+P1 (High Priority): 179 tasks (34%)       │
│     │                 ●●    │  Unassigned: 45 tasks (8%)                    │
│    0└───┬───┬───┬───┬───┬──│                                               │
│        W1  W2  W3  W4  Now │  [View P0 Tasks]                              │
│                             │                                               │
│  Ideal Line: ●●●●●●●        │                                               │
│  Actual: On track ✅        │                                               │
│  Predicted End: Jan 28      │                                               │
└─────────────────────────────┴───────────────────────────────────────────────┘

8.2 Implementation Prompt - Analytics Dashboard

Prompt for AI/Developer:

Create an analytics dashboard with 4 chart panels showing project insights.

LAYOUT:
- Container: 2×2 grid (same as Portfolio Overview)
- Gap: 24px between panels
- Responsive: Stack vertically on mobile (<768px)
- Chart library: Use Chart.js or D3.js for visualizations

PANEL 1: COMPLETION RATE BY PHASE (Bar Chart)
Data:
- X-axis: Phase names (Phase 0, Phase 0.5, Phase 1, Dashboard 2.0, Phase 2, Phase 3)
- Y-axis: Completion percentage (0-100%)
- Bars: Horizontal bars, green gradient fill
- Labels: Show percentage at end of each bar

Visual:
- Bar color: Linear gradient (var(--status-green) to lighter green)
- Height: 40px per bar
- Padding: 8px between bars
- Font: 14px for phase names, 16px bold for percentages
- Empty bars: Gray background (var(--gray-300))

Calculation:
- completion_rate = (complete_count / total_count) * 100
- Round to nearest integer

Interaction:
- Click bar: Navigate to that phase's task list
- Hover: Show tooltip with exact counts (e.g., "415 of 530 tasks complete")

PANEL 2: VELOCITY TREND (Line Chart)
Data:
- X-axis: Week numbers (W1, W2, ..., W8) - last 8 weeks
- Y-axis: Tasks completed per week (0-120)
- Line: Blue line connecting data points
- Points: Blue circles at each data point

Visual:
- Line color: var(--primary-blue)
- Line width: 2px
- Point radius: 6px
- Grid lines: Horizontal dashed gray lines (var(--gray-300))
- Fill: Optional gradient fill under line (blue to transparent)

Calculation:
- Group tasks by week of completion (use completed_at timestamp)
- Count tasks per week
- Calculate trend: Linear regression for slope (increasing/decreasing)
- Show trend indicator: ▲ +15% or ▼ -8%

Interaction:
- Hover point: Show tooltip with exact count + week dates
- Click point: Show list of tasks completed that week
- Trend line: Show predicted future velocity (dashed line)

PANEL 3: BURNDOWN CHART (Line Chart with Ideal Line)
Data:
- X-axis: Weeks (W1 to projected end)
- Y-axis: Tasks remaining (530 down to 0)
- Ideal line: Straight diagonal from start to target end
- Actual line: Current progress

Visual:
- Ideal line: Dashed gray line (var(--gray-500))
- Actual line: Solid blue line (var(--primary-blue))
- Start point: 530 tasks (project start date)
- Current point: 115 tasks remaining (today)
- End point: 0 tasks (predicted completion date)

Calculation:
- ideal_slope = total_tasks / total_weeks
- actual_slope = tasks_completed / weeks_elapsed
- predicted_end = today + (remaining_tasks / actual_velocity)
- status: On track if actual >= ideal, Behind if actual < ideal

Status Indicator:
- On track: ✅ Green text
- Behind: ⚠️ Yellow text
- Ahead: 🎯 Blue text

Interaction:
- Hover: Show tooltip with date + tasks remaining
- Click: Show detailed burndown data table

PANEL 4: TASK DISTRIBUTION BY PRIORITY (Horizontal Bar Chart)
Data:
- Categories: P0, P1, P2, P3
- Values: Task count for each priority
- Colors: P0 red, P1 orange, P2 yellow, P3 gray

Visual:
- Bars: Horizontal, stacked in single column
- Colors: Use priority color variables
- Labels: Show count + priority name (e.g., "P0 (Critical) 23 tasks")
- Width: Proportional to percentage of total

Calculation:
- Sort by priority (P0 first)
- Calculate percentage: (count / total) * 100
- Bar width: percentage * container_width

Interaction:
- Click bar: Navigate to task list filtered by that priority
- Hover: Show tooltip with percentage

EXPORT FUNCTIONALITY:
Button: [Export PDF] in top-right corner
- Generate PDF with all 4 charts
- Include: Title, date range, current metrics
- Use html2canvas + jsPDF libraries
- File name: analytics-report-{date}.pdf

DATE RANGE FILTER:
Dropdown options:
- Last 7 days
- Last 30 days (default)
- Last 90 days
- Custom range (date picker)

Behavior:
- Change: Re-fetch data with new date range, update all charts
- Animation: Smooth transition for data changes (300ms)

PROJECT FILTER:
Dropdown options:
- All 46 projects (default)
- Core (3 projects)
- Cloud (4 projects)
- By individual project

Behavior:
- Change: Re-calculate metrics for selected projects, update charts
- Multiple selection: Allow multi-select with checkboxes

DATA SOURCE:
- Fetch from data/dashboard-metrics.json
- Calculate metrics from tasks.json and project-plan.json
- Group by week: Use completed_at timestamps
- Cache: Cache calculations for 5 minutes

ACCESSIBILITY:
- Keyboard: Tab through chart panels, Enter to interact
- ARIA: aria-label for charts, describe data patterns for screen readers
- Focus: Visible outline on chart panels
- Alternative: Provide data table view for screen reader users

RESPONSIVE:
Desktop (≥1024px): 2×2 grid
Tablet (768px-1023px): 2×2 grid, smaller fonts
Mobile (<768px): 1 column stack, reduce chart height

PERFORMANCE:
- Lazy load: Only render charts when Analytics tab active
- Debounce: Debounce filter changes (300ms)
- Virtualize: Use canvas rendering for large datasets (>1000 points)

9.1 Advanced Multi-Select Filtering

Full Specification:

┌────────────────────────────────────────────────────────────────┐
│  Advanced Filters                                     [✕] Close │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  🏷️ STATUS                                                     │
│  ☑ Pending (115)  ☑ In Progress (70)  ☑ Complete (415)        │
│  ☐ Paused (0)                                                  │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  📁 PROJECTS (8 categories, 46 total)                          │
│  ☑ All  ☐ Core (3)  ☐ Cloud (4)  ☐ Dev (10)  ☐ Frontend (8)  │
│        ☐ Security (5)  ☐ Testing (6)  ☐ Docs (4)  ☐ Tools (6) │
│                                                                │
│  Category Expansion:                                           │
│  ▼ Core (3 projects)                                           │
│    ☑ coditect-core (530 tasks)                                 │
│    ☐ coditect-core-framework (45 tasks)                        │
│    ☐ coditect-core-architecture (12 tasks)                     │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  📊 PHASE                                                       │
│  ☑ Phase 0 (350)  ☑ Phase 0.5 (120)  ☑ Phase 1 (530)          │
│  ☐ Dashboard 2.0 (80)  ☐ Phase 2 (0)  ☐ Phase 3 (0)           │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  🎯 PRIORITY                                                    │
│  ☑ P0 (23)  ☑ P1 (156)  ☐ P2 (198)  ☐ P3 (153)                │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  👤 ASSIGNEE                                                    │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │ 🔍 Search assignee...                                    │ │
│  └──────────────────────────────────────────────────────────┘ │
│  ☐ Hal Casteel (487 tasks)                                     │
│  ☐ Unassigned (45 tasks)                                       │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  📅 DUE DATE                                                    │
│  ○ All                                                         │
│  ○ Overdue (12 tasks)                                          │
│  ○ This Week (45 tasks)                                        │
│  ○ This Month (89 tasks)                                       │
│  ○ Custom Range: [Start Date ▼] → [End Date ▼]                │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  🔗 LINKED TO                                                   │
│  ☐ Has Checkpoint (421 tasks)                                  │
│  ☐ Has Commits (312 tasks)                                     │
│  ☐ Has Dependencies (89 tasks)                                 │
│  ☐ Has Blockers (12 tasks)                                     │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  ⚙️ FILTER LOGIC                                               │
│  ○ AND (all conditions must match)    145 tasks match          │
│  ○ OR (any condition matches)         530 tasks match          │
│                                                                │
├────────────────────────────────────────────────────────────────┤
│  Matching: 145 of 530 tasks                                    │
│  [Clear All]           [Save as View ▼]    [Apply Filters]    │
└────────────────────────────────────────────────────────────────┘

Prompt for AI/Developer:

Create an advanced filter modal with multi-select checkboxes and AND/OR logic.

MODAL STRUCTURE:
HTML:
<div class="modal-overlay" role="dialog" aria-labelledby="filter-modal-title" aria-modal="true">
  <div class="modal-container filter-modal">
    <header class="modal-header">
      <h2 id="filter-modal-title">Advanced Filters</h2>
      <button class="close-btn" aria-label="Close filters">✕</button>
    </header>

    <div class="modal-body">
      <!-- Filter sections -->
    </div>

    <footer class="modal-footer">
      <div class="match-count">Matching: <strong>145 of 530</strong> tasks</div>
      <button class="btn-secondary">Clear All</button>
      <button class="btn-secondary dropdown-trigger">
        Save as View ▼
      </button>
      <button class="btn-primary">Apply Filters</button>
    </footer>
  </div>
</div>

CSS:
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.filter-modal {
  background: var(--white);
  border-radius: 8px;
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--gray-300);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-300);
  background: var(--gray-50);
}

.match-count {
  flex: 1;
  font-size: 14px;
  color: var(--gray-700);
}

FILTER SECTIONS:
Each section follows this pattern:
<div class="filter-section">
  <h3 class="filter-heading">
    <span class="icon">🏷️</span>
    STATUS
  </h3>
  <div class="filter-options">
    <label class="checkbox-label">
      <input type="checkbox" checked />
      <span>Pending</span>
      <span class="count">(115)</span>
    </label>
    <label class="checkbox-label">
      <input type="checkbox" checked />
      <span>In Progress</span>
      <span class="count">(70)</span>
    </label>
    <!-- More options -->
  </div>
</div>

CSS:
.filter-section {
  margin-bottom: 32px;
}

.filter-section:not(:last-child) {
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--gray-300);
}

.filter-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-700);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  user-select: none;
}

.checkbox-label:hover {
  background: var(--gray-200);
  border-color: var(--gray-500);
}

.checkbox-label input:checked + span {
  font-weight: 600;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.count {
  color: var(--gray-500);
  font-size: 12px;
}

CATEGORY EXPANSION (Projects):
Collapsible category with nested project checkboxes:
<div class="category-toggle">
  <button class="expand-btn" aria-expanded="true">
    <span class="chevron">▼</span>
    Core (3 projects)
  </button>
</div>
<div class="category-projects">
  <label class="checkbox-label nested">
    <input type="checkbox" checked />
    <span>coditect-core</span>
    <span class="count">(530 tasks)</span>
  </label>
  <!-- More projects -->
</div>

CSS:
.expand-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chevron {
  transition: transform 0.2s;
}

.expand-btn[aria-expanded="false"] .chevron {
  transform: rotate(-90deg);
}

.category-projects {
  margin-left: 24px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label.nested {
  background: transparent;
  border: 1px solid transparent;
  padding-left: 0;
}

.checkbox-label.nested:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

ASSIGNEE SEARCH:
Text input with autocomplete:
<div class="search-input-container">
  <input
    type="text"
    placeholder="Search assignee..."
    class="search-input"
    aria-label="Search assignees"
  />
  <span class="search-icon">🔍</span>
</div>
<div class="search-results">
  <!-- Filtered assignee checkboxes -->
</div>

Behavior:
- Type to filter: Filter assignee list on keyup (instant)
- Fuzzy match: Match substring anywhere in name
- Empty state: "No assignees found" if no matches

DUE DATE (Radio Buttons):
Single-select radio group:
<div class="radio-group">
  <label class="radio-label">
    <input type="radio" name="due-date" value="all" checked />
    <span>All</span>
  </label>
  <label class="radio-label">
    <input type="radio" name="due-date" value="overdue" />
    <span>Overdue</span>
    <span class="count">(12 tasks)</span>
  </label>
  <!-- More options -->
</div>

Custom Date Range (shows when "Custom Range" selected):
<div class="date-range-inputs">
  <input type="date" aria-label="Start date" />
  <span>→</span>
  <input type="date" aria-label="End date" />
</div>

FILTER LOGIC TOGGLE:
Radio buttons for AND/OR logic:
<div class="logic-toggle">
  <label class="radio-label">
    <input type="radio" name="logic" value="and" checked />
    <span>AND (all conditions must match)</span>
    <span class="match-preview">145 tasks match</span>
  </label>
  <label class="radio-label">
    <input type="radio" name="logic" value="or" />
    <span>OR (any condition matches)</span>
    <span class="match-preview">530 tasks match</span>
  </label>
</div>

Behavior:
- Change: Recalculate matching task count
- Update: Update footer match count in real-time

REAL-TIME MATCH COUNT:
Calculate on every filter change:
- Get all selected filters
- Apply logic (AND/OR)
- Count matching tasks
- Update footer: "Matching: X of 530 tasks"
- Debounce: Wait 200ms after last change before calculating

SAVE AS VIEW:
Dropdown with preset options + custom:
<div class="save-view-dropdown">
  <button class="dropdown-item">Save as "My Active Tasks"</button>
  <button class="dropdown-item">Save as "P0 Blockers"</button>
  <button class="dropdown-item">+ New Custom View</button>
</div>

Behavior:
- Click preset: Save current filters with that name
- Click custom: Show input dialog for custom name
- Storage: Save to localStorage as JSON
- Load: Show saved views in top bar filter dropdown

INTERACTIONS:
Open:
- Click "🎛️ Filters" button in top bar
- Keyboard: Shift+F shortcut

Close:
- Click [✕] button
- Click outside modal (on overlay)
- Press Esc key
- Click [Apply Filters] (auto-close)

Apply:
- Click [Apply Filters]: Close modal, apply filters to main view
- Updates: URL query params (e.g., ?status=pending,in_progress&priority=p0,p1)
- Persistence: Save active filters in localStorage

Clear All:
- Click [Clear All]: Uncheck all checkboxes, reset to defaults
- Confirmation: Show "Are you sure?" if >5 filters active

KEYBOARD NAVIGATION:
- Tab: Navigate through filter options
- Space: Toggle checkbox/radio
- Enter: Apply filters
- Esc: Close modal
- Arrow keys: Navigate within radio groups

ACCESSIBILITY:
- Focus trap: Keep focus inside modal when open
- Focus restoration: Return focus to trigger button on close
- ARIA: aria-modal="true", aria-labelledby for title
- Screen reader: Announce match count changes

DATA SOURCE:
- Fetch from data/tasks.json
- Calculate counts for each filter option
- Real-time filtering using client-side logic

PERFORMANCE:
- Debounce: Debounce match count calculations (200ms)
- Virtualize: If >100 projects, virtualize project list
- Cache: Cache filter results for faster recalculation

10.1 Side Drawer Design

Purpose: Show complete task context with edit capabilities.

Full Specification:

┌────────────────────────────────────────────────────────────────┐
│  ← Back to Board                                     [✕] Close │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  📌 Create TASKLIST.md parser                      [Edit ▼]   │
│  Project: coditect-core • Phase: Dashboard 2.0                 │
│  Created: Nov 27, 2025 by Hal Casteel                          │
│                                                                │
│  ┌──────────────────────────────────────────────────────────┐ │
│  │ Status      [To Do ▼]            Priority  [P1 ▼]        │ │
│  │ Assignee    [@Hal Casteel ▼]     Effort    [2h]          │ │
│  │ Due Date    [Dec 5, 2025 ▼]      Progress  [0%]          │ │
│  └──────────────────────────────────────────────────────────┘ │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  DESCRIPTION                                                   │
│  Read TASKLIST.md and extract all tasks with regex parsing.   │
│  Parse checkbox status (`[ ]` = pending, `[x]` = complete).   │
│  Extract phase assignments and priority indicators.            │
│                                                                │
│  [Edit Description]                                            │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  🔗 DEPENDENCIES (2)                                           │
│                                                                │
│  ← Blocked by:                                                 │
│    None                                                        │
│                                                                │
│  → Blocks:                                                     │
│    📌 Update generate-dashboard.py [View]                      │
│    📌 Add task list view to dashboard [View]                   │
│                                                                │
│  [+ Add Dependency]                                            │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  📎 LINKED CHECKPOINTS (1)                                     │
│                                                                │
│  • 2025-11-27-Dashboard-2.0-Planning                  [View]  │
│    Created: Nov 27, 2025 • 527 new unique messages            │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  💬 LINKED COMMITS (0)                                         │
│                                                                │
│  No commits linked yet                                         │
│  [+ Link Commit]                                               │
│                                                                │
│  ──────────────────────────────────────────────────────────   │
│                                                                │
│  📜 HISTORY (3 events)                                         │
│                                                                │
│  Nov 28, 2025 2:45 PM                                          │
│  ✅ Status changed: in_progress → complete                     │
│  By: Hal Casteel • Checkpoint: 2025-11-28-Quick-Wins-Complete │
│                                                                │
│  Nov 27, 2025 10:30 AM                                         │
│  🔄 Status changed: pending → in_progress                      │
│  By: Hal Casteel • No checkpoint                              │
│                                                                │
│  Nov 27, 2025 9:15 AM                                          │
│  ➕ Task created                                               │
│  By: Hal Casteel • Checkpoint: 2025-11-27-Dashboard-2.0       │
│                                                                │
│  [Load Earlier History]                                        │
│                                                                │
├────────────────────────────────────────────────────────────────┤
│  [Delete Task]            [Save Changes]  [Create Subtask]    │
└────────────────────────────────────────────────────────────────┘

Prompt for AI/Developer:

Create a task detail modal as a side drawer (slide from right).

MODAL STRUCTURE:
Layout:
- Position: Fixed, right side of screen
- Width: 60% of viewport width (min: 600px, max: 800px)
- Height: 100vh
- Animation: Slide in from right (transform: translateX(100%) → translateX(0))
- Backdrop: Semi-transparent overlay (rgba(0,0,0,0.3))

HTML:
<div class="modal-overlay task-detail-overlay" role="dialog" aria-modal="true">
  <div class="task-detail-modal">
    <header class="task-header">
      <button class="back-btn">← Back to Board</button>
      <button class="close-btn" aria-label="Close">✕</button>
    </header>

    <div class="task-body">
      <!-- Task content sections -->
    </div>

    <footer class="task-footer">
      <button class="btn-danger">Delete Task</button>
      <div class="footer-actions">
        <button class="btn-primary">Save Changes</button>
        <button class="btn-secondary">Create Subtask</button>
      </div>
    </footer>
  </div>
</div>

CSS:
.task-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.task-detail-modal {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  min-width: 600px;
  max-width: 800px;
  background: var(--white);
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-300);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.task-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--gray-300);
  background: var(--gray-50);
  position: sticky;
  bottom: 0;
}

.footer-actions {
  display: flex;
  gap: 12px;
}

TASK TITLE & METADATA:
<div class="task-title-section">
  <h1 class="task-title">
    <span class="task-icon">📌</span>
    Create TASKLIST.md parser
  </h1>
  <button class="edit-menu-trigger">Edit ▼</button>
</div>

<div class="task-metadata">
  <span class="meta-item">
    <strong>Project:</strong> coditect-core
  </span>
  <span class="meta-separator">•</span>
  <span class="meta-item">
    <strong>Phase:</strong> Dashboard 2.0
  </span>
</div>

<div class="task-created">
  Created: Nov 27, 2025 by Hal Casteel
</div>

CSS:
.task-title-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.task-icon {
  font-size: 28px;
}

.task-metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.task-created {
  font-size: 13px;
  color: var(--gray-500);
  font-style: italic;
}

EDITABLE FIELDS GRID:
<div class="fields-grid">
  <div class="field">
    <label>Status</label>
    <select class="field-input">
      <option value="pending">To Do</option>
      <option value="in_progress">In Progress</option>
      <option value="complete">Done</option>
    </select>
  </div>

  <div class="field">
    <label>Priority</label>
    <select class="field-input">
      <option value="p0">P0 - Critical</option>
      <option value="p1" selected>P1 - High</option>
      <option value="p2">P2 - Medium</option>
      <option value="p3">P3 - Low</option>
    </select>
  </div>

  <div class="field">
    <label>Assignee</label>
    <select class="field-input">
      <option value="hal">@Hal Casteel</option>
      <option value="unassigned">Unassigned</option>
    </select>
  </div>

  <div class="field">
    <label>Effort</label>
    <input type="text" class="field-input" value="2h" placeholder="e.g., 2h, 4h" />
  </div>

  <div class="field">
    <label>Due Date</label>
    <input type="date" class="field-input" value="2025-12-05" />
  </div>

  <div class="field">
    <label>Progress</label>
    <input type="number" class="field-input" value="0" min="0" max="100" />
    <span class="field-suffix">%</span>
  </div>
</div>

CSS:
.fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  margin-bottom: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-input {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 14px;
  background: var(--white);
  transition: all 0.2s;
}

.field-input:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 0;
  border-color: var(--primary-blue);
}

DESCRIPTION:
<div class="section">
  <h3 class="section-heading">DESCRIPTION</h3>
  <div class="description-content" contenteditable="false">
    Read TASKLIST.md and extract all tasks with regex parsing.
    Parse checkbox status (`[ ]` = pending, `[x]` = complete).
    Extract phase assignments and priority indicators.
  </div>
  <button class="btn-secondary edit-description-btn">Edit Description</button>
</div>

Behavior:
- Click [Edit Description]: Make contenteditable=true, change button to [Save]
- Save: Validate non-empty, save to database, make contenteditable=false
- Cancel: Esc key to cancel editing, restore original content

CSS:
.section {
  margin-bottom: 32px;
}

.section-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-700);
  margin-bottom: 12px;
}

.description-content {
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 80px;
}

.description-content[contenteditable="true"] {
  background: var(--white);
  border-color: var(--primary-blue);
  outline: 2px solid var(--primary-blue-light);
}

DEPENDENCIES:
<div class="section">
  <h3 class="section-heading">🔗 DEPENDENCIES (2)</h3>

  <div class="dependency-group">
    <h4 class="dependency-label">← Blocked by:</h4>
    <p class="empty-state">None</p>
  </div>

  <div class="dependency-group">
    <h4 class="dependency-label">→ Blocks:</h4>
    <div class="dependency-list">
      <div class="dependency-item">
        <span class="task-icon">📌</span>
        <span class="dependency-name">Update generate-dashboard.py</span>
        <button class="btn-link">View</button>
      </div>
      <div class="dependency-item">
        <span class="task-icon">📌</span>
        <span class="dependency-name">Add task list view to dashboard</span>
        <button class="btn-link">View</button>
      </div>
    </div>
  </div>

  <button class="btn-secondary">+ Add Dependency</button>
</div>

Behavior:
- Click [View]: Open that task in new modal (stacked modal)
- Click [+ Add Dependency]: Show search dialog to find tasks
- Validation: Prevent circular dependencies (task A blocks B, B blocks A)

CSS:
.dependency-group {
  margin-bottom: 16px;
}

.dependency-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
}

.dependency-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dependency-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
}

.dependency-name {
  flex: 1;
  font-size: 14px;
  color: var(--gray-900);
}

.empty-state {
  font-size: 14px;
  color: var(--gray-500);
  font-style: italic;
}

LINKED CHECKPOINTS:
<div class="section">
  <h3 class="section-heading">📎 LINKED CHECKPOINTS (1)</h3>

  <div class="linked-list">
    <div class="linked-item">
      <div class="linked-content">
        <h4 class="linked-title">2025-11-27-Dashboard-2.0-Planning</h4>
        <p class="linked-meta">Created: Nov 27, 2025 • 527 new unique messages</p>
      </div>
      <button class="btn-link">View</button>
    </div>
  </div>
</div>

Behavior:
- Click [View]: Open checkpoint document in new tab
- Link: GitHub or internal URL to checkpoint markdown file

LINKED COMMITS:
<div class="section">
  <h3 class="section-heading">💬 LINKED COMMITS (0)</h3>

  <p class="empty-state">No commits linked yet</p>
  <button class="btn-secondary">+ Link Commit</button>
</div>

Behavior:
- Click [+ Link Commit]: Show input for commit SHA or PR number
- Auto-link: Parse git commit messages for task ID references
- Display: Show commit SHA, message, author, date, [View on GitHub] link

HISTORY TIMELINE:
<div class="section">
  <h3 class="section-heading">📜 HISTORY (3 events)</h3>

  <div class="timeline">
    <div class="timeline-event">
      <div class="event-marker complete"></div>
      <div class="event-content">
        <div class="event-header">
          <strong>✅ Status changed: in_progress → complete</strong>
          <span class="event-time">Nov 28, 2025 2:45 PM</span>
        </div>
        <div class="event-meta">
          By: Hal Casteel • Checkpoint: 2025-11-28-Quick-Wins-Complete
        </div>
      </div>
    </div>

    <div class="timeline-event">
      <div class="event-marker in-progress"></div>
      <div class="event-content">
        <div class="event-header">
          <strong>🔄 Status changed: pending → in_progress</strong>
          <span class="event-time">Nov 27, 2025 10:30 AM</span>
        </div>
        <div class="event-meta">
          By: Hal Casteel • No checkpoint
        </div>
      </div>
    </div>

    <div class="timeline-event">
      <div class="event-marker created"></div>
      <div class="event-content">
        <div class="event-header">
          <strong>➕ Task created</strong>
          <span class="event-time">Nov 27, 2025 9:15 AM</span>
        </div>
        <div class="event-meta">
          By: Hal Casteel • Checkpoint: 2025-11-27-Dashboard-2.0
        </div>
      </div>
    </div>
  </div>

  <button class="btn-link">Load Earlier History</button>
</div>

CSS:
.timeline {
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--gray-300);
}

.timeline-event {
  position: relative;
  margin-bottom: 24px;
}

.event-marker {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--white);
  z-index: 1;
}

.event-marker.complete {
  background: var(--status-green);
}

.event-marker.in-progress {
  background: var(--status-yellow);
}

.event-marker.created {
  background: var(--primary-blue);
}

.event-content {
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 12px;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 14px;
}

.event-time {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: normal;
}

.event-meta {
  font-size: 12px;
  color: var(--gray-700);
}

INTERACTIONS:
Open:
- Click task card on Kanban board
- Click task row in task list
- URL navigation: #/task/{task_id}

Close:
- Click [✕] Close button
- Click [← Back to Board] button
- Click outside modal (on overlay)
- Press Esc key

Save Changes:
- Click [Save Changes]: Validate all fields, save to database
- Auto-save: Save on blur for each field (debounced 1 second)
- Validation: Required fields (title, status, priority)
- Error handling: Show inline validation errors

Delete Task:
- Click [Delete Task]: Show confirmation dialog
- Confirmation: "Are you sure? This action cannot be undone."
- Action: Delete from database, close modal, show success toast

Create Subtask:
- Click [Create Subtask]: Open new task modal with parent_id set
- Inherit: Copy project, phase, assignee from parent
- Link: Show parent task in dependencies section

KEYBOARD NAVIGATION:
- Tab: Navigate through fields
- Enter: Save changes
- Esc: Close modal (with unsaved changes warning)
- Cmd+S / Ctrl+S: Quick save shortcut

ACCESSIBILITY:
- Focus trap: Keep focus inside modal
- Focus restoration: Return to trigger element on close
- ARIA: aria-modal="true", aria-labelledby for title
- Screen reader: Announce section headings, field labels
- Keyboard: All actions accessible via keyboard

DATA SOURCE:
- Fetch from data/tasks-with-deps.json (single task)
- Fetch dependencies from task_dependencies table
- Fetch history from task_status_history table
- Fetch checkpoints from checkpoints table
- Fetch commits from git-commits.json (filter by task_id)

RESPONSIVE:
Desktop (≥1024px): 60% width
Tablet (768px-1023px): 80% width
Mobile (<768px): 100% width (full screen)

[Document continues with Sections 11-16 in next part due to length...]

Would you like me to continue with the remaining sections (Global Search, Responsive Design, Accessibility, Technical Implementation, User Stories, and References)?

Dashboard 2.0: Complete UI/UX Specification

Table of Contents

1. Executive Summary

1.1 Purpose

1.2 Target Users

1.3 Success Criteria

1.4 Design Principles

2. Design Philosophy

2.1 Research Foundation

2.2 Key Insights from Research

2.3 Design Constraints

3. Overall Architecture

3.1 Three-Panel Layout

3.2 Color System

3.3 Typography

3.4 Spacing System (8px Grid)

4. Navigation System

4.1 Left Sidebar - Hierarchical Project Tree

4.1.1 Search Input

4.1.2 Category Headers

4.1.3 Project Items

4.2 Top Bar - Global Controls

5. Portfolio Overview

5.1 Layout - 4-Quadrant Dashboard

5.2 Implementation Prompt - Portfolio Overview

6. Multi-Project Kanban Board

6.1 Swimlane Pattern - Horizontal Project Rows

6.2 Task Card Design

6.3 Implementation Prompt - Kanban Board

7. Timeline Chart (Gantt)

7.1 Gantt Visualization

7.2 Implementation Prompt - Timeline Chart

8. Analytics Dashboard

8.1 Layout - Data Visualization

8.2 Implementation Prompt - Analytics Dashboard

9.1 Advanced Multi-Select Filtering

10.1 Side Drawer Design

Table of Contents​

1. Executive Summary​

1.1 Purpose​

1.2 Target Users​

1.3 Success Criteria​

1.4 Design Principles​

2. Design Philosophy​

2.1 Research Foundation​

2.2 Key Insights from Research​

2.3 Design Constraints​

3. Overall Architecture​

3.1 Three-Panel Layout​

3.2 Color System​

3.3 Typography​

3.4 Spacing System (8px Grid)​

4. Navigation System​

4.1 Left Sidebar - Hierarchical Project Tree​

4.1.1 Search Input​

4.1.2 Category Headers​

4.1.3 Project Items​

4.2 Top Bar - Global Controls​

5. Portfolio Overview​

5.1 Layout - 4-Quadrant Dashboard​

5.2 Implementation Prompt - Portfolio Overview​

6. Multi-Project Kanban Board​

6.1 Swimlane Pattern - Horizontal Project Rows​

6.2 Task Card Design​

6.3 Implementation Prompt - Kanban Board​

7. Timeline Chart (Gantt)​

7.1 Gantt Visualization​

7.2 Implementation Prompt - Timeline Chart​

8. Analytics Dashboard​

8.1 Layout - Data Visualization​

8.2 Implementation Prompt - Analytics Dashboard​

9. Filter Modal​

9.1 Advanced Multi-Select Filtering​

9.2 Implementation Prompt - Filter Modal​

10. Task Detail Modal​

10.1 Side Drawer Design​

10.2 Implementation Prompt - Task Detail Modal​

Table of Contents

1. Executive Summary

1.1 Purpose

1.2 Target Users

1.3 Success Criteria

1.4 Design Principles

2. Design Philosophy

2.1 Research Foundation

2.2 Key Insights from Research

2.3 Design Constraints

3. Overall Architecture

3.1 Three-Panel Layout

3.2 Color System

3.3 Typography

3.4 Spacing System (8px Grid)

4. Navigation System

4.1 Left Sidebar - Hierarchical Project Tree

4.1.1 Search Input

4.1.2 Category Headers

4.1.3 Project Items

4.2 Top Bar - Global Controls

5. Portfolio Overview

5.1 Layout - 4-Quadrant Dashboard

5.2 Implementation Prompt - Portfolio Overview

6. Multi-Project Kanban Board

6.1 Swimlane Pattern - Horizontal Project Rows

6.2 Task Card Design

6.3 Implementation Prompt - Kanban Board

7. Timeline Chart (Gantt)

7.1 Gantt Visualization

7.2 Implementation Prompt - Timeline Chart

8. Analytics Dashboard

8.1 Layout - Data Visualization

8.2 Implementation Prompt - Analytics Dashboard

9. Filter Modal

9.1 Advanced Multi-Select Filtering

9.2 Implementation Prompt - Filter Modal

10. Task Detail Modal

10.1 Side Drawer Design

10.2 Implementation Prompt - Task Detail Modal