improvements

Author: nanehambardzumyan

client/help-content.html

@@ -1,14 +1,36 @@
-<div>
+<div class="help-content">
   <h2>Task Board Help</h2>
-  <h3>Columns</h3>
-  <p>The board has four columns representing task statuses: <strong>Pending</strong>, <strong>In Progress</strong>, <strong>Blocked</strong>, and <strong>Done</strong>.</p>
+
+  <h3>Board Overview</h3>
+  <p>The board is organized into four columns representing task statuses:</p>
+  <ul>
+    <li><strong>Pending</strong> — Tasks waiting to be started</li>
+    <li><strong>In Progress</strong> — Tasks currently being worked on</li>
+    <li><strong>Blocked</strong> — Tasks that are stuck or waiting on dependencies</li>
+    <li><strong>Done</strong> — Completed tasks</li>
+  </ul>
 
   <h3>Adding Tasks</h3>
-  <p>Click the <strong>+</strong> button in any column header to add a new task to that column. Enter a title and optionally a description, then click <strong>Add</strong>.</p>
+  <p>Click the <strong>+</strong> button in any column header to add a new task. Fill in:</p>
+  <ul>
+    <li><strong>Title</strong> — A short name for the task (required)</li>
+    <li><strong>Description</strong> — Additional details (optional)</li>
+    <li><strong>Priority</strong> — Choose High, Medium, or Low from the dropdown</li>
+  </ul>
+  <p>Click <strong>Add</strong> to create the task, or <strong>Cancel</strong> to discard.</p>
 
   <h3>Moving Tasks</h3>
-  <p>Drag and drop cards between columns to change their status. Cards can be reordered within a column as well.</p>
+  <p><strong>Drag and drop</strong> task cards between columns to change their status. Cards can also be reordered within a column. A dashed placeholder shows where the card will land.</p>
+
+  <h3>Priority</h3>
+  <p>Each task has a color-coded priority badge:</p>
+  <ul>
+    <li><strong style="color: var(--Colors-Base-Accent-Red-500);">HIGH</strong> — Urgent, needs immediate attention</li>
+    <li><strong style="color: var(--Colors-Base-Accent-Orange-500);">MEDIUM</strong> — Normal priority</li>
+    <li><strong style="color: var(--Colors-Base-Neutral-800);">LOW</strong> — Can wait, lower urgency</li>
+  </ul>
+  <p><strong>Click</strong> a priority badge on any task card to cycle through the levels (Low → Medium → High).</p>
 
-  <h3>Persistence</h3>
-  <p>All tasks are saved in your browser's local storage and will persist across page refreshes.</p>
+  <h3>Data Storage</h3>
+  <p>All tasks are saved in your browser's local storage and persist across page refreshes.</p>
 </div>

client/task-board.css

@@ -64,8 +64,8 @@ html, body.bespoke {
   height: 20px;
   padding: 0 6px;
   border-radius: 10px;
-  background: var(--Colors-Stroke-Default);
-  color: var(--Colors-Text-Body-Default);
+  background: color-mix(in srgb, var(--Colors-Primary-Default) 15%, transparent);
+  color: var(--Colors-Text-Body-Strongest);
   font-size: 11px;
   font-weight: 600;
 }
@@ -105,10 +105,10 @@ html, body.bespoke {
   flex-shrink: 0;
 }
 
-.bespoke .status-dot.pending    { background: var(--Colors-Base-Neutral-500); }
-.bespoke .status-dot.inprogress { background: var(--Colors-Base-Primary-500); }
-.bespoke .status-dot.blocked    { background: var(--Colors-Base-Error-500); }
-.bespoke .status-dot.done       { background: var(--Colors-Base-Success-500); }
+.bespoke .status-dot.pending    { background: var(--Colors-Base-Neutral-600); }
+.bespoke .status-dot.inprogress { background: var(--Colors-Primary-Default); }
+.bespoke .status-dot.blocked    { background: var(--Colors-Alert-Error-Default); }
+.bespoke .status-dot.done       { background: var(--Colors-Alert-Success-Default); }
 
 /* ===== TASK CARD ===== */
 
@@ -160,26 +160,32 @@ html, body.bespoke {
 
 .bespoke .task-card-priority {
   font-size: 10px;
-  font-weight: 600;
-  padding: 1px 6px;
-  border-radius: 8px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 10px;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.4px;
+  cursor: pointer;
+  transition: opacity 0.1s;
+}
+
+.bespoke .task-card-priority:hover {
+  opacity: 0.8;
 }
 
 .bespoke .task-card-priority.high {
-  background: color-mix(in srgb, var(--Colors-Base-Error-500) 15%, transparent);
-  color: var(--Colors-Base-Error-500);
+  background: var(--Colors-Base-Accent-Red-500);
+  color: #fff;
 }
 
 .bespoke .task-card-priority.medium {
-  background: color-mix(in srgb, var(--Colors-Base-Warning-500) 15%, transparent);
-  color: var(--Colors-Base-Warning-600);
+  background: var(--Colors-Base-Accent-Orange-500);
+  color: #fff;
 }
 
 .bespoke .task-card-priority.low {
-  background: color-mix(in srgb, var(--Colors-Base-Success-500) 15%, transparent);
-  color: var(--Colors-Base-Success-600);
+  background: var(--Colors-Base-Neutral-800);
+  color: #fff;
 }
 
 /* ===== DROP PLACEHOLDER ===== */
@@ -205,6 +211,12 @@ html, body.bespoke {
 
 .bespoke .add-task-form .input {
   font-size: 13px;
+  padding: 6px 8px;
+}
+
+.bespoke .add-task-form select.input {
+  appearance: auto;
+  cursor: pointer;
 }
 
 .bespoke .add-task-form-actions {

client/task-board.js

@@ -10,10 +10,9 @@ const SEED_TASKS = [
   { id: 't2', title: 'Prepare rollback runbook', desc: 'Document step-by-step rollback procedure including feature flag and DB migration revert.', status: 'pending', assignee: 'Alex R.', priority: 'high' },
   { id: 't3', title: 'Send customer notification email', desc: 'Notify enterprise customers about the upcoming v2.0 release and expected downtime window.', status: 'done', assignee: 'Marketing', priority: 'medium' },
   { id: 't4', title: 'Update API documentation', desc: 'Add docs for new endpoints introduced in v2.0.', status: 'inprogress', assignee: 'Jordan K.', priority: 'medium' },
-  { id: 't5', title: 'Investigate /api/users 500 errors', desc: 'Datadog showing ~2% error rate on /api/users since 8:45 AM. Possible race condition in connection pooling.', status: 'inprogress', assignee: 'Alex R.', priority: 'high' },
-  { id: 't6', title: 'Review onboarding flow copy', desc: 'Final copy review for the updated first-run experience.', status: 'done', assignee: 'Sarah C.', priority: 'low' },
-  { id: 't7', title: 'Deploy marketing landing page', desc: 'Blocked on engineering go/no-go decision at 9 AM.', status: 'blocked', assignee: 'Marketing', priority: 'medium' },
-  { id: 't8', title: 'Post launch announcement in #general', desc: 'Prepare Slack message for all-hands after successful deploy.', status: 'pending', assignee: 'Sarah C.', priority: 'low' }
+  { id: 't5', title: 'Review onboarding flow copy', desc: 'Final copy review for the updated first-run experience.', status: 'done', assignee: 'Sarah C.', priority: 'low' },
+  { id: 't6', title: 'Deploy marketing landing page', desc: 'Blocked on engineering go/no-go decision at 9 AM.', status: 'blocked', assignee: 'Marketing', priority: 'medium' },
+  { id: 't7', title: 'Post launch announcement in #general', desc: 'Prepare Slack message for all-hands after successful deploy.', status: 'pending', assignee: 'Sarah C.', priority: 'low' }
 ];
 
 const DATA_VERSION = 1;
@@ -111,6 +110,11 @@ function renderAddForm(colId) {
     <form class="add-task-form" data-col="${colId}">
       <input type="text" class="input" name="title" placeholder="Task title" autocomplete="off" required />
       <input type="text" class="input" name="desc" placeholder="Description (optional)" autocomplete="off" />
+      <select class="input" name="priority">
+        <option value="high">High</option>
+        <option value="medium" selected>Medium</option>
+        <option value="low">Low</option>
+      </select>
       <div class="add-task-form-actions">
         <button type="submit" class="button button-primary">Add</button>
         <button type="button" class="button button-text add-task-cancel">Cancel</button>
@@ -126,14 +130,14 @@ function handleAddClick(colId) {
   if (form) form.focus();
 }
 
-function handleAddSubmit(colId, title, desc) {
+function handleAddSubmit(colId, title, desc, priority) {
   const id = `t${nextId++}`;
-  tasks.push({ id, title, desc: desc || '', status: colId, assignee: '', priority: 'medium' });
+  tasks.push({ id, title, desc: desc || '', status: colId, assignee: '', priority: priority || 'medium' });
   saveTasks();
   _addFormColumn = null;
   renderBoard();
   if (_context.emit) {
-    _context.emit('task:added', { taskId: id, title, desc: desc || '', status: colId });
+    _context.emit('task:added', { taskId: id, title, desc: desc || '', status: colId, priority });
   }
 }
 
@@ -274,14 +278,30 @@ export function init(context = {}) {
     }
   }, { signal });
 
+  container.addEventListener('click', (e) => {
+    const badge = e.target.closest('.task-card-priority');
+    if (!badge) return;
+    const card = badge.closest('.task-card');
+    if (!card) return;
+    e.stopPropagation();
+    const task = tasks.find(t => t.id === card.dataset.taskId);
+    if (!task) return;
+    const cycle = ['low', 'medium', 'high'];
+    const idx = cycle.indexOf(task.priority);
+    task.priority = cycle[(idx + 1) % cycle.length];
+    saveTasks();
+    renderBoard();
+  }, { signal });
+
   container.addEventListener('submit', (e) => {
     e.preventDefault();
     const form = e.target.closest('.add-task-form');
     if (!form) return;
     const title = form.querySelector('input[name="title"]').value.trim();
     if (!title) return;
     const desc = form.querySelector('input[name="desc"]').value.trim();
-    handleAddSubmit(form.dataset.col, title, desc);
+    const priority = form.querySelector('select[name="priority"]').value;
+    handleAddSubmit(form.dataset.col, title, desc, priority);
   }, { signal });
 }
 

vite.config.module.js

@@ -9,6 +9,7 @@ const copyModuleAssets = {
     mkdirSync(outDir, { recursive: true });
     copyFileSync(resolve(__dirname, 'client/content.html'), resolve(outDir, 'content.html'));
     copyFileSync(resolve(__dirname, 'client/task-board.css'), resolve(outDir, 'simulation.css'));
+    copyFileSync(resolve(__dirname, 'client/help-content.html'), resolve(outDir, 'help-content.html'));
   }
 };