wip: shadow dom fix

Author: tysonthomas9

front_end/panels/ai_chat/ui/AgentSessionHeaderComponent.ts

@@ -14,7 +14,9 @@ export type SessionStatus = 'running' | 'completed' | 'error';
 @customElement('agent-session-header')
 export class AgentSessionHeaderComponent extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`agent-session-header`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // private readonly shadow = this.attachShadow({mode: 'open'});
+  private readonly shadow = this;
 
   private session: AgentSession | null = null;
   private isExpanded = true;
@@ -80,7 +82,7 @@ export class AgentSessionHeaderComponent extends HTMLElement {
 
     Lit.render(html`
       <style>
-        :host {
+        agent-session-header {
           display: block;
         }
 

front_end/panels/ai_chat/ui/ChatView.ts

@@ -177,7 +177,9 @@ export interface Props {
 @customElement('devtools-chat-view')
 export class ChatView extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`devtools-chat-view`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM for accessibility/automation
+  readonly #shadow = this;
   readonly #boundRender = this.#render.bind(this);
 
   #messages: ChatMessage[] = [];
@@ -235,10 +237,6 @@ export class ChatView extends HTMLElement {
   #isVersionBannerDismissed = false;
 
   connectedCallback(): void {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(chatViewStyles);
-    this.#shadow.adoptedStyleSheets = [sheet];
-
     // Initialize the prompt button click handler
     this.#updatePromptButtonClickHandler();
 
@@ -779,6 +777,9 @@ export class ChatView extends HTMLElement {
     // All messages are rendered directly now, including AgentSessionMessage
     let messagesToRender = this.#messages;
 
+    const cssText = (chatViewStyles as any).cssText || chatViewStyles.toString();
+    const stylesTemplate = html`<style>${cssText.replace(/:host/g, 'devtools-chat-view')}</style>`;
+
     // Build a set of nested child session IDs present in the current message set.
     // Include both nestedSessions[].sessionId and any handoff anchors in messages that
     // have a concrete nestedSessionId (ignore pending-* placeholders). Also build
@@ -865,6 +866,7 @@ export class ChatView extends HTMLElement {
 
       const suggestions = this.#renderExampleSuggestions();
       Lit.render(html`
+        ${stylesTemplate}
         <div class="chat-view-container centered-view">
           ${this.#renderVersionBanner()}
           <div class="centered-content">
@@ -886,6 +888,7 @@ export class ChatView extends HTMLElement {
     } else {
       // Render normal expanded view for conversation
       Lit.render(html`
+        ${stylesTemplate}
         <div class="chat-view-container expanded-view">
           ${this.#renderVersionBanner()}
           <ai-message-list .messages=${[]} .state=${this.#state} .agentViewMode=${this.#agentViewMode}>

front_end/panels/ai_chat/ui/ConversationHistoryList.ts

@@ -18,7 +18,9 @@ const {unsafeHTML} = Directives;
  */
 export class ConversationHistoryList extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`ai-conversation-history-list`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this;
   readonly #boundRender = this.#render.bind(this);
 
   #conversations: ConversationMetadata[] = [];
@@ -119,7 +121,7 @@ export class ConversationHistoryList extends HTMLElement {
     Lit.render(
       html`
         <style>
-          ${unsafeHTML(getConversationHistoryStyles())}
+          ${unsafeHTML(getConversationHistoryStyles().replace(/:host/g, 'ai-conversation-history-list'))}
         </style>
 
         <div class="history-content">

front_end/panels/ai_chat/ui/FileListDisplay.ts

@@ -17,7 +17,9 @@ const {html, nothing} = Lit;
  */
 export class FileListDisplay extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`ai-file-list-display`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this;
   readonly #boundRender = this.#render.bind(this);
 
   #files: FileSummary[] = [];
@@ -212,7 +214,7 @@ export class FileListDisplay extends HTMLElement {
 
     Lit.render(html`
       <style>
-        :host {
+        ai-file-list-display {
           display: block;
         }
 

front_end/panels/ai_chat/ui/LiveAgentSessionComponent.ts

@@ -16,7 +16,9 @@ const {customElement} = Decorators;
 @customElement('live-agent-session')
 export class LiveAgentSessionComponent extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`live-agent-session`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // private readonly shadow = this.attachShadow({mode: 'open'});
+  private readonly shadow = this;
 
   private _session: AgentSession | null = null;
   private _variant: 'full'|'nested' = 'full';
@@ -122,7 +124,8 @@ export class LiveAgentSessionComponent extends HTMLElement {
     this.shadow.innerHTML = `
       <style>
         /* Import timeline styles from chatView.css */
-        :host {
+        live-agent-session {
+          display: block;
           --sys-color-surface-variant-rgb: 128, 128, 128;
         }
         .agent-execution-timeline {

front_end/panels/ai_chat/ui/PromptEditDialog.ts

@@ -109,6 +109,9 @@ export class PromptEditDialog {
         background-color: var(--color-background);
         max-width: 90vw;
         max-height: 90vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
       }
       
       .prompt-edit-content {
@@ -118,6 +121,16 @@ export class PromptEditDialog {
         height: 100%;
         min-width: 600px;
         min-height: 500px;
+        overflow: hidden;
+      }
+
+      .prompt-edit-body {
+        flex: 1 1 auto;
+        height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        position: relative;
       }
       
       .prompt-edit-header {
@@ -127,6 +140,9 @@ export class PromptEditDialog {
         padding: 16px 20px;
         border-bottom: 1px solid var(--color-details-hairline);
         flex-shrink: 0;
+        background-color: var(--color-background);
+        position: relative;
+        z-index: 10;
       }
       
       .prompt-edit-title {
@@ -160,19 +176,30 @@ export class PromptEditDialog {
       .prompt-edit-section {
         padding: 16px 20px;
         border-bottom: 1px solid var(--color-details-hairline);
+        flex-shrink: 0;
+      }
+
+      .prompt-edit-section-main {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
       }
       
       .prompt-edit-label {
         font-size: 14px;
         font-weight: 500;
         margin-bottom: 6px;
         color: var(--color-text-primary);
+        flex-shrink: 0;
       }
       
       .prompt-edit-hint {
         font-size: 12px;
         color: var(--color-text-secondary);
         margin-bottom: 8px;
+        flex-shrink: 0;
       }
       
       .prompt-edit-agent-value {
@@ -209,9 +236,10 @@ export class PromptEditDialog {
         font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
         font-size: 13px;
         line-height: 1.4;
-        resize: vertical;
+        resize: none;
         box-sizing: border-box;
-        min-height: 300px;
+        flex: 1;
+        min-height: 0;
       }
       
       .prompt-edit-textarea:focus {
@@ -250,6 +278,9 @@ export class PromptEditDialog {
         padding: 16px 20px;
         border-top: 1px solid var(--color-details-hairline);
         flex-shrink: 0;
+        background-color: var(--color-background);
+        position: relative;
+        z-index: 10;
       }
       
       .prompt-edit-button {
@@ -333,10 +364,15 @@ export class PromptEditDialog {
 
     headerDiv.appendChild(closeButton);
 
+    // Body container
+    const bodyDiv = document.createElement('div');
+    bodyDiv.className = 'prompt-edit-body';
+    contentDiv.appendChild(bodyDiv);
+
     // Agent type display
     const agentSection = document.createElement('div');
     agentSection.className = 'prompt-edit-section';
-    contentDiv.appendChild(agentSection);
+    bodyDiv.appendChild(agentSection);
 
     const agentLabel = document.createElement('div');
     agentLabel.className = 'prompt-edit-label';
@@ -358,8 +394,8 @@ export class PromptEditDialog {
 
     // Prompt editing section
     const promptSection = document.createElement('div');
-    promptSection.className = 'prompt-edit-section';
-    contentDiv.appendChild(promptSection);
+    promptSection.className = 'prompt-edit-section prompt-edit-section-main';
+    bodyDiv.appendChild(promptSection);
 
     const promptLabel = document.createElement('div');
     promptLabel.className = 'prompt-edit-label';
@@ -374,8 +410,9 @@ export class PromptEditDialog {
     const promptTextarea = document.createElement('textarea');
     promptTextarea.className = 'prompt-edit-textarea';
     promptTextarea.value = options.currentPrompt;
-    promptTextarea.rows = DIALOG_CONSTANTS.TEXTAREA_ROWS;
-    promptTextarea.cols = DIALOG_CONSTANTS.TEXTAREA_COLS;
+    // Let CSS handle sizing
+    // promptTextarea.rows = DIALOG_CONSTANTS.TEXTAREA_ROWS;
+    // promptTextarea.cols = DIALOG_CONSTANTS.TEXTAREA_COLS;
     promptTextarea.setAttribute('aria-label', i18nString(UIStrings.promptLabel));
     promptTextarea.setAttribute('aria-describedby', 'prompt-hint');
     promptHint.id = 'prompt-hint';
@@ -386,7 +423,7 @@ export class PromptEditDialog {
     statusMessage.className = 'prompt-edit-status-message';
     statusMessage.setAttribute('role', 'status');
     statusMessage.setAttribute('aria-live', 'polite');
-    contentDiv.appendChild(statusMessage);
+    bodyDiv.appendChild(statusMessage);
 
     let statusTimeout: number | null = null;
     const showStatus = (message: string, type: 'success' | 'error'): void => {

front_end/panels/ai_chat/ui/TodoListDisplay.ts

@@ -24,7 +24,9 @@ interface ParsedTodos {
 @customElement('ai-todo-list')
 export class TodoListDisplay extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`ai-todo-list`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this;
 
   #collapsed = false;
   #todos = '';
@@ -100,7 +102,7 @@ export class TodoListDisplay extends HTMLElement {
 
     render(html`
       <style>
-        :host {
+        ai-todo-list {
           display: block;
         }
 

front_end/panels/ai_chat/ui/message/MessageList.ts

@@ -11,7 +11,9 @@ const {customElement} = Decorators as any;
 @customElement('ai-message-list')
 export class MessageList extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`ai-message-list`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this;
 
   // Public API properties (no decorators; manual setters trigger render)
   #messages: ChatMessage[] = [];
@@ -27,57 +29,60 @@ export class MessageList extends HTMLElement {
 
   // Internal state
   #pinToBottom = true;
-  #container?: HTMLElement;
   #resizeObserver = new ResizeObserver(() => { if (this.#pinToBottom) this.#scrollToBottom(); });
 
-  connectedCallback(): void { this.#render(); }
-  disconnectedCallback(): void { this.#resizeObserver.disconnect(); }
+  connectedCallback(): void {
+    this.#render();
+    this.addEventListener('scroll', this.#onScroll);
+    this.#resizeObserver.observe(this);
+  }
+  
+  disconnectedCallback(): void {
+    this.#resizeObserver.disconnect();
+    this.removeEventListener('scroll', this.#onScroll);
+  }
 
   #onScroll = (e: Event) => {
     const el = e.target as HTMLElement;
     const SCROLL_ROUNDING_OFFSET = 1;
     this.#pinToBottom = el.scrollTop + el.clientHeight + SCROLL_ROUNDING_OFFSET >= el.scrollHeight;
   };
 
-  #scrollToBottom(): void { if (this.#container) this.#container.scrollTop = this.#container.scrollHeight; }
+  #scrollToBottom(): void { this.scrollTop = this.scrollHeight; }
 
   #render(): void {
-    const refFn = (el?: Element) => {
-      if (this.#container) { this.#resizeObserver.unobserve(this.#container); }
-      this.#container = el as HTMLElement | undefined;
-      if (this.#container) {
-        this.#resizeObserver.observe(this.#container);
-        this.#scrollToBottom();
-      } else {
-        this.#pinToBottom = true;
-      }
-    };
-
-    // Container mode: project messages via slot from parent.
-    Lit.render(html`
-      <style>
-        :host { display: block; height: 100%; flex: 1 1 auto; position: relative; z-index: 0; }
-        .container {
-          overflow-y: auto;
+    // In Light DOM, we don't want to overwrite children projected by the parent (ChatView).
+    // We only need to ensure styles are applied. 
+    // ChatView renders <ai-message-list> ... children ... </ai-message-list>
+    // So we don't need to Lit.render() content here, as it would wipe the children.
+    
+    // We just inject styles once if needed, or rely on global styles.
+    // But to ensure self-contained behavior, we can inject a style tag if not present.
+    if (!this.querySelector('style[data-message-list-styles]')) {
+      const style = document.createElement('style');
+      style.setAttribute('data-message-list-styles', '');
+      style.textContent = `
+        ai-message-list {
+          display: block;
           height: 100%;
+          flex: 1 1 auto;
+          position: relative;
+          z-index: 0;
+          overflow-y: auto;
           display: flex;
           flex-direction: column;
           scroll-behavior: smooth;
           padding: 12px 16px;
           background-color: var(--color-background);
           padding-bottom: 12px;
           min-height: 100px;
-          position: relative;
-          z-index: 0;
         }
-        .container::-webkit-scrollbar { width: 4px; }
-        .container::-webkit-scrollbar-track { background: transparent; }
-        .container::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); border-radius: 4px; }
-      </style>
-      <div class="container" @scroll=${this.#onScroll} ${Lit.Directives.ref(refFn)}>
-        <slot></slot>
-      </div>
-    `, this.#shadow, {host: this});
+        ai-message-list::-webkit-scrollbar { width: 4px; }
+        ai-message-list::-webkit-scrollbar-track { background: transparent; }
+        ai-message-list::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar); border-radius: 4px; }
+      `;
+      this.prepend(style);
+    }
   }
 }