feat: display OpenCode todos with status on builder page

- Capture todowrite tool events and store todos on messages
- Add API endpoint GET /api/sessions/:sessionId/todos
- Clear todos on message finish, undo, and redo
- Create renderStructuredTodos function with status icons
- Integrate todo display into message rendering
- Add CSS styling for todo items by status and priority

chat/public/builder.html

@@ -926,6 +926,91 @@
       .model-option-text { font-weight:700; color:var(--ink); }
       .model-option-multiplier { margin-left:auto; background:#f5f7f9; color:var(--muted); padding:4px 8px; border-radius:999px; font-weight:700; font-size:12px; }
       #model-select-multiplier { margin-left:8px; padding:2px 8px; background:#f5f7f9; border-radius:999px; font-weight:700; font-size:12px; color:var(--muted); display:none; }
+
+      /* Todo container styles */
+      .todo-container {
+        margin: 16px 0;
+        padding: 16px;
+        background: #f8fffc;
+        border: 1px solid rgba(0, 128, 96, 0.2);
+        border-radius: 12px;
+      }
+
+      .todo-container .todo-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        padding: 10px 12px;
+        margin-bottom: 8px;
+        border-radius: 8px;
+        background: #fff;
+        border: 1px solid var(--border);
+        transition: all 0.2s ease;
+      }
+
+      .todo-container .todo-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .todo-container .todo-status-icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+      }
+
+      .todo-container .todo-content {
+        flex: 1;
+        font-size: 14px;
+        line-height: 1.4;
+        color: var(--ink);
+      }
+
+      /* Status-specific styles */
+      .todo-status-completed {
+        border-color: rgba(16, 185, 129, 0.3) !important;
+        background: rgba(16, 185, 129, 0.05) !important;
+      }
+
+      .todo-status-completed .todo-status-icon {
+        color: #10b981;
+      }
+
+      .todo-status-in_progress {
+        border-color: rgba(245, 158, 11, 0.3) !important;
+        background: rgba(245, 158, 11, 0.05) !important;
+      }
+
+      .todo-status-in_progress .todo-status-icon {
+        color: #f59e0b;
+      }
+
+      .todo-status-cancelled {
+        opacity: 0.6;
+        text-decoration: line-through;
+      }
+
+      .todo-status-cancelled .todo-status-icon {
+        color: #6b7280;
+      }
+
+      .todo-status-pending .todo-status-icon {
+        color: #9ca3af;
+      }
+
+      /* Priority badges */
+      .todo-priority-high {
+        background: #fee2e2;
+        color: #dc2626;
+      }
+
+      .todo-priority-low {
+        background: #dbeafe;
+        color: #2563eb;
+      }
     }
   </style>