agent-host-protocol-ui 0.1.0

package/dist/assets/index-BS3hjOwP.css

@@ -0,0 +1 @@
+:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-canvas:#1e1e1e;--bg-sidebar:#252526;--bg-surface:#252526;--bg-surface-elevated:#2d2d2d;--bg-surface-hover:#37373d;--border-subtle:#2d2d2d;--border-default:#3e3e42;--border-focused:#007fd4;--text-primary:#ccc;--text-secondary:#9da5b4;--text-muted:#858585;--text-accent:#4fc1ff;--tool-name-color:#4fc1ff;--color-primary:#0e639c;--color-primary-hover:#17b;--color-primary-light:#4fc1ff26;--color-success:#89d185;--color-success-light:#89d18526;--color-warning:#cca700;--color-warning-light:#cca70026;--color-danger:#f14c4c;--color-danger-light:#f14c4c26;--color-purple:#c586c0;--color-purple-light:#c586c026;--thinking-bg:#c586c01f;--thinking-border:#c586c059;--thinking-text-summary:#c586c0;--thinking-text-content:#d4d4d4;--code-pre-bg:#141414;--code-pre-border:#333;--code-inline-bg:#ffffff14;--error-banner-text:#f48771;--pending-pill-bg:#f14c4c33;--pending-pill-color:#f48771;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #00000059;--shadow-md:0 4px 6px -1px #00000073;--shadow-lg:0 10px 15px -3px #0000008c}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-canvas:#fff;--bg-sidebar:#f3f3f3;--bg-surface:#fff;--bg-surface-elevated:#f8f8f8;--bg-surface-hover:#e8e8e8;--border-subtle:#e5e5e5;--border-default:#cecece;--border-focused:#007acc;--text-primary:#1e1e1e;--text-secondary:#616161;--text-muted:#767676;--text-accent:#0066b8;--tool-name-color:#0066b8;--color-primary:#007acc;--color-primary-hover:#0062a3;--color-primary-light:#007acc1a;--color-success:#388a34;--color-success-light:#388a341f;--color-warning:#bf8803;--color-warning-light:#bf88031f;--color-danger:#e51400;--color-danger-light:#e514001a;--color-purple:#af00db;--color-purple-light:#af00db14;--thinking-bg:#af00db0f;--thinking-border:#af00db40;--thinking-text-summary:#af00db;--thinking-text-content:#24292f;--code-pre-bg:#f8f8f8;--code-pre-border:#e1e4e8;--code-inline-bg:#1b1f230f;--error-banner-text:#d73a49;--pending-pill-bg:#e514001a;--pending-pill-color:#d73a49;--shadow-sm:0 1px 2px 0 #0000000f;--shadow-md:0 4px 6px -1px #00000014;--shadow-lg:0 10px 15px -3px #0000001f}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-canvas:#fff;--bg-sidebar:#f3f3f3;--bg-surface:#fff;--bg-surface-elevated:#f8f8f8;--bg-surface-hover:#e8e8e8;--border-subtle:#e5e5e5;--border-default:#cecece;--border-focused:#007acc;--text-primary:#1e1e1e;--text-secondary:#616161;--text-muted:#767676;--text-accent:#0066b8;--tool-name-color:#0066b8;--color-primary:#007acc;--color-primary-hover:#0062a3;--color-primary-light:#007acc1a;--color-success:#388a34;--color-success-light:#388a341f;--color-warning:#bf8803;--color-warning-light:#bf88031f;--color-danger:#e51400;--color-danger-light:#e514001a;--color-purple:#af00db;--color-purple-light:#af00db14;--thinking-bg:#af00db0f;--thinking-border:#af00db40;--thinking-text-summary:#af00db;--thinking-text-content:#24292f;--code-pre-bg:#f8f8f8;--code-pre-border:#e1e4e8;--code-inline-bg:#1b1f230f;--error-banner-text:#d73a49;--pending-pill-bg:#e514001a;--pending-pill-color:#d73a49;--shadow-sm:0 1px 2px 0 #0000000f;--shadow-md:0 4px 6px -1px #00000014;--shadow-lg:0 10px 15px -3px #0000001f}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-canvas:#1e1e1e;--bg-sidebar:#252526;--bg-surface:#252526;--bg-surface-elevated:#2d2d2d;--bg-surface-hover:#37373d;--border-subtle:#2d2d2d;--border-default:#3e3e42;--border-focused:#007fd4;--text-primary:#ccc;--text-secondary:#9da5b4;--text-muted:#858585;--text-accent:#4fc1ff;--tool-name-color:#4fc1ff;--color-primary:#0e639c;--color-primary-hover:#17b;--color-primary-light:#4fc1ff26;--color-success:#89d185;--color-success-light:#89d18526;--color-warning:#cca700;--color-warning-light:#cca70026;--color-danger:#f14c4c;--color-danger-light:#f14c4c26;--color-purple:#c586c0;--color-purple-light:#c586c026;--thinking-bg:#c586c01f;--thinking-border:#c586c059;--thinking-text-summary:#c586c0;--thinking-text-content:#d4d4d4;--code-pre-bg:#141414;--code-pre-border:#333;--code-inline-bg:#ffffff14;--error-banner-text:#f48771;--pending-pill-bg:#f14c4c33;--pending-pill-color:#f48771;--shadow-sm:0 1px 2px 0 #00000059;--shadow-md:0 4px 6px -1px #00000073;--shadow-lg:0 10px 15px -3px #0000008c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-canvas);color:var(--text-primary);height:100vh;font-size:14px;line-height:1.5;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}.header{background-color:var(--bg-sidebar);border-bottom:1px solid var(--border-subtle);z-index:10;justify-content:space-between;align-items:center;gap:16px;height:52px;padding:0 16px;display:flex}.header-left,.header-right{align-items:center;gap:12px;display:flex}.brand-badge{letter-spacing:-.3px;color:var(--text-primary);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.brand-icon{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--color-primary), var(--color-purple));color:#fff;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.host-pill{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:8px;padding:4px 12px;font-size:12px;transition:all .2s;display:flex}.host-pill:hover{background-color:var(--bg-surface-elevated);border-color:var(--border-focused)}.status-dot{border-radius:50%;width:8px;height:8px}.status-dot.connected{background-color:var(--color-success);box-shadow:0 0 8px var(--color-success)}.status-dot.connecting{background-color:var(--color-warning);animation:1.5s infinite pulse}.status-dot.error,.status-dot.disconnected{background-color:var(--color-danger)}.privacy-badge{color:var(--color-success);border-radius:var(--radius-full);background-color:#22c55e1a;border:1px solid #22c55e40;align-items:center;gap:6px;padding:3px 10px;font-size:11px;font-weight:500;display:flex}.theme-toggle-group{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-full);align-items:center;gap:2px;padding:2px;display:inline-flex}.theme-toggle-btn{border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:500;line-height:1;transition:all .15s;display:inline-flex}.theme-toggle-btn:hover{color:var(--text-primary);background-color:var(--bg-surface-hover)}.theme-toggle-btn.active{background-color:var(--color-primary-light);color:var(--color-primary);font-weight:600}.btn{border-radius:var(--radius-md);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover{background-color:var(--bg-surface-hover)}.btn-danger{background-color:var(--color-danger-light);color:var(--color-danger);border-color:#ef44444d}.btn-danger:hover{background-color:var(--color-danger);color:#fff}.workspace-layout{flex:1;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none;flex-direction:column;width:280px;display:flex}.sidebar-search{border-bottom:1px solid var(--border-subtle);padding:12px}.search-input{background-color:var(--bg-canvas);border:1px solid var(--border-default);width:100%;color:var(--text-primary);border-radius:var(--radius-sm);outline:none;padding:6px 10px;font-size:12px}.search-input:focus{border-color:var(--border-focused);box-shadow:0 0 0 1px var(--border-focused)}.sessions-container{flex:1;padding:8px 0;overflow-y:auto}.section-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:center;padding:8px 16px 4px;font-size:11px;font-weight:600;display:flex}.session-item{cursor:pointer;border-left:2px solid #0000;flex-direction:column;gap:4px;padding:10px 16px;transition:background .15s;display:flex}.session-item:hover{background-color:var(--bg-surface)}.session-item.active{background-color:var(--bg-surface-elevated);border-left-color:var(--color-primary)}.session-header{justify-content:space-between;align-items:center;gap:6px;display:flex}.session-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;font-weight:500;overflow:hidden}.session-meta{color:var(--text-muted);align-items:center;gap:8px;font-size:11px;display:flex}.live-badge{color:var(--color-success);border-radius:var(--radius-full);background-color:#22c55e26;align-items:center;gap:4px;padding:1px 6px;font-size:10px;font-weight:600;display:inline-flex}.live-badge:before{content:"";background-color:var(--color-success);border-radius:50%;width:5px;height:5px;animation:1.5s infinite pulse}.chat-view{background-color:var(--bg-canvas);flex-direction:column;flex:1;display:flex;overflow:hidden}.chat-header{background-color:var(--bg-canvas);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;display:flex}.chat-header-info{flex-direction:column;gap:2px;display:flex;overflow:hidden}.chat-title{color:var(--text-primary);font-size:16px;font-weight:600}.chat-meta{color:var(--text-muted);align-items:center;gap:12px;font-size:12px;display:flex}.chat-meta-item{align-items:center;gap:4px;display:flex}.chat-timeline{flex-direction:column;flex:1;gap:24px;padding:24px;display:flex;overflow-y:auto}.turn-group{flex-direction:column;gap:16px;display:flex}.user-message{background-color:var(--bg-surface-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);max-width:80%;color:var(--text-primary);align-self:flex-end;padding:12px 16px;font-size:14px}.assistant-message{flex-direction:column;align-self:flex-start;gap:12px;width:100%;display:flex}.thinking-accordion{background-color:var(--thinking-bg);border:1px solid var(--thinking-border);border-radius:var(--radius-md);font-size:12px;overflow:hidden}.thinking-summary{cursor:pointer;color:var(--thinking-text-summary);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:8px 12px;font-weight:500;display:flex}.thinking-content{border-top:1px solid var(--thinking-border);color:var(--thinking-text-content);font-family:var(--font-mono);white-space:pre-wrap;max-height:250px;padding:10px 12px;font-size:11.5px;line-height:1.6;overflow-y:auto}.tool-call-card{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:12px;overflow:hidden}.tool-call-header{background-color:var(--bg-surface-elevated);justify-content:space-between;align-items:center;padding:8px 12px;font-weight:500;display:flex}.tool-name-badge{font-family:var(--font-mono);color:var(--tool-name-color,var(--text-accent));align-items:center;gap:6px;font-weight:600;display:flex}.tool-status-pill{border-radius:var(--radius-full);text-transform:capitalize;padding:2px 8px;font-size:11px}.tool-status-pill.completed{background-color:var(--color-success-light);color:var(--color-success)}.tool-status-pill.running{background-color:var(--color-warning-light);color:var(--color-warning)}.tool-status-pill.pending-confirmation{background-color:var(--pending-pill-bg);color:var(--pending-pill-color)}.tool-call-body{font-family:var(--font-mono);color:var(--text-secondary);border-top:1px solid var(--border-subtle);background-color:var(--bg-surface);white-space:pre-wrap;max-height:200px;padding:10px 12px;font-size:12px;overflow-y:auto}.tool-confirm-bar{background-color:#ef44441a;border-top:1px solid #ef44444d;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.error-banner{background-color:var(--color-danger-light);border-radius:var(--radius-md);border:1px solid #ef444466;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.error-banner-text{color:var(--error-banner-text);font-size:13px}.markdown-body{color:var(--text-primary);font-size:14px;line-height:1.6}.markdown-body p{margin-bottom:12px}.markdown-body pre{background-color:var(--code-pre-bg);border:1px solid var(--code-pre-border);border-radius:var(--radius-md);font-family:var(--font-mono);margin-bottom:12px;padding:12px 16px;font-size:12.5px;overflow-x:auto}.markdown-body code{font-family:var(--font-mono);background-color:var(--code-inline-bg);border-radius:var(--radius-sm);padding:2px 6px;font-size:12.5px}.markdown-body pre code{background-color:#0000;padding:0}.composer{background-color:var(--bg-canvas);border-top:1px solid var(--border-subtle);padding:16px 24px}.composer-box{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);flex-direction:column;gap:8px;padding:12px;transition:border-color .2s;display:flex;position:relative}.composer-box:focus-within{border-color:var(--border-focused);box-shadow:0 0 0 1px var(--border-focused)}.composer-textarea{width:100%;color:var(--text-primary);font-family:var(--font-sans);resize:none;background:0 0;border:none;outline:none;min-height:56px;max-height:200px;font-size:14px;line-height:1.5}.composer-footer{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding-top:8px;display:flex}.composer-tools{align-items:center;gap:12px;display:flex}.composer-action-btn{border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;display:flex}.completions-menu{background-color:var(--bg-surface-elevated);border:1px solid var(--border-focused);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-lg);z-index:50;max-height:220px;margin-bottom:8px;position:absolute;bottom:100%;left:0;overflow-y:auto}.completion-item{cursor:pointer;justify-content:space-between;align-items:center;padding:8px 12px;transition:background .15s;display:flex}.completion-item:hover,.completion-item.selected{background-color:var(--color-primary-light)}.completion-name{font-family:var(--font-mono);color:var(--text-accent);font-weight:600}.completion-desc{color:var(--text-muted);font-size:12px}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background-color:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);width:480px;max-width:90vw;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-body{flex-direction:column;gap:16px;padding:20px;display:flex}.modal-footer{background-color:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);justify-content:flex-end;gap:10px;padding:12px 20px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);font-size:12px;font-weight:500}.form-input{background-color:var(--bg-canvas);border:1px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-md);outline:none;padding:8px 12px;font-size:13px}.form-input:focus{border-color:var(--border-focused)}.inspector-panel{background-color:var(--bg-sidebar);border-left:1px solid var(--border-subtle);flex-direction:column;width:300px;display:flex}.inspector-tabs{border-bottom:1px solid var(--border-subtle);display:flex}.inspector-tab{text-align:center;color:var(--text-muted);cursor:pointer;border-bottom:2px solid #0000;flex:1;padding:10px;font-size:12px;font-weight:500}.inspector-tab.active{color:var(--text-primary);border-bottom-color:var(--color-primary);background-color:var(--bg-surface)}.inspector-content{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.skill-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px}.skill-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.skill-name{font-family:var(--font-mono);color:var(--text-accent);font-size:13px;font-weight:600}.skill-desc{color:var(--text-muted);font-size:12px}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}

package/dist/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Agent Host Protocol UI</title>
+    <meta name="description" content="Client-side UI for services running the Agent Host Protocol (AHP), inspired by VS Code Agents view." />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'><path d='M12 2a2 2 0 0 1 2 2c0 .74-.4 1.38-1 1.72V7h2a7 7 0 0 1 7 7v1a1 1 0 0 1-1 1h-1v1a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-1H3a1 1 0 0 1-1-1v-1a7 7 0 0 1 7-7h2V5.72A2 2 0 0 1 10 4a2 2 0 0 1 2-2m-3 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3'/></svg>" />
+    <script>
+      (function() {
+        try {
+          const pref = localStorage.getItem('ahp_ui_theme_preference');
+          if (pref === 'light' || pref === 'dark') {
+            document.documentElement.setAttribute('data-theme', pref);
+          } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+            document.documentElement.setAttribute('data-theme', 'light');
+          } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
+          }
+        } catch (e) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      })();
+    </script>
+    <script type="module" crossorigin src="/assets/index-B3CN86Cx.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BS3hjOwP.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist-path.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Absolute directory path to the built static assets of agent-host-protocol-ui
+ */
+export declare const distDir: string;
+export default distDir;

package/dist-path.js

@@ -0,0 +1,11 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Absolute directory path to the built static assets of agent-host-protocol-ui
+ */
+export const distDir = path.resolve(__dirname, "dist");
+
+export default distDir;

package/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "agent-host-protocol-ui",
+	"version": "0.1.0",
+	"description": "Client-side web UI for the Agent Host Protocol (AHP) inspired by VS Code Agents view",
+	"author": "Yusuke Tsutsumi <yusuke@tsutsumi.io>",
+	"license": "Apache-2.0",
+	"type": "module",
+	"main": "./dist-path.js",
+	"types": "./dist-path.d.ts",
+	"bin": {
+		"agent-host-protocol-ui": "bin/cli.js"
+	},
+	"files": [
+		"dist",
+		"bin",
+		"dist-path.js",
+		"dist-path.d.ts"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/toumorokoshi/agent-host-protocol-ui.git"
+	},
+	"bugs": {
+		"url": "https://github.com/toumorokoshi/agent-host-protocol-ui/issues"
+	},
+	"homepage": "https://github.com/toumorokoshi/agent-host-protocol-ui#readme",
+	"keywords": [
+		"agent-host-protocol",
+		"ahp",
+		"ai-agents",
+		"vs-code",
+		"ui",
+		"web-ui",
+		"agent-ui",
+		"client"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"preview": "vite preview",
+		"typecheck": "tsc --noEmit",
+		"lint": "biome check .",
+		"format": "biome check --write .",
+		"test": "node --test",
+		"prepublishOnly": "npm run build && npm run test"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.5.15",
+		"@types/dompurify": "^3.0.5",
+		"@types/node": "^26.6.4",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitejs/plugin-react": "^6.1.1",
+		"typescript": "^7.0.2",
+		"vite": "^8.3.2"
+	},
+	"dependencies": {
+		"@microsoft/agent-host-protocol": "^1.0.0",
+		"dompurify": "^3.4.16",
+		"marked": "^18.0.14",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0"
+	}
+}