Harness Demo – Superpowers Edition

https://github.com/yotpoltd/harness-demo-superpowers
Admin
Harness Demo – Superpowers Edition is a minimal TypeScript API demonstrating Harness Engineering...
Tokens:2,934
Snippets:41
Trust Score:8.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Setup the Harness Demo project

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/README.md

Commands to clone the repository, install dependencies, and verify the installation.

```bash
git clone <this-repo>
cd harness-demo-superpowers
npm install
npm test  # Verify everything works
```

--------------------------------

### Project Directory Structure

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/ARCHITECTURE.md

Visual representation of the source code and test file organization.

```text
src/
├── index.ts          # App factory + server bootstrap (serves static + API)
├── routes/todos.ts   # Todo CRUD handlers (owns todo state)
└── types.ts          # Shared type definitions (no logic)

public/
└── index.html        # Static todo UI (vanilla HTML/CSS/JS, no framework)

e2e/
└── todos.spec.ts     # Playwright E2E tests against running server
```

--------------------------------

### Define Todo App CSS Styles

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/public/index.html

Defines the layout and component styling for the Todo application interface.

```css
Todo App * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; } h1 { margin-bottom: 24px; } form { display: flex; gap: 8px; margin-bottom: 24px; } input[type="text"] { flex: 1; padding: 8px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 8px 16px; font-size: 16px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; } button:hover { background: #e5e5e5; } ul { list-style: none; } li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; } li span { flex: 1; } li button { padding: 4px 12px; font-size: 14px; color: #c00; border-color: #c00; background: transparent; } li button:hover { background: #fee; } .empty { color: #888; font-style: italic; padding: 12px 0; } .error { color: #c00; margin-bottom: 16px; padding: 8px 12px; background: #fee; border-radius: 4px; display: none; }
```

--------------------------------

### Implement Todo App JavaScript Logic

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/public/index.html

Handles DOM manipulation, event listeners, and API communication for managing todos.

```javascript
const todoList = document.querySelector('[data-testid="todo-list"]'); const todoEmpty = document.querySelector('[data-testid="todo-empty"]'); const todoError = document.querySelector('[data-testid="todo-error"]'); const todoForm = document.querySelector('[data-testid="todo-form"]'); const todoInput = document.querySelector('[data-testid="todo-input"]'); function showError(message) { todoError.textContent = message; todoError.style.display = 'block'; } function hideError() { todoError.textContent = ''; todoError.style.display = 'none'; } function renderTodos(todos) { todoList.innerHTML = ''; if (todos.length === 0) { todoEmpty.style.display = 'block'; return; } todoEmpty.style.display = 'none'; todos.forEach(function(todo) { const li = document.createElement('li'); li.setAttribute('data-testid', 'todo-item-' + todo.id); const span = document.createElement('span'); span.textContent = todo.title; const btn = document.createElement('button'); btn.setAttribute('data-testid', 'todo-delete-' + todo.id); btn.textContent = 'Delete'; btn.addEventListener('click', function() { deleteTodo(todo.id); }); li.appendChild(span); li.appendChild(btn); todoList.appendChild(li); }); } async function loadTodos() { try { const response = await fetch('/todos'); if (!response.ok) { showError('Failed to load todos'); return; } const todos = await response.json(); renderTodos(todos); } catch (err) { showError('Failed to load todos'); } } async function addTodo(title) { hideError(); try { const response = await fetch('/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: title }), }); if (!response.ok) { let errMsg = 'Failed to add todo'; try { const data = await response.json(); if (data && data.error) { errMsg = data.error; } } catch { /* non-JSON error body */ } showError(errMsg); return; } await loadTodos(); } catch (err) { showError('Failed to add todo'); } } async function deleteTodo(id) { hideError(); try { const response = await fetch('/todos/' + id, { method: 'DELETE' }); if (!response.ok) { showError('Failed to delete todo'); return; } await loadTodos(); } catch (err) { showError('Failed to delete todo'); } } todoForm.addEventListener('submit', function(e) { e.preventDefault(); const title = todoInput.value.trim(); if (title.length === 0) { return; } addTodo(title); todoInput.value = ''; }); document.addEventListener('DOMContentLoaded', loadTodos);
```

--------------------------------

### Application Data Flow

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/ARCHITECTURE.md

Sequence of operations from browser request to UI update.

```text
Browser (public/index.html)
    → fetch("/todos", ...)
    → Express middleware (JSON parsing, static serving)
    → Router (routes/todos.ts)
    → In-memory array (immutable updates)
    → JSON response
    → UI re-renders
```

--------------------------------

### Execute the Gen-Eval Loop

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/README.md

The workflow logic orchestrated by the subagent-driven-development Superpowers skill.

```text
Per task:
  Implementer subagent (fresh context, TDD)
      -> Spec reviewer subagent (fresh context, grades against spec)
      -> Code quality reviewer subagent (fresh context, grades against rules)
      -> If rejected: implementer fixes, re-review
      -> If approved: next task
```

--------------------------------

### Inspect the Reports Directory Structure

Source: https://github.com/yotpoltd/harness-demo-superpowers/blob/main/README.md

The file structure generated in the reports directory after a session.

```text
reports/
├── audit.jsonl              # Every tool call logged
├── lint-errors.json         # Last ESLint run
├── test-results.json        # Final test results
├── session-report.md        # Human-readable summary
└── reviews/                 # Subagent reviewer verdicts
    ├── 2026-04-27T10-30-00-spec-review-task1.md
    └── ...
```
Tokens:
Raw