acp-devtools 0.1.0

package/dist/ui/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+    <!--
+        Two triangles pointing at each other = editor ⇄ agent traffic, the
+        whole reason acp-devtools exists. Background is the UI's light-mode
+        surface-row (#e6eaf0) so the icon reads cleanly on browser tab bars
+        and reverse-contrasts the dark-mode UI it serves. Triangles use the
+        light-mode accent values for sufficient contrast at 16×16.
+    -->
+    <rect width="64" height="64" rx="12" fill="#e6eaf0" />
+    <path d="M14 18 L30 32 L14 46 Z" fill="#0ea789" />
+    <path d="M50 18 L34 32 L50 46 Z" fill="#c35a08" />
+</svg>

package/dist/ui/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="dark light" />
+        <meta name="theme-color" content="#0a0d12" media="(prefers-color-scheme: dark)" />
+        <meta name="theme-color" content="#f7f8fa" media="(prefers-color-scheme: light)" />
+
+        <title>ACP Devtools</title>
+        <meta
+            name="description"
+            content="Visual debugger for Agent Client Protocol (ACP) traffic — inspect, replay, and validate every JSON-RPC frame between your editor and your coding agent."
+        />
+        <meta name="application-name" content="ACP Devtools" />
+        <meta name="generator" content="acp-devtools" />
+        <meta name="robots" content="noindex" />
+
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="apple-touch-icon" href="/favicon.svg" />
+        <link rel="mask-icon" href="/favicon.svg" color="#0ea789" />
+        <link rel="manifest" href="/manifest.webmanifest" />
+
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="ACP Devtools" />
+        <meta
+            property="og:description"
+            content="Visual debugger for Agent Client Protocol traffic — inspect every JSON-RPC frame between your editor and your coding agent, replay saved sessions, validate against the spec."
+        />
+        <meta property="og:site_name" content="ACP Devtools" />
+        <meta property="og:image" content="/favicon.svg" />
+
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:title" content="ACP Devtools" />
+        <meta
+            name="twitter:description"
+            content="Visual debugger for Agent Client Protocol traffic — inspect, replay, and validate every frame between editor and agent."
+        />
+        <meta name="twitter:image" content="/favicon.svg" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Major+Mono+Display&family=Manrope:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <style>
+            html,
+            body {
+                background: #0a0d12;
+            }
+        </style>
+      <script type="module" crossorigin src="/assets/index-TuuxPTyK.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-Cz0JXyED.css">
+    </head>
+    <body class="h-full">
+        <div id="root" class="h-full"></div>
+    </body>
+</html>

package/dist/ui/manifest.webmanifest

@@ -0,0 +1,24 @@
+{
+    "name": "ACP Devtools",
+    "short_name": "ACP Devtools",
+    "description": "Visual debugger for Agent Client Protocol traffic — inspect every JSON-RPC frame between your editor and your coding agent.",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#0a0d12",
+    "theme_color": "#0a0d12",
+    "icons": [
+        {
+            "src": "/favicon.svg",
+            "type": "image/svg+xml",
+            "sizes": "any",
+            "purpose": "any"
+        },
+        {
+            "src": "/favicon.svg",
+            "type": "image/svg+xml",
+            "sizes": "any",
+            "purpose": "maskable"
+        }
+    ]
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "acp-devtools",
+    "version": "0.1.0",
+    "description": "Visual debugger and inspector for the Agent Client Protocol (ACP) — capture every JSON-RPC frame between your editor and your coding agent, replay sessions, validate against the spec.",
+    "type": "module",
+    "main": "./dist/index.js",
+    "bin": {
+        "acp-devtools": "dist/index.js"
+    },
+    "files": [
+        "dist",
+        "!dist/**/*.map",
+        "README.md",
+        "LICENSE"
+    ],
+    "keywords": [
+        "acp",
+        "agent-client-protocol",
+        "ai",
+        "agent",
+        "debugger",
+        "inspector",
+        "devtools",
+        "proxy",
+        "zed",
+        "jetbrains"
+    ],
+    "author": "Roman Ponomarev <maksugr@gmail.com> (https://github.com/maksugr)",
+    "license": "MIT",
+    "homepage": "https://github.com/maksugr/acp-devtools#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/maksugr/acp-devtools.git",
+        "directory": "packages/cli"
+    },
+    "bugs": {
+        "url": "https://github.com/maksugr/acp-devtools/issues"
+    },
+    "engines": {
+        "node": ">=22"
+    },
+    "scripts": {
+        "build": "tsup",
+        "embed-ui": "node scripts/embed-ui.mjs",
+        "clean": "rimraf dist *.tsbuildinfo",
+        "prepublishOnly": "node scripts/check-dist.mjs"
+    },
+    "dependencies": {
+        "@agentclientprotocol/sdk": "^0.22.1",
+        "@modelcontextprotocol/sdk": "^1.29.0",
+        "better-sqlite3": "^12.10.0",
+        "commander": "^12.1.0",
+        "ws": "^8.20.1",
+        "zod": "^4.4.3"
+    },
+    "devDependencies": {
+        "@acp-devtools/core": "0.1.0",
+        "@types/node": "^22.10.0",
+        "tsup": "^8.5.1"
+    }
+}