From bf79586d86383ea6686be44f57c717e23d769ae0 Mon Sep 17 00:00:00 2001
From: Tyson Thomas <tysonthomas9@users.noreply.github.com>
Date: Thu, 27 Nov 2025 08:19:24 -0800
Subject: [PATCH] wip: shadow dom fix

---
 .../ai_chat/ui/AgentSessionHeaderComponent.ts |  6 +-
 front_end/panels/ai_chat/ui/ChatView.ts       | 13 ++--
 .../ai_chat/ui/ConversationHistoryList.ts     |  6 +-
 .../panels/ai_chat/ui/FileListDisplay.ts      |  6 +-
 .../ai_chat/ui/LiveAgentSessionComponent.ts   |  7 +-
 .../panels/ai_chat/ui/PromptEditDialog.ts     | 53 +++++++++++---
 .../panels/ai_chat/ui/TodoListDisplay.ts      |  6 +-
 .../panels/ai_chat/ui/message/MessageList.ts  | 69 ++++++++++---------
 .../ai_chat/ui/version/VersionBanner.ts       |  6 +-
 front_end/ui/legacy/GlassPane.ts              |  2 +-
 10 files changed, 116 insertions(+), 58 deletions(-)

diff --git a/front_end/panels/ai_chat/ui/AgentSessionHeaderComponent.ts b/front_end/panels/ai_chat/ui/AgentSessionHeaderComponent.ts
index a07150ddbb..f3cdd4b83a 100644
--- a/front_end/panels/ai_chat/ui/AgentSessionHeaderComponent.ts
+++ b/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;
         }
 
diff --git a/front_end/panels/ai_chat/ui/ChatView.ts b/front_end/panels/ai_chat/ui/ChatView.ts
index a06d980e13..aea3ecadac 100644
--- a/front_end/panels/ai_chat/ui/ChatView.ts
+++ b/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}>
diff --git a/front_end/panels/ai_chat/ui/ConversationHistoryList.ts b/front_end/panels/ai_chat/ui/ConversationHistoryList.ts
index e50098ab0b..962c0b9d49 100644
--- a/front_end/panels/ai_chat/ui/ConversationHistoryList.ts
+++ b/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">
diff --git a/front_end/panels/ai_chat/ui/FileListDisplay.ts b/front_end/panels/ai_chat/ui/FileListDisplay.ts
index 84701931d0..21cbdd5aaf 100644
--- a/front_end/panels/ai_chat/ui/FileListDisplay.ts
+++ b/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;
         }
 
diff --git a/front_end/panels/ai_chat/ui/LiveAgentSessionComponent.ts b/front_end/panels/ai_chat/ui/LiveAgentSessionComponent.ts
index 92b5ecc1d5..f087ed47aa 100644
--- a/front_end/panels/ai_chat/ui/LiveAgentSessionComponent.ts
+++ b/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 {
diff --git a/front_end/panels/ai_chat/ui/PromptEditDialog.ts b/front_end/panels/ai_chat/ui/PromptEditDialog.ts
index d3cbccca31..e852778c4a 100644
--- a/front_end/panels/ai_chat/ui/PromptEditDialog.ts
+++ b/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,6 +176,15 @@ 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 {
@@ -167,12 +192,14 @@ export class PromptEditDialog {
         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 => {
diff --git a/front_end/panels/ai_chat/ui/TodoListDisplay.ts b/front_end/panels/ai_chat/ui/TodoListDisplay.ts
index 2c826bd0a6..b8e78c84b7 100644
--- a/front_end/panels/ai_chat/ui/TodoListDisplay.ts
+++ b/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;
         }
 
diff --git a/front_end/panels/ai_chat/ui/message/MessageList.ts b/front_end/panels/ai_chat/ui/message/MessageList.ts
index 4bb3d7afc9..396d3f8c34 100644
--- a/front_end/panels/ai_chat/ui/message/MessageList.ts
+++ b/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,11 +29,18 @@ 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;
@@ -39,27 +48,27 @@ export class MessageList extends HTMLElement {
     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;
@@ -67,17 +76,13 @@ export class MessageList extends HTMLElement {
           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);
+    }
   }
 }
 
diff --git a/front_end/panels/ai_chat/ui/version/VersionBanner.ts b/front_end/panels/ai_chat/ui/version/VersionBanner.ts
index 52bf18a2d1..e025f989dd 100644
--- a/front_end/panels/ai_chat/ui/version/VersionBanner.ts
+++ b/front_end/panels/ai_chat/ui/version/VersionBanner.ts
@@ -12,7 +12,9 @@ export interface VersionInfo { latestVersion: string; releaseUrl: string; isUpda
 @customElement('ai-version-banner')
 export class VersionBanner extends HTMLElement {
   static readonly litTagName = Lit.StaticHtml.literal`ai-version-banner`;
-  readonly #shadow = this.attachShadow({mode: 'open'});
+  // Use Light DOM
+  // readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this;
 
   // Manual properties
   #info: VersionInfo | null = null;
@@ -32,7 +34,7 @@ export class VersionBanner extends HTMLElement {
     const info = this.#info;
     Lit.render(html`
       <style>
-        :host { position: relative; z-index: 9999; }
+        ai-version-banner { position: relative; z-index: 9999; display: block; }
         .banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 6px; background: var(--sys-color-surface-variant); color: var(--sys-color-on-surface); margin: 8px 0; position: relative; z-index: 9999; }
         .link { color: var(--sys-color-primary); text-decoration: none; margin-left: 8px; }
         button.dismiss { border: none; background: transparent; color: var(--sys-color-on-surface); cursor: pointer; font-size: 14px; }
diff --git a/front_end/ui/legacy/GlassPane.ts b/front_end/ui/legacy/GlassPane.ts
index 658b2d1aa3..3b8678efb5 100644
--- a/front_end/ui/legacy/GlassPane.ts
+++ b/front_end/ui/legacy/GlassPane.ts
@@ -26,7 +26,7 @@ export class GlassPane {
   #ignoreLeftMargin = false;
 
   constructor(jslog?: string) {
-    this.#widget = new Widget({jslog, useShadowDom: true});
+    this.#widget = new Widget({jslog, useShadowDom: false});
     this.#widget.markAsRoot();
     this.#widget.onDetach = this.#onDetach.bind(this);
     this.element = this.#widget.element;