Skip to content

feat(tarko): add gui agent screenshot render strategy config#1296

Merged
ulivz merged 25 commits into
mainfrom
feat/gui-agent-screenshot-strategy
Aug 29, 2025
Merged

feat(tarko): add gui agent screenshot render strategy config#1296
ulivz merged 25 commits into
mainfrom
feat/gui-agent-screenshot-strategy

Conversation

@ulivz
Copy link
Copy Markdown
Member

@ulivz ulivz commented Aug 29, 2025

Summary

Adds guiAgent configuration to AgentWebUIImplementation interface to support different screenshot rendering strategies for GUI Agent operations, addressing the issue where different agents (Omni-TARS vs Agent-TARS) have different screenshot timing requirements.

This resolves the screenshot association issue mentioned in PR #1214 by making the strategy configurable per agent implementation.

Snapshots

defaultScreenshotRenderStrategy: "both"

image

defaultScreenshotRenderStrategy: "beforeAction"

image

defaultScreenshotRenderStrategy: "afterAction"

image

Checklist

  • Added or updated necessary tests (Optional).
  • Updated documentation to align with changes (Optional).
  • Verified no breaking changes, or prepared solutions for any occurring breaking changes (Optional).
  • My change does not involve the above items.

@netlify
Copy link
Copy Markdown

netlify Bot commented Aug 29, 2025

Deploy Preview for agent-tars-docs ready!

Name Link
🔨 Latest commit 3c513f8
🔍 Latest deploy log https://app.netlify.com/projects/agent-tars-docs/deploys/68b1bfdf54403a0008cdbbc9
😎 Deploy Preview https://deploy-preview-1296--agent-tars-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

ulivz added 24 commits August 29, 2025 18:16
…ents

- Extract StrategySwitch for screenshot display mode controls
- Create MouseCursor component for cursor visualization
- Add ScreenshotDisplay for image rendering logic
- Implement OperationDetailsCard for action details
- Add useMousePosition hook for coordinate handling
- Add useScreenshots hook for image discovery
- Extract data parsing to utility function
- Maintain all existing functionality and behavior
Update useMousePosition and useScreenshots hooks to accept
string | null types to match useSession return values
- Follow ToggleSwitch design patterns for consistency
- Add semantic icons (Rewind, FastForward, Shuffle)
- Use refined colors and subtle backdrop blur
- Implement proper button grouping with borders
- Reduce visual weight for more elegant appearance
… look

Remove background and border wrapper to achieve more minimal design
Change layout from justify-between to justify-end with gap
to keep label and buttons visually connected
- Remove blue indicator dot for cleaner look
- Add top margin for better spacing
- Simplify Display Mode label presentation
- Remove visible Display Mode text for cleaner UI
- Add MUI Tooltip with consistent styling from ShareButton
- Tooltip shows 'Screenshot display mode' on hover
- Maintain button group functionality and positioning
- Add specific tooltip text for each strategy option
- Before: 'Show screenshot before action execution'
- After: 'Show screenshot after action execution'
- Both: 'Show screenshots before and after action execution'
- Remove global tooltip for better UX clarity
- Add gradient backgrounds for modern look
- Implement blue color scheme for active states
- Add hover animations with scale and shadow effects
- Enhance icon animations with scale and opacity transitions
- Increase padding and border radius for better touch targets
- Add group hover effects for interactive feedback
- Change layout from horizontal to vertical flex
- Center align icons and text with gap-1 spacing
- Reduce font size to text-[10px] for more compact look
- Adjust padding to px-3 for better proportions
- Add leading-none for tighter text spacing
- Replace plain text headers with styled badge components
- Before Action: amber gradient with pulsing indicator
- After Action: emerald gradient with static indicator
- Add rounded-full borders and shadows for modern look
- Center align labels with proper spacing
- Use tracking-wide for better text appearance
- Remove excessive gradients and colors from StrategySwitch
- Use clean slate colors consistent with app design
- Simplify Before/After labels to minimal uppercase text
- Remove animations and effects for cleaner look
- Maintain functionality while respecting design language
- Change from vertical flex-col to horizontal flex layout
- Icon and text now display side by side with gap-1.5
- Increase text size from text-[10px] to text-xs
- Remove leading-none for better readability
Change justify-end to justify-center for better visual balance
Improve UI alignment and aesthetics
Replace FiRewind/FiFastForward with FiClock/FiCheckCircle
Better semantic representation of before/after states
@ulivz ulivz merged commit 3730cf6 into main Aug 29, 2025
10 checks passed
@ulivz ulivz deleted the feat/gui-agent-screenshot-strategy branch August 29, 2025 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants