cli-jaw 2.2.4 → 2.2.5

package/public/manager/src/browser-panel/browser-panel.css

@@ -155,6 +155,36 @@
     background: var(--bg-hover);
     border-color: var(--border-strong);
 }
+.browser-toolbar [data-tooltip] {
+    position: relative;
+}
+.browser-toolbar [data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    top: calc(100% + 7px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 160;
+    max-width: 220px;
+    padding: 5px 7px;
+    border: 1px solid var(--border-strong);
+    border-radius: 5px;
+    background: var(--bg-raised);
+    color: var(--text-base);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+    font-size: 11px;
+    line-height: 1.2;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 80ms ease, visibility 80ms ease;
+}
+.browser-toolbar [data-tooltip]:hover::after,
+.browser-toolbar [data-tooltip]:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+}
 .browser-status {
     flex-shrink: 0;
     padding: 5px 8px;
@@ -242,3 +272,278 @@
     background: var(--bg-hover);
     border-color: var(--border-strong);
 }
+
+/* ==========================================================================
+   030 v1: toolbar actions, screenshot review, comment composer, inspect pick
+   ========================================================================== */
+
+.browser-action-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex: 0 0 auto;
+}
+.browser-action-btn {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    color: var(--text-dim);
+    cursor: pointer;
+}
+.browser-action-btn:hover,
+.browser-action-btn:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.browser-action-btn:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -1px;
+}
+.browser-action-btn.is-active {
+    background: var(--bg-raised);
+    color: var(--text-base);
+}
+.browser-action-btn.is-shared {
+    color: var(--accent, #7aa2ff);
+}
+.browser-action-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.browser-more-wrap {
+    position: relative;
+    flex: 0 0 auto;
+}
+.browser-more-menu {
+    position: absolute;
+    top: 30px;
+    right: 0;
+    min-width: 170px;
+    padding: 6px;
+    border: 1px solid var(--border-strong);
+    border-radius: 8px;
+    background: var(--bg-raised);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+    z-index: 140;
+}
+.browser-more-item {
+    all: unset;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: 7px 10px;
+    border-radius: 6px;
+    color: var(--text-base);
+    font-size: 12px;
+    cursor: pointer;
+}
+.browser-more-item:hover,
+.browser-more-item:focus-visible {
+    background: var(--bg-hover);
+}
+
+/* Transparent click-catcher for element inspect picking */
+.browser-inspect-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 30;
+    cursor: crosshair;
+    background: rgba(122, 162, 255, 0.06);
+}
+.browser-inspect-marker {
+    position: absolute;
+    width: 96px;
+    height: 56px;
+    transform: translate(-50%, -50%);
+    border: 1px solid rgba(66, 133, 244, 0.92);
+    border-radius: 4px;
+    background: rgba(66, 133, 244, 0.3);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48), 0 8px 22px rgba(15, 23, 42, 0.2);
+    pointer-events: none;
+}
+.browser-inspect-marker::before,
+.browser-inspect-marker::after {
+    content: "";
+    position: absolute;
+    background: rgba(66, 133, 244, 0.82);
+}
+.browser-inspect-marker::before {
+    left: 50%;
+    top: -7px;
+    width: 1px;
+    height: calc(100% + 14px);
+}
+.browser-inspect-marker::after {
+    left: -7px;
+    top: 50%;
+    width: calc(100% + 14px);
+    height: 1px;
+}
+.browser-picked-marker {
+    position: absolute;
+    z-index: 35;
+    width: 18px;
+    height: 18px;
+    transform: translate(-50%, -50%);
+    border: 2px solid rgba(66, 133, 244, 0.95);
+    border-radius: 999px;
+    background: rgba(66, 133, 244, 0.32);
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 18px rgba(15, 23, 42, 0.22);
+    pointer-events: none;
+}
+
+/* Floating comment composer over the viewport */
+.browser-comment-composer {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: min(320px, calc(100% - 24px));
+    padding: 10px;
+    border: 1px solid var(--border-strong);
+    border-radius: 10px;
+    background: var(--bg-raised);
+    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.browser-comment-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    font-size: 11px;
+    color: var(--text-dim);
+}
+.browser-comment-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.browser-comment-anchor,
+.browser-comment-shot {
+    flex: 0 0 auto;
+}
+.browser-comment-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 64px;
+    resize: vertical;
+    padding: 8px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--bg-panel);
+    color: var(--text-base);
+    font-size: 12px;
+}
+.browser-comment-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+.browser-comment-save,
+.browser-comment-cancel,
+.browser-screenshot-btn {
+    all: unset;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    color: var(--text-base);
+    background: var(--bg-hover);
+    cursor: pointer;
+}
+.browser-comment-save:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+.browser-comment-save:hover:not(:disabled),
+.browser-comment-cancel:hover,
+.browser-screenshot-btn:hover {
+    background: var(--bg-raised);
+}
+
+/* Screenshot capture review card */
+.browser-screenshot-review {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    width: min(280px, calc(100% - 24px));
+    padding: 8px;
+    border: 1px solid var(--border-strong);
+    border-radius: 10px;
+    background: var(--bg-raised);
+    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.browser-screenshot-image {
+    width: 100%;
+    height: auto;
+    border-radius: 6px;
+    border: 1px solid var(--border-subtle);
+}
+.browser-screenshot-meta {
+    font-size: 11px;
+    color: var(--text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.browser-screenshot-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+}
+
+/* v4/v5: picked element block + actions-enabled state */
+.browser-action-btn.is-actions {
+    color: #f6b26b;
+}
+.browser-picked-element {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    padding: 6px 8px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: var(--bg-panel);
+    font-size: 11px;
+}
+.browser-picked-selector {
+    font-family: var(--mono, ui-monospace, monospace);
+    color: #6fa8dc;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60%;
+    white-space: nowrap;
+}
+.browser-picked-ax {
+    color: var(--text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.browser-picked-click {
+    all: unset;
+    margin-left: auto;
+    cursor: pointer;
+    padding: 3px 8px;
+    border-radius: 5px;
+    background: color-mix(in srgb, #f6b26b 22%, transparent);
+    color: #f6b26b;
+    font-size: 11px;
+}
+.browser-picked-click:hover {
+    background: color-mix(in srgb, #f6b26b 34%, transparent);
+}

package/public/manager/src/browser-panel/use-embedded-target-sync.ts

@@ -0,0 +1,182 @@
+import { useEffect, useRef } from 'react';
+import { getDesktop } from '../panels/desktop-bridge';
+
+const PUSH_DEBOUNCE_MS = 400;
+const REFRESH_INTERVAL_MS = 60_000;
+const COMMAND_POLL_WAIT_MS = 25_000;
+const COMMAND_POLL_ERROR_BACKOFF_MS = 3_000;
+
+type SharedTargetPayload = {
+    targetId: string;
+    url: string;
+    title: string;
+    devToolsOpen: boolean;
+    sharedWithAgent: true;
+    actionsEnabled: boolean;
+};
+
+async function collectSharedTargets(): Promise<SharedTargetPayload[] | null> {
+    const bridge = getDesktop()?.browser;
+    if (!bridge?.getWebviewTabs) return null;
+    const result = await bridge.getWebviewTabs();
+    if (!result?.ok) return null;
+    return (result.tabs ?? [])
+        .filter(tab => tab.sharedWithAgent === true)
+        .map(tab => ({
+            targetId: tab.tabId,
+            url: tab.url,
+            title: tab.title,
+            devToolsOpen: tab.devToolsOpen === true,
+            sharedWithAgent: true as const,
+            actionsEnabled: true,
+        }));
+}
+
+/**
+ * 030 v2/v2.1/v3 renderer relay.
+ *
+ * - v2: pushes agent-visible targets to the manager's read-only registry.
+ * - v2.1: reconciles visible targets into the SELECTED instance's runtime-context
+ *   (visibility = "send to the currently selected instance's agent"); switching
+ *   instances cleans the previous instance up with an empty push.
+ * - v3: long-polls the manager's command queue and executes screenshot
+ *   commands via the Electron bridge, but only for still-visible targets.
+ */
+export function useEmbeddedBrowserTargetSync(active: boolean, selectedPort: number | null): void {
+    const timerRef = useRef<number | null>(null);
+    const lastInstancePortRef = useRef<number | null>(null);
+
+    useEffect(() => {
+        if (!active) return undefined;
+        const bridge = getDesktop()?.browser;
+        if (!bridge?.getWebviewTabs || !bridge.onWebviewState) return undefined;
+
+        let disposed = false;
+        const pollAbort = new AbortController();
+
+        async function pushToInstance(port: number, targets: SharedTargetPayload[]): Promise<void> {
+            try {
+                await fetch(`/api/dashboard/instances/${port}/embedded-browser/targets`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ targets }),
+                });
+            } catch { /* instance may be offline; next push retries */ }
+        }
+
+        async function push(): Promise<void> {
+            if (disposed) return;
+            const targets = await collectSharedTargets().catch(() => null);
+            if (disposed || targets === null) return;
+            try {
+                await fetch('/api/manager/embedded-browser/targets', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ targets }),
+                });
+            } catch { /* server may be restarting */ }
+            if (disposed) return;
+            const previousPort = lastInstancePortRef.current;
+            if (previousPort !== null && previousPort !== selectedPort) {
+                // Instance switch: withdraw shares from the previous instance.
+                await pushToInstance(previousPort, []);
+                if (disposed) return;
+            }
+            if (selectedPort !== null) {
+                await pushToInstance(selectedPort, targets);
+                if (disposed) return;
+            }
+            lastInstancePortRef.current = selectedPort;
+        }
+
+        function schedulePush(): void {
+            if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => { void push(); }, PUSH_DEBOUNCE_MS);
+        }
+
+        async function executeCommand(command: { targetId: string; kind: string; act?: unknown }): Promise<Record<string, unknown>> {
+            const browserBridge = getDesktop()?.browser;
+            if (!browserBridge?.performWebviewAction) return { ok: false, error: 'bridge unavailable' };
+            const shared = (await collectSharedTargets().catch(() => null)) ?? [];
+            const target = shared.find(t => t.targetId === command.targetId);
+            if (!target) return { ok: false, error: 'target is no longer available in Manager Browser' };
+            const targetId = command.targetId;
+            if (command.kind === 'screenshot') {
+                const result = await browserBridge.performWebviewAction({ kind: 'captureScreenshot', tabId: targetId });
+                if (result?.ok && result.screenshot) return { ok: true, screenshot: result.screenshot };
+                return { ok: false, error: result?.error ?? 'capture failed' };
+            }
+            if (command.kind === 'snapshot') {
+                const result = await browserBridge.performWebviewAction({ kind: 'getDomSnapshot', tabId: targetId });
+                if (result?.ok && result.snapshot) return { ok: true, snapshot: result.snapshot };
+                return { ok: false, error: result?.error ?? 'snapshot failed' };
+            }
+            if (command.kind === 'act') {
+                const act = command.act as { kind: 'click' | 'type' | 'scroll' | 'key' } | undefined;
+                if (!act) return { ok: false, error: 'act payload missing' };
+                const result = await browserBridge.performWebviewAction({ kind: 'act', tabId: targetId, act: act as never });
+                if (result?.ok) return { ok: true, acted: true };
+                return { ok: false, error: result?.error ?? 'act failed' };
+            }
+            return { ok: false, error: `unknown command kind: ${command.kind}` };
+        }
+
+        async function pollCommands(): Promise<void> {
+            while (!disposed) {
+                const iterationStart = Date.now();
+                try {
+                    const response = await fetch(`/api/manager/embedded-browser/commands?wait=${COMMAND_POLL_WAIT_MS}`, { signal: pollAbort.signal });
+                    // Older manager servers without this route answer instantly
+                    // (404/HTML); treat anything non-OK as an error so the loop
+                    // backs off instead of hammering the server.
+                    if (!response.ok) throw new Error(`commands poll ${response.status}`);
+                    const body = await response.json() as { commands?: Array<{ id: string; targetId: string; kind: string; act?: unknown; settleToken?: string }> };
+                    for (const command of body.commands ?? []) {
+                        if (disposed) return;
+                        const result = await executeCommand(command);
+                        await fetch(`/api/manager/embedded-browser/commands/${encodeURIComponent(command.id)}/result`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ ...result, settleToken: command.settleToken }),
+                        }).catch(() => undefined);
+                    }
+                } catch {
+                    await new Promise(resolve => setTimeout(resolve, COMMAND_POLL_ERROR_BACKOFF_MS));
+                }
+                // Hard floor: never iterate faster than once per second even if
+                // the server answers empty results immediately.
+                const elapsed = Date.now() - iterationStart;
+                if (!disposed && elapsed < 1000) {
+                    await new Promise(resolve => setTimeout(resolve, 1000 - elapsed));
+                }
+            }
+        }
+
+        const unsubscribe = bridge.onWebviewState(() => schedulePush());
+        const interval = window.setInterval(() => { void push(); }, REFRESH_INTERVAL_MS);
+        void push();
+        void pollCommands();
+
+        return () => {
+            disposed = true;
+            // Kill the in-flight 25s long-poll so a re-run (instance switch)
+            // never has two concurrent poll loops.
+            pollAbort.abort();
+            unsubscribe();
+            window.clearInterval(interval);
+            if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+            // Withdraw targets from the instance this effect was serving;
+            // otherwise targets linger in its runtime-context until the TTL.
+            // On an effect re-run the next push() re-delivers to the new port.
+            const port = lastInstancePortRef.current;
+            lastInstancePortRef.current = null;
+            if (port !== null) {
+                void fetch(`/api/dashboard/instances/${port}/embedded-browser/targets`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ targets: [] }),
+                }).catch(() => undefined);
+            }
+        };
+    }, [active, selectedPort]);
+}

package/public/manager/src/components/DesktopPanelControls.tsx

@@ -65,7 +65,7 @@ export function DesktopPanelControls() {
                     if (rightOpen) {
                         panelActions.toggleRightPanel();
                     } else {
-                        panelActions.openRightPanel('folder');
+                        panelActions.focusOrCreateFirstRightSidebarTab('files');
                     }
                 }}
                 aria-label="Toggle right panel"

package/public/manager/src/design-panel/DesignPageSelector.tsx

@@ -0,0 +1,27 @@
+import type { DesignPageSummary } from './design-types';
+
+type DesignPageSelectorProps = {
+    pages: DesignPageSummary[];
+    selectedPageId: string | null;
+    disabled: boolean;
+    onSelect: (pageId: string | null) => void;
+};
+
+/** Center-toolbar page dropdown: `<title> · N pages` (186 panel contract). */
+export function DesignPageSelector(props: DesignPageSelectorProps) {
+    return (
+        <select
+            className="design-page-selector"
+            aria-label={`Design pages (${props.pages.length})`}
+            title={`${props.pages.length} pages`}
+            disabled={props.disabled || props.pages.length === 0}
+            value={props.selectedPageId ?? ''}
+            onChange={event => props.onSelect(event.target.value || null)}
+        >
+            {props.pages.length === 0 && <option value="">No pages</option>}
+            {props.pages.map(page => (
+                <option key={page.id} value={page.id}>{page.title}</option>
+            ))}
+        </select>
+    );
+}