@dorsk/yubisashi 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dorsk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# yubisashi 指差し
+
+Point at your running app, say what's wrong, and the coding agent working on it gets the
+element's source `file:line`, the components that rendered it, and your comment. It answers,
+edits, and hot-reload shows you the result. The agent's conversation streams in a panel next to
+the app.
+
+![pick mode](docs/pick.png)
+
+## How it works
+
+`yubi up` puts a small proxy in front of your dev server. Everything passes through to the app,
+including HMR websockets. Frame-blocking headers are stripped, so the app can be shown inside
+the review shell at `/__yubi/`:
+
+- **Comment**: press `C` or the ⌖ button, then click an element. Shift-click adds more
+  elements; `Esc` cancels. A glass layer takes the clicks, so the app doesn't react, and
+  disabled controls can be picked too.
+- **Source location** comes from Svelte 5's dev-mode `__svelte_meta`, which gives exact
+  `file:line:col` plus the component chain. For other frameworks you still get the selector,
+  text and HTML.
+- **Conversation tab**: follows the agent's Claude Code transcript live
+  (`~/.claude/projects/*/<session>.jsonl`).
+- **Comments tab**: one thread per comment, with status and a pin on the element.
+
+Your comments reach the agent through `yubi wait`. The agent runs it as a background command,
+it blocks until you send something, then exits with your messages. Claude Code wakes the agent
+when a background command exits, so it needs no MCP server, no special launch flags, and no
+polling. The same works in any Claude Code session, including cctui ones.
+
+![comments](docs/comments.png)
+
+## Use
+
+```sh
+# from the app directory, as a background command in the agent's session
+yubi up --target http://localhost:5173 -- npm run dev
+yubi url            # the link to open (carries the access token)
+yubi wait           # background: exits with the user's next messages
+yubi reply 3 "…"    # answer in thread #3
+yubi resolve 3 "…"  # close it with what changed
+yubi dismiss 3 "…"  # close it without acting
+yubi list [--all]
+```
+
+`skill/SKILL.md` teaches an agent this loop. Link it into `~/.claude/skills/yubisashi` so every
+session knows it.
+
+State lives in `.yubisashi/` in the app directory. It's added to `.git/info/exclude`
+automatically and holds the comments, the token and the server address.
+
+## Security
+
+The API lets anyone who can reach it inject prompts into your agent's session. It binds to
+127.0.0.1 by default, and every API call needs the random token in `.yubisashi/token`, which
+also stops other sites in your browser from posting to it. Think twice before `--host 0.0.0.0`.
+
+## Develop
+
+Node ≥ 22.18 runs the TypeScript sources directly; there is no build step.
+
+```sh
+npm install
+npm test        # unit, proxy/API integration, and a Playwright end-to-end run
+npm run check   # tsc + biome
+```

package/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "@dorsk/yubisashi",
+	"version": "0.1.0",
+	"description": "Point at your running app, comment, and hand it to the coding agent working on it.",
+	"type": "module",
+	"license": "MIT",
+	"author": "Dorsk <dorsk.dev@gmail.com>",
+	"engines": {
+		"node": ">=22.18"
+	},
+	"bin": {
+		"yubi": "src/cli.ts"
+	},
+	"files": [
+		"src",
+		"shell",
+		"skill"
+	],
+	"scripts": {
+		"check": "tsc -p tsconfig.json && biome check .",
+		"format": "biome check --write .",
+		"test": "node --test test/*.test.ts"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.2.0",
+		"@types/node": "^22.18.0",
+		"playwright": "^1.55.0",
+		"typescript": "^5.9.0"
+	}
+}

package/shell/app.css

@@ -0,0 +1,436 @@
+:root {
+	--bg: #111214;
+	--panel: #18191c;
+	--raised: #212226;
+	--line: #2c2e33;
+	--text: #e6e6e8;
+	--muted: #8b8d94;
+	--accent: #f0883e;
+	--ok: #3fb950;
+	--warn: #d29922;
+	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+	--mono: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
+	color-scheme: dark;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	display: flex;
+	background: var(--bg);
+	color: var(--text);
+	font: 13px / 1.45 var(--font);
+}
+
+button {
+	font: inherit;
+	color: inherit;
+	background: var(--raised);
+	border: 1px solid var(--line);
+	border-radius: 6px;
+	padding: 4px 10px;
+	cursor: pointer;
+}
+
+button:hover {
+	border-color: var(--muted);
+}
+
+#stage {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+#bar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--line);
+}
+
+#bar a {
+	color: var(--muted);
+	text-decoration: none;
+	padding: 0 4px;
+}
+
+#pick.on {
+	background: var(--accent);
+	border-color: var(--accent);
+	color: #111;
+}
+
+#route {
+	flex: 1;
+	color: var(--muted);
+	font-family: var(--mono);
+	font-size: 12px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+#viewport {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+}
+
+#app {
+	width: 100%;
+	height: 100%;
+	border: 0;
+	background: #fff;
+	display: block;
+}
+
+#glass {
+	position: absolute;
+	inset: 0;
+	cursor: crosshair;
+}
+
+#glass[hidden] {
+	display: none;
+}
+
+#overlay {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.box {
+	position: absolute;
+	border: 2px solid var(--accent);
+	border-radius: 3px;
+	background: rgb(240 136 62 / 0.08);
+}
+
+.box.hover {
+	border-style: dashed;
+	background: rgb(240 136 62 / 0.05);
+}
+
+.box .tag {
+	position: absolute;
+	top: -20px;
+	left: -2px;
+	padding: 1px 6px;
+	border-radius: 3px 3px 3px 0;
+	background: var(--accent);
+	color: #111;
+	font: 11px / 18px var(--mono);
+	white-space: nowrap;
+}
+
+.pin {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	margin: -11px 0 0 -11px;
+	border-radius: 11px 11px 11px 2px;
+	background: var(--accent);
+	color: #111;
+	font: 600 11px / 22px var(--font);
+	text-align: center;
+	pointer-events: auto;
+	cursor: pointer;
+	box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
+}
+
+#panel {
+	width: 420px;
+	display: flex;
+	flex-direction: column;
+	background: var(--panel);
+	border-left: 1px solid var(--line);
+}
+
+#panel > header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 10px;
+	border-bottom: 1px solid var(--line);
+}
+
+.tabs {
+	display: flex;
+	gap: 4px;
+}
+
+.tabs button {
+	background: none;
+	border-color: transparent;
+	color: var(--muted);
+}
+
+.tabs button.active {
+	color: var(--text);
+	background: var(--raised);
+	border-color: var(--line);
+}
+
+#status {
+	font-size: 12px;
+	color: var(--muted);
+}
+
+#status::before {
+	content: "";
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	margin-right: 6px;
+	border-radius: 50%;
+	background: var(--warn);
+}
+
+#status.on::before {
+	background: var(--ok);
+}
+
+.feed {
+	flex: 1;
+	overflow-y: auto;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.feed > * {
+	flex-shrink: 0;
+}
+
+.feed[hidden] {
+	display: none;
+}
+
+.empty {
+	color: var(--muted);
+	text-align: center;
+	margin: auto 0;
+}
+
+.msg {
+	max-width: 100%;
+	overflow-wrap: anywhere;
+}
+
+.msg.user {
+	align-self: flex-end;
+	max-width: 88%;
+	background: var(--raised);
+	border: 1px solid var(--line);
+	border-radius: 10px 10px 2px 10px;
+	padding: 6px 10px;
+	white-space: pre-wrap;
+}
+
+.msg.assistant p {
+	margin: 0 0 6px;
+}
+
+.msg.tool {
+	color: var(--muted);
+	font: 11.5px / 1.4 var(--mono);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.msg.event {
+	align-self: center;
+	color: var(--muted);
+	font-size: 11.5px;
+}
+
+code {
+	font-family: var(--mono);
+	font-size: 12px;
+	background: var(--raised);
+	padding: 0 4px;
+	border-radius: 4px;
+}
+
+pre {
+	background: var(--bg);
+	border: 1px solid var(--line);
+	border-radius: 6px;
+	padding: 8px;
+	overflow-x: auto;
+	white-space: pre;
+}
+
+pre code {
+	background: none;
+	padding: 0;
+}
+
+.card {
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	padding: 8px 10px;
+	background: var(--raised);
+}
+
+.card.focus {
+	border-color: var(--accent);
+}
+
+.card.closed {
+	opacity: 0.6;
+}
+
+.card header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 4px;
+}
+
+.card .id {
+	font-weight: 600;
+}
+
+.badge {
+	font-size: 11px;
+	padding: 0 6px;
+	border-radius: 8px;
+	border: 1px solid var(--line);
+	color: var(--muted);
+}
+
+.badge.open {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+
+.badge.resolved {
+	color: var(--ok);
+	border-color: var(--ok);
+}
+
+.card .where {
+	font: 11.5px / 1.4 var(--mono);
+	color: var(--muted);
+	overflow-wrap: anywhere;
+}
+
+.card .thread {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 6px 0;
+}
+
+.card .thread .user {
+	white-space: pre-wrap;
+}
+
+.card .thread p {
+	margin: 0;
+}
+
+.card .thread .agent {
+	color: var(--muted);
+	border-left: 2px solid var(--line);
+	padding-left: 8px;
+}
+
+.card .actions {
+	display: flex;
+	gap: 6px;
+	justify-content: flex-end;
+}
+
+.card .actions button {
+	padding: 2px 8px;
+	font-size: 12px;
+}
+
+#composer {
+	border-top: 1px solid var(--line);
+	padding: 8px 10px 10px;
+}
+
+#context {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-bottom: 6px;
+}
+
+#context:empty {
+	display: none;
+}
+
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	padding: 1px 4px 1px 8px;
+	border: 1px solid var(--accent);
+	border-radius: 10px;
+	font: 11.5px / 1.5 var(--mono);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.chip button {
+	border: 0;
+	padding: 0 4px;
+	background: none;
+	color: var(--muted);
+}
+
+textarea {
+	width: 100%;
+	resize: vertical;
+	font: inherit;
+	color: var(--text);
+	background: var(--bg);
+	border: 1px solid var(--line);
+	border-radius: 8px;
+	padding: 8px;
+}
+
+textarea:focus {
+	outline: none;
+	border-color: var(--muted);
+}
+
+#composer .row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 6px;
+}
+
+#hint {
+	color: var(--muted);
+	font-size: 11.5px;
+}
+
+#composer button[type="submit"] {
+	background: var(--accent);
+	border-color: var(--accent);
+	color: #111;
+	font-weight: 600;
+}