viyv-browser-mcp 0.6.6 → 0.6.8

package/dist/index.js

@@ -1411,6 +1411,42 @@ var FIND_RETURNS = `{
 }`;
 var FIND_RELATED = ["read_page", "click", "form_input", "page_outline"];
 
+// src/tools/core/inspect.ts
+var INSPECT_DESCRIPTION = `Inspect element: computed styles, attributes, dimensions, DOM structure, images.
+Use ref from read_page/find or CSS selector. Specify sections to control output size.
+Returns: { identity, box, typography, visual, layout, attributes, dom, form, image, accessibility }`;
+var INSPECT_DETAIL = `Deep-inspect a single element for development/QA tasks.
+
+Sections (pick what you need via sections param, default: identity box typography visual layout attributes):
+- identity: tag, id, classes, role, data-* attributes
+- box: bounding rect, margin, padding, border-width, box-sizing, overflow
+- typography: font-family/size/weight/style, line-height, letter-spacing, text-align, color (#hex)
+- visual: background-color, border (color/style/radius), opacity, box-shadow, cursor
+- layout: display, position, z-index, top/right/bottom/left, flex/grid properties
+- attributes: all HTML attributes as key-value pairs
+- dom: parent path, child summary, textContent (500 chars), innerHTML (1000 chars)
+- form: value, checked, disabled, readonly, required, validation constraints, validity state
+- image: src, naturalWidth/Height, alt, loaded state + actual image as content block (for img/canvas/svg/video/audio)
+- accessibility: accessible name, role, all aria-* attrs, focusable, tab index, contrast ratio (WCAG)
+
+Use properties param to request additional CSS properties not in the default sections.
+All colors returned in #hex format.`;
+var INSPECT_RETURNS = `{
+  // Only requested sections are returned
+  identity?: { tag, id?, classes[], role?, dataAttributes{} }
+  box?: { rect{x,y,width,height}, margin{top,right,bottom,left}, padding{...}, borderWidth{...}, boxSizing, overflow{x,y} }
+  typography?: { fontFamily, fontSize, fontWeight, fontStyle, lineHeight, letterSpacing, textAlign, color }
+  visual?: { backgroundColor, border{color,style,radius}, opacity, boxShadow, cursor }
+  layout?: { display, position, zIndex, top?, right?, bottom?, left?, flex?{direction,justifyContent,alignItems,gap,wrap}, grid?{...} }
+  attributes?: { [name]: value }
+  dom?: { parentPath, childSummary, textContent, innerHTML }
+  form?: { value?, checked?, disabled, readonly, required, validation{}, validity{} }
+  image?: { src?, currentSrc?, naturalWidth?, naturalHeight?, alt?, complete?, svgMarkup?, videoWidth?, videoHeight?, duration?, paused?, muted? }  // + image/frame content block
+  accessibility?: { accessibleName, role, ariaAttributes{}, focusable, tabIndex, contrastRatio{ratio,aa,aaa,textColor,bgColor} }
+  properties?: { [cssPropertyName]: value }  // extra CSS properties if requested
+}`;
+var INSPECT_RELATED = ["read_page", "find", "screenshot"];
+
 // src/tools/core/form-input.ts
 var FORM_INPUT_DESCRIPTION = `Set value on form element by ref. Supports inputs, selects, checkboxes, radio, contenteditable.
 Use submit:true to submit and wait for navigation.
@@ -2991,33 +3027,38 @@ var BROWSER_HEALTH_RETURNS = `{
 var BROWSER_HEALTH_RELATED = ["tabs_context", "switch_browser"];
 
 // src/tools/viyv/feedback.ts
-var FEEDBACK_DESCRIPTION = `Visual feedback/review system. Actions: list, get, add, reply, resolve, reopen, complete.
-Pin comments to page elements for human-AI review workflow.`;
+var FEEDBACK_DESCRIPTION = `Visual feedback/review system. Actions: list, get, add, reply, resolve, reopen, complete, get_attachment.
+Pin comments to page elements for human-AI review workflow. Supports image attachments.`;
 var FEEDBACK_DETAIL = `Collaborative review system for pinning feedback to UI elements.
 
 Actions:
 - list: Get feedback threads for the current tab's URL. Filter by status (default: open).
-  Returns: url_pattern, selector, element_tag, text_preview, created_by, latest_comment.
+  Returns: url_pattern, selector, element_tag, text_preview, created_by, latest_comment, attachment_count, has_screenshots.
 - get: Get full thread details including all comments. Requires thread_id.
-- add: Create new thread on an element. Requires ref (from read_page) or selector + body.
-- reply: Add comment to existing thread. Requires thread_id + body.
+  Comments include attachment metadata and screenshot IDs (images not inline \u2014 use get_attachment to download).
+- add: Create new thread on an element. Requires ref (from read_page) or selector + body. Optional attachments (base64 images).
+- reply: Add comment to existing thread. Requires thread_id + body. Optional attachments (base64 images).
 - resolve: Mark thread as resolved. Requires thread_id. Optional resolution_note.
 - reopen: Reopen a resolved thread. Requires thread_id.
 - complete: Archive/dismiss a thread (removes pin). Requires thread_id.
+- get_attachment: Download an attachment or auto-captured screenshot image. Requires attachment_id (from get response).
+  Returns: MCP image content block (WebP).
 
-Workflow: list \u2192 get (for full context) \u2192 fix code \u2192 resolve.
+Workflow: list \u2192 get (for full context) \u2192 get_attachment (if images needed) \u2192 fix code \u2192 resolve.
 Element targeting: Use ref from read_page output, or provide a CSS selector.
 Threads persist across page reloads via element selectors.
 Users see pins on the page and can interact via inline popovers.
+Users can attach images when adding comments. A viewport screenshot is auto-captured with each comment.
 Status flow: open \u2192 resolved \u2192 completed (or open \u2192 completed).`;
 var FEEDBACK_RETURNS = `{
-  // list:     { threads[{ thread_id, status, url_pattern, selector, element_tag, text_preview, created_by, created_by_type, comment_count, latest_comment, created_at }], total }
-  // get:      { thread_id, status, url_pattern, url_exact, selector, element_tag, text_preview, created_by, resolution?, comments[{ comment_id, author_type, author_name, body, created_at }] }
-  // add:      { thread_id, comment_id }
-  // reply:    { thread_id, comment_id, comment_count }
-  // resolve:  { thread_id, status }
-  // reopen:   { thread_id, status }
-  // complete: { thread_id, archived }
+  // list:           { threads[{ thread_id, status, url_pattern, selector, element_tag, text_preview, created_by, created_by_type, comment_count, latest_comment, attachment_count, has_screenshots, created_at }], total }
+  // get:            { thread_id, status, ..., comments[{ comment_id, author_type, author_name, body, attachments?[{id, filename, mime_type, width, height}], screenshot?{id}, created_at }] }
+  // add:            { thread_id, comment_id }
+  // reply:          { thread_id, comment_id, comment_count }
+  // resolve:        { thread_id, status }
+  // reopen:         { thread_id, status }
+  // complete:       { thread_id, archived }
+  // get_attachment: [image content block] + { attachment_id }
 }`;
 var FEEDBACK_RELATED = ["read_page", "screenshot", "find"];
 
@@ -3208,6 +3249,36 @@ var findTool = {
     maxResults: z.coerce.number().min(1).max(50).optional().describe("Max results to return (default: 25, max: 50)")
   })
 };
+var inspectTool = {
+  name: "inspect",
+  description: INSPECT_DESCRIPTION,
+  detail: INSPECT_DETAIL,
+  returns: INSPECT_RETURNS,
+  category: "core",
+  related: INSPECT_RELATED,
+  inputSchema: z.object({
+    tabId: z.coerce.number().describe("Tab ID"),
+    ref: z.string().optional().describe("Element ref from read_page or find"),
+    selector: z.string().optional().describe("CSS selector (alternative to ref)"),
+    sections: z.array(
+      z.enum([
+        "identity",
+        "box",
+        "typography",
+        "visual",
+        "layout",
+        "attributes",
+        "dom",
+        "form",
+        "image",
+        "accessibility"
+      ])
+    ).optional().describe(
+      "Sections to return (default: identity, box, typography, visual, layout, attributes)"
+    ),
+    properties: z.array(z.string()).optional().describe('Additional CSS property names to include (e.g. ["gap", "grid-template-columns"])')
+  })
+};
 var formInputTool = {
   name: "form_input",
   description: FORM_INPUT_DESCRIPTION,
@@ -3626,12 +3697,22 @@ var feedbackTool = {
   related: FEEDBACK_RELATED,
   inputSchema: z.object({
     tabId: z.coerce.number().describe("Tab ID"),
-    action: z.enum(["list", "get", "add", "reply", "resolve", "reopen", "complete"]).describe("Operation to perform"),
+    action: z.enum(["list", "get", "add", "reply", "resolve", "reopen", "complete", "get_attachment"]).describe("Operation to perform"),
     ref: z.string().optional().describe("Element ref from read_page (for add)"),
     selector: z.string().optional().describe("CSS selector (for add, alternative to ref)"),
     body: z.string().optional().describe("Comment text (for add/reply)"),
     thread_id: z.string().optional().describe("Thread ID (for reply/resolve/reopen/complete)"),
     resolution_note: z.string().optional().describe("Resolution note (for resolve)"),
+    attachments: z.array(
+      z.object({
+        filename: z.string(),
+        base64: z.string(),
+        mime_type: z.string(),
+        width: z.coerce.number(),
+        height: z.coerce.number()
+      })
+    ).optional().describe("Image attachments as base64 (for add/reply, max 5)"),
+    attachment_id: z.string().optional().describe("Attachment or screenshot ID (for get_attachment)"),
     status: z.enum(["open", "resolved", "completed", "all"]).optional().describe("Status filter (for list, default: open)")
   })
 };
@@ -4458,6 +4539,7 @@ var allTools = [
   dragTool,
   readPageTool,
   findTool,
+  inspectTool,
   formInputTool,
   javascriptExecTool,
   waitForTool,
@@ -5231,6 +5313,14 @@ function buildResponseContent(tool, result) {
   const { _auto_handled_dialogs, ...cleanResult } = result;
   if (dialogNote) cleanResult._dialog_note = dialogNote;
   if (pauseNote) cleanResult._pause_note = pauseNote;
+  const img = cleanResult._image;
+  if (img && typeof img.data === "string" && typeof img.mimeType === "string") {
+    const { _image: _, ...metadata } = cleanResult;
+    return [
+      { type: "image", data: img.data, mimeType: img.mimeType },
+      { type: "text", text: JSON.stringify(metadata) }
+    ];
+  }
   if (tool === "screenshot" && typeof cleanResult.data === "string") {
     const { data, format, ...metadata } = cleanResult;
     const fmt = format || "webp";