* feat(browser): inspect, annotate, and grab page elements for the agent Build a design-review flow on top of the in-app Electron browser so users can send page elements to their coding agent with context. - Annotate: pick an element, write a comment, choose an intent (fix/change/question/approve); the element context + intent + comment go to the agent as text, and a cropped screenshot rides along as an image. - Grab: pick an element to copy its info + screenshot straight to the system clipboard (no comment), with a toast on success/failure. - Hover inspector: in select mode each element shows a floating label with tag, id/class, React component name, and pixel size. - Page markers: annotated elements on the current page get numbered badges that track scroll/resize. - Device sizes: a viewport-size menu (responsive + 13 common device presets) renders the page centered in a fixed-size frame. - Toolbar buttons now expose hover tooltips and no longer get squeezed out on narrow panes; the element selector is available to all desktop users (previously dev-only). Screenshots and clipboard writes go through new Electron main-process IPCs (capturePage + clipboard) so they work regardless of webview focus. Element screenshots are referenced by id in the workspace attachment store and are protected from the draft-store attachment GC. All new strings are translated across the six supported locales. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(browser): write element clipboard exactly once Resolve the image before writing so a combined text+image grab no longer does a redundant text-only writeText() first (which flashed an intermediate clipboard state). Addresses greptile review feedback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * i18n: add browser annotate/grab/devices strings for ja and pt-BR main added Japanese and Brazilian Portuguese locales after this branch was created; add the browser annotation, grab, and device-size keys to keep all locales in sync with en. resources.test.ts parity passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
97 lines
4.2 KiB
TypeScript
97 lines
4.2 KiB
TypeScript
import { contextBridge, ipcRenderer, webUtils } from "electron";
|
|
|
|
type EventHandler = (payload: unknown) => void;
|
|
|
|
contextBridge.exposeInMainWorld("paseoDesktop", {
|
|
platform: process.platform,
|
|
invoke: (command: string, args?: Record<string, unknown>) =>
|
|
ipcRenderer.invoke("paseo:invoke", command, args),
|
|
getPendingOpenProject: () =>
|
|
ipcRenderer.invoke("paseo:get-pending-open-project") as Promise<string | null>,
|
|
events: {
|
|
on: (event: string, handler: EventHandler): Promise<() => void> => {
|
|
const listener = (_ipcEvent: Electron.IpcRendererEvent, payload: unknown) => {
|
|
handler(payload);
|
|
};
|
|
ipcRenderer.on(`paseo:event:${event}`, listener);
|
|
return Promise.resolve(() => {
|
|
ipcRenderer.removeListener(`paseo:event:${event}`, listener);
|
|
});
|
|
},
|
|
},
|
|
window: {
|
|
openNew: (options?: { pendingOpenProjectPath?: string | null }) =>
|
|
ipcRenderer.invoke("paseo:window:openNew", options),
|
|
getCurrentWindow: () => ({
|
|
toggleMaximize: () => ipcRenderer.invoke("paseo:window:toggleMaximize"),
|
|
isFullscreen: () => ipcRenderer.invoke("paseo:window:isFullscreen"),
|
|
updateWindowControls: (update: {
|
|
height?: number;
|
|
backgroundColor?: string;
|
|
foregroundColor?: string;
|
|
}) => ipcRenderer.invoke("paseo:window:updateWindowControls", update),
|
|
onResized: (handler: EventHandler): (() => void) => {
|
|
const listener = (_ipcEvent: Electron.IpcRendererEvent, payload: unknown) => {
|
|
handler(payload);
|
|
};
|
|
ipcRenderer.on("paseo:window:resized", listener);
|
|
return () => {
|
|
ipcRenderer.removeListener("paseo:window:resized", listener);
|
|
};
|
|
},
|
|
setBadgeCount: (count?: number) => ipcRenderer.invoke("paseo:window:setBadgeCount", count),
|
|
}),
|
|
},
|
|
dialog: {
|
|
ask: (message: string, options?: Record<string, unknown>) =>
|
|
ipcRenderer.invoke("paseo:dialog:ask", message, options),
|
|
askWithCheckbox: (message: string, options: Record<string, unknown>) =>
|
|
ipcRenderer.invoke("paseo:dialog:askWithCheckbox", message, options),
|
|
open: (options?: Record<string, unknown>) => ipcRenderer.invoke("paseo:dialog:open", options),
|
|
},
|
|
notification: {
|
|
isSupported: () => ipcRenderer.invoke("paseo:notification:isSupported"),
|
|
sendNotification: (payload: { title: string; body?: string; data?: Record<string, unknown> }) =>
|
|
ipcRenderer.invoke("paseo:notification:send", payload),
|
|
},
|
|
opener: {
|
|
openUrl: (url: string) => ipcRenderer.invoke("paseo:opener:openUrl", url),
|
|
},
|
|
editor: {
|
|
listTargets: () => ipcRenderer.invoke("paseo:editor:listTargets"),
|
|
openTarget: (input: {
|
|
editorId: string;
|
|
path: string;
|
|
cwd?: string;
|
|
mode?: "open" | "reveal";
|
|
}) => ipcRenderer.invoke("paseo:editor:openTarget", input),
|
|
},
|
|
webUtils: {
|
|
getPathForFile: (file: File) => webUtils.getPathForFile(file),
|
|
},
|
|
menu: {
|
|
showContextMenu: (input?: Record<string, unknown>) =>
|
|
ipcRenderer.invoke("paseo:menu:showContextMenu", input),
|
|
},
|
|
browser: {
|
|
registerWorkspaceBrowser: (input: { browserId: string; workspaceId: string }) =>
|
|
ipcRenderer.invoke("paseo:browser:register-workspace-browser", input),
|
|
setWorkspaceActiveBrowser: (input: { workspaceId: string; browserId: string | null }) =>
|
|
ipcRenderer.invoke("paseo:browser:set-workspace-active-browser", input),
|
|
setAgentActiveBrowser: (input: { agentId: string; browserId: string | null }) =>
|
|
ipcRenderer.invoke("paseo:browser:set-agent-active-browser", input),
|
|
openDevTools: (browserId: string) =>
|
|
ipcRenderer.invoke("paseo:browser:open-devtools", browserId),
|
|
clearPartition: (browserId: string) =>
|
|
ipcRenderer.invoke("paseo:browser:clear-partition", browserId),
|
|
executeAutomationCommand: (request: Record<string, unknown>) =>
|
|
ipcRenderer.invoke("paseo:browser:execute-automation-command", request),
|
|
captureElement: (
|
|
browserId: string,
|
|
rect: { x: number; y: number; width: number; height: number },
|
|
) => ipcRenderer.invoke("paseo:browser:capture-element", browserId, rect),
|
|
copyElement: (payload: { text?: string; imageDataUrl?: string }) =>
|
|
ipcRenderer.invoke("paseo:browser:copy-element", payload),
|
|
},
|
|
});
|