@aitty/browser 0.1.0

package/dist/frontend/terminal-theme-protocol.js

@@ -0,0 +1,270 @@
+//#region src/frontend/terminal-theme-protocol.ts
+const BEL = "\x07";
+const ESC = "\x1B";
+const MAX_OSC_LENGTH = 512;
+const DEFAULT_DARK_THEME_COLORS = {
+	background: "#0d1117",
+	cursor: "#f6b967",
+	foreground: "#edf2ff"
+};
+const DEFAULT_LIGHT_THEME_COLORS = {
+	background: "#f4efe3",
+	cursor: "#b96e1a",
+	foreground: "#24323f"
+};
+function createTerminalThemeProtocolParser() {
+	const decoder = new TextDecoder();
+	let parserState = "text";
+	let oscBuffer = "";
+	const reset = () => {
+		parserState = "text";
+		oscBuffer = "";
+	};
+	const appendOscCharacter = (character) => {
+		if (oscBuffer.length < MAX_OSC_LENGTH) oscBuffer += character;
+	};
+	return {
+		append(chunk) {
+			const update = {
+				colors: {},
+				palette: []
+			};
+			const text = decoder.decode(chunk, { stream: true });
+			for (const character of text) {
+				if (parserState === "escape") {
+					if (character === "]") {
+						parserState = "osc";
+						oscBuffer = "";
+						continue;
+					}
+					parserState = "text";
+					continue;
+				}
+				if (parserState === "osc") {
+					if (character === BEL) {
+						mergeThemeUpdate(update, parseOscThemeUpdate(oscBuffer));
+						parserState = "text";
+						oscBuffer = "";
+						continue;
+					}
+					if (character === ESC) {
+						parserState = "osc_escape";
+						continue;
+					}
+					appendOscCharacter(character);
+					continue;
+				}
+				if (parserState === "osc_escape") {
+					if (character === "\\") {
+						mergeThemeUpdate(update, parseOscThemeUpdate(oscBuffer));
+						parserState = "text";
+						oscBuffer = "";
+						continue;
+					}
+					appendOscCharacter(ESC);
+					appendOscCharacter(character);
+					parserState = "osc";
+					continue;
+				}
+				if (character === ESC) parserState = "escape";
+			}
+			return hasThemeUpdate(update) ? update : null;
+		},
+		reset
+	};
+}
+function resolveTerminalThemeQueryResponse(chunk, options) {
+	const text = typeof chunk === "string" ? chunk : new TextDecoder().decode(chunk);
+	let response = "";
+	for (const payload of collectOscPayloads(text)) {
+		const parts = payload.split(";");
+		const command = parts[0];
+		if ((command === "10" || command === "11" || command === "12") && parts.slice(1).join(";").trim() === "?") {
+			const slot = resolveColorSlot(command);
+			const color = resolveThemeColor(options.root, slot, options.theme);
+			response += `${ESC}]${command};${toTerminalRgbColor(color)}${ESC}\\`;
+		}
+	}
+	return response.length > 0 ? response : null;
+}
+function parseOscThemeUpdate(payload) {
+	const parts = payload.split(";");
+	const command = parts[0];
+	if (!command) return null;
+	if (command === "10" || command === "11" || command === "12") {
+		const color = normalizeTerminalColor(parts.slice(1).join(";"));
+		if (!color) return null;
+		const slot = resolveColorSlot(command);
+		const update = {
+			colors: { [slot]: color },
+			palette: []
+		};
+		if (slot === "background") update.theme = inferThemeFromBackground(color);
+		return update;
+	}
+	if (command === "4") return parsePaletteUpdate(parts.slice(1));
+	return null;
+}
+function parsePaletteUpdate(parts) {
+	const palette = [];
+	for (let index = 0; index + 1 < parts.length; index += 2) {
+		const colorIndex = Number.parseInt(parts[index] ?? "", 10);
+		const color = normalizeTerminalColor(parts[index + 1] ?? "");
+		if (!Number.isInteger(colorIndex) || colorIndex < 0 || colorIndex > 15 || !color) continue;
+		palette.push({
+			color,
+			index: colorIndex
+		});
+	}
+	if (palette.length === 0) return null;
+	return {
+		colors: {},
+		palette
+	};
+}
+function normalizeTerminalColor(value) {
+	const color = value.trim();
+	if (color.length === 0 || color === "?") return null;
+	const rgb = parseTerminalRgbColor(color);
+	if (rgb) return `rgb(${rgb.red}, ${rgb.green}, ${rgb.blue})`;
+	const cssRgb = parseCssRgbColor(color);
+	if (cssRgb) return `rgb(${cssRgb.red}, ${cssRgb.green}, ${cssRgb.blue})`;
+	if (/^#[0-9a-fA-F]{6}$/.test(color)) return color.toLowerCase();
+	if (/^#[0-9a-fA-F]{3}$/.test(color)) return expandShortHexColor(color);
+	return null;
+}
+function collectOscPayloads(text) {
+	const payloads = [];
+	let parserState = "text";
+	let oscBuffer = "";
+	const pushPayload = () => {
+		payloads.push(oscBuffer);
+		oscBuffer = "";
+	};
+	for (const character of text) {
+		if (parserState === "escape") {
+			if (character === "]") {
+				parserState = "osc";
+				oscBuffer = "";
+				continue;
+			}
+			parserState = "text";
+			continue;
+		}
+		if (parserState === "osc") {
+			if (character === BEL) {
+				pushPayload();
+				parserState = "text";
+				continue;
+			}
+			if (character === ESC) {
+				parserState = "osc_escape";
+				continue;
+			}
+			if (oscBuffer.length < MAX_OSC_LENGTH) oscBuffer += character;
+			continue;
+		}
+		if (parserState === "osc_escape") {
+			if (character === "\\") {
+				pushPayload();
+				parserState = "text";
+				continue;
+			}
+			if (oscBuffer.length < MAX_OSC_LENGTH) {
+				oscBuffer += ESC;
+				oscBuffer += character;
+			}
+			parserState = "osc";
+			continue;
+		}
+		if (character === ESC) parserState = "escape";
+	}
+	return payloads;
+}
+function resolveThemeColor(root, slot, theme) {
+	const variableName = resolveThemeColorVariable(slot);
+	const computedValue = root.ownerDocument.defaultView?.getComputedStyle(root).getPropertyValue(variableName).trim();
+	const normalizedComputed = computedValue ? normalizeTerminalColor(computedValue) : null;
+	if (normalizedComputed) return normalizedComputed;
+	return (theme === "light" ? DEFAULT_LIGHT_THEME_COLORS : DEFAULT_DARK_THEME_COLORS)[slot];
+}
+function resolveThemeColorVariable(slot) {
+	if (slot === "background") return "--theme-term-bg";
+	if (slot === "cursor") return "--theme-term-cursor";
+	return "--theme-term-fg";
+}
+function toTerminalRgbColor(color) {
+	const rgb = parseCssRgbColor(color) ?? parseCssHexColor(color) ?? {
+		blue: 255,
+		green: 255,
+		red: 255
+	};
+	return `rgb:${toTerminalRgbChannel(rgb.red)}/${toTerminalRgbChannel(rgb.green)}/${toTerminalRgbChannel(rgb.blue)}`;
+}
+function toTerminalRgbChannel(value) {
+	return clamp(value, 0, 255).toString(16).padStart(2, "0").repeat(2);
+}
+function parseTerminalRgbColor(value) {
+	const match = /^rgb:([0-9a-fA-F]{1,4})\/([0-9a-fA-F]{1,4})\/([0-9a-fA-F]{1,4})$/.exec(value);
+	if (!match) return null;
+	return {
+		blue: normalizeHexChannel(match[3] ?? ""),
+		green: normalizeHexChannel(match[2] ?? ""),
+		red: normalizeHexChannel(match[1] ?? "")
+	};
+}
+function normalizeHexChannel(value) {
+	if (value.length === 0) return 0;
+	const expanded = value.length === 1 ? `${value}${value}` : value.slice(0, 2);
+	return clamp(Number.parseInt(expanded, 16), 0, 255);
+}
+function expandShortHexColor(value) {
+	const [, red = "0", green = "0", blue = "0"] = value;
+	return `#${red}${red}${green}${green}${blue}${blue}`.toLowerCase();
+}
+function resolveColorSlot(command) {
+	if (command === "11") return "background";
+	if (command === "12") return "cursor";
+	return "foreground";
+}
+function inferThemeFromBackground(color) {
+	const rgb = parseCssRgbColor(color) ?? parseCssHexColor(color);
+	if (!rgb) return "dark";
+	return .2126 * toLinearRgb(rgb.red) + .7152 * toLinearRgb(rgb.green) + .0722 * toLinearRgb(rgb.blue) > .45 ? "light" : "dark";
+}
+function parseCssRgbColor(color) {
+	const match = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.exec(color);
+	if (!match) return null;
+	return {
+		blue: clamp(Number.parseInt(match[3] ?? "", 10), 0, 255),
+		green: clamp(Number.parseInt(match[2] ?? "", 10), 0, 255),
+		red: clamp(Number.parseInt(match[1] ?? "", 10), 0, 255)
+	};
+}
+function parseCssHexColor(color) {
+	const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/.exec(color);
+	if (!match) return null;
+	return {
+		blue: Number.parseInt(match[3] ?? "0", 16),
+		green: Number.parseInt(match[2] ?? "0", 16),
+		red: Number.parseInt(match[1] ?? "0", 16)
+	};
+}
+function toLinearRgb(value) {
+	const channel = clamp(value, 0, 255) / 255;
+	return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+}
+function mergeThemeUpdate(target, source) {
+	if (!source) return;
+	Object.assign(target.colors, source.colors);
+	target.palette.push(...source.palette);
+	target.theme = source.theme ?? target.theme;
+}
+function hasThemeUpdate(update) {
+	return Object.keys(update.colors).length > 0 || update.palette.length > 0 || Boolean(update.theme);
+}
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+//#endregion
+export { createTerminalThemeProtocolParser, resolveTerminalThemeQueryResponse };

package/dist/frontend/terminal.css

@@ -0,0 +1,268 @@
+.wterm {
+  --term-fg: #d4d4d4;
+  --term-bg: #1e1e1e;
+  --term-cursor: #aeafad;
+
+  --term-color-0: #1e1e1e;
+  --term-color-1: #f44747;
+  --term-color-2: #6a9955;
+  --term-color-3: #d7ba7d;
+  --term-color-4: #569cd6;
+  --term-color-5: #c586c0;
+  --term-color-6: #4ec9b0;
+  --term-color-7: #d4d4d4;
+  --term-color-8: #808080;
+  --term-color-9: #f44747;
+  --term-color-10: #6a9955;
+  --term-color-11: #d7ba7d;
+  --term-color-12: #569cd6;
+  --term-color-13: #c586c0;
+  --term-color-14: #4ec9b0;
+  --term-color-15: #ffffff;
+
+  --term-font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'Courier New', monospace;
+  --term-font-size: 14px;
+  --term-line-height: 1.2;
+  --term-row-height: 17px;
+
+  position: relative;
+  background: var(--term-bg);
+  color: var(--term-fg);
+  font-family: var(--term-font-family);
+  font-size: var(--term-font-size);
+  line-height: var(--term-line-height);
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  outline: none;
+  overflow: hidden;
+}
+
+.wterm:focus,
+.wterm:focus-visible {
+  outline: none;
+}
+
+.term-grid {
+  display: block;
+  white-space: pre;
+  contain: layout paint style;
+  will-change: contents;
+}
+
+.term-row {
+  display: block;
+  height: var(--term-row-height);
+  line-height: var(--term-row-height);
+  contain: layout style;
+}
+
+.term-row > span {
+  display: inline-block;
+  height: var(--term-row-height);
+  vertical-align: top;
+}
+
+.term-block {
+  width: 1ch;
+  overflow: hidden;
+}
+
+.term-cursor {
+  outline: 1px solid var(--term-cursor);
+  outline-offset: -1px;
+}
+
+.wterm.focused .term-cursor {
+  background: var(--term-cursor);
+  color: var(--term-bg);
+  outline: none;
+}
+
+.wterm.focused.cursor-blink .term-cursor {
+  animation: cursor-blink 1s step-end infinite;
+}
+
+@keyframes cursor-blink {
+  0%, 100% { background: var(--term-cursor); color: var(--term-bg); }
+  50% { background: transparent; color: inherit; }
+}
+
+.wterm.has-scrollback {
+  overflow-y: auto;
+}
+
+.wterm ::selection {
+  background: rgba(86, 156, 214, 0.3);
+}
+
+/* Solarized Dark */
+.wterm.theme-solarized-dark {
+  --term-fg: #839496;
+  --term-bg: #002b36;
+  --term-cursor: #93a1a1;
+  --term-color-0: #073642;
+  --term-color-1: #dc322f;
+  --term-color-2: #859900;
+  --term-color-3: #b58900;
+  --term-color-4: #268bd2;
+  --term-color-5: #d33682;
+  --term-color-6: #2aa198;
+  --term-color-7: #eee8d5;
+  --term-color-8: #586e75;
+  --term-color-9: #cb4b16;
+  --term-color-10: #586e75;
+  --term-color-11: #657b83;
+  --term-color-12: #839496;
+  --term-color-13: #6c71c4;
+  --term-color-14: #93a1a1;
+  --term-color-15: #fdf6e3;
+}
+
+/* Monokai */
+.wterm.theme-monokai {
+  --term-fg: #f8f8f2;
+  --term-bg: #272822;
+  --term-cursor: #f8f8f0;
+  --term-color-0: #272822;
+  --term-color-1: #f92672;
+  --term-color-2: #a6e22e;
+  --term-color-3: #f4bf75;
+  --term-color-4: #66d9ef;
+  --term-color-5: #ae81ff;
+  --term-color-6: #a1efe4;
+  --term-color-7: #f8f8f2;
+  --term-color-8: #75715e;
+  --term-color-9: #f92672;
+  --term-color-10: #a6e22e;
+  --term-color-11: #f4bf75;
+  --term-color-12: #66d9ef;
+  --term-color-13: #ae81ff;
+  --term-color-14: #a1efe4;
+  --term-color-15: #f9f8f5;
+}
+
+/* Light */
+.wterm.theme-light {
+  --term-fg: #383a42;
+  --term-bg: #fafafa;
+  --term-cursor: #526eff;
+  --term-color-0: #383a42;
+  --term-color-1: #e45649;
+  --term-color-2: #50a14f;
+  --term-color-3: #c18401;
+  --term-color-4: #4078f2;
+  --term-color-5: #a626a4;
+  --term-color-6: #0184bc;
+  --term-color-7: #fafafa;
+  --term-color-8: #a0a1a7;
+  --term-color-9: #e45649;
+  --term-color-10: #50a14f;
+  --term-color-11: #c18401;
+  --term-color-12: #4078f2;
+  --term-color-13: #a626a4;
+  --term-color-14: #0184bc;
+  --term-color-15: #ffffff;
+}
+
+.aitty-embed,
+.aitty-shell,
+.aitty-scroll-target,
+.aitty-scroll-viewport {
+  min-width: 0;
+  min-height: 0;
+}
+
+.aitty-embed {
+  height: 100%;
+  min-height: 240px;
+}
+
+.aitty-shell,
+.aitty-scroll-target {
+  height: 100%;
+}
+
+.aitty-scroll-target {
+  overflow: hidden;
+}
+
+.aitty-scroll-viewport {
+  height: 100%;
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.aitty-scroll-content {
+  min-height: 100%;
+}
+
+.aitty-terminal-root {
+  position: relative;
+  min-width: 0;
+  min-height: 100%;
+  max-height: none;
+  background: transparent;
+}
+
+.aitty-terminal-root.wterm {
+  --term-bg: var(--theme-term-bg, transparent);
+  --term-fg: var(--theme-term-fg, #edf2ff);
+  --term-cursor: var(--theme-term-cursor, currentColor);
+  --term-color-0: var(--theme-term-color-0, #111724);
+  --term-color-1: var(--theme-term-color-1, #ff7b72);
+  --term-color-2: var(--theme-term-color-2, #8ddb8c);
+  --term-color-3: var(--theme-term-color-3, #ffd580);
+  --term-color-4: var(--theme-term-color-4, #7cc4ff);
+  --term-color-5: var(--theme-term-color-5, #d2a8ff);
+  --term-color-6: var(--theme-term-color-6, #77e0d2);
+  --term-color-7: var(--theme-term-color-7, #edf2ff);
+  --term-color-8: var(--theme-term-color-8, #5f6f86);
+  --term-color-9: var(--theme-term-color-9, #ffa198);
+  --term-color-10: var(--theme-term-color-10, #b0f2af);
+  --term-color-11: var(--theme-term-color-11, #ffe4a8);
+  --term-color-12: var(--theme-term-color-12, #a7d7ff);
+  --term-color-13: var(--theme-term-color-13, #e1c0ff);
+  --term-color-14: var(--theme-term-color-14, #9ff4ea);
+  --term-color-15: var(--theme-term-color-15, #ffffff);
+  --term-font-size: var(--theme-term-font-size, 15px);
+  --term-line-height: var(--theme-term-line-height, 1.28);
+  color: var(--term-fg);
+  padding: 0 0 var(--theme-term-padding-bottom, 24px);
+  border-radius: 0;
+  box-shadow: none;
+  overflow: visible;
+}
+
+.aitty-terminal-root.wterm.has-scrollback {
+  overflow-y: visible;
+}
+
+.aitty-terminal-root[data-session-interactive="false"] .term-cursor {
+  opacity: 0 !important;
+}
+
+.aitty-terminal-root[data-session-interactive="false"] textarea {
+  caret-color: transparent;
+}
+
+.aitty-terminal-root .term-transcript-archive {
+  margin: 0;
+  min-height: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: var(--term-row-height);
+  pointer-events: none;
+  white-space: pre;
+}
+
+.aitty-terminal-root .term-transcript-archive:empty {
+  display: none;
+}
+
+.aitty-terminal-root[data-render-mode="screen"] .term-transcript-archive,
+.aitty-terminal-root[data-render-mode="screen"] .term-scrollback-row {
+  display: none;
+}

package/dist/theme-source.d.ts

@@ -0,0 +1,2 @@
+import { AittyTheme, AittyThemeControlFrame, AittyThemeSource, AittyThemeSubscription, createThemeControlFrame, normalizeTheme, readThemeSource, subscribeThemeSource } from "@aitty/protocol";
+export { type AittyTheme, type AittyThemeControlFrame, type AittyThemeSource, type AittyThemeSubscription, createThemeControlFrame, normalizeTheme, readThemeSource, subscribeThemeSource };

package/dist/theme-source.js

@@ -0,0 +1,2 @@
+import { createThemeControlFrame, normalizeTheme, readThemeSource, subscribeThemeSource } from "@aitty/protocol";
+export { createThemeControlFrame, normalizeTheme, readThemeSource, subscribeThemeSource };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@aitty/browser",
+  "version": "0.1.0",
+  "description": "Browser DOM terminal renderer for aitty.",
+  "keywords": [
+    "agent",
+    "ai",
+    "browser",
+    "dom",
+    "terminal",
+    "wterm"
+  ],
+  "homepage": "https://github.com/kingsword09/aitty#readme",
+  "bugs": {
+    "url": "https://github.com/kingsword09/aitty/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "Kingsword kingsword09 <kingsword09@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kingsword09/aitty.git",
+    "directory": "packages/browser"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/frontend/terminal.css"
+  ],
+  "main": "./dist/browser.js",
+  "types": "./dist/browser.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/browser.d.ts",
+      "default": "./dist/browser.js"
+    },
+    "./frontend/*": {
+      "types": "./dist/frontend/*.d.ts",
+      "default": "./dist/frontend/*.js"
+    },
+    "./style.css": "./dist/frontend/terminal.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@aitty/protocol": "workspace:*",
+    "@wterm/dom": "^0.1.9"
+  }
+}