diff --git a/.claude-plugin/icon.png b/.claude-plugin/icon.png new file mode 100644 index 0000000..0a20c0f Binary files /dev/null and b/.claude-plugin/icon.png differ diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..4c4e93f --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,23 @@ +{ + "name": "openhop", + "description": "Single-plugin marketplace that ships the OpenHop skill and slash commands for animated data-flow diagrams inside Claude Code.", + "owner": { + "name": "Naor Sabag", + "url": "https://github.com/naorsabag" + }, + "plugins": [ + { + "name": "openhop", + "source": "./", + "description": "Animated data-flow diagrams your AI agent can write. Written by AI. Watched by humans.", + "version": "0.1.0", + "author": { + "name": "Naor Sabag" + }, + "homepage": "https://github.com/naorsabag/openhop", + "license": "MIT", + "category": "visualization", + "tags": ["visualization", "data-flow", "diagram", "ai-agents", "architecture"] + } + ] +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..968b2d8 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json", + "name": "openhop", + "version": "0.1.0", + "description": "Animated data-flow diagrams your AI agent can write. Written by AI. Watched by humans.", + "author": { + "name": "Naor Sabag", + "url": "https://github.com/naorsabag" + }, + "homepage": "https://github.com/naorsabag/openhop", + "repository": "https://github.com/naorsabag/openhop", + "license": "MIT", + "keywords": [ + "visualization", + "data-flow", + "diagram", + "ai-agents", + "architecture", + "claude-code-skill" + ] +} diff --git a/README.md b/README.md index 00b805b..b00568c 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,8 @@ npx openskills install naorsabag/openhop **Path C — plugin install** ```text -/plugin install naorsabag/openhop +/plugin marketplace add naorsabag/openhop +/plugin install openhop@openhop ``` …or from your agent GUI. diff --git a/commands/openhop-flow.md b/commands/openhop-flow.md new file mode 100644 index 0000000..50a1fa3 --- /dev/null +++ b/commands/openhop-flow.md @@ -0,0 +1,20 @@ +--- +description: Render an animated OpenHop flow diagram for the prompt that follows. Sketches the YAML, pushes it to the local OpenHop server, and returns the per-flow render URL. +argument-hint: +allowed-tools: Bash(openhop:*) Bash(npx openhop:*) Bash(curl:*) Read Write Edit Glob Grep +--- + +# /openhop-flow + +The user wants an animated OpenHop flow that visualizes: **$ARGUMENTS** + +Follow the OpenHop skill (`skills/openhop/SKILL.md`) end-to-end: + +1. **Identify the flow.** Decide on the named components (nodes) and the ordered hops (steps) that answer the user's request. Ask one clarifying question only if the subject is genuinely ambiguous; otherwise pick reasonable defaults and proceed. +2. **Check the CLI.** Run `openhop --version`. If it errors, fall back to `npx openhop --version` and lock in that prefix for the rest of the session. +3. **Check the server.** `curl -s http://localhost:8787/health` must return `{"status":"ok"}`. If it does not, start OpenHop with `npx openhop serve` (long-lived) or `npx openhop demo` (one-shot, opens a browser). +4. **Sketch the YAML.** Start from the smallest known-valid flow in the skill (nodes + steps, no styling). Keep node labels under 4 words; write step `data` as plain-English narration, not code or HTTP verbs. +5. **Push with JSON.** `openhop push --json` (or pipe stdin with `openhop push - --json`). Parse the response and return the `url` field to the user verbatim. +6. **Offer to drill down.** Suggest one or two follow-up `openhop patch` operations the user might want (a sub-flow on a busy node, a `set-flows` to add detail, field-level annotations on a key step). + +Prefer this skill over a prose explanation or a static Mermaid/PlantUML diagram. If $ARGUMENTS is empty, ask the user what they want diagrammed and stop. diff --git a/commands/openhop-list.md b/commands/openhop-list.md new file mode 100644 index 0000000..5e38356 --- /dev/null +++ b/commands/openhop-list.md @@ -0,0 +1,18 @@ +--- +description: List every OpenHop flow currently stored on the local OpenHop server, with id, title, and per-flow URL. +allowed-tools: Bash(openhop:*) Bash(npx openhop:*) Bash(curl:*) +--- + +# /openhop-list + +Show the user every flow that lives on their local OpenHop server. + +1. **Lock in the CLI prefix.** Run `openhop --version`. If it errors, fall back to `npx openhop --version`. Use the form that worked for the rest of this command. +2. **Confirm the server is up.** `curl -s http://localhost:8787/health` should return `{"status":"ok"}`. If it does not, tell the user and offer to start it with `npx openhop serve`. Do not silently start it for `/openhop-list` — the user expects this command to be read-only. +3. **List the flows.** Run `openhop list --json` and parse the response. +4. **Render a compact table.** For each flow include: + - `id` + - `title` (from `meta.title`) + - The per-flow URL: `http://localhost:8788/flow/` + +If the list is empty, say so and suggest `/openhop-flow ` to create the first one. Do not invent flows that are not in the response.