@lelouchhe/webagent 0.1.0

package/dist/styles.mmjqzu9r.css

@@ -0,0 +1,555 @@
+:root {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --accent: #58a6ff;
+  --green: #3fb950;
+  --yellow: #d29922;
+  --red: #f85149;
+  --blue: #58a6ff;
+  --radius: 4px;
+  --user-bg: #1e3a5f;
+  --code-bg: #161b22;
+  --permission-bg: #1c1305;
+  --permission-title: #d29922;
+}
+[data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #f6f8fa;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #656d76;
+  --accent: #0969da;
+  --green: #1a7f37;
+  --yellow: #9a6700;
+  --red: #cf222e;
+  --blue: #0969da;
+  --user-bg: #ddf4ff;
+  --code-bg: #f6f8fa;
+  --permission-bg: #fff4cc;
+  --permission-title: #7a4f00;
+}
+@media (prefers-color-scheme: light) {
+  [data-theme="auto"] {
+    --bg: #ffffff;
+    --surface: #f6f8fa;
+    --border: #d0d7de;
+    --text: #1f2328;
+    --text-dim: #656d76;
+    --accent: #0969da;
+    --green: #1a7f37;
+    --yellow: #9a6700;
+    --red: #cf222e;
+    --blue: #0969da;
+    --user-bg: #ddf4ff;
+    --code-bg: #f6f8fa;
+    --permission-bg: #fff4cc;
+    --permission-title: #7a4f00;
+  }
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
+  background: var(--bg);
+  color: var(--text);
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+}
+
+/* Header */
+#header {
+  padding: 6px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+}
+#header .logo { font-weight: bold; color: var(--green); }
+.header-side {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.header-left { justify-content: flex-start; }
+.header-right {
+  justify-content: flex-end;
+  gap: 12px;
+}
+#header .status { color: var(--text-dim); }
+#status {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background: transparent;
+}
+#status.is-disconnected {
+  background: var(--red);
+  border-color: var(--red);
+}
+#status.is-connected {
+  background: var(--green);
+  border-color: var(--green);
+}
+#status.is-connecting {
+  border-color: var(--yellow);
+  animation: status-pulse 1.2s ease-in-out infinite;
+}
+@keyframes status-pulse {
+  0%, 100% {
+    background: transparent;
+    opacity: 0.9;
+  }
+  50% {
+    background: var(--yellow);
+    opacity: 1;
+  }
+}
+#session-info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+}
+#theme-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 15px;
+  font-family: inherit;
+  padding: 2px 6px;
+}
+#theme-btn:hover { color: var(--text); }
+@media (max-width: 640px) {
+  #header {
+    display: flex;
+    gap: 8px;
+  }
+  .header-left,
+  .header-right {
+    flex: 0 0 auto;
+  }
+  .header-right {
+    margin-left: auto;
+  }
+  #session-info {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+}
+
+/* Messages */
+#messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.msg {
+  padding: 8px 14px;
+  line-height: 1.6;
+  font-size: 16px;
+  overflow-wrap: break-word;
+}
+.msg.user {
+  background: var(--user-bg);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 8px 0 4px 0;
+  font-weight: 500;
+}
+.msg.user::before {
+  content: '▶ ';
+  color: var(--accent);
+  font-weight: bold;
+}
+.msg.assistant {
+  padding: 4px 14px;
+}
+.msg.assistant pre {
+  background: var(--code-bg);
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 8px 0;
+  font-size: 15px;
+}
+.msg.assistant code {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 15px;
+}
+.msg.assistant p { margin: 4px 0; }
+.msg.assistant ul, .msg.assistant ol { padding-left: 20px; margin: 4px 0; }
+
+/* Thinking */
+.thinking {
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 2px solid var(--border);
+}
+.thinking summary { cursor: pointer; }
+.thinking-content { cursor: default; }
+.thinking summary.active { animation: pulse 1.5s ease-in-out infinite; }
+
+/* Waiting indicator (after user sends, before first response) */
+@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+#waiting {
+  padding: 6px 14px;
+  color: var(--text-dim);
+  font-size: 15px;
+}
+#waiting .cursor { animation: blink 1s step-end infinite; }
+
+/* System messages */
+.system-msg {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+}
+
+/* Tool calls */
+.tool-call {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.tool-call .icon { margin-right: 4px; }
+.tool-call.completed { color: var(--green); animation: none; }
+.tool-call.failed { color: var(--red); animation: none; }
+.tool-call { cursor: pointer; }
+.tool-call .tc-detail {
+  display: block;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.tool-call .tc-detail.expanded {
+  white-space: pre-wrap;
+  overflow: visible;
+  text-overflow: unset;
+}
+.tool-call details { margin-top: 2px; }
+.tool-call details summary { cursor: pointer; color: var(--text-dim); }
+.tool-call .tc-content {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 14px;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  color: var(--text);
+  cursor: default;
+}
+
+/* Diff view for edit tool calls */
+.diff-view {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+  line-height: 1.4;
+  cursor: default;
+}
+.diff-view .diff-file { color: var(--blue); font-weight: bold; }
+.diff-view .diff-hunk { color: var(--text-dim); }
+.diff-view .diff-del { color: var(--red); }
+.diff-view .diff-add { color: var(--green); }
+
+/* Plan */
+.plan {
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 3px solid var(--blue);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+.plan-title { color: var(--blue); font-weight: bold; margin-bottom: 2px; }
+.plan-entry { padding: 1px 0; }
+
+/* Permission dialog */
+.permission {
+  background: var(--permission-bg);
+  border-left: 3px solid var(--yellow);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  padding: 8px 14px;
+  font-size: 15px;
+}
+.permission .title { color: var(--permission-title); font-weight: bold; margin-bottom: 6px; }
+.permission button {
+  margin: 2px 4px 2px 0;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+.permission button:hover { background: var(--surface); }
+.permission button.allow { border-color: var(--green); }
+.permission button.deny { border-color: var(--red); }
+
+/* Bash command output */
+.bash-block {
+  margin: 2px 0;
+  padding: 2px 14px;
+  font-size: 15px;
+}
+.bash-block .bash-cmd {
+  color: var(--green);
+  font-family: monospace;
+  font-size: 14px;
+  cursor: pointer;
+}
+.bash-block .bash-cmd::before { content: '$ '; color: var(--text-dim); }
+.bash-block .bash-cmd.running { animation: pulse 1.5s ease-in-out infinite; }
+.bash-block .bash-output {
+  margin: 4px 0 4px 0;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--text);
+  line-height: 1.4;
+  display: none;
+}
+.bash-block .bash-output.has-content { display: block; }
+.bash-block .bash-output .stderr { color: var(--red); }
+.bash-block .bash-exit { font-size: 13px; color: var(--text-dim); margin-left: 8px; }
+.bash-block .bash-exit.ok { color: var(--green); }
+.bash-block .bash-exit.fail { color: var(--red); }
+
+/* Input */
+#input-area {
+  position: relative;
+  padding: 8px 16px 20px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: border-color .15s;
+}
+#input-area.bash-mode {
+  border-top: 2px solid #e8872b;
+}
+#input-area.bash-mode #input-prompt {
+  color: #e8872b;
+}
+#input-area.bash-mode #input {
+  color: #e8872b;
+}
+#input-area.plan-mode {
+  border-top: 2px solid var(--green);
+}
+#input-area.plan-mode::before {
+  content: 'plan';
+  position: absolute;
+  top: -7px;
+  left: 16px;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0 4px;
+  background: var(--bg);
+  color: var(--green);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+#input-area.plan-mode #input-prompt {
+  color: var(--green);
+}
+#input-area.autopilot-mode {
+  border-top: 2px solid var(--red);
+}
+#input-area.autopilot-mode::before {
+  content: 'autopilot';
+  position: absolute;
+  top: -7px;
+  left: 16px;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0 4px;
+  background: var(--bg);
+  color: var(--red);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+#input-area.autopilot-mode #input-prompt {
+  color: var(--red);
+}
+#input-prompt {
+  color: var(--text);
+  font-weight: bold;
+  user-select: none;
+  line-height: 1.5;
+  cursor: pointer;
+}
+#input {
+  flex: 1;
+  background: transparent;
+  color: var(--text);
+  border: none;
+  padding: 4px 8px;
+  font-size: 16px;
+  font-family: inherit;
+  resize: none;
+  min-height: 28px;
+  max-height: 200px;
+  line-height: 1.5;
+}
+#input:focus { outline: none; }
+.input-btn {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 34px;
+  height: 28px;
+  padding: 0 6px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+.input-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+#new-btn {
+  font-size: 11px;
+  letter-spacing: 0.2px;
+}
+#send-btn.cancel {
+  color: var(--red);
+  border-color: var(--red);
+  font-weight: bold;
+}
+#send-btn.cancel:hover,
+#send-btn.cancel:focus,
+#send-btn.cancel:active {
+  color: var(--red);
+  border-color: var(--red);
+}
+#input-prompt.busy { font-size: 0; position: relative; }
+#input-prompt.busy::before {
+  content: '⠋';
+  font-size: 16px;
+  animation: spinner 0.8s steps(1) infinite;
+}
+@keyframes spinner {
+  0%  { content: '⠋'; } 10% { content: '⠙'; } 20% { content: '⠹'; }
+  30% { content: '⠸'; } 40% { content: '⠼'; } 50% { content: '⠴'; }
+  60% { content: '⠦'; } 70% { content: '⠧'; } 80% { content: '⠇'; }
+  90% { content: '⠏'; }
+}
+
+/* Slash command autocomplete */
+#slash-menu {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  max-height: 220px;
+  overflow-y: auto;
+  z-index: 10;
+}
+#slash-menu.active { display: block; }
+.slash-item {
+  padding: 6px 14px;
+  cursor: pointer;
+  font-size: 15px;
+  display: flex;
+  gap: 12px;
+}
+.slash-item:hover, .slash-item.selected {
+  background: var(--accent);
+  color: #fff;
+}
+.slash-item .slash-cmd { font-weight: bold; min-width: 120px; }
+.slash-item .slash-desc { color: var(--text-dim); }
+.slash-item:hover .slash-desc, .slash-item.selected .slash-desc { color: rgba(255,255,255,0.8); }
+
+/* Image attach */
+#new-btn.hidden { display: none; }
+#attach-preview {
+  display: none;
+  padding: 4px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+#attach-preview.active { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.attach-thumb {
+  position: relative;
+  display: inline-block;
+}
+.attach-thumb img {
+  max-height: 60px;
+  max-width: 120px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.attach-thumb .remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--red);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  cursor: pointer;
+  padding: 0;
+}
+.msg.user img.user-image {
+  max-width: 200px;
+  max-height: 150px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  display: block;
+  margin-top: 4px;
+}

package/dist/sw.js

@@ -0,0 +1,5 @@
+// Minimal service worker for PWA installability.
+// No offline caching — app requires WebSocket connection.
+
+self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@lelouchhe/webagent",
+  "version": "0.1.0",
+  "description": "A terminal-style web UI for ACP-compatible agents",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LelouchHe/webagent.git"
+  },
+  "homepage": "https://github.com/LelouchHe/webagent#readme",
+  "keywords": [
+    "acp",
+    "agent",
+    "web-ui",
+    "copilot",
+    "chat",
+    "websocket"
+  ],
+  "engines": {
+    "node": ">=22.6.0"
+  },
+  "bin": {
+    "webagent": "bin/webagent.mjs"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "dist/",
+    "config.toml"
+  ],
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "node scripts/build.js",
+    "start": "node --experimental-strip-types src/server.ts --config config.toml",
+    "test": "node --experimental-strip-types --test test/*.test.ts",
+    "test:e2e": "playwright test",
+    "dev": "node --experimental-strip-types --watch src/server.ts --config config.dev.toml",
+    "dev:start": "node --experimental-strip-types src/server.ts --config config.dev.toml &",
+    "dev:stop": "lsof -ti:6801 | xargs kill 2>/dev/null || true"
+  },
+  "dependencies": {
+    "@agentclientprotocol/sdk": "^0.14.1",
+    "better-sqlite3": "^12.6.2",
+    "smol-toml": "^1.6.0",
+    "ws": "^8.19.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^25.3.3",
+    "@types/ws": "^8.18.1",
+    "happy-dom": "^20.8.3",
+    "playwright": "^1.58.2"
+  }
+}