AI: improve link handling for LH report

I noticed that, despite instructions, the AI often responds with:

```
[foo](#1,HTML,DIV)
```

Rather than:

```
[foo](#path-1,HTML,DIV)
```

This CL deals with that case by extending the parsing to support it.

R=kimanh@chromium.org

Bug: 489620101
Change-Id: I1ff87385004065711ed1f7bab98c3556b2cf1f87
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7762035
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/panels/ai_assistance/components/AccessibilityAgentMarkdownRenderer.test.ts

@@ -118,5 +118,64 @@ describeWithEnvironment('AccessibilityAgentMarkdownRenderer', () => {
       sinon.assert.calledOnce(linkifyStub);
       assert.include(el.textContent, 'LINKIFIED_PATH');
     });
+
+    it('linkifies paths using #1,HTML (without #path- prefix)', async () => {
+      const targetManager = SDK.TargetManager.TargetManager.instance();
+      const mockDomModel = sinon.createStubInstance(SDK.DOMModel.DOMModel);
+
+      const mockTarget = {
+        model: (modelClass: unknown) => {
+          if (modelClass === SDK.DOMModel.DOMModel) {
+            return mockDomModel;
+          }
+          return null;
+        },
+      } as unknown as SDK.Target.Target;
+
+      sinon.stub(targetManager, 'primaryPageTarget').returns(mockTarget);
+
+      const mockNode = {
+        frameId: () => '',
+      } as SDK.DOMModel.DOMNode;
+
+      mockDomModel.pushNodeByPathToFrontend.resolves(42 as Protocol.DOM.NodeId);
+      mockDomModel.nodeForId.returns(mockNode);
+
+      const linkifyStub = sinon.stub(PanelsCommon.DOMLinkifier.Linkifier.instance(), 'linkify')
+                              .returns(html`<span>LINKIFIED_PATH</span>`);
+
+      const el = renderToElem('[text](#1,HTML,1,BODY)');
+
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      sinon.assert.calledOnce(mockDomModel.pushNodeByPathToFrontend);
+      sinon.assert.calledWith(mockDomModel.pushNodeByPathToFrontend, '1,HTML,1,BODY');
+      sinon.assert.calledOnce(linkifyStub);
+      assert.include(el.textContent, 'LINKIFIED_PATH');
+    });
+
+    it('does not linkify non-integer node IDs', async () => {
+      const targetManager = SDK.TargetManager.TargetManager.instance();
+      const mockDomModel = sinon.createStubInstance(SDK.DOMModel.DOMModel);
+
+      const mockTarget = {
+        model: (modelClass: unknown) => {
+          if (modelClass === SDK.DOMModel.DOMModel) {
+            return mockDomModel;
+          }
+          return null;
+        },
+      } as unknown as SDK.Target.Target;
+
+      sinon.stub(targetManager, 'primaryPageTarget').returns(mockTarget);
+
+      const el = renderToElem('[text](#node-1.5)');
+
+      await new Promise(resolve => setTimeout(resolve, 0));
+
+      sinon.assert.notCalled(mockDomModel.pushNodesByBackendIdsToFrontend);
+      assert.include(el.textContent, 'text');
+      assert.notInclude(el.textContent, 'LINKIFIED');
+    });
   });
 });

front_end/panels/ai_assistance/components/AccessibilityAgentMarkdownRenderer.ts

@@ -13,6 +13,18 @@ import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js'
 const {html} = Lit.StaticHtml;
 const {until} = Lit.Directives;
 
+/**
+ * Represents the different types of links that can be parsed from the AI agent's response.
+ * The agent can linkify a node either by its backend node ID or by its full DOM path.
+ */
+type ParsedLink = {
+  type: 'path',
+  path: string,
+}|{
+  type: 'node',
+  nodeId: Protocol.DOM.BackendNodeId,
+};
+
 export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
   constructor(
       private mainFrameId = '',
@@ -22,28 +34,54 @@ export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCode
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     if (token.type === 'link' && token.href.startsWith('#')) {
-      if (token.href.startsWith('#path-')) {
-        const path = token.href.replace('#path-', '');
-        return html`<span>${
-            until(this.#linkifyPath(path, token.text).then(node => node || token.text), token.text)}</span>`;
-      }
+      const parsed = this.#parseLink(token.href);
+      if (parsed) {
+        const resultPromise = parsed.type === 'path' ? this.#linkifyPath(parsed.path, token.text) :
+                                                       this.#linkifyNode(parsed.nodeId, token.text);
 
-      let nodeId = undefined;
-      if (token.href.startsWith('#node-')) {
-        nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
-      } else if (token.href.startsWith('#')) {
-        nodeId = Number(token.href.replace('#', '')) as Protocol.DOM.BackendNodeId;
+        return html`<span>${until(resultPromise.then(node => node || token.text), token.text)}</span>`;
       }
+    }
+
+    return super.templateForToken(token);
+  }
 
-      if (nodeId) {
-        return html`<span>${
-            until(this.#linkifyNode(nodeId, token.text).then(node => node || token.text), token.text)}</span>`;
+  /**
+   * Parses a link href to determine if it's a node ID or a DOM path.
+   *
+   * The AI agent is instructed to use #node-ID or #path-PATH, but
+   * sometimes it omits the prefixes, in which case we try to detect
+   * paths by looking for `#1,HTML` which is often how paths in LH
+   * start.
+   */
+  #parseLink(href: string): ParsedLink|null {
+    if (href.startsWith('#path-')) {
+      return {type: 'path', path: href.replace('#path-', '')};
+    }
+    if (href.startsWith('#1,HTML')) {
+      return {type: 'path', path: href.slice(1)};
+    }
+
+    let nodeIdStr = '';
+    if (href.startsWith('#node-')) {
+      nodeIdStr = href.replace('#node-', '');
+    } else if (href.startsWith('#')) {
+      nodeIdStr = href.slice(1);
+    }
+
+    if (nodeIdStr.trim() !== '') {
+      const nodeId = Number(nodeIdStr);
+      if (Number.isInteger(nodeId)) {
+        return {type: 'node', nodeId: nodeId as Protocol.DOM.BackendNodeId};
       }
     }
 
-    return super.templateForToken(token);
+    return null;
   }
 
+  /**
+   * Linkifies a node using its backend node ID.
+   */
   async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
     if (backendNodeId === undefined) {
       return;
@@ -68,6 +106,9 @@ export class AccessibilityAgentMarkdownRenderer extends MarkdownRendererWithCode
     return linkedNode;
   }
 
+  /**
+   * Linkifies a node using its full DOM path (e.g. "1,HTML,1,BODY,...").
+   */
   async #linkifyPath(path: string, label: string): Promise<Lit.LitTemplate|undefined> {
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     const domModel = target?.model(SDK.DOMModel.DOMModel);