dsh-smooth-stream 0.6.1 → 0.7.0

package/src/client/StreamBuffer.ts

@@ -0,0 +1,145 @@
+/**
+ * High-performance append-only stream buffer with code-point cursor addressing.
+ *
+ * Avoids per-frame `[...content].slice().join('')` or repeated full-string allocations.
+ * Chunks are stored in an indexed rope array, and code-point to UTF-16 offset maps
+ * are updated incrementally per chunk.
+ */
+
+export class StreamBuffer {
+  private chunks: string[] = []
+  private chunkCodePoints: number[] = []
+  private chunkCharLengths: number[] = []
+  private totalCodePoints = 0
+  private fullStringCache: string | null = null
+
+  constructor(initialText = '') {
+    if (initialText.length > 0) {
+      this.append(initialText)
+    }
+  }
+
+  /**
+   * Count Unicode code points (perceived characters, UTF-16 surrogate pairs counted as 1).
+   */
+  static countCodePoints(str: string): number {
+    let count = 0
+    for (let i = 0; i < str.length; i++) {
+      const code = str.charCodeAt(i)
+      if (code >= 0xd800 && code <= 0xdbff && i + 1 < str.length) {
+        const next = str.charCodeAt(i + 1)
+        if (next >= 0xdc00 && next <= 0xdfff) {
+          i++
+        }
+      }
+      count++
+    }
+    return count
+  }
+
+  /**
+   * Convert code-point index into UTF-16 unit offset within a single chunk.
+   */
+  private static codePointToOffset(str: string, targetCp: number): number {
+    let cp = 0
+    let offset = 0
+    while (offset < str.length && cp < targetCp) {
+      const code = str.charCodeAt(offset)
+      if (code >= 0xd800 && code <= 0xdbff && offset + 1 < str.length) {
+        const next = str.charCodeAt(offset + 1)
+        if (next >= 0xdc00 && next <= 0xdfff) {
+          offset++
+        }
+      }
+      offset++
+      cp++
+    }
+    return offset
+  }
+
+  /**
+   * Append a new chunk to the buffer.
+   */
+  append(chunk: string): void {
+    if (chunk.length === 0) return
+    const cps = StreamBuffer.countCodePoints(chunk)
+    this.chunks.push(chunk)
+    this.chunkCodePoints.push(cps)
+    this.chunkCharLengths.push(chunk.length)
+    this.totalCodePoints += cps
+    this.fullStringCache = null
+  }
+
+  /**
+   * Total perceived characters (code points) in the buffer.
+   */
+  get length(): number {
+    return this.totalCodePoints
+  }
+
+  /**
+   * Reset the buffer to empty or to a new baseline string.
+   */
+  reset(text = ''): void {
+    this.chunks = []
+    this.chunkCodePoints = []
+    this.chunkCharLengths = []
+    this.totalCodePoints = 0
+    this.fullStringCache = null
+    if (text.length > 0) {
+      this.append(text)
+    }
+  }
+
+  /**
+   * Extract a slice of text between `fromCp` and `toCp` (both in code points).
+   */
+  slice(fromCp: number, toCp: number): string {
+    const start = Math.max(0, fromCp)
+    const end = Math.min(this.totalCodePoints, toCp)
+    if (start >= end) return ''
+
+    // Fast path: if requesting the full string
+    if (start === 0 && end === this.totalCodePoints) {
+      return this.toString()
+    }
+
+    let result = ''
+    let accumulatedCp = 0
+
+    for (let i = 0; i < this.chunks.length; i++) {
+      const chunkCps = this.chunkCodePoints[i]!
+      const chunkEndCp = accumulatedCp + chunkCps
+
+      if (chunkEndCp <= start) {
+        accumulatedCp = chunkEndCp
+        continue
+      }
+      if (accumulatedCp >= end) {
+        break
+      }
+
+      const chunk = this.chunks[i]!
+      const localStartCp = Math.max(0, start - accumulatedCp)
+      const localEndCp = Math.min(chunkCps, end - accumulatedCp)
+
+      const startOffset = localStartCp === 0 ? 0 : StreamBuffer.codePointToOffset(chunk, localStartCp)
+      const endOffset = localEndCp === chunkCps ? chunk.length : StreamBuffer.codePointToOffset(chunk, localEndCp)
+
+      result += chunk.slice(startOffset, endOffset)
+      accumulatedCp = chunkEndCp
+    }
+
+    return result
+  }
+
+  /**
+   * Get the full concatenated string (cached until next append/reset).
+   */
+  toString(): string {
+    if (this.fullStringCache === null) {
+      this.fullStringCache = this.chunks.join('')
+    }
+    return this.fullStringCache
+  }
+}

package/src/client/TypewriterAssistantNodeView.module.css

@@ -1,10 +1,28 @@
+/*
+ * Font size and line height follow the Host's content-font axis, with
+ * fallbacks chosen so that EACH supported Harness version renders exactly what
+ * its own assistant root renders.
+ *
+ * The axis is published on `document.body` by the Harness layout plugin
+ * (`--dsh-content-font-size`) and derived by its theme stylesheet
+ * (`--dsh-content-font-delta: calc(size - 14px)`,
+ * `--dsh-content-font-size-secondary`, `--dsh-content-font-delta-secondary`).
+ * No package in the pinned 0.1.0-rc.6 dependency tree assigns any of them -
+ * rc.6 has neither the layout nor the theme plugin - and rc.6's own assistant
+ * root is a hard `16px/28px`.
+ *
+ * So the fallback has to be rc.6's value, not 14px: `var(size, 16px)` with
+ * `calc(24px + var(delta, 4px))` yields 16px/28px on rc.6 (matching its root)
+ * and the Host's live value on 0.1.5+ (where the same expression is what the
+ * Harness itself writes).
+ */
 .root {
   display: flex;
   flex-direction: column;
   min-width: 0;
   color: var(--dsw-alias-label-primary);
-  font-size: 16px;
-  line-height: 28px;
+  font-size: var(--dsh-content-font-size, 16px);
+  line-height: calc(24px + var(--dsh-content-font-delta, 4px));
 }
 
 .body {
@@ -14,6 +32,10 @@
   min-width: 0;
 }
 
+.body > [data-turn-process-inline][hidden] {
+  margin-bottom: -16px;
+}
+
 .think {
   display: flex;
   flex-direction: column;
@@ -66,13 +88,19 @@
   background: var(--dsw-alias-label-caption);
 }
 
+/*
+ * Think text reads the secondary tier, mirroring the Harness's own reasoning
+ * row (`ui-chat/src/client/chat/ReasoningRow.module.css`): one step under the
+ * body size, with `secondary` fallbacks that reproduce rc.6's hard `14px/24px`
+ * when no Host axis is published.
+ */
 .thinkSummary {
   min-width: 0;
   overflow: hidden;
   flex: 1 1 auto;
   color: var(--dsw-alias-label-tertiary);
-  font-size: 14px;
-  line-height: 24px;
+  font-size: var(--dsh-content-font-size-secondary, 14px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 4px));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -82,12 +110,38 @@
 }
 
 .thinkBody {
-  padding: 4px 0 4px 22px;
+  /* Indent under the title, which starts at leading (16 + delta) + gap 6. */
+  padding: 4px 0 4px calc(22px + var(--dsh-content-font-delta, 0px));
   color: var(--dsw-alias-label-tertiary);
-  font-size: 14px;
-  line-height: 24px;
+  font-size: var(--dsh-content-font-size-secondary, 14px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 4px));
   white-space: pre-wrap;
   word-break: break-word;
+  max-height: var(--dsh-thinking-max-height, 300px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-border-l4, rgba(128, 128, 128, 0.4)) transparent;
+  contain: layout;
+  transform: translateZ(0);
+  will-change: scroll-position;
+}
+
+.thinkBody::-webkit-scrollbar {
+  width: 6px;
+}
+
+.thinkBody::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.thinkBody::-webkit-scrollbar-thumb {
+  background-color: var(--dsw-alias-border-l4, rgba(128, 128, 128, 0.4));
+  border-radius: 3px;
+}
+
+.thinkBody::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dsw-alias-border-l3, rgba(128, 128, 128, 0.6));
 }
 
 /*
@@ -106,7 +160,9 @@
   overflow: hidden;
   display: flex;
   align-items: center;
-  height: 24px;
+  /* The Harness DisclosureRow reserves this row with the same expression, so
+   * the disclosure grows with the reading font instead of clipping it. */
+  height: calc(24px + var(--dsh-content-font-delta, 0px));
   min-width: 0;
   cursor: pointer;
 }
@@ -114,8 +170,8 @@
 .disclosureLeading {
   position: relative;
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: calc(16px + var(--dsh-content-font-delta, 0px));
+  height: calc(16px + var(--dsh-content-font-delta, 0px));
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -123,6 +179,11 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
+.disclosureLeading svg:not([data-state]) {
+  width: calc(14px + var(--dsh-content-font-delta, 0px));
+  height: calc(14px + var(--dsh-content-font-delta, 0px));
+}
+
 .disclosureIconIdle {
   display: inline-flex;
   opacity: 1;
@@ -147,8 +208,8 @@
 
 .disclosureTitle {
   flex: none;
-  font-size: 14px;
-  line-height: 24px;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  line-height: calc(24px + var(--dsh-content-font-delta, 0px));
   color: var(--dsw-alias-label-secondary);
 }
 
@@ -165,6 +226,7 @@
   display: grid;
   grid-template-rows: 1fr;
   visibility: visible;
+  overflow: hidden;
   transition:
     grid-template-rows var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
     visibility 0s;
@@ -178,6 +240,11 @@
     visibility 0s var(--ds-transition-duration, 0.2s);
 }
 
+.disclosureContent[data-collapsed] > * {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 /* Auto-close at stream end snaps instead of animating: the follower's settle
  * spring already absorbs the height step through the compositor, so a grid
  * animation would double-animate the same collapse for a dozen frames. */
@@ -187,6 +254,9 @@
 
 .disclosureContent > * {
   min-height: 0;
+}
+
+.disclosureContent[data-collapsed] > * {
   overflow: hidden;
 }