[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92382":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":15,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":13,"starSnapshotCount":13,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},92382,"canvas-flow","fernandomenuk\u002Fcanvas-flow","fernandomenuk","Local HTML-artifact review tool for coding agents — render a plan as HTML, annotate it in the browser, send feedback back to the agent. Installable as an agent skill.","https:\u002F\u002Fgithub.com\u002Ffernandomenuk\u002Fcanvas-flow",null,"JavaScript",64,0,63,1,40.1,"Other",false,"main",true,[],"2026-07-22 04:02:06","\u003Cdiv align=\"center\">\n\n# 🎨 Canvas Flow\n\n### **Point at it. Don't screenshot it.**\n\nThe human-in-the-loop review layer for agent-generated HTML.\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@menukfernandoo\u002Fcanvas-flow?color=6d5cff&label=npm)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@menukfernandoo\u002Fcanvas-flow)\n[![node](https:\u002F\u002Fimg.shields.io\u002Fnode\u002Fv\u002F@menukfernandoo\u002Fcanvas-flow?color=34e0cf)](https:\u002F\u002Fnodejs.org)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@menukfernandoo\u002Fcanvas-flow?color=6d5cff)](.\u002FLICENSE)\n\n\u003C\u002Fdiv>\n\n---\n\nAgents write great HTML. Reviewing it shouldn't mean pasting screenshots and typing \"make the button on the left a bit bigger.\" Canvas Flow opens your agent's HTML in a local browser, lets you **click the element**, **select the text**, or **pick the diagram node** you mean, and sends that feedback straight back to the agent — no cloud in the loop.\n\n## 🚀 Quick start\n\nInstall the skill (no `npm install` needed — the CLI comes along on demand):\n\n```sh\nnpx skills add fernandomenuk\u002Fcanvas-flow --skill canvasflow\n```\n\nThen, in any agent that exposes skills as slash commands:\n\n```\n\u002Fcanvasflow let's review our plan here\n```\n\nOr skip the skill entirely and just tell your agent:\n\n> Use `npx @menukfernandoo\u002Fcanvas-flow` to write a plan for what we discussed.\n\n## ✨ What you get\n\n- 🖊️ **Annotate anything** — click an element, highlight text, or select a Mermaid node; your feedback carries the exact target, not a vague description.\n- 🕘 **Version history** — save checkpoints, restore any of them, and compare two side by side. Like git, but visual.\n- 🔁 **Live reload** — file changes hit the browser instantly, scroll position preserved.\n- 🚦 **Layout gate** — the real browser render is audited for overflow and overlap before you're asked to look.\n- 📦 **Export & share** — collapse an artifact into one portable HTML file, or publish an opt-in link.\n- 🏠 **Local-first** — a loopback server on your machine; the core feedback loop never leaves it.\n\n## 🔎 How it works\n\n```\n1.  Agent writes  ──►  artifact.html\n2.  You run       ──►  canvas-flow artifact.html   (opens the review browser)\n3.  You annotate  ──►  canvas-flow poll artifact.html   (delivers feedback to the agent)\n```\n\nSessions are keyed by the file path, so there are no opaque IDs to pass around. The artifact runs in a sandboxed iframe while Canvas Flow injects a small SDK for annotations and layout checks — the saved HTML still opens identically anywhere.\n\n## 🛠️ Commands\n\n| Command                          | What it does                                                                |\n| -------------------------------- | --------------------------------------------------------------------------- |\n| `canvas-flow \u003Cfile.html>`        | Open or resume a review session in your browser                             |\n| `canvas-flow poll \u003Cfile.html>`   | Long-poll until the human sends feedback or ends the session                |\n| `canvas-flow export \u003Cfile.html>` | Write a self-contained, portable copy with local assets inlined             |\n| `canvas-flow share \u003Cfile.html>`  | Publish to [ht-ml.app](https:\u002F\u002Fht-ml.app) (third-party host) and get a link |\n| `canvas-flow end \u003Cfile.html>`    | End the session                                                             |\n| `canvas-flow stop`               | Shut down the background server                                             |\n| `canvas-flow design`             | Print the Tailwind + DaisyUI CDN design fallback                            |\n\n\u003Cdetails>\n\u003Csummary>\u003Cb>Advanced\u003C\u002Fb> — session hook, sharing, and configuration\u003C\u002Fsummary>\n\n### Ambient session hook\n\nWant Canvas Flow's context (including your live open sessions) fed into every agent session automatically?\n\n```sh\nnpm install -g @menukfernandoo\u002Fcanvas-flow\ncanvas-flow setup hooks\n```\n\nThis installs a `SessionStart` hook for Claude Code, Codex, OpenCode, and GitHub Copilot CLI. Restart your agent session afterward.\n\n### Sharing safety\n\n`canvas-flow share` uploads the artifact (local assets inlined) to **ht-ml.app**, a separate third-party service. Pages are **public by default**; use `--password` to make one private. The response includes a secret `update_key`, shown once, needed to update or delete the page later. Remote assets are never fetched, and file paths outside safe asset references are redacted before upload. Don't publish secrets.\n\n### Configuration\n\n| Variable                      | Purpose                                               |\n| ----------------------------- | ----------------------------------------------------- |\n| `CANVAS_FLOW_STATE_DIR`       | Where session state lives (default `~\u002F.canvas-flow\u002F`) |\n| `CANVAS_FLOW_HOST`            | Bind address (default loopback `127.0.0.1`)           |\n| `CANVAS_FLOW_PORT`            | Server port (default `4387`)                          |\n| `CANVAS_FLOW_IDLE_TIMEOUT_MS` | Idle self-shutdown; `0`\u002F`off` to disable              |\n\n> ⚠️ Binding beyond loopback exposes an unauthenticated server that can read and serve local files. Only do it on a trusted network.\n\n\u003C\u002Fdetails>\n\n## 🧑‍💻 Development\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002Ffernandomenuk\u002Fcanvas-flow.git\ncd canvas-flow\npnpm install --frozen-lockfile\npnpm run build     # bundle the CLI, chrome, and design assets\npnpm run check     # build + lint + format + typecheck + test\n```\n\n## License\n\n[MIT](.\u002FLICENSE)\n","Canvas Flow 是一个本地化的 HTML 产物人工审核工具，专为编码智能体（coding agents）设计，支持在浏览器中直接点击、高亮或选中 HTML 元素并生成结构化反馈，闭环回传至代理。核心功能包括元素级精准标注、基于文件路径的版本快照与对比、本地环回服务下的实时热重载、布局合规性检查（溢出\u002F重叠）及单文件导出。整个流程完全离线运行，不依赖云端传输，确保隐私与响应速度。适用于 AI 编程助手生成前端方案后的高效人机协同评审场景，如 UI 原型校验、计划文档可视化复核等。",2,"2026-07-08 04:30:15","CREATED_QUERY"]