cligr 1.0.6 → 1.0.8

package/docs/superpowers/plans/2026-04-13-improve-web-ui-console.md

@@ -0,0 +1,256 @@
+# Improve Web UI Console Logging Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Enhance the web UI console panel in `cligr serve` with timestamps, system event logging, color-coded output, and a clear button.
+
+**Architecture:** Modify the embedded HTML/CSS/JS inside `src/commands/serve.ts`'s `serveHtml()` function. All changes are client-side: timestamps are generated in `appendLog`, system events are rendered when `status` SSE events arrive, and a clear button empties the log container.
+
+**Tech Stack:** TypeScript, vanilla HTML/CSS/JS embedded in a string.
+
+---
+
+### Task 1: Add console header layout and clear button
+
+**Files:**
+- Modify: `src/commands/serve.ts:232-234`
+
+- [ ] **Step 1: Update `.main h2` CSS to support a flex header with button**
+
+Replace:
+```css
+    .main h2 { font-size: 1rem; margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid #ccc; background: #f0f0f0; }
+```
+
+With:
+```css
+    .main-header { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid #ccc; background: #f0f0f0; }
+    .main-header h2 { font-size: 1rem; margin: 0; }
+    .clear-btn { font-size: 0.8rem; padding: 0.25rem 0.6rem; cursor: pointer; }
+```
+
+- [ ] **Step 2: Replace the `<h2>Console</h2>` markup with the new header**
+
+Replace:
+```html
+      <h2>Console</h2>
+```
+
+With:
+```html
+      <div class="main-header">
+        <h2>Console</h2>
+        <button class="clear-btn" id="clearBtn">Clear</button>
+      </div>
+```
+
+- [ ] **Step 3: Add clear button click handler in the script section**
+
+Add after:
+```javascript
+    const groupsEl = document.getElementById('groups');
+    const logsEl = document.getElementById('logs');
+    const resizer = document.getElementById('resizer');
+    let autoScroll = true;
+```
+
+```javascript
+    const clearBtn = document.getElementById('clearBtn');
+    clearBtn.addEventListener('click', () => {
+      logsEl.innerHTML = '';
+    });
+```
+
+- [ ] **Step 4: Typecheck**
+
+Run: `npm run typecheck`
+Expected: No errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/commands/serve.ts
+git commit -m "feat(serve): add clear button to console header"
+```
+
+---
+
+### Task 2: Add timestamp and color-coded log styling
+
+**Files:**
+- Modify: `src/commands/serve.ts:238-239` and `src/commands/serve.ts:336-342`
+
+- [ ] **Step 1: Add CSS classes for log styling**
+
+Replace:
+```css
+    .logs { flex: 1; background: #111; color: #0f0; font-family: monospace; font-size: 0.85rem; overflow-y: auto; padding: 0.75rem; white-space: pre-wrap; }
+    .error { color: #f55; }
+```
+
+With:
+```css
+    .logs { flex: 1; background: #111; color: #0f0; font-family: monospace; font-size: 0.85rem; overflow-y: auto; padding: 0.75rem; white-space: pre-wrap; }
+    .log-line { margin: 0.1rem 0; }
+    .log-time { color: #888; }
+    .log-system { color: #6cf; }
+    .log-error { color: #f55; }
+```
+
+- [ ] **Step 2: Rewrite `appendLog` to include timestamps and structured styling**
+
+Replace:
+```javascript
+    function appendLog(line, isError) {
+      const span = document.createElement('div');
+      span.textContent = line;
+      if (isError) span.className = 'error';
+      logsEl.appendChild(span);
+      if (autoScroll) logsEl.scrollTop = logsEl.scrollHeight;
+    }
+```
+
+With:
+```javascript
+    function appendLog(line, isError) {
+      const div = document.createElement('div');
+      div.className = 'log-line';
+
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      const now = new Date();
+      const hh = String(now.getHours()).padStart(2, '0');
+      const mm = String(now.getMinutes()).padStart(2, '0');
+      const ss = String(now.getSeconds()).padStart(2, '0');
+      time.textContent = `[${hh}:${mm}:${ss}] `;
+      div.appendChild(time);
+
+      const content = document.createElement('span');
+      content.textContent = line;
+      if (isError) content.className = 'log-error';
+      div.appendChild(content);
+
+      logsEl.appendChild(div);
+      if (autoScroll) logsEl.scrollTop = logsEl.scrollHeight;
+    }
+```
+
+- [ ] **Step 3: Typecheck**
+
+Run: `npm run typecheck`
+Expected: No errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/commands/serve.ts
+git commit -m "feat(serve): add timestamps and color-coded log styling"
+```
+
+---
+
+### Task 3: Log system events to the console
+
+**Files:**
+- Modify: `src/commands/serve.ts:344-354`
+
+- [ ] **Step 1: Update the `status` SSE handler to append system messages**
+
+Replace:
+```javascript
+    evtSource.addEventListener('status', (e) => {
+      fetchGroups();
+    });
+```
+
+With:
+```javascript
+    evtSource.addEventListener('status', (e) => {
+      const data = JSON.parse(e.data);
+      if (data.type === 'group-started') {
+        appendLog(`[system] Group "${data.groupName}" started`, false);
+        const groupTime = document.querySelector('.log-line:last-child span:last-child');
+        if (groupTime) groupTime.className = 'log-system';
+      } else if (data.type === 'group-stopped') {
+        appendLog(`[system] Group "${data.groupName}" stopped`, false);
+        const groupTime = document.querySelector('.log-line:last-child span:last-child');
+        if (groupTime) groupTime.className = 'log-system';
+      } else if (data.type === 'item-restarted') {
+        appendLog(`[system] Item "${data.groupName}/${data.itemName}" restarted`, false);
+        const groupTime = document.querySelector('.log-line:last-child span:last-child');
+        if (groupTime) groupTime.className = 'log-system';
+      }
+      fetchGroups();
+    });
+```
+
+Wait — the above uses `querySelector` hackily. Better: introduce an `appendSystemLog(message)` helper.
+
+Instead, replace the whole block with:
+
+```javascript
+    function appendSystemLog(message) {
+      const div = document.createElement('div');
+      div.className = 'log-line';
+
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      const now = new Date();
+      const hh = String(now.getHours()).padStart(2, '0');
+      const mm = String(now.getMinutes()).padStart(2, '0');
+      const ss = String(now.getSeconds()).padStart(2, '0');
+      time.textContent = `[${hh}:${mm}:${ss}] `;
+      div.appendChild(time);
+
+      const content = document.createElement('span');
+      content.className = 'log-system';
+      content.textContent = message;
+      div.appendChild(content);
+
+      logsEl.appendChild(div);
+      if (autoScroll) logsEl.scrollTop = logsEl.scrollHeight;
+    }
+
+    evtSource.addEventListener('status', (e) => {
+      const data = JSON.parse(e.data);
+      if (data.type === 'group-started') {
+        appendSystemLog(`[system] Group "${data.groupName}" started`);
+      } else if (data.type === 'group-stopped') {
+        appendSystemLog(`[system] Group "${data.groupName}" stopped`);
+      } else if (data.type === 'item-restarted') {
+        appendSystemLog(`[system] Item "${data.groupName}/${data.itemName}" restarted`);
+      }
+      fetchGroups();
+    });
+```
+
+- [ ] **Step 2: Typecheck**
+
+Run: `npm run typecheck`
+Expected: No errors.
+
+- [ ] **Step 3: Build**
+
+Run: `npm run build`
+Expected: Build completes successfully.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/commands/serve.ts
+git commit -m "feat(serve): log system events in web UI console"
+```
+
+---
+
+## Self-Review
+
+**Spec coverage:**
+- Timestamps: Task 2 (`appendLog` adds `[HH:MM:SS]`).
+- System events in console: Task 3 (`appendSystemLog` for `group-started`, `group-stopped`, `item-restarted`).
+- Color coding: Task 2 (`.log-time`, `.log-system`, `.log-error`) and Task 3 (uses `.log-system`).
+- Clear button: Task 1 (Clear button + click handler).
+
+**Placeholder scan:** None found. Every step has exact code, file paths, and commands.
+
+**Type consistency:** `appendLog` signature unchanged (`line, isError`). `appendSystemLog` is a new helper. All DOM APIs are standard.