better-grill 0.3.2 → 0.4.0

package/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "better-grill",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Run grill sessions in a local browser UI instead of the terminal: rounds of questions with options and a recommendation, a discussion thread per question, driven by your open Claude Code session.",
   "author": {
     "name": "Jakub Stastny",

package/README.md

@@ -67,13 +67,16 @@ You also need [Node.js](https://nodejs.org) 20+ and the [`grilling`](https://git
 <table>
 <tr>
 <td width="33%" valign="top"><b>One question at a time</b><br>Rounds step through their questions, with Claude's context, trade-offs and tables.</td>
-<td width="33%" valign="top"><b>Claude's pick on each</b><br>Take it, choose another option, write your own answer, or add a note.</td>
+<td width="33%" valign="top"><b>Claude's pick on each</b><br>Take it, choose another option, write your own answer, add a note, or paste a screenshot.</td>
 <td width="33%" valign="top"><b>A thread per question</b><br>Push back on one question; Claude rewords, resolves, drops or adds questions.</td>
 </tr>
 <tr>
 <td width="33%" valign="top"><b>Lock in, then send</b><br>Answer in any order, change your mind, send the round when it's settled.</td>
 <td width="33%" valign="top"><b>A summary at the end</b><br>Every decision in one place. Confirm it, or keep grilling.</td>
-<td width="33%" valign="top"><b>Keyboard first</b><br><kbd>↑</kbd> <kbd>↓</kbd> walk the options, <kbd>Enter</kbd> locks in, <kbd>D</kbd> opens the discussion, <kbd>[</kbd> folds the sidebar.</td>
+<td width="33%" valign="top"><b>Keyboard first</b><br><kbd>↑</kbd> <kbd>↓</kbd> walk the options, <kbd>Enter</kbd> locks in, <kbd>D</kbd> opens the discussion, <kbd>V</kbd> shows the visualization, <kbd>[</kbd> folds the sidebar.</td>
+</tr>
+<tr>
+<td colspan="3" valign="top"><b>Visualize any question</b><br>Press Visualize and Claude turns the question into an interactive page, right in the app, so it's easier to understand. Keep answering while it works.</td>
 </tr>
 </table>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-grill",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Grill sessions for Claude Code, in your browser instead of the terminal.",
   "keywords": [
     "ai",
@@ -33,6 +33,7 @@
     "skills/better-grill/SKILL.md",
     "skills/better-grill-docs/SKILL.md",
     "skills/better-grill-base/SKILL.md",
+    "skills/better-grill-base/visualize.md",
     "skills/better-grill-base/dist"
   ],
   "scripts": {

package/skills/better-grill-base/SKILL.md

@@ -2,7 +2,9 @@
 name: better-grill-base
 description: Internal. Shared instructions loaded by the better-grill and better-grill-docs skills. Do not invoke directly.
 user-invocable: false
-allowed-tools: Bash(node "${CLAUDE_SKILL_DIR}/dist/cli.js" *)
+allowed-tools:
+  - Bash(node "${CLAUDE_SKILL_DIR}/dist/cli.js" *)
+  - Read(~/.better-grill/images/**)
 ---
 
 # Better Grill
@@ -90,13 +92,15 @@ Output:
 {
   "events": [
     { "type": "answer", "questionId": "Q2", "title": "…", "choices": ["Label"], "text": "note or own answer", "revised": false, "by": "user" },
-    { "type": "chat", "questionId": "Q3", "title": "…", "text": "user message" }
+    { "type": "chat", "questionId": "Q3", "title": "…", "text": "on [Image 1] the header is too big", "images": ["/Users/…/.better-grill/images/62950-a1b2c3/img1.png"] }
   ],
   "open": [{ "id": "Q3", "title": "…" }]
 }
 ```
 
-`open` lists questions still unanswered after these events. A wait that returns only `chat` events means the round is still in progress: handle the chat, then wait again.
+`open` lists questions still unanswered after these events. A wait that returns only `chat` or `visualize` events means the round is still in progress: handle them, then wait again.
+
+`images` (on `answer` and `chat`, only when present) lists absolute paths of images the user pasted or dropped in: screenshots, sketches, diagrams. The user places each image inside their text, where it shows up as `[Image N]`: `[Image 1]` is `images[0]`, `[Image 2]` is `images[1]`, and so on. Read every image with the Read tool before you act on the event; they are part of what the user said, and the text around each marker tells you what it is about. When you reply about one, name it the same way ("in Image 2, …"). The files are deleted when the bridge stops.
 
 ## 5. Handle events
 
@@ -112,6 +116,11 @@ Output:
   ```
 
   Keep replies conversational and short. Then act on what the talk settled (next section). Never tell the user to go lock in an answer the two of you already agreed on.
+- **visualize** (`{ "type": "visualize", "questionId": "Q3", "title": "…", "note": "focus on the failure case" }`): the user pressed Visualize and wants the question visualized as an interactive page, shown in the UI. That takes a while, so hand it to a background sub-agent (Agent tool, `run_in_background: true`) and carry on with the grill. Give it this prompt, with the handle and id filled in:
+
+  > Run `node "${CLAUDE_SKILL_DIR}/dist/cli.js" visualize -s SESSION Q3 --brief`. It prints how to build the visualization, the question and the command that posts the page. Follow it exactly, post the page, and reply with one line.
+
+  Without sub-agents, run that brief yourself once the other events are handled. Don't reply in the thread about it: the UI shows the progress and the result. `note` is what the user wants to see; the brief includes it.
 - **summary_confirmed / summary_rejected / ended**: see step 6.
 
 ## 5b. Shape questions from the discussion