Pin 'npx prettier' version
If you don't do this, you get cruft from various autofixers competing.
diff --git a/bin/run-formatters.sh b/bin/run-formatters.sh
index 30087e3..0f740ee 100755
--- a/bin/run-formatters.sh
+++ b/bin/run-formatters.sh
@@ -38,13 +38,13 @@
cd webui
if [ "$CHECK_MODE" = true ]; then
echo "Checking webui formatting with Prettier"
- if ! npx prettier --check .; then
+ if ! npx prettier@3.5.3 --check .; then
echo "Webui files need formatting"
exit 1
fi
else
echo "Fixing webui formatting with Prettier"
- npx prettier --write .
+ npx prettier@3.5.3 --write .
echo "Webui formatting complete"
fi
else
diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index 823adec..5edac6d 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -45,20 +45,24 @@
Regarding how CSS rules defined in sketch-tool-card affect elements that contain it:
1. **Shadow DOM Encapsulation**:
+
- Each Web Component has its own Shadow DOM, which encapsulates its styles
- Styles defined in `sketch-tool-card` apply only within its shadow DOM, not to parent components
2. **Slot Content Styling**:
+
- The base `sketch-tool-card` defines three slots: "summary", "input", and "result"
- Specialized tool cards provide content for these slots
- The base component can style the slot containers, but cannot directly style the slotted content
3. **Style Inheritance and Sharing**:
+
- The code uses a `commonStyles` constant that is shared across some components
- These common styles ensure consistent styling for elements like pre, code blocks
- Each specialized component adds its own unique styles as needed
4. **Parent CSS Targeting**:
+
- In `sketch-timeline-message.ts`, there are styles that target the tool components using the `::slotted()` pseudo-element:
```css
@@ -73,6 +77,7 @@
- This allows parent components to influence the layout of slotted components while preserving Shadow DOM encapsulation
5. **Host Element Styling**:
+
- The `:host` selector is used in sketch-tool-card for styling the component itself:
```css