feat(ui): add MicroSteps expand/collapse to WipTaskList; exclude subtasks from WIP count

src/lib/components/WipTaskList.svelte

@@ -1,13 +1,16 @@
 <script>
   import { tasks, addTask, completeTask, uncompleteTask, deleteTask } from '$lib/stores/page.svelte.js';
-  import { ChevronDown } from 'lucide-svelte';
+  import MicroSteps from '$lib/components/MicroSteps.svelte';
+  import { ChevronDown, ChevronRight } from 'lucide-svelte';
 
   let { wipLimit = 3 } = $props();
 
   let newTaskText = $state('');
   let showOverflow = $state(false);
+  let expandedTaskIds = $state(new Set());
 
-  let activeTasks = $derived(tasks.filter(t => !t.done));
+  // Exclude subtasks from WIP count — only top-level tasks count
+  let activeTasks = $derived(tasks.filter(t => !t.done && !t.parentTaskId));
   let visibleTasks = $derived(activeTasks.slice(0, wipLimit));
   let overflowTasks = $derived(activeTasks.slice(wipLimit));
   let hasOverflow = $derived(overflowTasks.length > 0);
@@ -22,6 +25,16 @@
   function handleKeydown(e) {
     if (e.key === 'Enter') handleAdd();
   }
+
+  function toggleExpand(taskId) {
+    const next = new Set(expandedTaskIds);
+    if (next.has(taskId)) {
+      next.delete(taskId);
+    } else {
+      next.add(taskId);
+    }
+    expandedTaskIds = next;
+  }
 </script>
 
 <div class="flex flex-col gap-3">
@@ -44,6 +57,8 @@
   {:else}
     <div class="flex flex-col gap-1">
       {#each visibleTasks as task (task.id)}
+        <div>
+          <!-- Task row -->
           <div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-hover group"
             style="transition-duration: var(--duration-ui)">
             <button
@@ -51,9 +66,21 @@
                 hover:border-accent"
               onclick={() => completeTask(task.id)}
               aria-label="Complete task"
-          >
-          </button>
+            ></button>
             <span class="text-[13px] text-text flex-1 min-w-0 truncate">{task.text}</span>
+            <!-- Expand/collapse micro-steps toggle -->
+            <button
+              class="opacity-0 group-hover:opacity-100 text-text-tertiary hover:text-accent"
+              onclick={() => toggleExpand(task.id)}
+              aria-label={expandedTaskIds.has(task.id) ? 'Collapse steps' : 'Expand steps'}
+              style="transition: opacity var(--duration-ui)"
+            >
+              {#if expandedTaskIds.has(task.id)}
+                <ChevronDown size={12} aria-hidden="true" />
+              {:else}
+                <ChevronRight size={12} aria-hidden="true" />
+              {/if}
+            </button>
             <button
               class="text-text-tertiary hover:text-danger opacity-0 group-hover:opacity-100 text-[11px]"
               onclick={() => deleteTask(task.id)}
@@ -62,6 +89,11 @@
               &times;
             </button>
           </div>
+          <!-- Micro-steps panel (expanded) -->
+          {#if expandedTaskIds.has(task.id)}
+            <MicroSteps parentTaskId={task.id} />
+          {/if}
+        </div>
       {/each}
     </div>
   {/if}