10. Task Detail Modal
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] │
└────────────────────────────────────────────────────────────────┘
10.2 Implementation Prompt - Task Detail Modal
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)?