chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -36,6 +36,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       '--garbage-space': 'this-is-garbage-text',
       '--prop': 'customproperty',
       '--zero': '0',
+      '--empty': '',
     };
 
     mockStylePropertiesSection = sinon.createStubInstance(Elements.StylePropertiesSection.StylePropertiesSection);
@@ -319,7 +320,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
 
         it('should clicking on the jump-to icon reveal the resolved animation group', async () => {
           const stubAnimationGroup = sinon.createStubInstance(SDK.AnimationModel.AnimationGroup);
-          const revealerSpy = sinon.spy(Common.Revealer.RevealerRegistry.instance(), 'reveal');
+          const revealerSpy = sinon.stub(Common.Revealer.RevealerRegistry.instance(), 'reveal');
           const getAnimationGroupForAnimationStub =
               sinon.stub(SDK.AnimationModel.AnimationModel.prototype, 'getAnimationGroupForAnimation')
                   .resolves(stubAnimationGroup);
@@ -788,6 +789,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       assert.deepStrictEqual(
           await matchProperty('var(--no, var(--no2))'),
           {hasUnresolvedVars: true, computedText: 'color: var(--no, var(--no2))'});
+      assert.deepStrictEqual(await matchProperty(''), {hasUnresolvedVars: false, computedText: 'color:'});
     });
 
     it('layers correctly with the font renderer', () => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -141,6 +141,10 @@ const UIStrings = {
    *@description A context menu item in Styles panel to copy all declarations of CSS rule as JavaScript properties.
    */
   copyAllCssDeclarationsAsJs: 'Copy all declarations as JS',
+  /**
+   *@description Title of the link in Styles panel to jump to the Animations panel.
+   */
+  jumpToAnimationsPanel: 'Jump to Animations panel',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylePropertyTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -259,7 +263,7 @@ export class VariableRenderer implements MatchRenderer<SDK.CSSPropertyParser.Var
     const renderedFallback = match.fallback.length > 0 ? Renderer.render(match.fallback, context) : undefined;
 
     const {declaration, value: variableValue} = this.resolveVariable(match) ?? {};
-    const fromFallback = !variableValue;
+    const fromFallback = variableValue === undefined;
     const computedValue = variableValue ?? this.fallbackValue(match);
 
     const varSwatch = new InlineEditor.LinkSwatch.CSSVarSwatch();
@@ -770,9 +774,10 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
             return;
           }
 
-          const icon = IconButton.Icon.create('open-externally', 'open-in-animations-panel');
+          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
+          icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
           icon.addEventListener('mouseup', ev => {
             ev.consume(true);
 
@@ -1706,7 +1711,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         })]);
 
     const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
-    return matching.getComputedTextRange(decl[0], decl[decl.length - 1]);
+    return decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
   }
 
   refreshIfComputedValueChanged(): void {

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -281,10 +281,10 @@ devtools-icon.open-in-animations-panel {
   transform: scale(0.7);
   margin: -5px -2px -3px -4px;
   user-select: none;
-  color: var(--icon-default);
+  color: var(--icon-css);
   cursor: default;
 
   &:hover {
-    color: var(--icon-default-hover);
+    color: var(--icon-css-hover);
   }
 }

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -8,7 +8,6 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
@@ -95,9 +94,9 @@ const UIStrings = {
    */
   notLoggedIn: 'This feature is only available when you sign into Chrome with your Google account.',
   /**
-   * @description The title of the button that opens Chrome settings.
+   * @description The title of a button which opens the Chrome SignIn page.
    */
-  updateSettings: 'Update Settings',
+  signIn: 'Sign in',
   /**
    * @description The header shown when the internet connection is not
    * available.
@@ -168,7 +167,7 @@ const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/135054
 const LEARNMORE_URL = 'https://goo.gle/devtools-console-messages-ai' as Platform.DevToolsPath.UrlString;
 const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504' as
     Platform.DevToolsPath.UrlString;
-const CHROME_SETTINGS_URL = 'chrome://settings' as Platform.DevToolsPath.UrlString;
+const SIGN_IN_URL = 'https://accounts.google.com' as Platform.DevToolsPath.UrlString;
 
 const enum State {
   INSIGHT = 'insight',
@@ -529,17 +528,8 @@ export class ConsoleInsight extends HTMLElement {
     }
   }
 
-  #onGoToChromeSettings(): void {
-    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-    if (rootTarget === null) {
-      return;
-    }
-    const url = CHROME_SETTINGS_URL;
-    void rootTarget.targetAgent().invoke_createTarget({url}).then(result => {
-      if (result.getError()) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-      }
-    });
+  #onGoToSignIn(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(SIGN_IN_URL);
   }
 
   #focusHeader(): void {
@@ -594,7 +584,7 @@ export class ConsoleInsight extends HTMLElement {
         <main jslog=${jslog}>
           ${
             this.#state.validMarkdown ? html`<devtools-markdown-view
-              .data=${{tokens: this.#state.tokens, renderer: this.#renderer} as MarkdownView.MarkdownView.MarkdownViewData}>
+              .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
           <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
@@ -740,7 +730,7 @@ export class ConsoleInsight extends HTMLElement {
         <div class="filler"></div>
         <div>
           <devtools-button
-            @click=${this.#onGoToChromeSettings}
+            @click=${this.#onGoToSignIn}
             .data=${
               {
                 variant: Buttons.Button.Variant.PRIMARY,
@@ -748,7 +738,7 @@ export class ConsoleInsight extends HTMLElement {
               } as Buttons.Button.ButtonData
             }
           >
-            ${UIStrings.updateSettings}
+            ${UIStrings.signIn}
           </devtools-button>
         </div>
       </footer>`;

package/front_end/panels/freestyler/AiAgent.test.ts

@@ -9,7 +9,7 @@ import {
 
 import * as Freestyler from './freestyler.js';
 
-const {AiAgent, ResponseType} = Freestyler;
+const {AiAgent, ResponseType, ConversationContext} = Freestyler;
 
 class AiAgentMock extends AiAgent<unknown> {
   type = Freestyler.AgentType.FREESTYLER;
@@ -225,4 +225,61 @@ describeWithEnvironment('AiAgent', () => {
       ]);
     });
   });
+
+  describe('ConversationContext', () => {
+    function getTestContext(origin: string) {
+      class TestContext extends ConversationContext<undefined> {
+        override getIcon(): HTMLElement {
+          throw new Error('Method not implemented.');
+        }
+        override getTitle(): string {
+          throw new Error('Method not implemented.');
+        }
+        override getOrigin(): string {
+          return origin;
+        }
+        override getItem(): undefined {
+          return undefined;
+        }
+      }
+      return new TestContext();
+    }
+    it('checks context origins', () => {
+      const tests = [
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://google.test',
+          isAllowed: true,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'about:blank',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://www.google.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'https://b.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'file:///tmp',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'http://a.test',
+          isAllowed: false,
+        },
+      ];
+      for (const test of tests) {
+        assert.strictEqual(getTestContext(test.contextOrigin).isOriginAllowed(test.agentOrigin), test.isAllowed);
+      }
+    });
+  });
 });

package/front_end/panels/freestyler/AiAgent.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import type * as LitHtml from '../../ui/lit-html/lit-html.js';
 
 export const enum ResponseType {
   CONTEXT = 'context',
@@ -127,6 +128,24 @@ export const enum AgentType {
 
 const MAX_STEP = 10;
 
+export abstract class ConversationContext<T> {
+  abstract getOrigin(): string;
+  abstract getItem(): T;
+  abstract getIcon(): HTMLElement;
+  abstract getTitle(): string|ReturnType<typeof LitHtml.Directives.until>;
+
+  isOriginAllowed(agentOrigin: string|undefined): boolean {
+    if (!agentOrigin) {
+      return true;
+    }
+    // Currently does not handle opaque origins because they
+    // are not available to DevTools, instead checks
+    // that serialization of the origin is the same
+    // https://html.spec.whatwg.org/#ascii-serialisation-of-an-origin.
+    return this.getOrigin() === agentOrigin;
+  }
+}
+
 export abstract class AiAgent<T> {
   static validTemperature(temperature: number|undefined): number|undefined {
     return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
@@ -140,13 +159,20 @@ export abstract class AiAgent<T> {
   abstract readonly options: AidaRequestOptions;
   abstract readonly clientFeature: Host.AidaClient.ClientFeature;
   abstract readonly userTier: string|undefined;
-  abstract handleContextDetails(select: T|null): AsyncGenerator<ContextResponse, void, void>;
+  abstract handleContextDetails(select: ConversationContext<T>|null): AsyncGenerator<ContextResponse, void, void>;
+  #generatedFromHistory = false;
 
   /**
    * Mapping between the unique request id and
    * the history chuck it created
    */
   #history = new Map<number, ResponseData[]>();
+  /**
+   * Might need to be part of history in case we allow chatting in
+   * historical conversations.
+   */
+  #origin?: string;
+  #context?: ConversationContext<T>;
 
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
@@ -165,6 +191,14 @@ export abstract class AiAgent<T> {
     return this.#history.size <= 0;
   }
 
+  get origin(): string|undefined {
+    return this.#origin;
+  }
+
+  get context(): ConversationContext<T>|undefined {
+    return this.#context;
+  }
+
   get title(): string|undefined {
     return [...this.#history.values()]
         .flat()
@@ -175,6 +209,10 @@ export abstract class AiAgent<T> {
         ?.query;
   }
 
+  get isHistoryEntry(): boolean {
+    return this.#generatedFromHistory;
+  }
+
   #structuredLog: Array<{
     request: Host.AidaClient.AidaRequest,
     response: string,
@@ -248,7 +286,7 @@ export abstract class AiAgent<T> {
     throw new Error('Unexpected action found');
   }
 
-  async enhanceQuery(query: string, selected: T|null): Promise<string>;
+  async enhanceQuery(query: string, selected: ConversationContext<T>|null): Promise<string>;
   async enhanceQuery(query: string): Promise<string> {
     return query;
   }
@@ -359,8 +397,20 @@ STOP`;
 
   #runId = 0;
   async * run(query: string, options: {
-    signal?: AbortSignal, selected: T|null,
+    signal?: AbortSignal, selected: ConversationContext<T>|null,
   }): AsyncGenerator<ResponseData, void, void> {
+    if (this.#generatedFromHistory) {
+      throw new Error('History entries are read-only.');
+    }
+
+    // First context set on the agent determines its origin from now on.
+    if (options.selected && this.#origin === undefined && options.selected) {
+      this.#origin = options.selected.getOrigin();
+    }
+    // Remember if the context that is set.
+    if (options.selected && !this.#context) {
+      this.#context = options.selected;
+    }
     const id = this.#runId++;
 
     const response = {
@@ -500,6 +550,11 @@ STOP`;
   }
 
   async * runFromHistory(): AsyncGenerator<ResponseData, void, void> {
+    if (this.isEmpty) {
+      return;
+    }
+
+    this.#generatedFromHistory = true;
     for (const historyChunk of this.#history.values()) {
       for (const entry of historyChunk) {
         yield entry;

package/front_end/panels/freestyler/DrJonesFileAgent.test.ts

@@ -16,7 +16,7 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {loadBasicSourceMapExample} from '../../testing/SourceMapHelpers.js';
 import {createContentProviderUISourceCodes} from '../../testing/UISourceCodeHelpers.js';
 
-import {DrJonesFileAgent, formatSourceMapDetails, ResponseType} from './freestyler.js';
+import {DrJonesFileAgent, FileContext, formatFile, formatSourceMapDetails, ResponseType} from './freestyler.js';
 
 describeWithMockConnection('DrJonesFileAgent', () => {
   function mockHostConfig(modelId?: string, temperature?: number) {
@@ -133,6 +133,34 @@ describeWithMockConnection('DrJonesFileAgent', () => {
     });
   });
 
+  async function createUISourceCode(options?: {
+    content?: string,
+    mimeType?: string,
+    url?: Platform.DevToolsPath.UrlString,
+    resourceType?: Common.ResourceType.ResourceType,
+  }): Promise<Workspace.UISourceCode.UISourceCode> {
+    const url = options?.url ?? 'http://example.test/script.js' as Platform.DevToolsPath.UrlString;
+    const {project} = createContentProviderUISourceCodes({
+      items: [
+        {
+          url,
+          mimeType: options?.mimeType ?? 'application/javascript',
+          resourceType: options?.resourceType ?? Common.ResourceType.resourceTypes.Script,
+          content: options?.content ?? undefined,
+        },
+      ],
+      target: createTarget(),
+    });
+
+    const uiSourceCode = project.uiSourceCodeForURL(url);
+
+    if (!uiSourceCode) {
+      throw new Error('Failed to create a test uiSourceCode');
+    }
+    await uiSourceCode.requestContentData();
+    return uiSourceCode;
+  }
+
   describe('run', () => {
     it('generates an answer', async () => {
       async function* generateAnswer() {
@@ -149,20 +177,9 @@ describeWithMockConnection('DrJonesFileAgent', () => {
         aidaClient: mockAidaClient(generateAnswer),
       });
 
-      const url = 'http://example.com/script.js' as Platform.DevToolsPath.UrlString;
-      const {project} = createContentProviderUISourceCodes({
-        items: [
-          {
-            url,
-            mimeType: 'application/javascript',
-            resourceType: Common.ResourceType.resourceTypes.Script,
-          },
-        ],
-        target: createTarget(),
-      });
-
-      const uiSourceCode = project.uiSourceCodeForURL(url);
-      const responses = await Array.fromAsync(agent.run('test', {selected: uiSourceCode}));
+      const uiSourceCode = await createUISourceCode();
+      const responses =
+          await Array.fromAsync(agent.run('test', {selected: uiSourceCode ? new FileContext(uiSourceCode) : null}));
 
       assert.deepStrictEqual(responses, [
         {
@@ -175,17 +192,28 @@ describeWithMockConnection('DrJonesFileAgent', () => {
           details: [
             {
               title: 'Selected file',
-              text: `File Name: script.js
-URL: http://example.com/script.js\n
-File Content:\n\`\`\`
+              text: `File name: script.js
+URL: http://example.test/script.js
+File content:
+\`\`\`
+
 \`\`\``,
             },
           ],
         },
         {
           type: ResponseType.QUERYING,
-          query:
-              '# Selected file\nFile Name: script.js\nURL: http://example.com/script.js\n\nFile Content:\n\`\`\`\n\`\`\`\n\n# User request\n\ntest',
+          query: `# Selected file
+File name: script.js
+URL: http://example.test/script.js
+File content:
+\`\`\`
+
+\`\`\`
+
+# User request
+
+test`,
         },
         {
           type: ResponseType.ANSWER,
@@ -198,9 +226,17 @@ File Content:\n\`\`\`
       assert.deepStrictEqual(agent.chatHistoryForTesting, [
         {
           entity: 1,
-          text: `# Selected file\nFile Name: script.js
-URL: http://example.com/script.js\n
-File Content:\n\`\`\`\n\`\`\`\n\n# User request\n\ntest`,
+          text: `# Selected file
+File name: script.js
+URL: http://example.test/script.js
+File content:
+\`\`\`
+
+\`\`\`
+
+# User request
+
+test`,
         },
         {
           entity: 2,
@@ -225,4 +261,44 @@ File Content:\n\`\`\`\n\`\`\`\n\n# User request\n\ntest`,
       assert.strictEqual(response, 'Source map: file://gen.js.map');
     });
   });
+
+  describe('formatFile', () => {
+    it('formats file content', async () => {
+      const uiSourceCode = await createUISourceCode({
+        content: 'lorem ipsum',
+      });
+      assert.strictEqual(formatFile(uiSourceCode), `File name: script.js
+URL: http://example.test/script.js
+File content:
+\`\`\`
+lorem ipsum
+\`\`\``);
+    });
+
+    it('formats file content of a binary file', async () => {
+      const uiSourceCode = await createUISourceCode({
+        resourceType: Common.ResourceType.resourceTypes.Image,
+        mimeType: 'application/png',
+        url: 'http://example.test/test.png' as Platform.DevToolsPath.UrlString,
+      });
+      assert.strictEqual(formatFile(uiSourceCode), `File name: test.png
+URL: http://example.test/test.png
+File content:
+\`\`\`
+<binary data>
+\`\`\``);
+    });
+
+    it('truncates long file content', async () => {
+      const uiSourceCode = await createUISourceCode({
+        content: 'lorem ipsum'.repeat(10_000),
+      });
+      assert.strictEqual(formatFile(uiSourceCode), `File name: script.js
+URL: http://example.test/script.js
+File content:
+\`\`\`
+lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsuml...
+\`\`\``);
+    });
+  });
 });

package/front_end/panels/freestyler/DrJonesFileAgent.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
+import * as PanelUtils from '../utils/utils.js';
 
 import {
   AgentType,
@@ -14,6 +15,7 @@ import {
   type AidaRequestOptions,
   type ContextDetail,
   type ContextResponse,
+  ConversationContext,
   type ParsedResponse,
   ResponseType,
 } from './AiAgent.js';
@@ -69,6 +71,31 @@ const lockedString = i18n.i18n.lockedString;
 
 const MAX_FILE_SIZE = 10000;
 
+export class FileContext extends ConversationContext<Workspace.UISourceCode.UISourceCode> {
+  #file: Workspace.UISourceCode.UISourceCode;
+
+  constructor(file: Workspace.UISourceCode.UISourceCode) {
+    super();
+    this.#file = file;
+  }
+
+  override getOrigin(): string {
+    return new URL(this.#file.url()).origin;
+  }
+
+  override getItem(): Workspace.UISourceCode.UISourceCode {
+    return this.#file;
+  }
+
+  override getIcon(): HTMLElement {
+    return PanelUtils.PanelUtils.getIconForSourceFile(this.#file);
+  }
+
+  override getTitle(): string {
+    return this.#file.displayName();
+  }
+}
+
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -79,14 +106,12 @@ export class DrJonesFileAgent extends AiAgent<Workspace.UISourceCode.UISourceCod
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_DRJONES_FILE_AGENT;
   get userTier(): string|undefined {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    return config.devToolsAiAssistanceFileAgent?.userTier ?? config.devToolsAiAssistanceFileAgentDogfood?.userTier;
+    return config.devToolsAiAssistanceFileAgent?.userTier;
   }
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature =
-        config.devToolsAiAssistanceFileAgent?.temperature ?? config.devToolsAiAssistanceFileAgentDogfood?.temperature;
-    const modelId =
-        config.devToolsAiAssistanceFileAgent?.modelId ?? config.devToolsAiAssistanceFileAgentDogfood?.modelId;
+    const temperature = config.devToolsAiAssistanceFileAgent?.temperature;
+    const modelId = config.devToolsAiAssistanceFileAgent?.modelId;
 
     return {
       temperature,
@@ -95,7 +120,7 @@ export class DrJonesFileAgent extends AiAgent<Workspace.UISourceCode.UISourceCod
   }
 
   async *
-      handleContextDetails(selectedFile: Workspace.UISourceCode.UISourceCode|null):
+      handleContextDetails(selectedFile: ConversationContext<Workspace.UISourceCode.UISourceCode>|null):
           AsyncGenerator<ContextResponse, void, void> {
     if (!selectedFile) {
       return;
@@ -108,9 +133,10 @@ export class DrJonesFileAgent extends AiAgent<Workspace.UISourceCode.UISourceCod
     };
   }
 
-  override async enhanceQuery(query: string, selectedFile: Workspace.UISourceCode.UISourceCode|null): Promise<string> {
+  override async enhanceQuery(
+      query: string, selectedFile: ConversationContext<Workspace.UISourceCode.UISourceCode>|null): Promise<string> {
     const fileEnchantmentQuery =
-        selectedFile ? `# Selected file\n${formatFile(selectedFile)}\n\n# User request\n\n` : '';
+        selectedFile ? `# Selected file\n${formatFile(selectedFile.getItem())}\n\n# User request\n\n` : '';
     return `${fileEnchantmentQuery}${query}`;
   }
 
@@ -121,28 +147,35 @@ export class DrJonesFileAgent extends AiAgent<Workspace.UISourceCode.UISourceCod
   }
 }
 
-function createContextDetailsForDrJonesFileAgent(selectedFile: Workspace.UISourceCode.UISourceCode):
-    [ContextDetail, ...ContextDetail[]] {
+function createContextDetailsForDrJonesFileAgent(
+    selectedFile: ConversationContext<Workspace.UISourceCode.UISourceCode>): [ContextDetail, ...ContextDetail[]] {
   return [
     {
       title: 'Selected file',
-      text: formatFile(selectedFile),
+      text: formatFile(selectedFile.getItem()),
     },
   ];
 }
 
-function formatFile(selectedFile: Workspace.UISourceCode.UISourceCode): string {
+export function formatFile(selectedFile: Workspace.UISourceCode.UISourceCode): string {
   const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-  return `File Name: ${selectedFile.displayName()}
-URL: ${selectedFile.url()}
-${formatSourceMapDetails(selectedFile, debuggerWorkspaceBinding)}
-File Content:
-${formatFileContent(selectedFile.content())}`;
+  const sourceMapDetails = formatSourceMapDetails(selectedFile, debuggerWorkspaceBinding);
+  const lines = [
+    `File name: ${selectedFile.displayName()}`,
+    `URL: ${selectedFile.url()}`,
+    sourceMapDetails,
+    `File content:
+${formatFileContent(selectedFile)}`,
+  ];
+  return lines.filter(line => line.trim() !== '').join('\n');
 }
 
-function formatFileContent(content: string): string {
-  const formattedContent = content.length > MAX_FILE_SIZE ? content.slice(0, MAX_FILE_SIZE) + '...\n' : content + '\n';
-  return '```' + formattedContent + '```';
+function formatFileContent(selectedFile: Workspace.UISourceCode.UISourceCode): string {
+  const content = selectedFile.contentType().isTextType() ? selectedFile.content() : '<binary data>';
+  const truncated = content.length > MAX_FILE_SIZE ? content.slice(0, MAX_FILE_SIZE) + '...' : content;
+  return `\`\`\`
+${truncated}
+\`\`\``;
 }
 
 export function formatSourceMapDetails(