Use semantic filenames for visual companion screens

Server now watches directory for new .html files instead of a single
screen file. Claude writes to semantically named files like
platform.html, style.html, layout.html - each screen is a new file.

Benefits:
- No need to read before write (files are always new)
- Semantic filenames describe what's on screen
- History preserved in directory for debugging
- Server serves newest file by mtime automatically

Updated: index.js, start-server.sh, and all documentation.
This commit is contained in:
Jesse Vincent
2026-01-17 19:32:02 -08:00
parent 5bacd0fd3c
commit e6d3c5ce15
5 changed files with 80 additions and 43 deletions

View File

@@ -15,27 +15,33 @@ Use the visual companion when you need to show:
## Lifecycle
```bash
# Start server (returns JSON with URL and session paths)
# Start server (returns JSON with URL and session directory)
${CLAUDE_PLUGIN_ROOT}/lib/brainstorm-server/start-server.sh
# Returns: {"type":"server-started","port":52341,"url":"http://localhost:52341",
# "screen_dir":"/tmp/brainstorm-12345-1234567890",
# "screen_file":"/tmp/brainstorm-12345-1234567890/screen.html"}
# "screen_dir":"/tmp/brainstorm-12345-1234567890"}
# Save screen_dir and screen_file from response!
# Save screen_dir from response!
# Tell user to open the URL in their browser
# Write screens to screen_file (auto-refreshes)
# Wait for user feedback:
# 1. Start watcher in background
${CLAUDE_PLUGIN_ROOT}/lib/brainstorm-server/wait-for-event.sh $SCREEN_DIR/.server.log
# 2. Immediately call TaskOutput(task_id, block=true) to wait for completion
# For each screen:
# 1. Start watcher in background FIRST (avoids race condition)
${CLAUDE_PLUGIN_ROOT}/lib/brainstorm-server/wait-for-feedback.sh $SCREEN_DIR
# 2. Write HTML to a NEW file in screen_dir (e.g., platform.html, style.html)
# Server automatically serves the newest file by modification time
# 3. Call TaskOutput(task_id, block=true, timeout=600000) to wait for feedback
# When done, stop server (pass screen_dir)
${CLAUDE_PLUGIN_ROOT}/lib/brainstorm-server/stop-server.sh $SCREEN_DIR
```
## File Naming
- **Use semantic names**: `platform.html`, `visual-style.html`, `layout.html`, `controls.html`
- **Never reuse filenames** - each screen must be a new file
- **For iterations**: append version suffix like `layout-v2.html`, `layout-v3.html`
- Server automatically serves the newest `.html` file by modification time
## Writing Screens
Copy the frame template structure but replace `#claude-content` with your content: