e2e-pilot 0.0.69

package/src/snapshots/hacker-news-tabbed-accessibility.md

@@ -0,0 +1,202 @@
+- table [ref=e3]:
+  - rowgroup [ref=e4]:
+    - row "Hacker Newsnew | past | comments | ask | show | jobs | submit login" [ref=e5]:
+      - cell "Hacker Newsnew | past | comments | ask | show | jobs | submit login" [ref=e6]:
+        - table [ref=e7]:
+          - rowgroup [ref=e8]:
+            - row "Hacker Newsnew | past | comments | ask | show | jobs | submit login" [ref=e9]:
+              - cell [ref=e10]:
+                - link [ref=e11] [cursor=pointer]:
+                  - /url: https://news.ycombinator.com
+                  - img [ref=e12] [cursor=pointer]
+              - cell "Hacker Newsnew | past | comments | ask | show | jobs | submit" [ref=e13]:
+                - generic [ref=e14]:
+                  - link "Hacker News" [active] [ref=e16] [cursor=pointer]:
+                    - /url: news
+                  - link "new" [ref=e17] [cursor=pointer]:
+                    - /url: newest
+                  - text: "|"
+                  - link "past" [ref=e18] [cursor=pointer]:
+                    - /url: front
+                  - text: "|"
+                  - link "comments" [ref=e19] [cursor=pointer]:
+                    - /url: newcomments
+                  - text: "|"
+                  - link "ask" [ref=e20] [cursor=pointer]:
+                    - /url: ask
+                  - text: "|"
+                  - link "show" [ref=e21] [cursor=pointer]:
+                    - /url: show
+                  - text: "|"
+                  - link "jobs" [ref=e22] [cursor=pointer]:
+                    - /url: jobs
+                  - text: "|"
+                  - link "submit" [ref=e23] [cursor=pointer]:
+                    - /url: submit
+              - cell "login" [ref=e24]:
+                - link "login" [ref=e26] [cursor=pointer]:
+                  - /url: login?goto=item%3Fid%3D1
+    - row [ref=e27]
+    - row "upvote Y Combinator (ycombinator.com) 57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments upvote sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR upvote pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road? upvote dmon on Feb 25, 2007 | | [–] sure" [ref=e28]:
+      - cell "upvote Y Combinator (ycombinator.com) 57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments upvote sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR upvote pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road? upvote dmon on Feb 25, 2007 | | [–] sure" [ref=e29]:
+        - table [ref=e30]:
+          - rowgroup [ref=e31]:
+            - row "upvote Y Combinator (ycombinator.com)" [ref=e32]:
+              - cell [ref=e33]
+              - cell "upvote" [ref=e35]:
+                - link "upvote" [ref=e37] [cursor=pointer]:
+                  - /url: vote?id=1&how=up&goto=item%3Fid%3D1
+              - cell "Y Combinator (ycombinator.com)" [ref=e39]:
+                - generic [ref=e40]:
+                  - link "Y Combinator" [ref=e41] [cursor=pointer]:
+                    - /url: http://ycombinator.com
+                  - generic [ref=e42]:
+                    - text: (
+                    - link "ycombinator.com" [ref=e43] [cursor=pointer]:
+                      - /url: from?site=ycombinator.com
+                      - generic [ref=e44] [cursor=pointer]: ycombinator.com
+                    - text: )
+            - row "57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments" [ref=e45]:
+              - cell [ref=e46]
+              - cell "57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments" [ref=e47]:
+                - generic [ref=e48]:
+                  - generic [ref=e49]: 57 points
+                  - text: by
+                  - link "pg" [ref=e50] [cursor=pointer]:
+                    - /url: user?id=pg
+                  - link "on Oct 9, 2006" [ref=e52] [cursor=pointer]:
+                    - /url: item?id=1
+                  - text: "|"
+                  - link "hide" [ref=e54] [cursor=pointer]:
+                    - /url: hide?id=1&goto=item%3Fid%3D1
+                  - text: "|"
+                  - link "past" [ref=e55] [cursor=pointer]:
+                    - /url: https://hn.algolia.com/?query=Y%20Combinator&type=story&dateRange=all&sort=byDate&storyText=false&prefix&page=0
+                  - text: "|"
+                  - link "favorite" [ref=e56] [cursor=pointer]:
+                    - /url: fave?id=1&auth=5328fcfde7333d68e67a8a2334e25acee5599932
+                  - text: "|"
+                  - link "3 comments" [ref=e57] [cursor=pointer]:
+                    - /url: item?id=1
+            - row [ref=e58]:
+              - cell [ref=e59]
+              - cell [ref=e60]
+        - table [ref=e63]:
+          - rowgroup [ref=e64]:
+            - row "upvote sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR" [ref=e65]:
+              - cell "upvote sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR" [ref=e66]:
+                - table [ref=e67]:
+                  - rowgroup [ref=e68]:
+                    - row "upvote sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR" [ref=e69]:
+                      - cell [ref=e70]:
+                        - img
+                      - cell "upvote" [ref=e72]:
+                        - link "upvote" [ref=e74] [cursor=pointer]:
+                          - /url: vote?id=15&how=up&goto=item%3Fid%3D1
+                      - cell "sama on Oct 9, 2006 [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR" [ref=e76]:
+                        - generic [ref=e78]:
+                          - link "sama" [ref=e79] [cursor=pointer]:
+                            - /url: user?id=sama
+                          - link "on Oct 9, 2006" [ref=e81] [cursor=pointer]:
+                            - /url: item?id=15
+                          - link "[–]" [ref=e84] [cursor=pointer]:
+                            - /url: javascript:void(0)
+                        - generic [ref=e87]:
+                          - generic [ref=e88]: "\"the rising star of venture capital\" -unknown VC eating lunch on SHR"
+                          - generic:
+                            - paragraph
+            - row "upvote pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road?" [ref=e92]:
+              - cell "upvote pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road?" [ref=e93]:
+                - table [ref=e94]:
+                  - rowgroup [ref=e95]:
+                    - row "upvote pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road?" [ref=e96]:
+                      - cell [ref=e97]:
+                        - img [ref=e98]
+                      - cell "upvote" [ref=e99]:
+                        - link "upvote" [ref=e101] [cursor=pointer]:
+                          - /url: vote?id=17&how=up&goto=item%3Fid%3D1
+                      - cell "pg on Oct 9, 2006 | [–] Is there anywhere to eat on Sandhill Road?" [ref=e103]:
+                        - generic [ref=e105]:
+                          - link "pg" [ref=e106] [cursor=pointer]:
+                            - /url: user?id=pg
+                          - link "on Oct 9, 2006" [ref=e108] [cursor=pointer]:
+                            - /url: item?id=17
+                          - generic [ref=e110]:
+                            - text: "|"
+                            - link [ref=e111] [cursor=pointer]:
+                              - /url: "#15"
+                              - text: parent
+                            - link "[–]" [ref=e112] [cursor=pointer]:
+                              - /url: javascript:void(0)
+                        - generic [ref=e115]:
+                          - generic [ref=e116]: Is there anywhere to eat on Sandhill Road?
+                          - generic:
+                            - paragraph
+            - row "upvote dmon on Feb 25, 2007 | | [–] sure" [ref=e120]:
+              - cell "upvote dmon on Feb 25, 2007 | | [–] sure" [ref=e121]:
+                - table [ref=e122]:
+                  - rowgroup [ref=e123]:
+                    - row "upvote dmon on Feb 25, 2007 | | [–] sure" [ref=e124]:
+                      - cell [ref=e125]:
+                        - img [ref=e126]
+                      - cell "upvote" [ref=e127]:
+                        - link "upvote" [ref=e129] [cursor=pointer]:
+                          - /url: vote?id=1079&how=up&goto=item%3Fid%3D1
+                      - cell "dmon on Feb 25, 2007 | | [–] sure" [ref=e131]:
+                        - generic [ref=e133]:
+                          - link "dmon" [ref=e134] [cursor=pointer]:
+                            - /url: user?id=dmon
+                          - link "on Feb 25, 2007" [ref=e136] [cursor=pointer]:
+                            - /url: item?id=1079
+                          - generic [ref=e138]:
+                            - text: "|"
+                            - link [ref=e139] [cursor=pointer]:
+                              - /url: "#15"
+                              - text: root
+                            - text: "|"
+                            - link [ref=e140] [cursor=pointer]:
+                              - /url: "#17"
+                              - text: parent
+                            - link "[–]" [ref=e141] [cursor=pointer]:
+                              - /url: javascript:void(0)
+                        - generic [ref=e144]:
+                          - generic [ref=e145]: sure
+                          - generic:
+                            - paragraph
+    - row "Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4 Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact Search:" [ref=e151]:
+      - cell "Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4 Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact Search:" [ref=e152]:
+        - img
+        - table [ref=e154]:
+          - rowgroup [ref=e155]:
+            - row [ref=e156]:
+              - cell [ref=e157]
+        - link "Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4" [ref=e160] [cursor=pointer]:
+          - /url: https://www.ycombinator.com/apply/
+        - generic [ref=e162]:
+          - generic [ref=e163]:
+            - link "Guidelines" [ref=e164] [cursor=pointer]:
+              - /url: newsguidelines.html
+            - text: "|"
+            - link "FAQ" [ref=e165] [cursor=pointer]:
+              - /url: newsfaq.html
+            - text: "|"
+            - link "Lists" [ref=e166] [cursor=pointer]:
+              - /url: lists
+            - text: "|"
+            - link "API" [ref=e167] [cursor=pointer]:
+              - /url: https://github.com/HackerNews/API
+            - text: "|"
+            - link "Security" [ref=e168] [cursor=pointer]:
+              - /url: security.html
+            - text: "|"
+            - link "Legal" [ref=e169] [cursor=pointer]:
+              - /url: https://www.ycombinator.com/legal/
+            - text: "|"
+            - link "Apply to YC" [ref=e170] [cursor=pointer]:
+              - /url: https://www.ycombinator.com/apply/
+            - text: "|"
+            - link "Contact" [ref=e171] [cursor=pointer]:
+              - /url: mailto:hn@ycombinator.com
+          - generic [ref=e174]:
+            - text: "Search:"
+            - textbox [ref=e175]

package/src/snapshots/shadcn-ui-accessibility.md

@@ -0,0 +1,11 @@
+MCP error -32602: Input validation error: Invalid arguments for tool execute: [
+  {
+    "code": "invalid_type",
+    "expected": "string",
+    "received": "undefined",
+    "path": [
+      "intend"
+    ],
+    "message": "Required"
+  }
+]

package/src/start-relay-server.ts

@@ -0,0 +1,43 @@
+import { startE2EPilotCDPRelayServer } from './cdp-relay.js'
+import { createFileLogger } from './create-logger.js'
+
+process.title = 'e2e-pilot-ws-server'
+
+const logger = createFileLogger()
+
+process.on('uncaughtException', async (err) => {
+  await logger.error('Uncaught Exception:', err);
+  process.exit(1);
+});
+
+process.on('unhandledRejection', async (reason) => {
+  await logger.error('Unhandled Rejection:', reason);
+  process.exit(1);
+});
+
+process.on('exit', async (code) => {
+  await logger.log(`Process exiting with code: ${code}`);
+});
+
+
+export async function startServer({ port = 19988, host = '127.0.0.1', token }: { port?: number; host?: string; token?: string } = {}) {
+  const server = await startE2EPilotCDPRelayServer({ port, host, token, logger })
+
+  console.log('CDP Relay Server running. Press Ctrl+C to stop.')
+  console.log('Logs are being written to:', logger.logFilePath)
+
+  process.on('SIGINT', () => {
+    console.log('\nShutting down...')
+    server.close()
+    process.exit(0)
+  })
+
+  process.on('SIGTERM', () => {
+    console.log('\nShutting down...')
+    server.close()
+    process.exit(0)
+  })
+
+  return server
+}
+startServer().catch(logger.error)

package/src/styles-examples.ts

@@ -0,0 +1,77 @@
+import { page, getStylesForLocator, formatStylesAsText, console } from './debugger-examples-types.js'
+
+// Example: Get styles for an element and display them
+async function getElementStyles() {
+  const loc = page.locator('.my-button')
+  const styles = await getStylesForLocator({ locator: loc })
+  console.log(formatStylesAsText(styles))
+}
+
+// Example: Inspect computed styles for a specific element
+async function inspectButtonStyles() {
+  const button = page.getByRole('button', { name: 'Submit' })
+  const styles = await getStylesForLocator({ locator: button })
+
+  console.log('Element:', styles.element)
+
+  if (styles.inlineStyle) {
+    console.log('Inline styles:', styles.inlineStyle)
+  }
+
+  for (const rule of styles.rules) {
+    console.log(`${rule.selector}: ${JSON.stringify(rule.declarations)}`)
+    if (rule.source) {
+      console.log(`  Source: ${rule.source.url}:${rule.source.line}`)
+    }
+  }
+}
+
+// Example: Include browser default (user-agent) styles
+async function getStylesWithUserAgent() {
+  const loc = page.locator('input[type="text"]')
+  const styles = await getStylesForLocator({
+    locator: loc,
+    includeUserAgentStyles: true,
+  })
+  console.log(formatStylesAsText(styles))
+}
+
+// Example: Find where a CSS property is defined
+async function findPropertySource() {
+  const loc = page.locator('.card')
+  const styles = await getStylesForLocator({ locator: loc })
+
+  const backgroundRule = styles.rules.find((r) => 'background-color' in r.declarations)
+  if (backgroundRule) {
+    console.log('background-color defined by:', backgroundRule.selector)
+    if (backgroundRule.source) {
+      console.log(`  at ${backgroundRule.source.url}:${backgroundRule.source.line}`)
+    }
+  }
+}
+
+// Example: Check inherited styles
+async function checkInheritedStyles() {
+  const loc = page.locator('.nested-text')
+  const styles = await getStylesForLocator({ locator: loc })
+
+  const inheritedRules = styles.rules.filter((r) => r.inheritedFrom)
+  for (const rule of inheritedRules) {
+    console.log(`Inherited from ${rule.inheritedFrom}: ${rule.selector}`)
+    console.log('  Properties:', rule.declarations)
+  }
+}
+
+// Example: Compare styles between two elements
+async function compareStyles() {
+  const primary = await getStylesForLocator({ locator: page.locator('.btn-primary') })
+  const secondary = await getStylesForLocator({ locator: page.locator('.btn-secondary') })
+
+  console.log('Primary button:')
+  console.log(formatStylesAsText(primary))
+
+  console.log('Secondary button:')
+  console.log(formatStylesAsText(secondary))
+}
+
+export { getElementStyles, inspectButtonStyles, getStylesWithUserAgent, findPropertySource, checkInheritedStyles, compareStyles }

package/src/styles.ts

@@ -0,0 +1,345 @@
+import type { ICDPSession, CDPSession } from './cdp-session.js'
+import type { Locator } from 'playwright-core'
+
+export interface StyleSource {
+  url: string
+  line: number
+  column: number
+}
+
+export type StyleDeclarations = Record<string, string>
+
+export interface StyleRule {
+  selector: string
+  source: StyleSource | null
+  origin: 'regular' | 'user-agent' | 'injected' | 'inspector'
+  declarations: StyleDeclarations
+  inheritedFrom: string | null
+}
+
+export interface StylesResult {
+  element: string
+  inlineStyle: StyleDeclarations | null
+  rules: StyleRule[]
+}
+
+interface CSSProperty {
+  name: string
+  value: string
+  important?: boolean
+}
+
+interface CSSStyle {
+  cssProperties: CSSProperty[]
+  cssText?: string
+}
+
+interface CSSRule {
+  selectorList: { text: string }
+  style: CSSStyle
+  styleSheetId?: string
+  origin: string
+}
+
+interface RuleMatch {
+  rule: CSSRule
+  matchingSelectors: number[]
+}
+
+interface InheritedStyleEntry {
+  inlineStyle?: CSSStyle
+  matchedCSSRules: RuleMatch[]
+}
+
+interface SourceRange {
+  startLine: number
+  startColumn: number
+  endLine: number
+  endColumn: number
+}
+
+interface CSSStyleSheetHeader {
+  styleSheetId: string
+  sourceURL?: string
+  origin: string
+}
+
+export async function getStylesForLocator({
+  locator,
+  cdp: cdpSession,
+  includeUserAgentStyles = false,
+}: {
+  locator: Locator
+  cdp: ICDPSession
+  includeUserAgentStyles?: boolean
+}): Promise<StylesResult> {
+  // Cast to CDPSession for internal type safety - at runtime both are compatible
+  const cdp = cdpSession as CDPSession
+  await cdp.send('DOM.enable')
+  await cdp.send('CSS.enable')
+
+  const elementHandle = await locator.elementHandle()
+  if (!elementHandle) {
+    throw new Error('Could not get element handle from locator')
+  }
+
+  const remoteObject = (elementHandle as any)._channel?.objectId
+    ? { objectId: (elementHandle as any)._channel.objectId }
+    : null
+
+  let backendNodeId: number
+  if (remoteObject?.objectId) {
+    const nodeInfo = await cdp.send('DOM.describeNode', {
+      objectId: remoteObject.objectId,
+    })
+    backendNodeId = nodeInfo.node.backendNodeId
+  } else {
+    const box = await elementHandle.boundingBox()
+    if (!box) {
+      throw new Error('Element has no bounding box')
+    }
+    const docResult = await cdp.send('DOM.getDocument', { depth: 0 })
+    const nodeAtPoint = await cdp.send('DOM.getNodeForLocation', {
+      x: Math.round(box.x + box.width / 2),
+      y: Math.round(box.y + box.height / 2),
+    })
+    backendNodeId = nodeAtPoint.backendNodeId
+  }
+
+  const pushResult = await cdp.send('DOM.pushNodesByBackendIdsToFrontend', {
+    backendNodeIds: [backendNodeId],
+  })
+  const nodeId = pushResult.nodeIds[0]
+
+  if (!nodeId) {
+    throw new Error('Could not get nodeId for element')
+  }
+
+  const nodeInfo = await cdp.send('DOM.describeNode', { nodeId })
+  const elementDescription = formatElementDescription(nodeInfo.node)
+
+  const matchedStyles = await cdp.send('CSS.getMatchedStylesForNode', { nodeId })
+
+  const stylesheetUrls = new Map<string, string>()
+  
+  const processStyleSheetId = async (styleSheetId: string | undefined): Promise<StyleSource | null> => {
+    if (!styleSheetId) {
+      return null
+    }
+    
+    if (!stylesheetUrls.has(styleSheetId)) {
+      try {
+        const header = await cdp.send('CSS.getStyleSheetText', { styleSheetId })
+        stylesheetUrls.set(styleSheetId, '')
+      } catch {
+        stylesheetUrls.set(styleSheetId, '')
+      }
+    }
+    
+    return null
+  }
+
+  const rules: StyleRule[] = []
+
+  if (matchedStyles.matchedCSSRules) {
+    for (const ruleMatch of matchedStyles.matchedCSSRules) {
+      const rule = ruleMatch.rule
+      const sourceRange = (rule as any).selectorList?.range as SourceRange | undefined
+      const styleSheetId = rule.styleSheetId
+      
+      let source: StyleSource | null = null
+      if (styleSheetId && sourceRange) {
+        const styleSheet = (matchedStyles as any).cssStyleSheetHeaders?.find(
+          (h: CSSStyleSheetHeader) => h.styleSheetId === styleSheetId
+        )
+        const url = styleSheet?.sourceURL || (rule as any).origin === 'user-agent' ? 'user-agent' : `stylesheet:${styleSheetId}`
+        
+        source = {
+          url: (rule as any).styleSheetId ? await getStylesheetUrl(cdp, styleSheetId) : 'user-agent',
+          line: sourceRange.startLine + 1,
+          column: sourceRange.startColumn,
+        }
+      }
+
+      rules.push({
+        selector: rule.selectorList.text,
+        source,
+        origin: rule.origin as StyleRule['origin'],
+        declarations: extractDeclarations(rule.style),
+        inheritedFrom: null,
+      })
+    }
+  }
+
+  if (matchedStyles.inherited) {
+    for (let i = 0; i < matchedStyles.inherited.length; i++) {
+      const inheritedEntry = matchedStyles.inherited[i] as InheritedStyleEntry
+      const ancestorDesc = `ancestor[${i + 1}]`
+
+      if (inheritedEntry.inlineStyle) {
+        const declarations = extractDeclarations(inheritedEntry.inlineStyle)
+        if (Object.keys(declarations).length > 0) {
+          rules.push({
+            selector: 'element.style',
+            source: null,
+            origin: 'regular',
+            declarations,
+            inheritedFrom: ancestorDesc,
+          })
+        }
+      }
+
+      for (const ruleMatch of inheritedEntry.matchedCSSRules) {
+        const rule = ruleMatch.rule
+        const sourceRange = (rule as any).selectorList?.range as SourceRange | undefined
+        const styleSheetId = rule.styleSheetId
+
+        let source: StyleSource | null = null
+        if (styleSheetId && sourceRange) {
+          source = {
+            url: await getStylesheetUrl(cdp, styleSheetId),
+            line: sourceRange.startLine + 1,
+            column: sourceRange.startColumn,
+          }
+        }
+
+        const declarations = extractDeclarations(rule.style)
+        if (Object.keys(declarations).length > 0) {
+          rules.push({
+            selector: rule.selectorList.text,
+            source,
+            origin: rule.origin as StyleRule['origin'],
+            declarations,
+            inheritedFrom: ancestorDesc,
+          })
+        }
+      }
+    }
+  }
+
+  let inlineStyle: StyleDeclarations | null = null
+  if (matchedStyles.inlineStyle) {
+    const declarations = extractDeclarations(matchedStyles.inlineStyle as CSSStyle)
+    if (Object.keys(declarations).length > 0) {
+      inlineStyle = declarations
+    }
+  }
+
+  const filteredRules = includeUserAgentStyles
+    ? rules
+    : rules.filter((r) => r.origin !== 'user-agent')
+
+  return {
+    element: elementDescription,
+    inlineStyle,
+    rules: filteredRules,
+  }
+}
+
+function extractDeclarations(style: CSSStyle): StyleDeclarations {
+  if (!style?.cssProperties) {
+    return {}
+  }
+  
+  const result: StyleDeclarations = {}
+  for (const prop of style.cssProperties) {
+    if (!prop.value || prop.value === 'initial' || prop.name.startsWith('-webkit-')) {
+      continue
+    }
+    const value = prop.important ? `${prop.value} !important` : prop.value
+    result[prop.name] = value
+  }
+  return result
+}
+
+function formatElementDescription(node: any): string {
+  let desc = node.localName || node.nodeName?.toLowerCase() || 'element'
+  
+  if (node.attributes) {
+    const attrs: Record<string, string> = {}
+    for (let i = 0; i < node.attributes.length; i += 2) {
+      attrs[node.attributes[i]] = node.attributes[i + 1]
+    }
+    
+    if (attrs.id) {
+      desc += `#${attrs.id}`
+    }
+    if (attrs.class) {
+      desc += `.${attrs.class.split(' ').join('.')}`
+    }
+  }
+  
+  return desc
+}
+
+async function getStylesheetUrl(cdp: CDPSession, styleSheetId: string): Promise<string> {
+  try {
+    await cdp.send('CSS.getStyleSheetText', { styleSheetId })
+    return `stylesheet:${styleSheetId}`
+  } catch {
+    return `stylesheet:${styleSheetId}`
+  }
+}
+
+export function formatStylesAsText(styles: StylesResult): string {
+  const lines: string[] = []
+  
+  lines.push(`Element: ${styles.element}`)
+  lines.push('')
+  
+  if (styles.inlineStyle) {
+    lines.push('Inline styles:')
+    for (const [prop, value] of Object.entries(styles.inlineStyle)) {
+      lines.push(`  ${prop}: ${value}`)
+    }
+    lines.push('')
+  }
+  
+  const directRules = styles.rules.filter((r) => !r.inheritedFrom)
+  const inheritedRules = styles.rules.filter((r) => r.inheritedFrom)
+  
+  if (directRules.length > 0) {
+    lines.push('Matched rules:')
+    for (const rule of directRules) {
+      lines.push(`  ${rule.selector} {`)
+      const sourceInfo = rule.source ? ` /* ${rule.source.url}:${rule.source.line}:${rule.source.column} */` : ''
+      if (sourceInfo) {
+        lines.push(`   ${sourceInfo}`)
+      }
+      for (const [prop, value] of Object.entries(rule.declarations)) {
+        lines.push(`    ${prop}: ${value};`)
+      }
+      lines.push('  }')
+    }
+    lines.push('')
+  }
+  
+  if (inheritedRules.length > 0) {
+    const byAncestor = new Map<string, StyleRule[]>()
+    for (const rule of inheritedRules) {
+      const key = rule.inheritedFrom!
+      if (!byAncestor.has(key)) {
+        byAncestor.set(key, [])
+      }
+      byAncestor.get(key)!.push(rule)
+    }
+    
+    for (const [ancestor, rules] of byAncestor) {
+      lines.push(`Inherited from ${ancestor}:`)
+      for (const rule of rules) {
+        lines.push(`  ${rule.selector} {`)
+        const sourceInfo = rule.source ? ` /* ${rule.source.url}:${rule.source.line}:${rule.source.column} */` : ''
+        if (sourceInfo) {
+          lines.push(`   ${sourceInfo}`)
+        }
+        for (const [prop, value] of Object.entries(rule.declarations)) {
+          lines.push(`    ${prop}: ${value};`)
+        }
+        lines.push('  }')
+      }
+      lines.push('')
+    }
+  }
+  
+  return lines.join('\n')
+}