@theia/ai-chat-ui 1.76.0-next.7 → 1.76.0

package/src/browser/style/chat-find.css

@@ -0,0 +1,107 @@
+/********************************************************************************
+ * Copyright (C) 2026 Safi Seid-Ahmad, K2view and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+/* The widget sits as a zero-height flex item right before the chat tree; the bar overlays the tree's top-right corner. */
+.theia-chat-find-widget {
+  position: relative;
+  flex: 0 0 0;
+  height: 0;
+  overflow: visible;
+  z-index: 10;
+}
+
+/* Input, toggles and buttons use the core `theia-input` and `action-label` styles; this only lays them out. */
+.theia-chat-find-bar {
+  position: absolute;
+  top: 4px;
+  right: 20px;
+  max-width: calc(100% - 28px);
+  box-sizing: border-box;
+  display: flex;
+  /* In a narrow view, the count and buttons wrap below the input rather than squeezing it. */
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 4px;
+  background: var(--theia-editorWidget-background);
+  color: var(--theia-editorWidget-foreground);
+  border: var(--theia-border-width) solid var(--theia-widget-border);
+  border-radius: 4px;
+  box-shadow: 0 0 8px 2px var(--theia-widget-shadow);
+}
+
+.theia-chat-find-input-box {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: center;
+  background: var(--theia-input-background);
+  border: var(--theia-border-width) solid var(--theia-input-border, var(--theia-input-background));
+  border-radius: 2px;
+}
+
+.theia-chat-find-input-box:focus-within {
+  border-color: var(--theia-focusBorder);
+}
+
+.theia-chat-find-input-box.no-results {
+  border-color: var(--theia-inputValidation-errorBorder);
+}
+
+.theia-chat-find-input-box .theia-input {
+  width: 140px;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: unset;
+  padding: 1px 4px;
+  border: none;
+  outline: none;
+}
+
+.theia-chat-find-option {
+  flex: none;
+  border: var(--theia-border-width) solid transparent;
+  background: none;
+  color: inherit;
+}
+
+.theia-chat-find-option.enabled {
+  color: var(--theia-inputOption-activeForeground);
+  border-color: var(--theia-inputOption-activeBorder);
+  background-color: var(--theia-inputOption-activeBackground);
+}
+
+.theia-chat-find-count {
+  /* Wide enough for 'No results' and most counts, so the bar does not change width while typing. */
+  min-width: 64px;
+  margin: 0 4px;
+  text-align: center;
+  white-space: nowrap;
+  font-size: var(--theia-ui-font-size0);
+}
+
+.theia-chat-find-count.no-results {
+  color: var(--theia-errorForeground);
+}
+
+::highlight(theia-chat-find-match) {
+  background-color: var(--theia-editor-findMatchHighlightBackground);
+}
+
+::highlight(theia-chat-find-current) {
+  background-color: var(--theia-editor-findMatchBackground);
+}

package/src/browser/style/index.css

@@ -1,6 +1,16 @@
 .chat-view-widget {
   display: flex;
   flex-direction: column;
+  /* Background of the area the chat is docked in, for elements that must be opaque. */
+  --chat-ambient-background: var(--theia-editor-background);
+}
+
+.theia-side-panel .chat-view-widget {
+  --chat-ambient-background: var(--theia-sideBar-background);
+}
+
+#theia-bottom-content-panel .chat-view-widget {
+  --chat-ambient-background: var(--theia-panel-background);
 }
 
 .chat-tree-view-widget {
@@ -16,7 +26,7 @@
   cursor: default;
   display: flex;
   flex-direction: column;
-  padding: 16px 20px 6px 20px;
+  padding: 10px 20px 6px 20px;
   user-select: text;
   -webkit-user-select: text;
   border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
@@ -27,13 +37,36 @@ div:last-child>.theia-ChatNode {
   border: none;
 }
 
+/* Pinned while its node is on screen; opaque to cover the content scrolling underneath. */
 .theia-ChatNodeHeader {
   align-items: center;
   display: flex;
   justify-content: space-between;
   height: 24px;
   gap: 8px;
-  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* Full-bleed: cancel the node's horizontal padding, then re-apply it. */
+  margin: 0 -20px;
+  padding: var(--theia-ui-padding) 20px;
+  width: auto;
+  background-color: var(--chat-ambient-background);
+  container-type: scroll-state;
+}
+
+/* Shadow only while pinned; without scroll-state query support the header stays flat. */
+@container scroll-state(stuck: top) {
+  .theia-ChatNodeHeader::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: calc(var(--theia-ui-padding) * 2 / 3);
+    pointer-events: none;
+    background: linear-gradient(var(--theia-widget-shadow), transparent);
+  }
 }
 
 .theia-ChatNodeHeader .theia-AgentAvatar {
@@ -66,12 +99,6 @@ div:last-child>.theia-ChatNode {
   color: var(--theia-progressBar-background);
 }
 
-.theia-ChatNodeHeader .theia-ChatContentInProgress-Cancel {
-  position: absolute;
-  z-index: 999;
-  right: 20px;
-}
-
 .theia-ChatNode .codicon {
   text-align: left;
 }
@@ -1298,6 +1325,46 @@ details.theia-tool-confirmation-args>summary::marker {
   text-wrap: auto;
 }
 
+.theia-thinking.active {
+  cursor: default;
+}
+
+.theia-thinking-status {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--theia-ui-padding) / 2);
+}
+
+/* Registered so that the fade can be transitioned. */
+@property --theia-thinking-preview-fade {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+/* Last lines of the reasoning, anchored to the bottom and clipped at the top. */
+.theia-thinking-preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  max-height: 3lh;
+  margin-left: calc(var(--theia-icon-size) + var(--theia-ui-padding) / 2);
+  overflow: hidden;
+  user-select: none;
+  mask-image: linear-gradient(to bottom, transparent, black var(--theia-thinking-preview-fade));
+  transition: --theia-thinking-preview-fade 600ms ease-out;
+}
+
+.theia-thinking-preview-text {
+  flex-shrink: 0;
+  overflow-wrap: anywhere;
+}
+
+.theia-thinking-preview.overflowing {
+  --theia-thinking-preview-fade: 1lh;
+}
+
 .theia-toolCall-args-label {
   font-weight: normal;
   color: var(--theia-descriptionForeground);

package/src/common/toolcall-utils.spec.ts

@@ -103,16 +103,125 @@ describe('extractJsonStringField', () => {
             expect(result).to.be.undefined;
         });
 
-        it('should handle escaped quotes - regex stops at first unescaped quote', () => {
+        it('should handle escaped quotes in complete JSON', () => {
             // With complete JSON, JSON.parse handles escapes correctly
             const result = extractJsonStringField('{"cmd": "echo \\"hello\\""}', 'cmd');
             expect(result).to.equal('echo "hello"');
         });
 
-        it('should handle escaped quotes in partial JSON - regex captures up to first quote', () => {
-            // With incomplete JSON, regex stops at the first unescaped quote character
+        it('should unescape escaped quotes in partial JSON', () => {
             const result = extractJsonStringField('{"cmd": "echo \\"hello', 'cmd');
-            expect(result).to.equal('echo \\');
+            expect(result).to.equal('echo "hello');
         });
     });
+
+    describe('parse/scan boundary', () => {
+        it('should unescape via JSON.parse when complete JSON has trailing whitespace', () => {
+            const result = extractJsonStringField('{"cmd": "echo \\"hello\\""}\n', 'cmd');
+            expect(result).to.equal('echo "hello"');
+        });
+
+        it('should extract by scanning when JSON ends with a brace but is still incomplete', () => {
+            const result = extractJsonStringField('{"path": "src/index.ts", "meta": {"x": "y"}', 'path');
+            expect(result).to.equal('src/index.ts');
+        });
+
+        it('should return undefined for a complete array without the field', () => {
+            const result = extractJsonStringField('[{"path": "src/index.ts"}]', 'other');
+            expect(result).to.be.undefined;
+        });
+
+        it('should return undefined for an incomplete array, which has no top-level field', () => {
+            const result = extractJsonStringField('[{"path": "src/index.ts"', 'path');
+            expect(result).to.be.undefined;
+        });
+    });
+
+    describe('top-level fields only (streaming)', () => {
+        it('should ignore a matching key inside a nested object', () => {
+            const result = extractJsonStringField('{"meta": {"path": "inner.ts"}, "path": "outer.ts', 'path');
+            expect(result).to.equal('outer.ts');
+        });
+
+        it('should ignore a matching key inside a nested array of objects', () => {
+            const result = extractJsonStringField('{"edits": [{"path": "inner.ts"}], "path": "outer.ts', 'path');
+            expect(result).to.equal('outer.ts');
+        });
+
+        it('should ignore a matching key inside a string value', () => {
+            const result = extractJsonStringField('{"content": "{\\"path\\": \\"inner.ts\\"}", "path": "outer.ts', 'path');
+            expect(result).to.equal('outer.ts');
+        });
+
+        it('should return undefined when the field only occurs nested', () => {
+            const result = extractJsonStringField('{"meta": {"path": "inner.ts"}, "content": "abc', 'path');
+            expect(result).to.be.undefined;
+        });
+
+        it('should return undefined while a nested object is still streaming', () => {
+            const result = extractJsonStringField('{"meta": {"path": "inner.ts', 'path');
+            expect(result).to.be.undefined;
+        });
+
+        it('should return undefined when the top-level field is not a string', () => {
+            const result = extractJsonStringField('{"path": 42, "content": "abc', 'path');
+            expect(result).to.be.undefined;
+        });
+
+        it('should extract a field that follows a non-string top-level value', () => {
+            const result = extractJsonStringField('{"line": 42, "path": "src/index.ts', 'path');
+            expect(result).to.equal('src/index.ts');
+        });
+
+        it('should extract a field that follows a nested object', () => {
+            const result = extractJsonStringField('{"meta": {"a": {"b": "c"}}, "path": "src/index.ts', 'path');
+            expect(result).to.equal('src/index.ts');
+        });
+
+        it('should not match a key whose name merely ends with the field name', () => {
+            const result = extractJsonStringField('{"filepath": "wrong.ts", "path": "right.ts', 'path');
+            expect(result).to.equal('right.ts');
+        });
+    });
+
+    describe('escapes in streaming values', () => {
+        it('should not end the value at an escaped quote', () => {
+            const result = extractJsonStringField('{"path": "a\\"b", "other": "x', 'path');
+            expect(result).to.equal('a"b');
+        });
+
+        it('should unescape backslashes in a streaming Windows path', () => {
+            const result = extractJsonStringField('{"path": "C:\\\\Users\\\\me', 'path');
+            expect(result).to.equal('C:\\Users\\me');
+        });
+
+        it('should drop a trailing incomplete escape', () => {
+            const result = extractJsonStringField('{"path": "a\\', 'path');
+            expect(result).to.equal('a');
+        });
+
+        it('should drop a trailing incomplete unicode escape', () => {
+            const result = extractJsonStringField('{"path": "a\\u00', 'path');
+            expect(result).to.equal('a');
+        });
+
+        it('should keep a completed escaped backslash at the end of a streaming value', () => {
+            const result = extractJsonStringField('{"path": "a\\\\', 'path');
+            expect(result).to.equal('a\\');
+        });
+
+        it('should keep literal text that looks like an escape', () => {
+            const result = extractJsonStringField('{"path": "a\\\\u0041', 'path');
+            expect(result).to.equal('a\\u0041');
+        });
+    });
+
+    describe('large streaming payloads', () => {
+        it('should extract a field that follows a very large content value', () => {
+            const content = 'x'.repeat(1_000_000);
+            const result = extractJsonStringField(`{"content": "${content}", "path": "src/index.ts`, 'path');
+            expect(result).to.equal('src/index.ts');
+        });
+    });
+
 });

package/src/common/toolcall-utils.ts

@@ -14,23 +14,221 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
+/**
+ * Tells whether `json` may already be complete, i.e. whether handing it to `JSON.parse` can succeed at all.
+ *
+ * Tool call arguments are rendered repeatedly while they stream in, and the arguments object is truncated
+ * until the last delta arrives: `JSON.parse` would scan the whole string only to throw, which gets quadratic
+ * as the arguments grow (noticeable with large payloads such as whole-file writes). An arguments object can
+ * only be complete once it ends with `}`, so callers skip the parse until then. Text that does not start
+ * with `{` is not a streaming arguments object and is always considered worth parsing.
+ */
+export function mayBeCompleteJson(json: string): boolean {
+    const trimmed = json.trim();
+    return !trimmed.startsWith('{') || trimmed.endsWith('}');
+}
+
 /**
  * Extracts a string field value from potentially incomplete JSON.
- * Tries JSON.parse first, then falls back to regex extraction for streaming scenarios.
+ * Uses JSON.parse for complete JSON, and a scan of the top-level entries for streaming scenarios.
  */
 export function extractJsonStringField(json: string | undefined, fieldName: string): string | undefined {
     if (!json) {
         return undefined;
     }
-    try {
-        const parsed = JSON.parse(json);
-        if (parsed && typeof parsed === 'object' && fieldName in parsed && typeof parsed[fieldName] === 'string') {
-            return parsed[fieldName];
+    if (mayBeCompleteJson(json)) {
+        try {
+            const parsed = JSON.parse(json);
+            if (parsed && typeof parsed === 'object' && fieldName in parsed && typeof parsed[fieldName] === 'string') {
+                return parsed[fieldName];
+            }
+            return undefined;
+        } catch {
+            // fall through to the streaming extraction
+        }
+    }
+    return extractTopLevelStringField(json, fieldName);
+}
+
+const BACKSLASH = 92;
+
+/** A JSON string token, which may be cut off by the end of a streaming payload. */
+interface ScannedString {
+    /** The index right after the last character of the body, i.e. the end of the still escaped contents. */
+    bodyEnd: number;
+    /** The index right after the closing quote, or the end of the input if there is none yet. */
+    end: number;
+    /** Whether the closing quote was found. */
+    terminated: boolean;
+}
+
+/**
+ * Extracts a top-level string field from a truncated JSON object by walking its entries.
+ *
+ * A regex over the whole payload cannot tell nesting apart, so it reports the first `"<field>": "..."` anywhere,
+ * including one inside a nested object or array - a `{"edits": [{"path": "a"}], "path": "b"` argument object would
+ * be labelled with `a`. Walking the entries skips over nested values and over string contents, so only the keys of
+ * the arguments object itself can match, and escapes within the value are resolved instead of ending it early.
+ *
+ * Values are skipped with `indexOf`, which keeps large payloads (e.g. whole-file writes) a native scan.
+ */
+function extractTopLevelStringField(json: string, fieldName: string): string | undefined {
+    let index = skipWhitespace(json, 0);
+    if (json[index] !== '{') {
+        // tool call arguments are always an object; anything else has no top-level field to report
+        return undefined;
+    }
+    index = skipWhitespace(json, index + 1);
+    while (index < json.length && json[index] !== '}') {
+        if (json[index] !== '"') {
+            return undefined;
+        }
+        const keyStart = index;
+        const key = readString(json, index);
+        if (!key.terminated) {
+            return undefined;
+        }
+        index = skipWhitespace(json, key.end);
+        if (json[index] !== ':') {
+            return undefined;
+        }
+        index = skipWhitespace(json, index + 1);
+        if (index >= json.length) {
+            return undefined;
+        }
+        const matches = matchesKey(json, keyStart, key, fieldName);
+        if (json[index] === '"') {
+            const value = readString(json, index);
+            if (matches) {
+                return unescapeJsonStringContent(json.substring(index + 1, value.bodyEnd), value.terminated);
+            }
+            if (!value.terminated) {
+                return undefined;
+            }
+            index = value.end;
+        } else {
+            if (matches) {
+                // the field is present, but not a string - same as what the JSON.parse branch reports
+                return undefined;
+            }
+            const end = skipValue(json, index);
+            if (end < 0) {
+                return undefined;
+            }
+            index = end;
+        }
+        index = skipWhitespace(json, index);
+        if (json[index] === ',') {
+            index = skipWhitespace(json, index + 1);
         }
-    } catch {
-        const regex = new RegExp('"' + fieldName + '"\\s*:\\s*"([^"]*)"?');
-        const match = regex.exec(json);
-        return match?.[1];
     }
     return undefined;
 }
+
+/**
+ * Reads the string token starting at `start`, which must be a quote.
+ *
+ * The closing quote is searched with `indexOf`, so the body - up to megabytes of file content - is skipped by a native
+ * scan rather than a per-character loop, and only escaped quotes cost an iteration. Only the bounds are reported: the
+ * body of a value that is merely skipped over is never materialized.
+ */
+function readString(json: string, start: number): ScannedString {
+    let index = start + 1;
+    for (;;) {
+        const quote = json.indexOf('"', index);
+        if (quote < 0) {
+            return { bodyEnd: json.length, end: json.length, terminated: false };
+        }
+        if (!isEscaped(json, quote)) {
+            return { bodyEnd: quote, end: quote + 1, terminated: true };
+        }
+        index = quote + 1;
+    }
+}
+
+/** Skips the non-string value starting at `start`, returning the index right after it, or `-1` if it is still streaming. */
+function skipValue(json: string, start: number): number {
+    let index = start;
+    if (json[index] === '{' || json[index] === '[') {
+        let depth = 0;
+        while (index < json.length) {
+            const character = json[index];
+            if (character === '"') {
+                const contained = readString(json, index);
+                if (!contained.terminated) {
+                    return -1;
+                }
+                index = contained.end;
+                continue;
+            }
+            if (character === '{' || character === '[') {
+                depth++;
+            } else if (character === '}' || character === ']') {
+                depth--;
+                if (depth === 0) {
+                    return index + 1;
+                }
+            }
+            index++;
+        }
+        return -1;
+    }
+    while (index < json.length && json[index] !== ',' && json[index] !== '}') {
+        index++;
+    }
+    return index < json.length ? index : -1;
+}
+
+function skipWhitespace(json: string, start: number): number {
+    let index = start;
+    while (index < json.length) {
+        const character = json[index];
+        if (character !== ' ' && character !== '\n' && character !== '\r' && character !== '\t') {
+            break;
+        }
+        index++;
+    }
+    return index;
+}
+
+/** Tells whether the character at `index` is preceded by an odd number of backslashes, i.e. whether it is escaped. */
+function isEscaped(text: string, index: number): boolean {
+    let backslashes = 0;
+    while (index - backslashes > 0 && text.charCodeAt(index - backslashes - 1) === BACKSLASH) {
+        backslashes++;
+    }
+    return backslashes % 2 === 1;
+}
+
+/** Compares a scanned key against the wanted field name, resolving escapes only in the rare case that the key has any. */
+function matchesKey(json: string, keyStart: number, key: ScannedString, fieldName: string): boolean {
+    const raw = json.substring(keyStart + 1, key.bodyEnd);
+    return (raw.indexOf('\\') < 0 ? raw : unescapeJsonStringContent(raw, true)) === fieldName;
+}
+
+/** Resolves the escapes of a JSON string body, dropping the escape the stream was cut off in the middle of. */
+function unescapeJsonStringContent(raw: string, terminated: boolean): string {
+    const content = terminated ? raw : dropIncompleteEscape(raw);
+    try {
+        return JSON.parse('"' + content + '"');
+    } catch {
+        // control characters and other invalid contents: the raw text is still the best label we have
+        return content;
+    }
+}
+
+/** Drops a trailing escape sequence that has not fully arrived yet, so that the value can be unescaped. */
+function dropIncompleteEscape(raw: string): string {
+    let backslashes = 0;
+    while (backslashes < raw.length && raw.charCodeAt(raw.length - backslashes - 1) === BACKSLASH) {
+        backslashes++;
+    }
+    if (backslashes % 2 === 1) {
+        return raw.substring(0, raw.length - 1);
+    }
+    const unicodeEscape = /\\u[0-9a-fA-F]{0,3}$/.exec(raw);
+    if (unicodeEscape && !isEscaped(raw, unicodeEscape.index)) {
+        return raw.substring(0, unicodeEscape.index);
+    }
+    return raw;
+}