Skip to content

initial draft: Claude code integration#2678

Merged
abose merged 6 commits intomainfrom
z
Feb 17, 2026
Merged

initial draft: Claude code integration#2678
abose merged 6 commits intomainfrom
z

Conversation

@abose
Copy link
Member

@abose abose commented Feb 17, 2026

No description provided.

- Add SidebarView.resize(width) and SidebarView.getWidth() APIs for
  programmatic sidebar resizing with proper persistence and resync
- Auto-widen sidebar to 370px on first AI tab activation when narrower
  than the preferred width, using a one-time view state flag
- Switch to Files tab when Show in File Tree is triggered from another tab
- Expose SidebarView on brackets.test for integration tests
- Add integration tests for resize API, Show in File Tree tab switching,
  and sidebar width save/restore
@abose abose changed the title Claude code integration initial draft: Claude code integration Feb 17, 2026
Comment on lines +658 to +660
'<span class="ai-tool-icon" style="color:' + color + '">' +
'<i class="' + iconClass + '"></i>' +
'</span>'

Check failure

Code scanning / CodeQL

DOM text reinterpreted as HTML High

DOM text
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI about 5 hours ago

In general, the problem is that untrusted DOM text (data-tool-icon) is being concatenated into an HTML string that is then interpreted as HTML. The safest fix is to construct the DOM nodes programmatically using document.createElement / jQuery element creation and set attributes and text through DOM APIs, rather than by string concatenation. This way, attacker-controlled values can only populate attribute values or text, not create new elements or event handlers.

For this specific case, instead of building:

$prev.find(".ai-tool-spinner").replaceWith(
    '<span class="ai-tool-icon" style="color:' + color + '">' +
        '<i class="' + iconClass + '"></i>' +
    '</span>'
);

we should:

  1. Create a <span> element with class ai-tool-icon.
  2. Apply the color via .css("color", color) (or style.color = color) instead of interpolating it into a style attribute string.
  3. Create an <i> element and use .addClass(iconClass) to add the class string; jQuery will treat it as class names, not as HTML.
  4. Append the <i> element to the <span>.
  5. Call .replaceWith() with the constructed jQuery element.

This preserves existing behavior (same DOM structure, same classes, same color) while eliminating the re-interpretation of a string as HTML. No new external dependencies are required; we only use jQuery and the DOM API, both already in use.

The change is localized to the _finishActiveTools function in src/core-ai/AIChatPanel.js, around lines 659–668. We do not need to modify imports or other parts of the file.

Suggested changeset 1
src/core-ai/AIChatPanel.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/src/core-ai/AIChatPanel.js b/src/core-ai/AIChatPanel.js
--- a/src/core-ai/AIChatPanel.js
+++ b/src/core-ai/AIChatPanel.js
@@ -661,11 +661,13 @@
             $prev.addClass("ai-tool-done");
             const iconClass = $prev.attr("data-tool-icon") || "fa-solid fa-check";
             const color = $prev.css("--tool-color") || "#adb9bd";
-            $prev.find(".ai-tool-spinner").replaceWith(
-                '<span class="ai-tool-icon" style="color:' + color + '">' +
-                    '<i class="' + iconClass + '"></i>' +
-                '</span>'
-            );
+            const $iconSpan = $("<span>").addClass("ai-tool-icon").css("color", color);
+            const $icon = $("<i>");
+            if (iconClass) {
+                $icon.addClass(iconClass);
+            }
+            $iconSpan.append($icon);
+            $prev.find(".ai-tool-spinner").replaceWith($iconSpan);
         });
     }
 
EOF
@@ -661,11 +661,13 @@
$prev.addClass("ai-tool-done");
const iconClass = $prev.attr("data-tool-icon") || "fa-solid fa-check";
const color = $prev.css("--tool-color") || "#adb9bd";
$prev.find(".ai-tool-spinner").replaceWith(
'<span class="ai-tool-icon" style="color:' + color + '">' +
'<i class="' + iconClass + '"></i>' +
'</span>'
);
const $iconSpan = $("<span>").addClass("ai-tool-icon").css("color", color);
const $icon = $("<i>");
if (iconClass) {
$icon.addClass(iconClass);
}
$iconSpan.append($icon);
$prev.find(".ai-tool-spinner").replaceWith($iconSpan);
});
}

Copilot is powered by AI and may make mistakes. Always verify output.
- Delay adding ai-tool-done class by 1.5s so the streaming preview
  remains visible while the tool is active and briefly after completion
- Add final flush of aiToolStream on content_block_stop to ensure
  browser receives latest preview data before tool completes
- Update get_browser_console_logs MCP tool description to mention
  PhNode logs are included
@abose abose merged commit 84c9eaf into main Feb 17, 2026
16 of 18 checks passed
@abose abose deleted the z branch February 17, 2026 09:21
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant