@aitty/browser 0.1.2 → 0.2.0

package/dist/frontend/terminal.css

@@ -190,12 +190,14 @@
 .aitty-scroll-viewport {
   height: 100%;
   outline: none;
-  overflow-x: hidden;
+  overflow-anchor: none;
+  overflow-x: auto;
   overflow-y: auto;
 }
 
 .aitty-scroll-content {
   min-height: 100%;
+  overflow-anchor: none;
 }
 
 .aitty-terminal-root {
@@ -203,42 +205,84 @@
   min-width: 0;
   min-height: 100%;
   max-height: none;
-  background: transparent;
+  background: var(--theme-term-bg, transparent);
+  overflow-anchor: none;
 }
 
 .aitty-terminal-root.wterm {
   --term-bg: var(--theme-term-bg, transparent);
-  --term-fg: var(--theme-term-fg, #edf2ff);
+  --term-fg: var(--theme-term-fg, #f0f4ff);
+  --term-default-dim-mix-target: var(--term-bg);
+  --term-dim-mix-bg: var(--theme-term-dim-mix-bg, var(--term-bg));
+  --term-dim-mix-target: var(
+    --theme-term-dim-mix-target,
+    var(--theme-term-dim-fg, var(--term-dim-mix-bg))
+  );
+  --term-foreground-mix-target: var(--theme-term-foreground-mix-target, var(--term-bg));
+  --term-foreground-mix-weight: var(--theme-term-foreground-mix-weight, 100%);
+  --term-reverse-bg: var(--theme-term-reverse-bg, var(--term-fg));
+  --term-reverse-fg: var(--theme-term-reverse-fg, var(--term-bg));
   --term-cursor: var(--theme-term-cursor, currentColor);
-  --term-color-0: var(--theme-term-color-0, #111724);
+  --term-color-0: var(--theme-term-color-0, #1a212e);
   --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-2: var(--theme-term-color-2, #7ee787);
+  --term-color-3: var(--theme-term-color-3, #f2cc60);
+  --term-color-4: var(--theme-term-color-4, #79c0ff);
   --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-6: var(--theme-term-color-6, #70e1e8);
+  --term-color-7: var(--theme-term-color-7, #f0f4ff);
+  --term-color-8: var(--theme-term-color-8, #546681);
   --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-10: var(--theme-term-color-10, #aff5b4);
+  --term-color-11: var(--theme-term-color-11, #ffdf80);
+  --term-color-12: var(--theme-term-color-12, #a5d6ff);
+  --term-color-13: var(--theme-term-color-13, #e2c5ff);
+  --term-color-14: var(--theme-term-color-14, #96f0f5);
   --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);
+  --term-line-height: var(--theme-term-line-height, 1.6);
   color: var(--term-fg);
-  padding: 0 0 var(--theme-term-padding-bottom, 24px);
+  padding: 0 0 var(--theme-term-padding-bottom, 32px);
   border-radius: 0;
   box-shadow: none;
   overflow: visible;
 }
 
+.aitty-terminal-root.wterm[data-client-role="viewer"] {
+  min-inline-size: calc(var(--term-cell-width, 9px) * var(--term-cols, 80));
+}
+
+:where(html[data-theme="light"], [data-theme="light"]) .aitty-terminal-root.wterm {
+  --term-default-dim-mix-target: #0f172a;
+  --term-dim-mix-target: var(
+    --theme-term-dim-mix-target,
+    var(--theme-term-dim-fg, var(--term-default-dim-mix-target))
+  );
+  --term-foreground-mix-target: var(--theme-term-foreground-mix-target, #0f172a);
+  --term-foreground-mix-weight: var(--theme-term-foreground-mix-weight, 72%);
+}
+
 .aitty-terminal-root.wterm.has-scrollback {
   overflow-y: visible;
 }
 
+.aitty-terminal-root.wterm.focused .term-cursor {
+  box-shadow: 0 -1px 0 var(--term-cursor), 0 1px 0 var(--term-cursor);
+}
+
+.aitty-terminal-root.wterm.focused.cursor-blink .term-cursor {
+  animation-name: aitty-cursor-blink;
+}
+
+.aitty-terminal-root .term-row > span {
+  overflow: visible;
+}
+
+.aitty-terminal-root .term-block,
+.aitty-terminal-root .term-wide {
+  overflow: hidden;
+}
+
 .aitty-terminal-root[data-session-interactive="false"] .term-cursor {
   opacity: 0 !important;
 }
@@ -247,18 +291,90 @@
   caret-color: transparent;
 }
 
+.aitty-terminal-root[data-session-interactive="false"] {
+  cursor: default;
+}
+
+@media (max-width: 768px) and (pointer: coarse) {
+  .aitty-terminal-root.wterm {
+    --term-mobile-cursor-width: clamp(2px, 0.16em, 3px);
+    --term-mobile-cursor-color: color-mix(in srgb, var(--term-cursor) 88%, var(--term-fg));
+    --term-mobile-cursor-glow: color-mix(in srgb, var(--term-cursor) 34%, transparent);
+  }
+
+  .aitty-terminal-root.wterm .term-cursor,
+  .aitty-terminal-root.wterm.focused .term-cursor {
+    position: relative;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .aitty-terminal-root.wterm.focused.cursor-blink .term-cursor {
+    animation-name: none;
+  }
+
+  .aitty-terminal-root.wterm .term-cursor::after {
+    content: "";
+    position: absolute;
+    top: 0.18em;
+    bottom: 0.18em;
+    left: 0;
+    width: var(--term-mobile-cursor-width);
+    border-radius: 999px;
+    background: var(--term-mobile-cursor-color);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--term-bg) 22%, transparent),
+      0 0 9px var(--term-mobile-cursor-glow);
+    opacity: 0.48;
+    pointer-events: none;
+  }
+
+  .aitty-terminal-root.wterm.focused .term-cursor::after {
+    opacity: 1;
+  }
+
+  .aitty-terminal-root.wterm.focused.cursor-blink .term-cursor::after {
+    animation: aitty-mobile-cursor-blink 1.05s steps(2, start) infinite;
+  }
+
+  :where(html[data-theme="light"], [data-theme="light"]) .aitty-terminal-root.wterm {
+    --term-mobile-cursor-color: color-mix(in srgb, var(--term-cursor) 92%, var(--term-fg));
+    --term-mobile-cursor-glow: color-mix(in srgb, var(--term-cursor) 24%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .aitty-terminal-root.wterm.focused.cursor-blink .term-cursor::after {
+      animation: none;
+    }
+  }
+}
+
 .aitty-terminal-root .term-transcript-archive {
+  margin: 0;
+  min-height: 0;
+  padding: 0;
+  color: inherit;
+  pointer-events: none;
+}
+
+.aitty-terminal-root .term-transcript-visible {
   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 {
+.aitty-terminal-root .term-transcript-spacer {
+  min-height: 0;
+  pointer-events: none;
+}
+
+.aitty-terminal-root .term-transcript-archive:empty,
+.aitty-terminal-root .term-transcript-visible:empty {
   display: none;
 }
 
@@ -266,3 +382,29 @@
 .aitty-terminal-root[data-render-mode="screen"] .term-scrollback-row {
   display: none;
 }
+
+@keyframes aitty-cursor-blink {
+  0%,
+  100% {
+    background: var(--term-cursor);
+    box-shadow: 0 -1px 0 var(--term-cursor), 0 1px 0 var(--term-cursor);
+    color: var(--term-bg);
+  }
+
+  50% {
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+  }
+}
+
+@keyframes aitty-mobile-cursor-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.22;
+  }
+}

package/dist/frontend/virtual-transcript-window.js

@@ -0,0 +1,42 @@
+function resolveVirtualTranscriptWindow(options) {
+	const totalRows = Math.max(0, Math.floor(options.totalRows));
+	if (totalRows === 0) return {
+		bottomSpacerHeight: 0,
+		endRow: 0,
+		renderedRows: 0,
+		startRow: 0,
+		topSpacerHeight: 0,
+		virtualized: false
+	};
+	const rowHeight = Math.max(1, options.rowHeight);
+	const viewportHeight = Math.max(rowHeight, options.viewportHeight || rowHeight);
+	const overscanRows = Math.max(0, Math.floor(options.overscanRows ?? 80));
+	const thresholdRows = Math.max(1, Math.floor(options.thresholdRows ?? 600));
+	const visibleRowCapacity = Math.max(1, Math.ceil(viewportHeight / rowHeight));
+	const maxRenderedRows = Math.max(thresholdRows, visibleRowCapacity + overscanRows * 2);
+	if (totalRows <= maxRenderedRows) return {
+		bottomSpacerHeight: 0,
+		endRow: totalRows,
+		renderedRows: totalRows,
+		startRow: 0,
+		topSpacerHeight: 0,
+		virtualized: false
+	};
+	const archiveTop = Math.max(0, options.archiveTop ?? 0);
+	const viewportStart = Math.max(0, options.scrollTop - archiveTop);
+	const startRow = clamp(Math.floor(viewportStart / rowHeight) - overscanRows, 0, Math.max(0, totalRows - 1));
+	const endRow = clamp(startRow + maxRenderedRows, startRow, totalRows);
+	return {
+		bottomSpacerHeight: Math.max(0, totalRows - endRow) * rowHeight,
+		endRow,
+		renderedRows: endRow - startRow,
+		startRow,
+		topSpacerHeight: startRow * rowHeight,
+		virtualized: true
+	};
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+//#endregion
+export { resolveVirtualTranscriptWindow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aitty/browser",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Browser DOM terminal renderer for aitty.",
   "keywords": [
     "agent",
@@ -48,7 +48,7 @@
     "node": ">=20"
   },
   "dependencies": {
-    "@wterm/dom": "^0.1.9",
-    "@aitty/protocol": "0.1.2"
+    "@aitty/wterm-dom": "^0.3.1-aitty.2",
+    "@aitty/protocol": "0.2.0"
   }
 }