complete integration of pageFilter options.

Author: bhouston

packages/agent/package.json

@@ -45,10 +45,12 @@
   "license": "MIT",
   "dependencies": {
     "@anthropic-ai/sdk": "^0.37",
+    "@mozilla/readability": "^0.5.0",
     "@playwright/test": "^1.50.1",
     "@vitest/browser": "^3.0.5",
     "chalk": "^5",
     "dotenv": "^16",
+    "jsdom": "^26.0.0",
     "playwright": "^1.50.1",
     "uuid": "^11",
     "zod": "^3",

packages/agent/src/core/executeToolCall.ts

@@ -23,7 +23,7 @@ export const executeToolCall = async (
     customPrefix: tool.logPrefix,
   });
 
-  const toolContext = {
+  const toolContext: ToolContext = {
     ...context,
     logger,
   };

packages/agent/src/core/toolAgent.respawn.test.ts

@@ -5,11 +5,14 @@ import { getTools } from '../../src/tools/getTools.js';
 import { MockLogger } from '../utils/mockLogger.js';
 
 import { TokenTracker } from './tokens.js';
+import { ToolContext } from './types.js';
 
-const toolContext = {
+const toolContext: ToolContext = {
   logger: new MockLogger(),
   headless: true,
   workingDirectory: '.',
+  userSession: false,
+  pageFilter: 'simple',
   tokenTracker: new TokenTracker(),
 };
 // Mock Anthropic SDK

packages/agent/src/core/toolAgent.test.ts

@@ -5,12 +5,14 @@ import { MockLogger } from '../utils/mockLogger.js';
 import { executeToolCall } from './executeToolCall.js';
 import { TokenTracker } from './tokens.js';
 import { toolAgent } from './toolAgent.js';
-import { Tool } from './types.js';
+import { Tool, ToolContext } from './types.js';
 
-const toolContext = {
+const toolContext: ToolContext = {
   logger: new MockLogger(),
   headless: true,
   workingDirectory: '.',
+  userSession: false,
+  pageFilter: 'simple',
   tokenTracker: new TokenTracker(),
 };
 

packages/agent/src/core/types.ts

@@ -6,11 +6,14 @@ import { TokenTracker } from './tokens.js';
 
 export type TokenLevel = 'debug' | 'verbose' | 'info' | 'warn' | 'error';
 
+export type pageFilter = 'simple' | 'none' | 'readability';
+
 export type ToolContext = {
   logger: Logger;
   workingDirectory: string;
   headless: boolean;
-  userSession?: boolean;
+  userSession: boolean;
+  pageFilter: pageFilter;
   tokenTracker: TokenTracker;
 };
 

packages/agent/src/tools/browser/browseMessage.ts

@@ -5,7 +5,7 @@ import { Tool } from '../../core/types.js';
 import { errorToString } from '../../utils/errorToString.js';
 import { sleep } from '../../utils/sleep.js';
 
-import { getRenderedDOM } from './getRenderedDOM.js';
+import { filterPageContent } from './filterPageContent.js';
 import { browserSessions, type BrowserAction, SelectorType } from './types.js';
 
 // Schema for browser action
@@ -73,7 +73,10 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
   parameters: zodToJsonSchema(parameterSchema),
   returns: zodToJsonSchema(returnSchema),
 
-  execute: async ({ instanceId, action }, { logger }): Promise<ReturnType> => {
+  execute: async (
+    { instanceId, action },
+    { logger, pageFilter },
+  ): Promise<ReturnType> => {
     // Validate action format
     if (!action || typeof action !== 'object') {
       logger.error('Invalid action format: action must be an object');
@@ -92,6 +95,7 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
     }
 
     logger.verbose(`Executing browser action: ${action.actionType}`);
+    logger.verbose(`Webpage processing mode: ${pageFilter}`);
 
     try {
       const session = browserSessions.get(instanceId);
@@ -114,11 +118,12 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
             );
             await page.goto(action.url, { waitUntil: 'domcontentloaded' });
             await sleep(3000);
-            const content = await getRenderedDOM(page);
+            const content = await filterPageContent(page, pageFilter);
+            logger.verbose(`Content: ${content}`);
             logger.verbose(
               'Navigation completed with domcontentloaded strategy',
             );
-            logger.verbose(`Content: ${content}`);
+            logger.verbose(`Content length: ${content.length} characters`);
             return { status: 'success', content };
           } catch (navError) {
             // If that fails, try with no waitUntil option
@@ -132,9 +137,9 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
             try {
               await page.goto(action.url);
               await sleep(3000);
-              const content = await getRenderedDOM(page);
-              logger.verbose('Navigation completed with basic strategy');
+              const content = await filterPageContent(page, pageFilter);
               logger.verbose(`Content: ${content}`);
+              logger.verbose('Navigation completed with basic strategy');
               return { status: 'success', content };
             } catch (innerError) {
               logger.error(
@@ -154,7 +159,8 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
             action.selectorType,
           );
           await page.click(clickSelector);
-          const content = await page.content();
+          await sleep(1000); // Wait for any content changes after click
+          const content = await filterPageContent(page, pageFilter);
           logger.verbose(
             `Click action completed on selector: ${clickSelector}`,
           );
@@ -188,8 +194,9 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
         }
 
         case 'content': {
-          const content = await page.content();
+          const content = await filterPageContent(page, pageFilter);
           logger.verbose('Page content retrieved successfully');
+          logger.verbose(`Content length: ${content.length} characters`);
           return { status: 'success', content };
         }
 
@@ -216,9 +223,12 @@ export const browseMessageTool: Tool<Parameters, ReturnType> = {
     }
   },
 
-  logParameters: ({ action, description }, { logger }) => {
+  logParameters: (
+    { action, description },
+    { logger, pageFilter = 'simple' },
+  ) => {
     logger.info(
-      `Performing browser action: ${action.actionType}, ${description}`,
+      `Performing browser action: ${action.actionType} with ${pageFilter} processing, ${description}`,
     );
   },
 

packages/agent/src/tools/browser/browseStart.ts

@@ -7,12 +7,11 @@ import { Tool } from '../../core/types.js';
 import { errorToString } from '../../utils/errorToString.js';
 import { sleep } from '../../utils/sleep.js';
 
-import { getRenderedDOM } from './getRenderedDOM.js';
+import { filterPageContent } from './filterPageContent.js';
 import { browserSessions } from './types.js';
 
 const parameterSchema = z.object({
   url: z.string().url().optional().describe('Initial URL to navigate to'),
-
   timeout: z
     .number()
     .optional()
@@ -42,12 +41,13 @@ export const browseStartTool: Tool<Parameters, ReturnType> = {
 
   execute: async (
     { url, timeout = 30000 },
-    { logger, headless = true, userSession = false },
+    { logger, headless, userSession, pageFilter },
   ): Promise<ReturnType> => {
     logger.verbose(`Starting browser session${url ? ` at ${url}` : ''}`);
     logger.verbose(
       `User session mode: ${userSession ? 'enabled' : 'disabled'}`,
     );
+    logger.verbose(`Webpage processing mode: ${pageFilter}`);
 
     try {
       const instanceId = uuidv4();
@@ -102,7 +102,8 @@ export const browseStartTool: Tool<Parameters, ReturnType> = {
           );
           await page.goto(url, { waitUntil: 'domcontentloaded', timeout });
           await sleep(3000);
-          content = await getRenderedDOM(page);
+          content = await filterPageContent(page, pageFilter);
+          logger.verbose(`Content: ${content}`);
           logger.verbose('Navigation completed with domcontentloaded strategy');
         } catch (error) {
           // If that fails, try with no waitUntil option at all (most basic)
@@ -116,7 +117,8 @@ export const browseStartTool: Tool<Parameters, ReturnType> = {
           try {
             await page.goto(url, { timeout });
             await sleep(3000);
-            content = await getRenderedDOM(page);
+            content = await filterPageContent(page, pageFilter);
+            logger.verbose(`Content: ${content}`);
             logger.verbose('Navigation completed with basic strategy');
           } catch (innerError) {
             logger.error(
@@ -128,7 +130,7 @@ export const browseStartTool: Tool<Parameters, ReturnType> = {
       }
 
       logger.verbose('Browser session started successfully');
-      logger.verbose(`Content: ${content}`);
+      logger.verbose(`Content length: ${content.length} characters`);
 
       return {
         instanceId,
@@ -145,9 +147,9 @@ export const browseStartTool: Tool<Parameters, ReturnType> = {
     }
   },
 
-  logParameters: ({ url, description }, { logger }) => {
+  logParameters: ({ url, description }, { logger, pageFilter = 'simple' }) => {
     logger.info(
-      `Starting browser session${url ? ` at ${url}` : ''}, ${description}`,
+      `Starting browser session${url ? ` at ${url}` : ''} with ${pageFilter} processing, ${description}`,
     );
   },
 

packages/agent/src/tools/browser/filterPageContent.ts

@@ -0,0 +1,112 @@
+import { Readability } from '@mozilla/readability';
+import { JSDOM } from 'jsdom';
+import { Page } from 'playwright';
+
+/**
+ * Returns the raw HTML content of the page without any processing
+ */
+async function getNoneProcessedDOM(page: Page): Promise<string> {
+  return await page.content();
+}
+
+/**
+ * Processes the page using Mozilla's Readability to extract the main content
+ * Falls back to simple processing if Readability fails
+ */
+async function getReadabilityProcessedDOM(page: Page): Promise<string> {
+  try {
+    const html = await page.content();
+    const url = page.url();
+    const dom = new JSDOM(html, { url });
+    const reader = new Readability(dom.window.document);
+    const article = reader.parse();
+
+    if (!article) {
+      console.warn(
+        'Readability could not parse the page, falling back to simple mode',
+      );
+      return getSimpleProcessedDOM(page);
+    }
+
+    // Return a formatted version of the article
+    return JSON.stringify(
+      {
+        url: url,
+        title: article.title || '',
+        content: article.content || '',
+        textContent: article.textContent || '',
+        excerpt: article.excerpt || '',
+        byline: article.byline || '',
+        dir: article.dir || '',
+        siteName: article.siteName || '',
+        length: article.length || 0,
+      },
+      null,
+      2,
+    );
+  } catch (error) {
+    console.error('Error using Readability:', error);
+    // Fallback to simple mode if Readability fails
+    return getSimpleProcessedDOM(page);
+  }
+}
+
+/**
+ * Processes the page by removing invisible elements and non-visual tags
+ */
+async function getSimpleProcessedDOM(page: Page): Promise<string> {
+  const domContent = await page.evaluate(() => {
+    const clone = document.documentElement;
+
+    const elements = clone.querySelectorAll('*');
+
+    const elementsToRemove: Element[] = [];
+    elements.forEach((element) => {
+      const computedStyle = window.getComputedStyle(element);
+      const isVisible =
+        computedStyle.display !== 'none' &&
+        computedStyle.visibility !== 'hidden' &&
+        computedStyle.opacity !== '0';
+
+      if (!isVisible) {
+        elementsToRemove.push(element);
+      }
+    });
+
+    const nonVisualTags = clone.querySelectorAll(
+      'noscript, iframe, link[rel="stylesheet"], meta, svg, img, symbol, path, style, script',
+    );
+    nonVisualTags.forEach((element) => elementsToRemove.push(element));
+
+    elementsToRemove.forEach((element) => element.remove());
+
+    console.log(
+      'removing ',
+      elementsToRemove.length,
+      ' elements out of a total ',
+      elements.length,
+    );
+
+    return clone.outerHTML;
+  });
+
+  return domContent.replace(/\n/g, '').replace(/\s+/g, ' ');
+}
+
+/**
+ * Gets the rendered DOM of a page with specified processing method
+ */
+export async function filterPageContent(
+  page: Page,
+  pageFilter: 'simple' | 'none' | 'readability',
+): Promise<string> {
+  switch (pageFilter) {
+    case 'none':
+      return getNoneProcessedDOM(page);
+    case 'readability':
+      return getReadabilityProcessedDOM(page);
+    case 'simple':
+    default:
+      return getSimpleProcessedDOM(page);
+  }
+}