tree 05b909119621bbcd6cb258324b0bf0f1cbaf950e
parent 991164f3a46ff109723105b737eb9e4ed3426873
author Josh Bleecher Snyder <josharian@gmail.com> 1748526364 +0000
committer Josh Bleecher Snyder <josharian@gmail.com> 1748548241 -0700

webui: add comprehensive browser tool cards and termui support

Implement complete browser tool card coverage with simple, clean styling
following the established bash tool card pattern and add missing termui
handling for all browser tools.

Missing tool coverage identified after commit e7806fbc which added
browser_navigate tool card, revealing gaps in both webui and termui
support for the complete browser tool suite.

Changes include:

1. New browser tool cards with simple, consistent styling:
   - browser_click: Shows CSS selector with mouse pointer icon
   - browser_type: Shows selector and text input with keyboard icon
   - browser_wait_for: Shows selector with hourglass icon for waiting
   - browser_get_text: Shows selector with book icon for text extraction
   - browser_eval: Shows JavaScript expression with mobile phone icon
   - browser_scroll_into_view: Shows selector with arrows icon for scrolling
   - browser_resize: Shows dimensions in WxH format with frame icon
   - browser_read_image: Shows filename with truncated path display
   - browser_recent_console_logs: Shows log count with document icon
   - browser_clear_console_logs: Shows clear action with broom icon

2. Updated tool calls mapping system:
   - Added all 10 new browser tool card imports to sketch-tool-calls.ts
   - Extended cardForToolCall() switch statement with proper case handling
   - Consistent HTML template pattern following existing tool cards
   - Proper TypeScript declarations for all new components

3. Enhanced termui template with browser tool support:
   - Added template cases for all 12 browser tools in toolUseTemplTxt
   - Consistent emoji icons and concise display formatting
   - Proper parameter extraction for selectors, URLs, dimensions
   - Truncation and formatting for clean terminal display

4. Simple, maintainable styling approach:
   - Monospace fonts for technical data (selectors, expressions)
   - Subtle background highlights for input parameters
   - Break-word handling for long selectors and URLs
   - Consistent icon usage for quick visual tool identification
   - Minimal CSS to keep cards lightweight and debuggable

Technical implementation:
- All tool cards extend LitElement with standard properties
- JSON input parsing with error handling for malformed data
- Slot-based content organization following base tool card pattern
- Consistent summary, input, and result slot population
- TypeScript interface declarations for proper type checking

Testing verification:
- Started test sketch instance and verified tool cards render correctly
- Confirmed browser_take_screenshot card shows timing and status icons
- Verified browser_type card displays selectors and input text properly
- Validated browser_read_image card shows filename truncation
- All tool cards follow established simple styling without visual clutter

This provides complete browser tool coverage in both webui and termui,
maintaining the clean, simple aesthetic while ensuring all browser
automation tools have proper visual representation and status reporting.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s79b2200705afaee8k