cligr 1.0.7 → 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.

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

@@ -0,0 +1,38 @@
+# Improve Web UI Console Logging
+
+## Goal
+Enhance the web UI console panel in `cligr serve` with timestamps, system event logging, color-coded output, and a clear button.
+
+## Changes
+
+### 1. Timestamps
+- Every log line in the console gets an `[HH:MM:SS]` prefix.
+- Generated client-side in the `appendLog` function using `new Date().toLocaleTimeString()`.
+
+### 2. System Events in Console
+- When the `status` SSE event fires, log human-readable messages to the console:
+  - `group-started` → `[system] Group "<name>" started`
+  - `group-stopped` → `[system] Group "<name>" stopped`
+  - `item-restarted` → `[system] Item "<group/item>" restarted`
+
+### 3. Color Coding (CSS Classes)
+- `.log-time` — muted gray timestamp
+- `.log-system` — blue/purple for system events
+- `.log-error` — red for stderr lines
+- Process stdout stays default green (existing `#0f0` on `#111`)
+
+### 4. Clear Button
+- A "Clear" button is added to the console header next to the "Console" title.
+- Clicking it empties the `#logs` element.
+
+## Scope
+- Only `src/commands/serve.ts` is modified (specifically the `serveHtml()` function).
+- No backend or SSE protocol changes.
+- No new dependencies.
+
+## Success Criteria
+- Console lines show `[HH:MM:SS]` prefix.
+- Toggling a group on/off logs a system message in the console.
+- Restarting an item logs a system message in the console.
+- The Clear button removes all visible log lines.
+- Existing process output behavior remains unchanged.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cligr",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "bin": {
     "cligr": "dist/index.js"

package/src/commands/serve.ts

@@ -230,13 +230,18 @@ function serveHtml(): string {
     .resizer { width: 6px; background: #e0e0e0; cursor: col-resize; flex-shrink: 0; }
     .resizer:hover { background: #bbb; }
     .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-    .main h2 { font-size: 1rem; margin: 0; padding: 0.5rem 1rem; border-bottom: 1px solid #ccc; background: #f0f0f0; }
+    .main-header { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; 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; }
     .group { border: 1px solid #ccc; border-radius: 6px; padding: 0.75rem; margin: 0 0 0.75rem 0; background: #fff; }
     .group-header { display: flex; align-items: center; gap: 0.5rem; font-weight: bold; font-size: 1rem; }
     .items { margin: 0.5rem 0 0 1.25rem; }
     .item { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0; font-size: 0.9rem; }
     .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; }
+    .log-line { margin: 0.1rem 0; }
+    .log-time { color: #888; }
+    .log-system { color: #6cf; }
+    .log-error { color: #f55; }
   </style>
 </head>
 <body>
@@ -245,7 +250,10 @@ function serveHtml(): string {
     <div class="sidebar" id="groups"></div>
     <div class="resizer" id="resizer"></div>
     <div class="main">
-      <h2>Console</h2>
+      <div class="main-header">
+        <h2>Console</h2>
+        <button class="clear-btn" id="clearBtn">Clear</button>
+      </div>
       <div class="logs" id="logs"></div>
     </div>
   </div>
@@ -256,6 +264,11 @@ function serveHtml(): string {
     const resizer = document.getElementById('resizer');
     let autoScroll = true;
 
+    const clearBtn = document.getElementById('clearBtn');
+    clearBtn.addEventListener('click', () => {
+      logsEl.innerHTML = '';
+    });
+
     resizer.addEventListener('mousedown', (e) => {
       e.preventDefault();
       document.body.style.cursor = 'col-resize';
@@ -333,16 +346,60 @@ function serveHtml(): string {
       autoScroll = logsEl.scrollTop + logsEl.clientHeight >= logsEl.scrollHeight - 10;
     });
 
+    function formatTime() {
+      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');
+      return \`[\${hh}:\${mm}:\${ss}] \`;
+    }
+
     function appendLog(line, isError) {
-      const span = document.createElement('div');
-      span.textContent = line;
-      if (isError) span.className = 'error';
-      logsEl.appendChild(span);
+      const div = document.createElement('div');
+      div.className = 'log-line';
+
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      time.textContent = formatTime();
+      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;
+    }
+
+    function appendSystemLog(message) {
+      const div = document.createElement('div');
+      div.className = 'log-line';
+
+      const time = document.createElement('span');
+      time.className = 'log-time';
+      time.textContent = formatTime();
+      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;
     }
 
     const evtSource = new EventSource('/api/events');
     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();
     });
     evtSource.addEventListener('log', (e) => {