|
|
@@ -0,0 +1,72 @@
|
|
|
+# Visual Companion Reference
|
|
|
+
|
|
|
+## Starting the Server
|
|
|
+
|
|
|
+Run as a background job:
|
|
|
+
|
|
|
+```bash
|
|
|
+node ${PLUGIN_ROOT}/lib/brainstorm-server/index.js
|
|
|
+```
|
|
|
+
|
|
|
+Tell the user: "I've started a visual companion at http://localhost:3333 - open it in a browser."
|
|
|
+
|
|
|
+## Pushing Screens
|
|
|
+
|
|
|
+Write HTML to `/tmp/brainstorm/screen.html`. The server watches this file and auto-refreshes the browser.
|
|
|
+
|
|
|
+## Reading User Responses
|
|
|
+
|
|
|
+Check the background task output for JSON events:
|
|
|
+
|
|
|
+```json
|
|
|
+{"type":"user-event","type":"click","text":"Option A","choice":"optionA","timestamp":1234567890}
|
|
|
+{"type":"user-event","type":"submit","data":{"notes":"My feedback"},"timestamp":1234567891}
|
|
|
+```
|
|
|
+
|
|
|
+Event types:
|
|
|
+- **click**: User clicked button or `data-choice` element
|
|
|
+- **submit**: User submitted form (includes all form data)
|
|
|
+- **input**: User typed in field (debounced 500ms)
|
|
|
+
|
|
|
+## HTML Patterns
|
|
|
+
|
|
|
+### Choice Cards
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="options">
|
|
|
+ <button data-choice="optionA">
|
|
|
+ <h3>Option A</h3>
|
|
|
+ <p>Description</p>
|
|
|
+ </button>
|
|
|
+ <button data-choice="optionB">
|
|
|
+ <h3>Option B</h3>
|
|
|
+ <p>Description</p>
|
|
|
+ </button>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+### Interactive Mockup
|
|
|
+
|
|
|
+```html
|
|
|
+<div class="mockup">
|
|
|
+ <header data-choice="header">App Header</header>
|
|
|
+ <nav data-choice="nav">Navigation</nav>
|
|
|
+ <main data-choice="main">Content</main>
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
+### Form with Notes
|
|
|
+
|
|
|
+```html
|
|
|
+<form>
|
|
|
+ <label>Priority: <input type="range" name="priority" min="1" max="5"></label>
|
|
|
+ <textarea name="notes" placeholder="Additional thoughts..."></textarea>
|
|
|
+ <button type="submit">Submit</button>
|
|
|
+</form>
|
|
|
+```
|
|
|
+
|
|
|
+### Explicit JavaScript
|
|
|
+
|
|
|
+```html
|
|
|
+<button onclick="brainstorm.choice('custom', {extra: 'data'})">Custom</button>
|
|
|
+```
|