diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index f3b6249..660f19a 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -51,6 +51,25 @@
 - **No static styles** or Shadow DOM
 - **Property-based composition** (`.summaryContent=${html\`...\`}`)
 
+## Preview, debug and iterate on your component changes with the demo server
+
+### Setup (first time):
+
+1. Navigate to the webui directory: `cd ./sketch/webui`
+2. Install dependencies: `npm install`
+3. If you encounter rollup/architecture errors, remove dependencies and reinstall:
+   ```bash
+   rm -rf node_modules package-lock.json
+   npm install
+   ```
+
+### Running the demo server:
+
+- Use the `npm run demo:runner` command to start the demo server. It will render your component changes, populated with fake example data.
+- The server runs at http://localhost:5173/src/web-components/demo/demo-runner.html
+- If you need to write or update the demo definition for an element, do so in demo files like ./demo/some-component-name.demo.ts
+- If you need to add new example data objects for demoing components, do so in ./demo/fixtures
+
 ## Legacy Components (Do NOT Use as Examples)
 
 Some existing components still use the old architecture and will be migrated:
@@ -62,113 +81,6 @@
 
 **Do not use these legacy patterns for new components.** They are being phased out.
 
-## Migration Status
-
-As of the latest migration:
-
-- ✅ All tool card components now use SketchTailwindElement
-- ✅ Complete Shadow DOM elimination in tool card hierarchy
-- ✅ Consistent Tailwind CSS styling approach
-- 🔄 Other components will be migrated over time
-
----
-
-# Component Architecture: sketch-tool-card and Related Components
-
-This document explains the relationship between LitElement subclasses in webui/src/web-components/ and the sketch-tool-card custom element, focusing on their containment relationship and CSS styling effects.
-
-## Containment Relationship
-
-The component hierarchy and containment relationship is structured as follows:
-
-1. **sketch-app-shell** (the main application container)
-   - Contains **sketch-timeline** (for displaying conversation history)
-     - Contains **sketch-timeline-message** (for individual messages)
-       - Contains **sketch-tool-calls** (collection of tool calls)
-         - Contains specific tool card components like:
-           - **sketch-tool-card-bash**
-           - **sketch-tool-card-think**
-           - **sketch-tool-card-codereview**
-           - **sketch-tool-card-done**
-           - **sketch-tool-card-patch**
-           - **sketch-tool-card-take-screenshot**
-           - **sketch-tool-card-set-slug**
-           - **sketch-tool-card-commit-message-style**
-           - **sketch-tool-card-multiple-choice**
-           - **sketch-tool-card-generic** (fallback for unknown tools)
-             - All of these specialized components **contain** or **compose with** the base **sketch-tool-card**
-
-The key aspect is that the specialized tool card components do not inherit from `SketchToolCard` in a class hierarchy sense. Instead, they **use composition** by embedding a `<sketch-tool-card>` element within their render method and passing data to it.
-
-For example, from `sketch-tool-card-bash.ts`:
-
-```typescript
-render() {
-  return html` <sketch-tool-card
-    .open=${this.open}
-    .toolCall=${this.toolCall}
-  >
-    <span slot="summary" class="summary-text">...</span>
-    <div slot="input" class="input">...</div>
-    <div slot="result" class="result">...</div>
-  </sketch-tool-card>`;
-}
-```
-
-## CSS Styling and Effects
-
-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
-   ::slotted(sketch-tool-calls) {
-     max-width: 100%;
-     width: 100%;
-     overflow-wrap: break-word;
-     word-break: break-word;
-   }
-   ```
-
-   - 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
-   :host {
-     display: block;
-     max-width: 100%;
-     width: 100%;
-     box-sizing: border-box;
-     overflow: hidden;
-   }
-   ```
-
-   - This affects how the component is displayed in its parent context
-
-In summary, the architecture uses composition rather than inheritance, with specialized tool cards wrapping the base sketch-tool-card component and filling its slots with custom content. The CSS styling is carefully managed through Shadow DOM, with some targeted styling using ::slotted selectors to ensure proper layout and appearance throughout the component hierarchy.
-
 # API URLs Must Be Relative
 
 When making fetch requests to backend APIs in Sketch, all URLs **must be relative** without leading slashes. The base URL for Sketch varies depending on how it is deployed and run: