cctd-web 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cctd-web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Lightweight web viewer for CCTD .tasks/ directory",
   "bin": {
     "cctd-web": "./bin/cctd-web.js"

package/public/index.html

@@ -164,6 +164,20 @@ a{color:var(--accent);text-decoration:none}
 </div>
 
 <div class="filter-bar" id="filterBar">
+  <label>Story Status:</label>
+  <select id="filterStoryStatus">
+    <option value="">All</option>
+    <option value="active">Active (non-DONE)</option>
+    <option value="BACKLOG">BACKLOG</option>
+    <option value="DEFINED">DEFINED</option>
+    <option value="AI_READY">AI_READY</option>
+    <option value="IN_PROGRESS">IN_PROGRESS</option>
+    <option value="TESTING">TESTING</option>
+    <option value="REVIEW">REVIEW</option>
+    <option value="DONE">DONE</option>
+  </select>
+  <label>Story Label:</label>
+  <select id="filterStoryLabel"><option value="">All</option></select>
   <label>Story:</label>
   <select id="filterStory"><option value="">All</option></select>
   <label>Priority:</label>
@@ -189,7 +203,7 @@ const STATUS_COLORS = {BACKLOG:'var(--backlog)',DEFINED:'var(--defined)',AI_READ
 let data = {stories:[], tasks:[]};
 let activityLog = [];
 let view = 'kanban';
-let filters = {story:'', priority:''};
+let filters = {storyStatus:'', storyLabel:'', story:'', priority:''};
 
 // Normalize status
 function norm(s){return STATUS_ALIASES[s?.toUpperCase()] || s?.toUpperCase() || 'BACKLOG';}
@@ -229,6 +243,8 @@ document.querySelectorAll('.view-toggle button').forEach(btn => {
 });
 
 // Filters
+document.getElementById('filterStoryStatus').addEventListener('change', e => {filters.storyStatus = e.target.value; render();});
+document.getElementById('filterStoryLabel').addEventListener('change', e => {filters.storyLabel = e.target.value; render();});
 document.getElementById('filterStory').addEventListener('change', e => {filters.story = e.target.value; render();});
 document.getElementById('filterPriority').addEventListener('change', e => {filters.priority = e.target.value; render();});
 
@@ -320,9 +336,38 @@ function esc(s){
   return d.innerHTML;
 }
 
+function getFilteredStories(){
+  let stories = data.stories;
+  if(filters.storyStatus){
+    if(filters.storyStatus === 'active'){
+      stories = stories.filter(s => norm(s.status) !== 'DONE');
+    } else {
+      stories = stories.filter(s => norm(s.status) === filters.storyStatus);
+    }
+  }
+  if(filters.storyLabel){
+    stories = stories.filter(s => (s.labels||[]).some(l => l.toLowerCase() === filters.storyLabel.toLowerCase()));
+  }
+  if(filters.story){
+    stories = stories.filter(s => s.id === filters.story);
+  }
+  return stories;
+}
+
 function getFiltered(){
+  const matchedStories = getFilteredStories();
+  const storyIds = new Set(matchedStories.map(s => s.id));
   let tasks = data.tasks;
-  if(filters.story) tasks = tasks.filter(t => t.story === filters.story || t.id?.startsWith(filters.story));
+
+  // If any story filter is active, restrict to matching stories' tasks
+  const hasStoryFilter = filters.storyStatus || filters.storyLabel || filters.story;
+  if(hasStoryFilter){
+    tasks = tasks.filter(t => {
+      const sid = t.story || (t.id?.includes('-') ? t.id.split('-')[0] : '');
+      return sid && storyIds.has(sid);
+    });
+  }
+
   if(filters.priority) tasks = tasks.filter(t => (t.priority||'medium').toLowerCase() === filters.priority);
   return tasks;
 }
@@ -348,19 +393,35 @@ function updateStats(){
 }
 
 function updateStoryFilter(){
+  // Story dropdown — show only stories that pass status+label filters
+  const filtered = getFilteredStories();
   const sel = document.getElementById('filterStory');
   const cur = sel.value;
-  const opts = data.stories.map(s => `<option value="${esc(s.id)}">${esc(s.id)} - ${esc(s.title)}</option>`);
+  const opts = filtered.map(s => `<option value="${esc(s.id)}">${esc(s.id)} - ${esc(s.title)}</option>`);
   sel.innerHTML = `<option value="">All</option>` + opts.join('');
   sel.value = cur;
+
+  // Story label dropdown — collect all unique labels
+  const labelSel = document.getElementById('filterStoryLabel');
+  const curLabel = labelSel.value;
+  const allLabels = new Set();
+  data.stories.forEach(s => (s.labels||[]).forEach(l => allLabels.add(l)));
+  const labelOpts = [...allLabels].sort().map(l => `<option value="${esc(l)}">${esc(l)}</option>`);
+  labelSel.innerHTML = `<option value="">All</option>` + labelOpts.join('');
+  labelSel.value = curLabel;
 }
 
 function renderKanban(){
   const tasks = getFiltered();
   const main = document.getElementById('main');
+  const hasStoryFilter = filters.storyStatus || filters.storyLabel || filters.story;
 
-  if(!tasks.length && !data.stories.length){
-    main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+  if(!tasks.length){
+    if(!data.stories.length && !data.tasks.length){
+      main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+    } else {
+      main.innerHTML = `<div class="empty"><h2>No matching tasks</h2><p>Try adjusting your filters.</p></div>`;
+    }
     return;
   }
 
@@ -393,8 +454,12 @@ function renderList(){
   const tasks = getFiltered();
   const main = document.getElementById('main');
 
-  if(!tasks.length && !data.stories.length){
-    main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+  if(!tasks.length){
+    if(!data.stories.length && !data.tasks.length){
+      main.innerHTML = `<div class="empty"><h2>No tasks found</h2><p>Create tasks with CCTD to see them here.</p><code>/cctd init</code></div>`;
+    } else {
+      main.innerHTML = `<div class="empty"><h2>No matching tasks</h2><p>Try adjusting your filters.</p></div>`;
+    }
     return;
   }