feat(browser): replace the preview proxy with a real browser panel and an agent web tool (#2883)
The preview panel worked by proxying a dev server through OpenChamber's own origin and rewriting the HTML that came back. Anything the rewriter did not anticipate broke, and pages that refuse to be embedded never loaded at all. This deletes the proxy (-1604 lines and its tests) and merges the preview and browser panels into one surface backed by a real Chromium view. What the panel is now - A `<webview>` in its own session partition: logins and cookies persist, hot reload works because nothing is rewritten, DevTools are one click away. - Annotation: pick one element, drag a region, or draw freehand, write a note, and it reaches chat with a screenshot of the visible page with the marks on it. - Toolbar: hard reload, page zoom, device sizes, a light/dark switch that applies to the page rather than the app, and cookie/cache clearing scoped to the panel alone. - Several pages at once, each tab showing the page's own favicon, and an address bar that suggests pages already visited in this project. - Dev servers are listed from what is actually listening on the machine, checked against what a project announced, so a server is offered no matter how it was started. One that is still starting is waited for instead of failing. Remote dev servers The desktop app binds a local port and pipes raw bytes to the OpenChamber host over the existing authenticated connection, so the page keeps its own origin at the root of its own host. The reachable set is exactly what discovery reports and is re-checked per connection, so an authenticated client cannot dial arbitrary local services on the host. Links and redirects to another loopback port stay on the machine that served the page. A tunnel that cannot be opened is reported; it is never replaced by the plain loopback URL, which would answer from the user's own machine under a remote address. Agent control Browser actions are a separate `openchamber_web` tool: open, snapshot, click, type, scroll, inspect computed styles, resize between mobile/tablet/desktop, and capture a screenshot into `.openchamber/screenshots/` in the project. The existing `openchamber` tool keeps sessions, worktrees and scheduled tasks. Each has its own setting in the new Settings -> General -> OpenChamber Tools section, and the plugin is not injected at all when both are off. Capability belongs to the connected client, not to configuration: a client declares on its event stream that it can drive a page, which only a Chromium host does. Exactly one client performs each request — it claims the request before acting, and the first claim wins — because deciding by whose result arrives first would be too late for a click that already happened. No client listening is answered immediately with an explanation rather than a timeout. Runtime boundaries Web tabs get a plain iframe that can display a page but not inspect one. The VS Code extension no longer offers the surface at all, since nothing that makes the panel worth having works there. Mobile is unaffected. Native boundary Camera, microphone, location and device-picker requests from panel pages are denied — Electron grants them by default when no handler is set, and the panel loads whatever address the user types. Page capture, appearance emulation and storage clearing verify that their target belongs to the panel's own session instead of trusting a web-contents id from the renderer. Persisted state Stored `preview` tabs migrate to `browser` (v13 -> v14). Context panel tab limits are now per surface, so filling one surface no longer evicts another's tabs. Address history is stored per project and per runtime. Documentation `preview.mdx` and `desktop-browser.mdx` rewritten across all locales, the agent tool settings path corrected, new `DOCUMENTATION.md` for the browser-control broker and the dev tunnel, and the `ui-api-decoupling` skill updated where it still described the deleted proxy.
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
50613bb170
commit
a5aa32446d
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { browserUrlLabel } from '@/lib/browser/url';
|
||||
import type { BrowserHistoryEntry } from '@/lib/browser/history';
|
||||
|
||||
/**
|
||||
* Addresses already visited in this project, offered under the address bar.
|
||||
*
|
||||
* Kept deliberately plain: it is a short list of places, so it borrows the
|
||||
* app's dropdown surface rather than introducing a second look for the same
|
||||
* idea. Selection is driven from the address bar's own keyboard handling, which
|
||||
* is why the highlighted row arrives as a prop instead of being tracked here.
|
||||
*/
|
||||
export const BrowserAddressSuggestions: React.FC<{
|
||||
entries: readonly BrowserHistoryEntry[];
|
||||
activeIndex: number;
|
||||
onSelect: (url: string) => void;
|
||||
onForget: (url: string) => void;
|
||||
onHighlight: (index: number) => void;
|
||||
}> = ({ entries, activeIndex, onSelect, onForget, onHighlight }) => {
|
||||
const { t } = useI18n();
|
||||
if (entries.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="oc-glass-popover oc-glass-floating absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-xl p-1"
|
||||
role="listbox"
|
||||
aria-label={t('contextPanel.browser.history.label')}
|
||||
>
|
||||
{entries.map((entry, index) => (
|
||||
<div
|
||||
key={entry.url}
|
||||
role="option"
|
||||
aria-selected={index === activeIndex}
|
||||
className={cn(
|
||||
'group flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1',
|
||||
index === activeIndex ? 'bg-interactive-hover' : 'hover:bg-interactive-hover',
|
||||
)}
|
||||
// Pointer down rather than click: the address bar loses focus first,
|
||||
// and a blur that closes the list would cancel the click.
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
onSelect(entry.url);
|
||||
}}
|
||||
onPointerEnter={() => onHighlight(index)}
|
||||
>
|
||||
<Icon name="global" className="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate typography-micro text-foreground">
|
||||
{entry.title || browserUrlLabel(entry.url)}
|
||||
</div>
|
||||
<div className="truncate typography-micro text-muted-foreground">{entry.url}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'shrink-0 rounded-md p-1 text-muted-foreground opacity-0 transition-opacity',
|
||||
'hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100',
|
||||
)}
|
||||
aria-label={t('contextPanel.browser.history.forget')}
|
||||
title={t('contextPanel.browser.history.forget')}
|
||||
onPointerDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onForget(entry.url);
|
||||
}}
|
||||
>
|
||||
<Icon name="close" className="size-3" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,140 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
FILL_VIEWPORT,
|
||||
VIEWPORT_PRESETS,
|
||||
clampViewportSize,
|
||||
presetViewport,
|
||||
rotateViewport,
|
||||
viewportSize,
|
||||
type BrowserViewport,
|
||||
} from '@/lib/browser/viewport';
|
||||
|
||||
export type BrowserColorScheme = 'system' | 'light' | 'dark';
|
||||
|
||||
/**
|
||||
* Size and appearance controls for the previewed page.
|
||||
*
|
||||
* Shown only when asked for. The width and height boxes are the source of
|
||||
* truth; the preset list is a shortcut into them, which is why choosing a
|
||||
* preset and then typing a size are the same action from here on.
|
||||
*/
|
||||
export const BrowserDeviceBar: React.FC<{
|
||||
viewport: BrowserViewport;
|
||||
onViewportChange: (viewport: BrowserViewport) => void;
|
||||
colorScheme: BrowserColorScheme;
|
||||
onColorSchemeChange: (scheme: BrowserColorScheme) => void;
|
||||
scale: number;
|
||||
}> = ({ viewport, onViewportChange, colorScheme, onColorSchemeChange, scale }) => {
|
||||
const { t } = useI18n();
|
||||
const size = viewportSize(viewport);
|
||||
const presetId = viewport.kind === 'preset' ? viewport.id : '';
|
||||
|
||||
const commitSize = (side: 'width' | 'height', raw: string) => {
|
||||
const parsed = Number.parseInt(raw, 10);
|
||||
if (!Number.isFinite(parsed)) return;
|
||||
const current = size ?? { width: 1280, height: 800 };
|
||||
onViewportChange({
|
||||
kind: 'custom',
|
||||
width: clampViewportSize(side === 'width' ? parsed : current.width),
|
||||
height: clampViewportSize(side === 'height' ? parsed : current.height),
|
||||
});
|
||||
};
|
||||
|
||||
const inputClass = cn(
|
||||
'h-6 w-14 rounded-full border border-border/50 bg-[var(--surface-elevated)] px-2 text-center',
|
||||
'typography-micro tabular-nums text-foreground outline-none focus:border-[var(--interactive-focus-ring)]',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 border-b border-border bg-[var(--surface-background)] px-2 py-1">
|
||||
<select
|
||||
value={presetId}
|
||||
onChange={(event) => {
|
||||
const next = presetViewport(event.target.value);
|
||||
onViewportChange(next ?? FILL_VIEWPORT);
|
||||
}}
|
||||
aria-label={t('contextPanel.browser.device.preset')}
|
||||
className={cn(
|
||||
'h-6 shrink-0 rounded-full border border-border/50 bg-[var(--surface-elevated)] px-2',
|
||||
'typography-micro text-foreground outline-none focus:border-[var(--interactive-focus-ring)]',
|
||||
)}
|
||||
>
|
||||
<option value="">{t('contextPanel.browser.device.responsive')}</option>
|
||||
{VIEWPORT_PRESETS.map((preset) => (
|
||||
<option key={preset.id} value={preset.id}>{preset.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<input
|
||||
value={size ? String(size.width) : ''}
|
||||
onChange={(event) => commitSize('width', event.target.value)}
|
||||
placeholder="—"
|
||||
inputMode="numeric"
|
||||
aria-label={t('contextPanel.browser.device.width')}
|
||||
className={inputClass}
|
||||
/>
|
||||
<span className="typography-micro text-muted-foreground">×</span>
|
||||
<input
|
||||
value={size ? String(size.height) : ''}
|
||||
onChange={(event) => commitSize('height', event.target.value)}
|
||||
placeholder="—"
|
||||
inputMode="numeric"
|
||||
aria-label={t('contextPanel.browser.device.height')}
|
||||
className={inputClass}
|
||||
/>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
className="w-6 shrink-0 rounded-full px-0 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => onViewportChange(rotateViewport(viewport))}
|
||||
disabled={!size}
|
||||
aria-label={t('contextPanel.browser.device.rotate')}
|
||||
>
|
||||
<Icon name="refresh" className="size-3.5" aria-hidden="true" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={6}>{t('contextPanel.browser.device.rotate')}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Only worth saying when the page is not shown at its real size. */}
|
||||
{size && scale < 1 ? (
|
||||
<span className="shrink-0 typography-micro tabular-nums text-muted-foreground">
|
||||
{Math.round(scale * 100)}%
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<div className="ml-auto flex shrink-0 items-center gap-1">
|
||||
{(['system', 'light', 'dark'] as const).map((scheme) => (
|
||||
<Button
|
||||
key={scheme}
|
||||
type="button"
|
||||
variant={colorScheme === scheme ? 'secondary' : 'ghost'}
|
||||
size="xs"
|
||||
className={cn(
|
||||
'shrink-0 rounded-full px-2.5 typography-micro',
|
||||
colorScheme === scheme ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
onClick={() => onColorSchemeChange(scheme)}
|
||||
aria-pressed={colorScheme === scheme}
|
||||
>
|
||||
{t(scheme === 'system'
|
||||
? 'contextPanel.browser.device.schemeSystem'
|
||||
: scheme === 'light'
|
||||
? 'contextPanel.browser.device.schemeLight'
|
||||
: 'contextPanel.browser.device.schemeDark')}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { fetchDevServers, mergeDevServerCandidates, type DevServerDiscovery } from '@/lib/browser/devServers';
|
||||
import { clearAnnouncedDevServers, useAnnouncedDevServers } from '@/lib/browser/announcedServers';
|
||||
import { browserUrlLabel, isLoopbackUrl } from '@/lib/browser/url';
|
||||
import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
|
||||
|
||||
/**
|
||||
* What the panel shows before anything is loaded.
|
||||
*
|
||||
* Rather than an inert placeholder, this lists the servers actually running,
|
||||
* which is almost always what the user came here to open. Discovery failure is
|
||||
* stated plainly instead of being rendered as "nothing is running" — the two
|
||||
* mean very different things to someone whose dev server is definitely up.
|
||||
*/
|
||||
|
||||
/** The base path a server is served under, or '' when it sits at the root. */
|
||||
const pathLabel = (url: string): string => {
|
||||
try {
|
||||
const path = new URL(url).pathname;
|
||||
return path === '/' ? '' : path;
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
/** Re-checked while the panel is open: a project's servers appear seconds apart. */
|
||||
const REFRESH_INTERVAL_MS = 2_000;
|
||||
|
||||
/**
|
||||
* True when the listed servers are on another machine and this client has no
|
||||
* way to reach them. The desktop shell tunnels a local port for exactly this
|
||||
* case; a browser tab has no equivalent, and its `localhost` is its own.
|
||||
*/
|
||||
const isUnreachableFromHere = (): boolean => {
|
||||
if (typeof window === 'undefined') return false;
|
||||
if (window.__OPENCHAMBER_ELECTRON__) return false;
|
||||
const baseUrl = getRuntimeApiBaseUrl();
|
||||
if (!baseUrl) return false;
|
||||
try {
|
||||
return !isLoopbackUrl(new URL(baseUrl, window.location.href).toString());
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const BrowserEmptyState: React.FC<{
|
||||
onOpen: (url: string) => void;
|
||||
directory?: string;
|
||||
}> = ({ onOpen, directory = '' }) => {
|
||||
const { t } = useI18n();
|
||||
const [discovery, setDiscovery] = React.useState<DevServerDiscovery>({ kind: 'loading' });
|
||||
const announced = useAnnouncedDevServers(directory);
|
||||
const [remoteOnly] = React.useState(isUnreachableFromHere);
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
const controller = new AbortController();
|
||||
|
||||
const poll = () => {
|
||||
void fetchDevServers(controller.signal).then((result) => {
|
||||
if (!active) return;
|
||||
setDiscovery(result);
|
||||
// One look is a snapshot of whichever servers happened to be up first.
|
||||
timer = setTimeout(poll, REFRESH_INTERVAL_MS);
|
||||
});
|
||||
};
|
||||
poll();
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
if (timer) clearTimeout(timer);
|
||||
controller.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const candidates = React.useMemo(() => mergeDevServerCandidates({
|
||||
announced,
|
||||
discovered: discovery.kind === 'ready' ? discovery.servers : null,
|
||||
}), [announced, discovery]);
|
||||
|
||||
return (
|
||||
// The whole panel must not scroll: a centred column that overflows clips its
|
||||
// own top, and no amount of scrolling reaches it. Only the list of servers
|
||||
// scrolls, and it shrinks to whatever room is left before it does.
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-5 overflow-hidden bg-background p-6 text-center">
|
||||
<OpenChamberLogo width={110} height={110} className="shrink-0 opacity-20" />
|
||||
<div className="flex shrink-0 flex-col gap-1">
|
||||
<span className="typography-ui-header text-foreground">{t('contextPanel.browser.empty')}</span>
|
||||
<span className="typography-micro text-muted-foreground">{t('contextPanel.browser.emptyHint')}</span>
|
||||
</div>
|
||||
|
||||
{candidates.length > 0 ? (
|
||||
<div className="flex min-h-0 w-full max-w-sm flex-col gap-1">
|
||||
<span className="shrink-0 typography-micro text-left text-muted-foreground">
|
||||
{announced.length > 0
|
||||
? t('contextPanel.browser.devServers.justStarted')
|
||||
: t('contextPanel.browser.devServers.title')}
|
||||
</span>
|
||||
{remoteOnly ? (
|
||||
<span className="shrink-0 pb-1 text-left typography-micro text-muted-foreground">
|
||||
{t('contextPanel.browser.devServers.remoteOnly')}
|
||||
</span>
|
||||
) : null}
|
||||
<div className="flex min-h-0 flex-col gap-1 overflow-y-auto pr-0.5">
|
||||
{candidates.map((candidate) => (
|
||||
<Button
|
||||
key={candidate.port}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full shrink-0 justify-start gap-2"
|
||||
onClick={() => {
|
||||
// The offer is answered; leaving it up would keep suggesting
|
||||
// servers behind a page the user is already looking at.
|
||||
clearAnnouncedDevServers(directory);
|
||||
onOpen(candidate.url);
|
||||
}}
|
||||
>
|
||||
<Icon name="global" className="size-3.5 shrink-0" aria-hidden="true" />
|
||||
<span className="truncate">{browserUrlLabel(candidate.url) || candidate.url}</span>
|
||||
<span className="ml-auto truncate typography-micro text-muted-foreground">
|
||||
{pathLabel(candidate.url)}
|
||||
</span>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{candidates.length === 0 && discovery.kind === 'unavailable' ? (
|
||||
<span className="typography-micro text-muted-foreground">
|
||||
{t('contextPanel.browser.devServers.unavailable')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,907 @@
|
||||
import React from 'react';
|
||||
|
||||
import { toast } from '@/components/ui';
|
||||
import { useThemeSystem } from '@/contexts/useThemeSystem';
|
||||
import { invokeDesktopCommand } from '@/lib/desktopNative';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { openExternalUrl } from '@/lib/url';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { BLANK_URL, isLoopbackUrl, isStartingServerFailure, normalizeBrowserUrl } from '@/lib/browser/url';
|
||||
import { probeLoopbackStatus } from '@/lib/browser/devServers';
|
||||
import {
|
||||
cancelAnnotationSession,
|
||||
runAnnotationSession,
|
||||
type AnnotationHost,
|
||||
type PageCapture,
|
||||
} from '@/lib/browser/annotationSession';
|
||||
import { resolveAnnotationOverlayTheme } from '@/lib/browser/overlayTheme';
|
||||
import { registerBrowserController } from '@/lib/browser/controlClient';
|
||||
import { suggestFromHistory } from '@/lib/browser/history';
|
||||
import { selectBrowserHistory, useBrowserHistoryStore } from '@/stores/useBrowserHistoryStore';
|
||||
import {
|
||||
DevTunnelUnavailableError,
|
||||
resolveBrowsableUrl,
|
||||
shouldTunnelLoopbackUrl,
|
||||
toDisplayUrl,
|
||||
} from '@/lib/browser/devTunnel';
|
||||
import {
|
||||
buildClickScript,
|
||||
buildInspectScript,
|
||||
buildScrollScript,
|
||||
buildSnapshotScript,
|
||||
buildTypeScript,
|
||||
} from '@/lib/browser/pageActions';
|
||||
import { BrowserToolbar } from './BrowserToolbar';
|
||||
import { BrowserDeviceBar, type BrowserColorScheme } from './BrowserDeviceBar';
|
||||
import {
|
||||
FILL_VIEWPORT,
|
||||
fitViewport,
|
||||
isViewportMode,
|
||||
viewportForMode,
|
||||
viewportSummary,
|
||||
type BrowserViewport,
|
||||
} from '@/lib/browser/viewport';
|
||||
import { BrowserEmptyState } from './BrowserEmptyState';
|
||||
import { useAnnotationAttach, useAnnotationOverlayLabels } from './useAnnotationAttach';
|
||||
import { readEventPayload, useWebviewNavigation } from './useWebviewNavigation';
|
||||
|
||||
export type BrowserPaneProps = {
|
||||
initialUrl: string;
|
||||
directory: string;
|
||||
tabID: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Chromium is the only host that can give us a real page: cookies, service
|
||||
* workers, HMR sockets, DevTools, and same-document access for annotation. When
|
||||
* it is unavailable the surface degrades to a plain iframe that can display a
|
||||
* page but cannot inspect one, rather than pretending otherwise.
|
||||
*/
|
||||
const isChromiumHost = (): boolean => (
|
||||
typeof window !== 'undefined' && Boolean(window.__OPENCHAMBER_ELECTRON__)
|
||||
);
|
||||
|
||||
/** How long to keep waiting for a dev server that is still coming up. */
|
||||
const DEV_SERVER_WAIT_MS = 40_000;
|
||||
/** Chromium's zoom is exponential: factor = 1.2 ^ level. */
|
||||
const ZOOM_STEP = 0.5;
|
||||
const ZOOM_MIN = -3;
|
||||
const ZOOM_MAX = 4;
|
||||
const BROWSER_PARTITION = 'persist:openchamber-browser';
|
||||
/** Kept small: this rides along with every snapshot. */
|
||||
const CONSOLE_PROBLEM_LIMIT = 20;
|
||||
const DEV_SERVER_RETRY_DELAY_MS = 600;
|
||||
/**
|
||||
* A shorter budget for a server that *answers* but with a 5xx, which is what a
|
||||
* dev gateway does while the app behind it is still starting. Kept short and
|
||||
* applied only before the first good load, so a genuine server error — a build
|
||||
* failure page, say — is shown promptly instead of being hidden behind a
|
||||
* spinner.
|
||||
*/
|
||||
const GATEWAY_WAIT_MS = 20_000;
|
||||
|
||||
const WebviewBrowser: React.FC<BrowserPaneProps> = ({ initialUrl, directory, tabID }) => {
|
||||
const { t } = useI18n();
|
||||
const { currentTheme } = useThemeSystem();
|
||||
const webviewRef = React.useRef<WebviewElement | null>(null);
|
||||
// Tracked in state as well as a ref: effects that attach listeners must re-run
|
||||
// when the view appears, which a stable ref cannot tell them.
|
||||
const [webviewElement, setWebviewElement] = React.useState<WebviewElement | null>(null);
|
||||
const attachWebview = React.useCallback((node: WebviewElement | null) => {
|
||||
webviewRef.current = node;
|
||||
setWebviewElement(node);
|
||||
}, []);
|
||||
const setContextPanelTabTargetPath = useUIStore((state) => state.setContextPanelTabTargetPath);
|
||||
|
||||
// Captured once: the webview owns its history from here on, and re-deriving
|
||||
// this from props would drag the view back to where the tab started.
|
||||
const initialUrlRef = React.useRef(normalizeBrowserUrl(initialUrl));
|
||||
const startUrl = initialUrlRef.current !== BLANK_URL ? initialUrlRef.current : '';
|
||||
|
||||
// The view is created with its final URL already in `src`, never navigated
|
||||
// into place afterwards. A tab opened in the background renders hidden, where
|
||||
// an imperative navigation is lost, and mutating `src` after the element
|
||||
// exists is not reliably honoured either — both leave a panel that never
|
||||
// loads. `null` means "still resolving", and the view is not rendered yet.
|
||||
const [initialSrc, setInitialSrc] = React.useState<string | null>(startUrl ? null : BLANK_URL);
|
||||
|
||||
const [address, setAddress] = React.useState(startUrl);
|
||||
const [isAnnotating, setIsAnnotating] = React.useState(false);
|
||||
const [isWaitingForServer, setIsWaitingForServer] = React.useState(false);
|
||||
const [zoomLevel, setZoomLevel] = React.useState(0);
|
||||
const [showDeviceBar, setShowDeviceBar] = React.useState(false);
|
||||
const [viewport, setViewport] = React.useState<BrowserViewport>(FILL_VIEWPORT);
|
||||
// Read inside agent actions, which are not re-created when the viewport
|
||||
// changes and would otherwise report whatever it was when they were built.
|
||||
const viewportRef = React.useRef(viewport);
|
||||
viewportRef.current = viewport;
|
||||
/**
|
||||
* Errors and warnings the page logged, reported with the next snapshot.
|
||||
*
|
||||
* A page that looks right and is throwing looks identical to one that is
|
||||
* fine, and finding out otherwise used to mean opening DevTools by hand.
|
||||
*/
|
||||
const consoleProblemsRef = React.useRef<Array<{ level: string; message: string; source: string }>>([]);
|
||||
const [colorScheme, setColorScheme] = React.useState<BrowserColorScheme>('system');
|
||||
const [stageSize, setStageSize] = React.useState({ width: 0, height: 0 });
|
||||
const stageRef = React.useRef<HTMLDivElement | null>(null);
|
||||
/** When the current run of retries began, per URL. */
|
||||
const retryRef = React.useRef<{ url: string; startedAt: number } | null>(null);
|
||||
/** Set once this tab has seen a page that was not a startup error. */
|
||||
const servedOkRef = React.useRef(false);
|
||||
const openedAtRef = React.useRef(Date.now());
|
||||
|
||||
const persistUrl = React.useCallback((url: string) => {
|
||||
if (!url || url === BLANK_URL || !directory || !tabID) return;
|
||||
setContextPanelTabTargetPath(directory, tabID, url);
|
||||
}, [directory, tabID, setContextPanelTabTargetPath]);
|
||||
|
||||
const navigation = useWebviewNavigation(webviewElement, {
|
||||
initialUrl: startUrl,
|
||||
onUrlChange: React.useCallback((url: string) => {
|
||||
const display = toDisplayUrl(url);
|
||||
setAddress(display);
|
||||
persistUrl(display);
|
||||
}, [persistUrl]),
|
||||
});
|
||||
|
||||
/** Set when a remote dev server could not be reached from this machine. */
|
||||
const [tunnelFailedUrl, setTunnelFailedUrl] = React.useState<string | null>(null);
|
||||
const attachAnnotation = useAnnotationAttach(directory);
|
||||
const overlayLabels = useAnnotationOverlayLabels();
|
||||
const isLoading = navigation.status.kind === 'loading';
|
||||
|
||||
const history = useBrowserHistoryStore(selectBrowserHistory(directory));
|
||||
const recordHistoryVisit = useBrowserHistoryStore((state) => state.recordVisit);
|
||||
const forgetHistoryVisit = useBrowserHistoryStore((state) => state.forget);
|
||||
// Recorded once a page has actually loaded, and with the title it reported:
|
||||
// an address that failed to open is not somewhere to offer going back to.
|
||||
React.useEffect(() => {
|
||||
if (navigation.status.kind !== 'ready') return;
|
||||
recordHistoryVisit(directory, {
|
||||
url: toDisplayUrl(navigation.status.url),
|
||||
title: navigation.status.title,
|
||||
});
|
||||
}, [directory, navigation.status, recordHistoryVisit]);
|
||||
const suggestions = React.useMemo(
|
||||
() => suggestFromHistory(history, address),
|
||||
[history, address],
|
||||
);
|
||||
|
||||
const loadUrl = React.useCallback((value: string) => {
|
||||
const next = normalizeBrowserUrl(value);
|
||||
if (next === BLANK_URL) return;
|
||||
// The address bar shows what the user asked for; a tunnel only changes
|
||||
// where the bytes come from, and surfacing 127.0.0.1:<random> would be
|
||||
// confusing and useless to copy.
|
||||
setAddress(next);
|
||||
setTunnelFailedUrl(null);
|
||||
void resolveBrowsableUrl(next).then((target) => {
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) {
|
||||
setInitialSrc(target);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
webview.loadURL(target);
|
||||
} catch {
|
||||
// Not attached yet: hand the navigation to the attribute, which
|
||||
// Chromium applies once the view attaches.
|
||||
setInitialSrc(target);
|
||||
}
|
||||
}).catch((error: unknown) => {
|
||||
// Loading the address here anyway would answer from this machine while
|
||||
// showing the remote one's address. Say what happened instead.
|
||||
if (error instanceof DevTunnelUnavailableError) setTunnelFailedUrl(next);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Resolving through the tunnel is what lets a persisted loopback URL reach a
|
||||
// dev server on a remote host; locally it returns the URL unchanged.
|
||||
React.useEffect(() => {
|
||||
if (!startUrl) return;
|
||||
let active = true;
|
||||
void resolveBrowsableUrl(startUrl)
|
||||
.then((target) => { if (active) setInitialSrc(target); })
|
||||
.catch((error: unknown) => {
|
||||
if (!active) return;
|
||||
if (error instanceof DevTunnelUnavailableError) {
|
||||
// The view still needs a src or the panel stays blank forever; it
|
||||
// gets a blank one, with the failure stated over it.
|
||||
setTunnelFailedUrl(startUrl);
|
||||
setInitialSrc(BLANK_URL);
|
||||
return;
|
||||
}
|
||||
setInitialSrc(startUrl);
|
||||
});
|
||||
return () => { active = false; };
|
||||
// Only ever the initial navigation; later changes come from the user.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const annotationHost = React.useMemo<AnnotationHost>(() => ({
|
||||
executeJavaScript: async (code: string, userGesture?: boolean) => {
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) throw new Error('Browser view is not available');
|
||||
return webview.executeJavaScript(code, userGesture);
|
||||
},
|
||||
capturePage: async (): Promise<PageCapture | null> => {
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) return null;
|
||||
const webContentsId = webview.getWebContentsId();
|
||||
if (!Number.isFinite(webContentsId)) return null;
|
||||
return await invokeDesktopCommand<PageCapture>('desktop_browser_capture_page', { webContentsId });
|
||||
},
|
||||
}), []);
|
||||
|
||||
const handleAnnotate = React.useCallback(() => {
|
||||
if (isAnnotating) {
|
||||
setIsAnnotating(false);
|
||||
void cancelAnnotationSession(annotationHost);
|
||||
return;
|
||||
}
|
||||
if (!navigation.url) {
|
||||
toast.error(t('contextPanel.browser.annotate.noPage'));
|
||||
return;
|
||||
}
|
||||
|
||||
const theme = resolveAnnotationOverlayTheme(
|
||||
currentTheme.metadata.variant === 'light' ? 'light' : 'dark',
|
||||
);
|
||||
|
||||
setIsAnnotating(true);
|
||||
void runAnnotationSession({
|
||||
host: annotationHost,
|
||||
theme,
|
||||
labels: overlayLabels,
|
||||
})
|
||||
.then(async (result) => {
|
||||
setIsAnnotating(false);
|
||||
if (!result) return;
|
||||
await attachAnnotation(result);
|
||||
})
|
||||
.catch(() => {
|
||||
setIsAnnotating(false);
|
||||
toast.error(t('contextPanel.browser.annotate.failed'));
|
||||
});
|
||||
}, [annotationHost, attachAnnotation, currentTheme, isAnnotating, navigation.url, overlayLabels, t]);
|
||||
|
||||
// Escape leaves annotation mode from the app side too: the overlay owns the
|
||||
// in-page Escape, but the panel can be focused instead.
|
||||
React.useEffect(() => {
|
||||
if (!isAnnotating) return;
|
||||
const handler = (event: KeyboardEvent) => {
|
||||
if (event.key !== 'Escape') return;
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
setIsAnnotating(false);
|
||||
void cancelAnnotationSession(annotationHost);
|
||||
};
|
||||
window.addEventListener('keydown', handler, true);
|
||||
return () => window.removeEventListener('keydown', handler, true);
|
||||
}, [annotationHost, isAnnotating]);
|
||||
|
||||
// Agent-driven actions. Waiting for the page to settle after a navigation is
|
||||
// deliberate: a snapshot taken mid-load describes a page that no longer
|
||||
// exists by the time the agent reads it.
|
||||
const waitForIdle = React.useCallback(async (timeoutMs = 8_000): Promise<boolean> => {
|
||||
const startedAt = Date.now();
|
||||
for (;;) {
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) return false;
|
||||
let busy = false;
|
||||
try {
|
||||
busy = webview.isLoading();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
if (!busy) return true;
|
||||
// A page with a looping video or a long-lived stream can report loading
|
||||
// indefinitely. Give up waiting and act on it anyway rather than letting
|
||||
// the whole action expire.
|
||||
if (Date.now() - startedAt > timeoutMs) return false;
|
||||
await new Promise((resolve) => setTimeout(resolve, 120));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const runControlAction = React.useCallback(async (
|
||||
action: string,
|
||||
parameters: Record<string, unknown>,
|
||||
): Promise<unknown> => {
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) throw new Error('The browser panel is not ready');
|
||||
|
||||
// Showing the bar when the agent sizes the page keeps the change visible:
|
||||
// the user should see which layout is being looked at, not just that it
|
||||
// suddenly narrowed.
|
||||
const applyViewportParameter = (): void => {
|
||||
if (!isViewportMode(parameters.viewport)) return;
|
||||
setViewport(viewportForMode(parameters.viewport));
|
||||
setShowDeviceBar(true);
|
||||
};
|
||||
|
||||
if (action === 'browser.back' || action === 'browser.forward') {
|
||||
const goingBack = action === 'browser.back';
|
||||
const canMove = goingBack ? webview.canGoBack() : webview.canGoForward();
|
||||
if (!canMove) {
|
||||
throw new Error(goingBack
|
||||
? 'There is nothing to go back to in this tab'
|
||||
: 'There is nothing to go forward to in this tab');
|
||||
}
|
||||
if (goingBack) webview.goBack();
|
||||
else webview.goForward();
|
||||
await new Promise((resolve) => setTimeout(resolve, 150));
|
||||
await waitForIdle();
|
||||
let title = '';
|
||||
try { title = webview.getTitle() || ''; } catch { title = ''; }
|
||||
return { url: toDisplayUrl(webview.getURL()), title };
|
||||
}
|
||||
|
||||
if (action === 'browser.capture') {
|
||||
// Wait for a settled page first: a screenshot of a half-painted layout is
|
||||
// worse than none, because it looks like a finished one.
|
||||
await waitForIdle();
|
||||
const capture = await annotationHost.capturePage();
|
||||
if (!capture) throw new Error('The page could not be captured');
|
||||
let title = '';
|
||||
try { title = webview.getTitle() || ''; } catch { title = ''; }
|
||||
return {
|
||||
...capture,
|
||||
url: toDisplayUrl(webview.getURL()),
|
||||
title,
|
||||
viewport: viewportSummary(viewportRef.current),
|
||||
};
|
||||
}
|
||||
|
||||
if (action === 'browser.resize') {
|
||||
if (!isViewportMode(parameters.viewport)) throw new Error('viewport is required');
|
||||
applyViewportParameter();
|
||||
// Let the resize land before reporting it, so a snapshot that follows
|
||||
// describes the new layout rather than the old one.
|
||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||
await waitForIdle();
|
||||
return { viewport: viewportSummary(viewportForMode(parameters.viewport)) };
|
||||
}
|
||||
|
||||
if (action === 'browser.open') {
|
||||
const url = typeof parameters.url === 'string' ? parameters.url : '';
|
||||
if (!url) throw new Error('url is required');
|
||||
applyViewportParameter();
|
||||
loadUrl(url);
|
||||
await new Promise((resolve) => setTimeout(resolve, 150));
|
||||
const settled = await waitForIdle(25_000);
|
||||
let title = '';
|
||||
try {
|
||||
title = webview.getTitle() || '';
|
||||
} catch {
|
||||
title = '';
|
||||
}
|
||||
// `settled: false` means the page is still fetching, not that opening
|
||||
// failed — the agent can snapshot it and decide for itself.
|
||||
return {
|
||||
url: normalizeBrowserUrl(url),
|
||||
title,
|
||||
opened: true,
|
||||
settled,
|
||||
viewport: viewportSummary(viewportRef.current),
|
||||
};
|
||||
}
|
||||
|
||||
await waitForIdle();
|
||||
|
||||
const asOptionalString = (value: unknown): string | undefined => (
|
||||
typeof value === 'string' && value ? value : undefined
|
||||
);
|
||||
|
||||
const buildScript = (): string | null => {
|
||||
switch (action) {
|
||||
case 'browser.snapshot':
|
||||
return buildSnapshotScript({ selector: asOptionalString(parameters.selector) });
|
||||
case 'browser.click':
|
||||
return buildClickScript({
|
||||
selector: asOptionalString(parameters.selector),
|
||||
text: asOptionalString(parameters.text),
|
||||
});
|
||||
case 'browser.type':
|
||||
return buildTypeScript({
|
||||
selector: String(parameters.selector ?? ''),
|
||||
value: String(parameters.value ?? ''),
|
||||
submit: parameters.submit === true,
|
||||
});
|
||||
case 'browser.inspect':
|
||||
return buildInspectScript({ selector: String(parameters.selector ?? '') });
|
||||
case 'browser.scroll':
|
||||
return buildScrollScript({
|
||||
selector: asOptionalString(parameters.selector),
|
||||
direction: asOptionalString(parameters.direction),
|
||||
});
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const script = buildScript();
|
||||
|
||||
if (!script) throw new Error(`Unsupported browser action: ${action}`);
|
||||
|
||||
const result = await webview.executeJavaScript(script, true);
|
||||
if (!result || typeof result !== 'object') {
|
||||
throw new Error('The page returned no result');
|
||||
}
|
||||
const record = result as Record<string, unknown>;
|
||||
if (record.ok !== true) {
|
||||
throw new Error(typeof record.error === 'string' && record.error ? record.error : 'Browser action failed');
|
||||
}
|
||||
// A snapshot has to say which layout it describes, or the agent cannot tell
|
||||
// a mobile rendering from a desktop one.
|
||||
if (action === 'browser.snapshot') {
|
||||
const problems = consoleProblemsRef.current;
|
||||
return {
|
||||
...record,
|
||||
viewport: viewportSummary(viewportRef.current),
|
||||
...(problems.length > 0 ? { consoleProblems: [...problems] } : {}),
|
||||
};
|
||||
}
|
||||
// A click or a submit commonly starts a navigation; let it land so the
|
||||
// agent's next snapshot sees the page the action produced.
|
||||
if (action === 'browser.click' || (action === 'browser.type' && parameters.submit === true)) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 150));
|
||||
await waitForIdle();
|
||||
}
|
||||
return result;
|
||||
}, [annotationHost, loadUrl, waitForIdle]);
|
||||
|
||||
React.useEffect(
|
||||
() => registerBrowserController({ run: runControlAction }),
|
||||
[runControlAction],
|
||||
);
|
||||
|
||||
// Leaving the tab must not strand an overlay or live style overrides on the page.
|
||||
React.useEffect(() => {
|
||||
const host = annotationHost;
|
||||
return () => { void cancelAnnotationSession(host); };
|
||||
}, [annotationHost]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!webviewElement) return;
|
||||
const onConsoleMessage = (event: Event) => {
|
||||
const detail = event as unknown as { level?: number; message?: string; sourceId?: string; line?: number };
|
||||
// 2 is warning, 3 is error; anything quieter is the page talking to itself.
|
||||
if (typeof detail.level !== 'number' || detail.level < 2) return;
|
||||
const source = detail.sourceId ? `${detail.sourceId}${detail.line ? `:${detail.line}` : ''}` : '';
|
||||
consoleProblemsRef.current.push({
|
||||
level: detail.level >= 3 ? 'error' : 'warning',
|
||||
message: String(detail.message ?? '').slice(0, 400),
|
||||
source,
|
||||
});
|
||||
if (consoleProblemsRef.current.length > CONSOLE_PROBLEM_LIMIT) {
|
||||
consoleProblemsRef.current.splice(0, consoleProblemsRef.current.length - CONSOLE_PROBLEM_LIMIT);
|
||||
}
|
||||
};
|
||||
// Each page gets its own record; carrying the last one over would blame a
|
||||
// new page for the previous page's failures.
|
||||
const onStartLoading = () => { consoleProblemsRef.current = []; };
|
||||
|
||||
webviewElement.addEventListener('console-message', onConsoleMessage);
|
||||
webviewElement.addEventListener('did-start-loading', onStartLoading);
|
||||
return () => {
|
||||
webviewElement.removeEventListener('console-message', onConsoleMessage);
|
||||
webviewElement.removeEventListener('did-start-loading', onStartLoading);
|
||||
};
|
||||
}, [webviewElement]);
|
||||
|
||||
/**
|
||||
* Keeps loopback navigations on the machine the page came from.
|
||||
*
|
||||
* A tunnelled page can send the view to another local port — a docs server
|
||||
* behind a dev gateway, an API on its own port. That navigation happens
|
||||
* inside the view, so nothing resolved it, and it would be looked for on this
|
||||
* machine instead of the host.
|
||||
*
|
||||
* A link or a script navigation is caught before it happens. A server
|
||||
* redirect cannot be: by the time the view reports it, it is already loading.
|
||||
* That one is recovered from its failure instead, once per address, so a port
|
||||
* that genuinely is not there still fails honestly.
|
||||
*/
|
||||
const retunneledUrlsRef = React.useRef(new Set<string>());
|
||||
// Asking for an address again is a fresh request, so the recovery budget
|
||||
// comes back with it. The automatic retry deliberately does not reset it.
|
||||
const loadUrlFromUser = React.useCallback((value: string) => {
|
||||
retunneledUrlsRef.current.clear();
|
||||
loadUrl(value);
|
||||
}, [loadUrl]);
|
||||
React.useEffect(() => {
|
||||
if (!webviewElement) return;
|
||||
|
||||
const onWillNavigate = (event: Event) => {
|
||||
const detail = readEventPayload<{ url?: string }>(event);
|
||||
const target = typeof detail.url === 'string' ? detail.url : '';
|
||||
if (!target || !shouldTunnelLoopbackUrl(target)) return;
|
||||
event.preventDefault();
|
||||
loadUrl(target);
|
||||
};
|
||||
|
||||
const onFailLoad = (event: Event) => {
|
||||
const detail = readEventPayload<{
|
||||
errorCode?: number;
|
||||
validatedURL?: string;
|
||||
isMainFrame?: boolean;
|
||||
}>(event);
|
||||
if (detail.isMainFrame === false) return;
|
||||
// Superseded navigations are not failures.
|
||||
if (detail.errorCode === -3) return;
|
||||
const target = typeof detail.validatedURL === 'string' ? detail.validatedURL : '';
|
||||
if (!target || !shouldTunnelLoopbackUrl(target)) return;
|
||||
if (retunneledUrlsRef.current.has(target)) return;
|
||||
retunneledUrlsRef.current.add(target);
|
||||
loadUrl(target);
|
||||
};
|
||||
|
||||
webviewElement.addEventListener('will-navigate', onWillNavigate);
|
||||
webviewElement.addEventListener('did-fail-load', onFailLoad);
|
||||
return () => {
|
||||
webviewElement.removeEventListener('will-navigate', onWillNavigate);
|
||||
webviewElement.removeEventListener('did-fail-load', onFailLoad);
|
||||
};
|
||||
}, [loadUrl, webviewElement]);
|
||||
|
||||
// Popups open in place; a detached window would escape the panel entirely.
|
||||
React.useEffect(() => {
|
||||
if (!webviewElement) return;
|
||||
const onNewWindow = (event: Event) => {
|
||||
const detail = (event as CustomEvent<{ url?: string }>).detail;
|
||||
event.preventDefault();
|
||||
if (detail?.url) loadUrl(detail.url);
|
||||
};
|
||||
webviewElement.addEventListener('new-window', onNewWindow);
|
||||
return () => webviewElement.removeEventListener('new-window', onNewWindow);
|
||||
}, [loadUrl, webviewElement]);
|
||||
|
||||
const applyZoom = React.useCallback((level: number) => {
|
||||
const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, level));
|
||||
setZoomLevel(next);
|
||||
try {
|
||||
webviewRef.current?.setZoomLevel(next);
|
||||
} catch {
|
||||
// Not attached yet; the next change applies it.
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearBrowsingData = React.useCallback((what: 'cookies' | 'cache') => {
|
||||
void invokeDesktopCommand('desktop_browser_clear_data', {
|
||||
partition: BROWSER_PARTITION,
|
||||
cookies: what === 'cookies',
|
||||
cache: what === 'cache',
|
||||
})
|
||||
.then(() => {
|
||||
toast.success(t(what === 'cookies'
|
||||
? 'contextPanel.browser.clearedCookies'
|
||||
: 'contextPanel.browser.clearedCache'));
|
||||
// Cleared storage only shows in a page that reloads without it.
|
||||
try { webviewRef.current?.reloadIgnoringCache(); } catch { /* not attached */ }
|
||||
})
|
||||
.catch(() => toast.error(t('contextPanel.browser.clearFailed')));
|
||||
}, [t]);
|
||||
|
||||
// The stage is measured rather than assumed: the panel is resizable, and a
|
||||
// viewport that fitted a moment ago may not fit now.
|
||||
React.useEffect(() => {
|
||||
const stage = stageRef.current;
|
||||
if (!stage || typeof ResizeObserver === 'undefined') return;
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const rect = entries[0]?.contentRect;
|
||||
if (rect) setStageSize({ width: rect.width, height: rect.height });
|
||||
});
|
||||
observer.observe(stage);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
const applyColorScheme = React.useCallback((scheme: BrowserColorScheme) => {
|
||||
setColorScheme(scheme);
|
||||
const webview = webviewRef.current;
|
||||
if (!webview) return;
|
||||
let webContentsId = -1;
|
||||
try {
|
||||
webContentsId = webview.getWebContentsId();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
void invokeDesktopCommand('desktop_browser_set_color_scheme', { webContentsId, scheme })
|
||||
.catch((error: unknown) => {
|
||||
setColorScheme('system');
|
||||
toast.error(error instanceof Error ? error.message : t('contextPanel.browser.device.schemeFailed'));
|
||||
});
|
||||
}, [t]);
|
||||
|
||||
const handleReload = React.useCallback(() => {
|
||||
try {
|
||||
if (isLoading) webviewRef.current?.stop();
|
||||
else webviewRef.current?.reload();
|
||||
} catch {
|
||||
// Not attached yet.
|
||||
}
|
||||
}, [isLoading]);
|
||||
|
||||
// A page opened the moment its dev server launched is not ready twice over:
|
||||
// first nothing is listening at all, then a gateway answers while the app
|
||||
// behind it is still starting. Neither is an error the user can act on, and
|
||||
// both used to leave them pressing reload. Both are waited out here.
|
||||
const status = navigation.status;
|
||||
React.useEffect(() => {
|
||||
const reloadSoon = (): (() => void) => {
|
||||
setIsWaitingForServer(true);
|
||||
const timer = setTimeout(() => {
|
||||
try {
|
||||
webviewRef.current?.reload();
|
||||
} catch {
|
||||
// View went away; the next mount starts over.
|
||||
}
|
||||
}, DEV_SERVER_RETRY_DELAY_MS);
|
||||
return () => clearTimeout(timer);
|
||||
};
|
||||
|
||||
// Nothing is listening yet.
|
||||
if (status.kind === 'failed') {
|
||||
if (!isStartingServerFailure(status.code, status.url)) {
|
||||
setIsWaitingForServer(false);
|
||||
return;
|
||||
}
|
||||
const now = Date.now();
|
||||
const run = retryRef.current?.url === status.url
|
||||
? retryRef.current
|
||||
: { url: status.url, startedAt: now };
|
||||
retryRef.current = run;
|
||||
if (now - run.startedAt > DEV_SERVER_WAIT_MS) {
|
||||
setIsWaitingForServer(false);
|
||||
return;
|
||||
}
|
||||
return reloadSoon();
|
||||
}
|
||||
|
||||
// Mid-navigation: leave whatever state the previous decision set, so a
|
||||
// retry does not flash the page behind the waiting screen and back.
|
||||
if (status.kind === 'loading') return;
|
||||
|
||||
retryRef.current = null;
|
||||
|
||||
if (status.kind !== 'ready' || !status.url || !isLoopbackUrl(status.url)) {
|
||||
servedOkRef.current = true;
|
||||
setIsWaitingForServer(false);
|
||||
return;
|
||||
}
|
||||
if (servedOkRef.current || Date.now() - openedAtRef.current > GATEWAY_WAIT_MS) {
|
||||
servedOkRef.current = true;
|
||||
setIsWaitingForServer(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// The page loaded, but a 5xx here means the server answered on behalf of an
|
||||
// app that is not up yet. Checked by status rather than by reading the page:
|
||||
// guessing from its contents would mean encoding what each dev server's
|
||||
// error page looks like, which is exactly the trap this panel came out of.
|
||||
let cancelled = false;
|
||||
let cancelReload: (() => void) | null = null;
|
||||
// Probe the address on the host, not the local tunnel port: the check runs
|
||||
// on the server, where our ephemeral port means nothing. Asking about it
|
||||
// failed every time, which read as "settled" and left the page on the error
|
||||
// until a manual reload.
|
||||
void probeLoopbackStatus(toDisplayUrl(status.url)).then((httpStatus) => {
|
||||
if (cancelled) return;
|
||||
if (httpStatus === null || httpStatus < 500) {
|
||||
servedOkRef.current = true;
|
||||
setIsWaitingForServer(false);
|
||||
return;
|
||||
}
|
||||
cancelReload = reloadSoon();
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
cancelReload?.();
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
const failed = navigation.status.kind === 'failed' && !isWaitingForServer ? navigation.status : null;
|
||||
const layout = fitViewport(viewport, stageSize);
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 flex flex-col bg-background">
|
||||
<BrowserToolbar
|
||||
address={address}
|
||||
onAddressChange={setAddress}
|
||||
onSubmit={loadUrlFromUser}
|
||||
suggestions={suggestions}
|
||||
onForgetSuggestion={(url) => forgetHistoryVisit(directory, url)}
|
||||
onBack={() => { try { webviewRef.current?.goBack(); } catch { /* not attached */ } }}
|
||||
onForward={() => { try { webviewRef.current?.goForward(); } catch { /* not attached */ } }}
|
||||
onReload={handleReload}
|
||||
onOpenExternal={() => void openExternalUrl(navigation.url || address)}
|
||||
canGoBack={navigation.canGoBack}
|
||||
canGoForward={navigation.canGoForward}
|
||||
isLoading={isLoading}
|
||||
onAnnotate={handleAnnotate}
|
||||
isAnnotating={isAnnotating}
|
||||
onOpenDevTools={() => { try { webviewRef.current?.openDevTools(); } catch { /* not attached */ } }}
|
||||
onHardReload={() => { try { webviewRef.current?.reloadIgnoringCache(); } catch { /* not attached */ } }}
|
||||
onZoomIn={() => applyZoom(zoomLevel + ZOOM_STEP)}
|
||||
onZoomOut={() => applyZoom(zoomLevel - ZOOM_STEP)}
|
||||
onZoomReset={() => applyZoom(0)}
|
||||
zoomPercent={Math.round(Math.pow(1.2, zoomLevel) * 100)}
|
||||
onClearCookies={() => clearBrowsingData('cookies')}
|
||||
onClearCache={() => clearBrowsingData('cache')}
|
||||
onToggleDeviceBar={() => setShowDeviceBar((current) => !current)}
|
||||
isDeviceBarOpen={showDeviceBar}
|
||||
/>
|
||||
{showDeviceBar ? (
|
||||
<BrowserDeviceBar
|
||||
viewport={viewport}
|
||||
onViewportChange={setViewport}
|
||||
colorScheme={colorScheme}
|
||||
onColorSchemeChange={applyColorScheme}
|
||||
scale={layout?.scale ?? 1}
|
||||
/>
|
||||
) : null}
|
||||
<div
|
||||
ref={stageRef}
|
||||
className={cn(
|
||||
'relative min-h-0 flex-1 bg-background',
|
||||
// A sized viewport sits on a backdrop so its edges are visible; at
|
||||
// fill there is nothing to frame.
|
||||
layout && 'flex items-center justify-center overflow-hidden bg-[var(--surface-muted)]',
|
||||
)}
|
||||
>
|
||||
{initialSrc !== null ? (
|
||||
<webview
|
||||
ref={attachWebview}
|
||||
src={initialSrc}
|
||||
partition="persist:openchamber-browser"
|
||||
allowpopups
|
||||
style={layout
|
||||
? {
|
||||
// Laid out at the chosen size and scaled visually: the page must
|
||||
// measure itself at the width being tested, not at the panel's.
|
||||
width: `${layout.width}px`,
|
||||
height: `${layout.height}px`,
|
||||
transform: `scale(${layout.scale})`,
|
||||
border: 'none',
|
||||
flex: 'none',
|
||||
boxShadow: '0 2px 18px rgba(0,0,0,.28)',
|
||||
}
|
||||
: { width: '100%', height: '100%', border: 'none' }}
|
||||
/>
|
||||
) : null}
|
||||
{initialSrc !== null && !startUrl && !navigation.url && !isLoading ? (
|
||||
<BrowserEmptyState onOpen={loadUrlFromUser} directory={directory} />
|
||||
) : null}
|
||||
{isWaitingForServer ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background p-6 text-center">
|
||||
<span className="typography-ui-header text-foreground">{t('contextPanel.browser.waitingForServer')}</span>
|
||||
<span className="typography-micro text-muted-foreground">{t('contextPanel.browser.waitingForServerHint')}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{tunnelFailedUrl ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background p-6 text-center">
|
||||
<span className="typography-ui-header text-foreground">{t('contextPanel.browser.tunnelFailed')}</span>
|
||||
<span className="typography-micro text-muted-foreground">
|
||||
{t('contextPanel.browser.tunnelFailedHint', { url: tunnelFailedUrl })}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{failed && !tunnelFailedUrl ? (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background p-6 text-center">
|
||||
<span className="typography-ui-header text-foreground">
|
||||
{failed.crashed ? t('contextPanel.browser.crashed') : t('contextPanel.browser.loadFailed')}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground">
|
||||
{failed.crashed
|
||||
? t('contextPanel.browser.crashedHint')
|
||||
: failed.description || t('contextPanel.browser.loadFailedUnknown')}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
{isLoading ? (
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 overflow-hidden">
|
||||
<div className="h-full w-1/3 animate-[browser-progress_1.1s_ease-in-out_infinite] bg-[var(--primary)]" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Non-Chromium runtimes get a plain iframe. Same-origin policy makes the page
|
||||
* opaque to us here: no navigation events, no annotation, no console. The
|
||||
* toolbar reflects that instead of offering controls that would silently fail.
|
||||
*/
|
||||
const IframeBrowser: React.FC<BrowserPaneProps> = ({ initialUrl, directory, tabID }) => {
|
||||
const { t } = useI18n();
|
||||
const setContextPanelTabTargetPath = useUIStore((state) => state.setContextPanelTabTargetPath);
|
||||
const normalized = normalizeBrowserUrl(initialUrl);
|
||||
const startUrl = normalized !== BLANK_URL ? normalized : '';
|
||||
|
||||
const [address, setAddress] = React.useState(startUrl);
|
||||
const [loadedUrl, setLoadedUrl] = React.useState(startUrl);
|
||||
const [history, setHistory] = React.useState<string[]>(startUrl ? [startUrl] : []);
|
||||
const [historyIndex, setHistoryIndex] = React.useState(startUrl ? 0 : -1);
|
||||
const [reloadNonce, bumpReload] = React.useReducer((value: number) => value + 1, 0);
|
||||
|
||||
const persistUrl = React.useCallback((url: string) => {
|
||||
if (!url || url === BLANK_URL || !directory || !tabID) return;
|
||||
setContextPanelTabTargetPath(directory, tabID, url);
|
||||
}, [directory, tabID, setContextPanelTabTargetPath]);
|
||||
|
||||
const visitedAddresses = useBrowserHistoryStore(selectBrowserHistory(directory));
|
||||
const recordHistoryVisit = useBrowserHistoryStore((state) => state.recordVisit);
|
||||
const forgetHistoryVisit = useBrowserHistoryStore((state) => state.forget);
|
||||
const suggestions = React.useMemo(
|
||||
() => suggestFromHistory(visitedAddresses, address),
|
||||
[visitedAddresses, address],
|
||||
);
|
||||
|
||||
const navigate = React.useCallback((value: string) => {
|
||||
const next = normalizeBrowserUrl(value);
|
||||
if (next === BLANK_URL) return;
|
||||
setAddress(next);
|
||||
setLoadedUrl(next);
|
||||
persistUrl(next);
|
||||
// The page is opaque here, so there is no load event and no title to wait
|
||||
// for; what was asked for is the only thing this runtime can record.
|
||||
recordHistoryVisit(directory, { url: next });
|
||||
setHistory((current) => {
|
||||
const kept = historyIndex >= 0 ? current.slice(0, historyIndex + 1) : [];
|
||||
if (kept[kept.length - 1] === next) {
|
||||
setHistoryIndex(kept.length - 1);
|
||||
return kept;
|
||||
}
|
||||
setHistoryIndex(kept.length);
|
||||
return [...kept, next];
|
||||
});
|
||||
}, [directory, historyIndex, persistUrl, recordHistoryVisit]);
|
||||
|
||||
const goTo = React.useCallback((index: number) => {
|
||||
const next = history[index];
|
||||
if (!next) return;
|
||||
setHistoryIndex(index);
|
||||
setAddress(next);
|
||||
setLoadedUrl(next);
|
||||
persistUrl(next);
|
||||
}, [history, persistUrl]);
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 flex flex-col bg-background">
|
||||
<BrowserToolbar
|
||||
address={address}
|
||||
onAddressChange={setAddress}
|
||||
onSubmit={navigate}
|
||||
suggestions={suggestions}
|
||||
onForgetSuggestion={(url) => forgetHistoryVisit(directory, url)}
|
||||
onBack={() => goTo(historyIndex - 1)}
|
||||
onForward={() => goTo(historyIndex + 1)}
|
||||
onReload={bumpReload}
|
||||
onOpenExternal={() => void openExternalUrl(loadedUrl || address)}
|
||||
canGoBack={historyIndex > 0}
|
||||
canGoForward={historyIndex >= 0 && historyIndex < history.length - 1}
|
||||
isLoading={false}
|
||||
/>
|
||||
<div className="relative min-h-0 flex-1 bg-background">
|
||||
{loadedUrl ? (
|
||||
<iframe
|
||||
key={`${loadedUrl}|${reloadNonce}`}
|
||||
src={loadedUrl}
|
||||
title={t('contextPanel.browser.frameTitle')}
|
||||
className="h-full w-full border-none bg-white"
|
||||
sandbox="allow-scripts allow-forms allow-same-origin allow-popups"
|
||||
/>
|
||||
) : (
|
||||
<BrowserEmptyState onOpen={navigate} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const BrowserPane: React.FC<BrowserPaneProps> = (props) => {
|
||||
const [chromium] = React.useState(isChromiumHost);
|
||||
return chromium ? <WebviewBrowser {...props} /> : <IframeBrowser {...props} />;
|
||||
};
|
||||
@@ -0,0 +1,241 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Icon } from '@/components/icon/Icon';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { BrowserAddressSuggestions } from './BrowserAddressSuggestions';
|
||||
import type { BrowserHistoryEntry } from '@/lib/browser/history';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { IconName } from '@/components/icon/icons';
|
||||
|
||||
type ToolbarButtonProps = {
|
||||
icon: IconName;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
pressed?: boolean;
|
||||
};
|
||||
|
||||
const ToolbarButton: React.FC<ToolbarButtonProps> = ({ icon, label, onClick, disabled, pressed }) => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant={pressed ? 'secondary' : 'ghost'}
|
||||
size="xs"
|
||||
className={cn(
|
||||
'w-6 shrink-0 rounded-full px-0 text-muted-foreground',
|
||||
'hover:text-foreground',
|
||||
pressed && 'text-foreground',
|
||||
)}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
aria-label={label}
|
||||
aria-pressed={pressed}
|
||||
>
|
||||
<Icon name={icon} className="size-3.5" aria-hidden="true" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={6}>{label}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
export type BrowserToolbarProps = {
|
||||
address: string;
|
||||
/** Addresses already visited in this project, offered while typing. */
|
||||
suggestions?: readonly BrowserHistoryEntry[];
|
||||
onForgetSuggestion?: (url: string) => void;
|
||||
onAddressChange: (value: string) => void;
|
||||
onSubmit: (value: string) => void;
|
||||
onBack: () => void;
|
||||
onForward: () => void;
|
||||
onReload: () => void;
|
||||
onOpenExternal: () => void;
|
||||
canGoBack: boolean;
|
||||
canGoForward: boolean;
|
||||
isLoading: boolean;
|
||||
/** These need a real Chromium host; hidden without one. */
|
||||
onAnnotate?: () => void;
|
||||
onOpenDevTools?: () => void;
|
||||
isAnnotating?: boolean;
|
||||
onHardReload?: () => void;
|
||||
onZoomIn?: () => void;
|
||||
onZoomOut?: () => void;
|
||||
onZoomReset?: () => void;
|
||||
/** Whole percent, e.g. 110. Controls hide at 100 to keep the bar quiet. */
|
||||
zoomPercent?: number;
|
||||
onClearCookies?: () => void;
|
||||
onClearCache?: () => void;
|
||||
onToggleDeviceBar?: () => void;
|
||||
isDeviceBarOpen?: boolean;
|
||||
};
|
||||
|
||||
export const BrowserToolbar: React.FC<BrowserToolbarProps> = ({
|
||||
address,
|
||||
suggestions = [],
|
||||
onForgetSuggestion,
|
||||
onAddressChange,
|
||||
onSubmit,
|
||||
onBack,
|
||||
onForward,
|
||||
onReload,
|
||||
onOpenExternal,
|
||||
canGoBack,
|
||||
canGoForward,
|
||||
isLoading,
|
||||
onAnnotate,
|
||||
onOpenDevTools,
|
||||
isAnnotating,
|
||||
onHardReload,
|
||||
onZoomIn,
|
||||
onZoomOut,
|
||||
onZoomReset,
|
||||
zoomPercent = 100,
|
||||
onClearCookies,
|
||||
onClearCache,
|
||||
onToggleDeviceBar,
|
||||
isDeviceBarOpen,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const [isAddressFocused, setIsAddressFocused] = React.useState(false);
|
||||
const [activeSuggestion, setActiveSuggestion] = React.useState(-1);
|
||||
const visibleSuggestions = isAddressFocused ? suggestions : [];
|
||||
|
||||
// A new list is a new choice; keeping an old index would highlight whatever
|
||||
// happens to sit in that position now.
|
||||
React.useEffect(() => {
|
||||
setActiveSuggestion(-1);
|
||||
}, [address, isAddressFocused]);
|
||||
|
||||
const submitAddress = (value: string) => {
|
||||
setIsAddressFocused(false);
|
||||
setActiveSuggestion(-1);
|
||||
onSubmit(value);
|
||||
};
|
||||
|
||||
const onAddressKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (visibleSuggestions.length === 0) return;
|
||||
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
const step = event.key === 'ArrowDown' ? 1 : -1;
|
||||
const count = visibleSuggestions.length;
|
||||
// Wraps through "nothing selected", so the typed address stays reachable.
|
||||
setActiveSuggestion((current) => {
|
||||
const next = current + step;
|
||||
if (next < -1) return count - 1;
|
||||
if (next >= count) return -1;
|
||||
return next;
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Escape' && activeSuggestion >= 0) {
|
||||
event.preventDefault();
|
||||
setActiveSuggestion(-1);
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Enter' && activeSuggestion >= 0) {
|
||||
event.preventDefault();
|
||||
const chosen = visibleSuggestions[activeSuggestion];
|
||||
if (chosen) submitAddress(chosen.url);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 border-b border-border bg-[var(--surface-background)] px-2 py-1">
|
||||
<ToolbarButton icon="arrow-left" label={t('contextPanel.browser.back')} onClick={onBack} disabled={!canGoBack} />
|
||||
<ToolbarButton icon="arrow-right" label={t('contextPanel.browser.forward')} onClick={onForward} disabled={!canGoForward} />
|
||||
<ToolbarButton
|
||||
icon="refresh"
|
||||
label={isLoading ? t('contextPanel.browser.stop') : t('contextPanel.browser.reload')}
|
||||
onClick={onReload}
|
||||
/>
|
||||
{onHardReload ? (
|
||||
<ToolbarButton icon="restart" label={t('contextPanel.browser.hardReload')} onClick={onHardReload} />
|
||||
) : null}
|
||||
<form
|
||||
className="relative min-w-0 flex-1"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
submitAddress(address);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
value={address}
|
||||
onChange={(event) => onAddressChange(event.target.value)}
|
||||
onFocus={() => setIsAddressFocused(true)}
|
||||
onBlur={() => setIsAddressFocused(false)}
|
||||
onKeyDown={onAddressKeyDown}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
role="combobox"
|
||||
aria-expanded={visibleSuggestions.length > 0}
|
||||
aria-controls="openchamber-browser-address-suggestions"
|
||||
className={cn(
|
||||
'h-6 w-full rounded-full border border-border/50 bg-[var(--surface-elevated)] px-3',
|
||||
'typography-micro text-foreground outline-none focus:border-[var(--interactive-focus-ring)]',
|
||||
)}
|
||||
aria-label={t('contextPanel.browser.addressAria')}
|
||||
/>
|
||||
<div id="openchamber-browser-address-suggestions">
|
||||
<BrowserAddressSuggestions
|
||||
entries={visibleSuggestions}
|
||||
activeIndex={activeSuggestion}
|
||||
onSelect={submitAddress}
|
||||
onForget={(url) => onForgetSuggestion?.(url)}
|
||||
onHighlight={setActiveSuggestion}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
{onZoomOut && onZoomIn ? (
|
||||
<div className="flex shrink-0 items-center">
|
||||
<ToolbarButton icon="subtract" label={t('contextPanel.browser.zoomOut')} onClick={onZoomOut} />
|
||||
{zoomPercent !== 100 && onZoomReset ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
className="shrink-0 rounded-full px-1.5 typography-micro tabular-nums text-muted-foreground"
|
||||
onClick={onZoomReset}
|
||||
aria-label={t('contextPanel.browser.zoomReset')}
|
||||
>
|
||||
{zoomPercent}%
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={6}>{t('contextPanel.browser.zoomReset')}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<ToolbarButton icon="add" label={t('contextPanel.browser.zoomIn')} onClick={onZoomIn} />
|
||||
</div>
|
||||
) : null}
|
||||
{onClearCookies ? (
|
||||
<ToolbarButton icon="delete-bin" label={t('contextPanel.browser.clearCookies')} onClick={onClearCookies} />
|
||||
) : null}
|
||||
{onClearCache ? (
|
||||
<ToolbarButton icon="database-2" label={t('contextPanel.browser.clearCache')} onClick={onClearCache} />
|
||||
) : null}
|
||||
{onToggleDeviceBar ? (
|
||||
<ToolbarButton
|
||||
icon="smartphone"
|
||||
label={t('contextPanel.browser.deviceToolbar')}
|
||||
onClick={onToggleDeviceBar}
|
||||
pressed={isDeviceBarOpen}
|
||||
/>
|
||||
) : null}
|
||||
{onAnnotate ? (
|
||||
<ToolbarButton
|
||||
icon="cursor"
|
||||
label={t('contextPanel.browser.annotate.toggle')}
|
||||
onClick={onAnnotate}
|
||||
pressed={isAnnotating}
|
||||
/>
|
||||
) : null}
|
||||
{onOpenDevTools ? (
|
||||
<ToolbarButton icon="terminal-box" label={t('contextPanel.browser.devTools')} onClick={onOpenDevTools} />
|
||||
) : null}
|
||||
<ToolbarButton icon="external-link" label={t('contextPanel.browser.openExternal')} onClick={onOpenExternal} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from 'react';
|
||||
|
||||
import { toast } from '@/components/ui';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useInlineCommentDraftStore } from '@/stores/useInlineCommentDraftStore';
|
||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||
import { useInputStore } from '@/sync/input-store';
|
||||
import { formatBrowserAnnotationPrompt } from '@/lib/browser/annotationPrompt';
|
||||
import type { AnnotationSessionResult } from '@/lib/browser/annotationSession';
|
||||
import type { BrowserAnnotationOverlayLabels } from '@/lib/browser/annotationOverlay';
|
||||
|
||||
/**
|
||||
* Attaches a finished annotation to the active composer.
|
||||
*
|
||||
* The screenshot is attached before the text so that a failed image upload
|
||||
* cannot leave a prompt claiming an attachment that never arrived — the text
|
||||
* states what actually happened.
|
||||
*/
|
||||
export const useAnnotationAttach = (directory: string) => {
|
||||
const { t } = useI18n();
|
||||
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
|
||||
const newSessionDraftOpen = useSessionUIStore((state) => state.newSessionDraft?.open);
|
||||
const addInlineCommentDraft = useInlineCommentDraftStore((state) => state.addDraft);
|
||||
const addAttachedFile = useInputStore((state) => state.addAttachedFile);
|
||||
|
||||
return React.useCallback(async (result: AnnotationSessionResult): Promise<void> => {
|
||||
const sessionKey = currentSessionId ?? (newSessionDraftOpen ? 'draft' : null);
|
||||
if (!sessionKey) {
|
||||
toast.error(t('contextPanel.browser.annotate.noSession'));
|
||||
return;
|
||||
}
|
||||
|
||||
let screenshotAttached = false;
|
||||
if (result.screenshot) {
|
||||
try {
|
||||
await addAttachedFile(result.screenshot);
|
||||
screenshotAttached = true;
|
||||
} catch {
|
||||
screenshotAttached = false;
|
||||
}
|
||||
}
|
||||
|
||||
addInlineCommentDraft({ directory, sessionKey }, {
|
||||
source: 'preview-annotation',
|
||||
fileLabel: result.payload.pageUrl || 'browser',
|
||||
startLine: 1,
|
||||
endLine: 1,
|
||||
code: formatBrowserAnnotationPrompt({
|
||||
payload: result.payload,
|
||||
screenshotAttached,
|
||||
intro: t('contextPanel.browser.annotate.intro'),
|
||||
}),
|
||||
language: 'markdown',
|
||||
text: '',
|
||||
});
|
||||
|
||||
toast.success(t('contextPanel.browser.annotate.attached'));
|
||||
}, [addAttachedFile, addInlineCommentDraft, currentSessionId, directory, newSessionDraftOpen, t]);
|
||||
};
|
||||
|
||||
/** Overlay labels, resolved through i18n so the in-page UI follows the app locale. */
|
||||
export const useAnnotationOverlayLabels = (): BrowserAnnotationOverlayLabels => {
|
||||
const { t } = useI18n();
|
||||
return React.useMemo(() => ({
|
||||
select: t('contextPanel.browser.annotate.tool.element'),
|
||||
marquee: t('contextPanel.browser.annotate.tool.region'),
|
||||
draw: t('contextPanel.browser.annotate.tool.draw'),
|
||||
commentPlaceholder: t('contextPanel.browser.annotate.commentPlaceholder'),
|
||||
submit: t('contextPanel.browser.annotate.submit'),
|
||||
}), [t]);
|
||||
};
|
||||
@@ -0,0 +1,237 @@
|
||||
import React from 'react';
|
||||
|
||||
import { IDLE_NAV_STATUS, type BrowserNavStatus } from '@/lib/browser/contract';
|
||||
import { useBrowserFaviconStore } from '@/stores/useBrowserFaviconStore';
|
||||
import {
|
||||
INITIAL_CRASH_RECOVERY_STATE,
|
||||
planCrashRecovery,
|
||||
type CrashRecoveryState,
|
||||
} from '@/lib/browser/crashRecovery';
|
||||
|
||||
/**
|
||||
* Translates `<webview>` lifecycle events into a single navigation status.
|
||||
*
|
||||
* Chromium reports failures and successes through separate events that can
|
||||
* arrive in either order, and it emits `did-fail-load` for sub-resources as
|
||||
* well as for the main frame. Both are handled here so the panel only ever
|
||||
* sees one authoritative state:
|
||||
*
|
||||
* - Sub-frame failures are ignored; only the main frame changes the status.
|
||||
* - `ERR_ABORTED` is not a failure. It is what Chromium reports when a
|
||||
* navigation is superseded by the next one, and treating it as an error puts
|
||||
* an error screen over a page that is loading perfectly well.
|
||||
*
|
||||
* Takes the element rather than a ref so the listeners attach when the view
|
||||
* actually appears. A ref is stable, so an effect keyed on it runs once — and
|
||||
* silently attaches nothing at all when the view mounts a render later.
|
||||
*
|
||||
* `<webview>` puts its event payload directly on the event object rather than
|
||||
* under `detail`, so reading `detail` yields a failure with no code and no
|
||||
* description — an error screen that says nothing. Both shapes are read here.
|
||||
*
|
||||
* A lost renderer is handled here too. It is reported by neither of the above:
|
||||
* the page simply stops existing, and the panel would otherwise stay blank with
|
||||
* no indication that anything happened.
|
||||
*/
|
||||
|
||||
/** Chromium's code for "this navigation was replaced by another one". */
|
||||
const ERR_ABORTED = -3;
|
||||
|
||||
/**
|
||||
* `about:blank` is the view's resting state, not somewhere the user went. It
|
||||
* arrives through `did-navigate` like any other address, and taking it at face
|
||||
* value puts it in the address bar and makes the panel look like it is showing
|
||||
* a page — which hides the empty state that would otherwise offer somewhere to
|
||||
* go.
|
||||
*/
|
||||
const isRealPageUrl = (url: unknown): url is string => (
|
||||
typeof url === 'string' && url.length > 0 && url !== 'about:blank'
|
||||
);
|
||||
|
||||
type FailLoadDetail = {
|
||||
errorCode?: number;
|
||||
errorDescription?: string;
|
||||
validatedURL?: string;
|
||||
isMainFrame?: boolean;
|
||||
};
|
||||
|
||||
/** Reads a webview event payload, whichever shape this Electron version uses. */
|
||||
export const readEventPayload = <T extends object>(event: Event): Partial<T> => {
|
||||
const record = event as unknown as { detail?: unknown };
|
||||
if (record.detail && typeof record.detail === 'object') return record.detail as Partial<T>;
|
||||
return event as unknown as Partial<T>;
|
||||
};
|
||||
|
||||
export type WebviewNavigation = {
|
||||
readonly status: BrowserNavStatus;
|
||||
readonly url: string;
|
||||
readonly title: string;
|
||||
readonly canGoBack: boolean;
|
||||
readonly canGoForward: boolean;
|
||||
};
|
||||
|
||||
export const useWebviewNavigation = (
|
||||
webview: WebviewElement | null,
|
||||
{ initialUrl, onUrlChange }: { initialUrl: string; onUrlChange: (url: string) => void },
|
||||
): WebviewNavigation => {
|
||||
const [status, setStatus] = React.useState<BrowserNavStatus>(
|
||||
initialUrl ? { kind: 'loading', url: initialUrl } : IDLE_NAV_STATUS,
|
||||
);
|
||||
const [url, setUrl] = React.useState(initialUrl);
|
||||
const [title, setTitle] = React.useState('');
|
||||
const [canGoBack, setCanGoBack] = React.useState(false);
|
||||
const [canGoForward, setCanGoForward] = React.useState(false);
|
||||
|
||||
const urlChangeRef = React.useRef(onUrlChange);
|
||||
urlChangeRef.current = onUrlChange;
|
||||
|
||||
// Survives re-attaches so a view that keeps crashing cannot restart its own
|
||||
// budget by being remounted.
|
||||
const crashStateRef = React.useRef<CrashRecoveryState>(INITIAL_CRASH_RECOVERY_STATE);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!webview) return;
|
||||
|
||||
const readCurrentUrl = (): string => {
|
||||
try {
|
||||
const value = webview.getURL();
|
||||
return isRealPageUrl(value) ? value : '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const syncHistory = () => {
|
||||
try {
|
||||
setCanGoBack(webview.canGoBack());
|
||||
setCanGoForward(webview.canGoForward());
|
||||
} catch {
|
||||
// Webview not attached yet; the next event resyncs.
|
||||
}
|
||||
};
|
||||
|
||||
const commitUrl = (next: string) => {
|
||||
if (!isRealPageUrl(next)) return;
|
||||
setUrl(next);
|
||||
urlChangeRef.current(next);
|
||||
};
|
||||
|
||||
const onStartLoading = () => {
|
||||
const current = readCurrentUrl();
|
||||
setStatus({ kind: 'loading', url: current });
|
||||
};
|
||||
|
||||
const onStopLoading = () => {
|
||||
const current = readCurrentUrl();
|
||||
let pageTitle = '';
|
||||
try {
|
||||
pageTitle = webview.getTitle() || '';
|
||||
} catch {
|
||||
pageTitle = '';
|
||||
}
|
||||
setTitle(pageTitle);
|
||||
commitUrl(current);
|
||||
syncHistory();
|
||||
// A failure already produced a terminal status; do not overwrite it with
|
||||
// the `did-stop-loading` that always follows.
|
||||
setStatus((previous) => (
|
||||
previous.kind === 'failed' && previous.url === current
|
||||
? previous
|
||||
: { kind: 'ready', url: current, title: pageTitle }
|
||||
));
|
||||
};
|
||||
|
||||
const onNavigate = (event: Event) => {
|
||||
const detail = readEventPayload<{ url?: string }>(event);
|
||||
if (isRealPageUrl(detail.url)) {
|
||||
commitUrl(detail.url);
|
||||
syncHistory();
|
||||
}
|
||||
};
|
||||
|
||||
const onFaviconUpdated = (event: Event) => {
|
||||
const detail = readEventPayload<{ favicons?: string[] }>(event);
|
||||
const icon = Array.isArray(detail.favicons) ? detail.favicons.find(Boolean) : '';
|
||||
const page = readCurrentUrl();
|
||||
if (icon && page) useBrowserFaviconStore.getState().resolve(page, icon);
|
||||
};
|
||||
|
||||
const onTitleUpdated = (event: Event) => {
|
||||
const detail = readEventPayload<{ title?: string }>(event);
|
||||
if (typeof detail.title === 'string') setTitle(detail.title);
|
||||
};
|
||||
|
||||
const onFailLoad = (event: Event) => {
|
||||
const detail = readEventPayload<FailLoadDetail>(event);
|
||||
if (detail.isMainFrame === false) return;
|
||||
const code = typeof detail.errorCode === 'number' ? detail.errorCode : 0;
|
||||
if (code === ERR_ABORTED) return;
|
||||
setStatus({
|
||||
kind: 'failed',
|
||||
url: isRealPageUrl(detail.validatedURL) ? detail.validatedURL : readCurrentUrl(),
|
||||
code,
|
||||
description: typeof detail.errorDescription === 'string' ? detail.errorDescription : '',
|
||||
});
|
||||
};
|
||||
|
||||
let recoveryTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const onCrashed = () => {
|
||||
const target = readCurrentUrl();
|
||||
const plan = planCrashRecovery(crashStateRef.current, Date.now());
|
||||
if (!plan) {
|
||||
// Out of attempts: say what happened rather than reload again. The
|
||||
// toolbar's own reload stays available, which is the user's call.
|
||||
setStatus({ kind: 'failed', url: target, code: 0, description: '', crashed: true });
|
||||
return;
|
||||
}
|
||||
crashStateRef.current = plan.state;
|
||||
setStatus({ kind: 'loading', url: target });
|
||||
recoveryTimer = setTimeout(() => {
|
||||
recoveryTimer = null;
|
||||
try {
|
||||
webview.reload();
|
||||
} catch {
|
||||
setStatus({ kind: 'failed', url: target, code: 0, description: '', crashed: true });
|
||||
}
|
||||
}, plan.delayMs);
|
||||
};
|
||||
|
||||
webview.addEventListener('did-start-loading', onStartLoading);
|
||||
webview.addEventListener('did-stop-loading', onStopLoading);
|
||||
webview.addEventListener('did-navigate', onNavigate);
|
||||
webview.addEventListener('did-navigate-in-page', onNavigate);
|
||||
webview.addEventListener('page-title-updated', onTitleUpdated);
|
||||
webview.addEventListener('page-favicon-updated', onFaviconUpdated);
|
||||
webview.addEventListener('did-fail-load', onFailLoad);
|
||||
// Electron renamed this event; older builds still emit only the old name.
|
||||
webview.addEventListener('render-process-gone', onCrashed);
|
||||
webview.addEventListener('crashed', onCrashed);
|
||||
|
||||
// The webview may already be settled by the time this effect runs. Only
|
||||
// treat it as settled when a page is actually loaded: a freshly created
|
||||
// view reports "not loading" before its guest attaches, and settling on
|
||||
// that would declare an empty page ready and hide the real one behind an
|
||||
// empty state.
|
||||
try {
|
||||
if (!webview.isLoading() && readCurrentUrl()) onStopLoading();
|
||||
} catch {
|
||||
// Not attached yet.
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (recoveryTimer !== null) clearTimeout(recoveryTimer);
|
||||
webview.removeEventListener('render-process-gone', onCrashed);
|
||||
webview.removeEventListener('crashed', onCrashed);
|
||||
webview.removeEventListener('did-start-loading', onStartLoading);
|
||||
webview.removeEventListener('did-stop-loading', onStopLoading);
|
||||
webview.removeEventListener('did-navigate', onNavigate);
|
||||
webview.removeEventListener('did-navigate-in-page', onNavigate);
|
||||
webview.removeEventListener('page-title-updated', onTitleUpdated);
|
||||
webview.removeEventListener('page-favicon-updated', onFaviconUpdated);
|
||||
webview.removeEventListener('did-fail-load', onFailLoad);
|
||||
};
|
||||
}, [webview]);
|
||||
|
||||
return { status, url, title, canGoBack, canGoForward };
|
||||
};
|
||||
@@ -1258,6 +1258,7 @@ const ToolExpandedContent: React.FC<ToolExpandedContentProps> = React.memo(({
|
||||
);
|
||||
const hasVisualDiffEntry = diffEntries.some((entry) => entry.renderMode === 'diff');
|
||||
const hideToolInputPreview = part.tool === 'openchamber'
|
||||
|| part.tool === 'openchamber_web'
|
||||
|| part.tool === 'apply_patch'
|
||||
|| part.tool === 'edit'
|
||||
|| part.tool === 'multiedit';
|
||||
|
||||
@@ -56,6 +56,9 @@ export const getToolIcon = (toolName: string) => {
|
||||
if (tool === 'openchamber') {
|
||||
return <Icon name="openchamber" className={iconClass} />;
|
||||
}
|
||||
if (tool === 'openchamber_web') {
|
||||
return <Icon name="global" className={iconClass} />;
|
||||
}
|
||||
if (tool === 'question') {
|
||||
return <Icon name="survey" className={iconClass} />;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,6 +15,8 @@ import { useDeviceInfo } from '@/lib/device';
|
||||
import { isDesktopShell } from '@/lib/desktop';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useTerminalStore } from '@/stores/useTerminalStore';
|
||||
import { extractAnnouncedUrls, extractProjectActionUrl } from '@/lib/terminalPreview';
|
||||
import { setAnnouncedDevServers } from '@/lib/browser/announcedServers';
|
||||
import { useThemeSystem } from '@/contexts/useThemeSystem';
|
||||
import { useDesktopSshStore } from '@/stores/useDesktopSshStore';
|
||||
import { openExternalUrl } from '@/lib/url';
|
||||
@@ -39,6 +41,10 @@ type UrlWatchEntry = {
|
||||
openedUrl: boolean;
|
||||
tail: string;
|
||||
openInPreview: boolean;
|
||||
/** Addresses announced so far by an auto-discovery run, in announcement order. */
|
||||
announced: string[];
|
||||
/** Set once the panel is showing these candidates and wants later ones too. */
|
||||
offering: boolean;
|
||||
};
|
||||
|
||||
interface ProjectActionsButtonProps {
|
||||
@@ -49,11 +55,14 @@ interface ProjectActionsButtonProps {
|
||||
allowMobile?: boolean;
|
||||
}
|
||||
|
||||
const ANSI_ESCAPE_PREFIX = String.fromCharCode(27);
|
||||
const ANSI_ESCAPE_PATTERN = new RegExp(`${ANSI_ESCAPE_PREFIX}\\[[0-9;?]*[ -/]*[@-~]`, 'g');
|
||||
const URL_GLOBAL_PATTERN = /https?:\/\/[^\s<>'"`]+/gi;
|
||||
const AUTO_DISCOVER_ACTION_ID = '__openchamber_auto_discover_preview__';
|
||||
const AUTO_DISCOVER_PREVIEW_WAIT_TIMEOUT_MS = 15_000;
|
||||
/**
|
||||
* How long to keep listening after the first server announces itself. A project
|
||||
* that starts several at once staggers them by a second or two, and opening the
|
||||
* first to speak would just be a race.
|
||||
*/
|
||||
const AUTO_DISCOVER_SETTLE_MS = 3_000;
|
||||
|
||||
const stripControlChars = (value: string): string => {
|
||||
let next = '';
|
||||
@@ -89,57 +98,6 @@ const normalizeManualOpenUrl = (value: string | undefined): string | null => {
|
||||
}
|
||||
};
|
||||
|
||||
const extractBestUrl = (value: string): string | null => {
|
||||
const cleaned = value.replace(ANSI_ESCAPE_PATTERN, '');
|
||||
const matches = cleaned.match(URL_GLOBAL_PATTERN);
|
||||
if (!matches || matches.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const normalized = matches
|
||||
.map((entry) => entry.replace(/[),.;]+$/, ''))
|
||||
.filter(Boolean);
|
||||
|
||||
if (normalized.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const portCandidates: Array<{ raw: string; parsed: URL }> = [];
|
||||
for (const candidate of normalized) {
|
||||
try {
|
||||
const parsed = new URL(candidate);
|
||||
if (parsed.port && parsed.port.length > 0) {
|
||||
portCandidates.push({ raw: candidate, parsed });
|
||||
}
|
||||
} catch {
|
||||
// noop
|
||||
}
|
||||
}
|
||||
|
||||
if (portCandidates.length > 0) {
|
||||
const scoreCandidate = (entry: { raw: string; parsed: URL }): number => {
|
||||
const { parsed } = entry;
|
||||
const host = parsed.hostname.toLowerCase();
|
||||
const isLocalHost = host === 'localhost' || host === '127.0.0.1' || host === '0.0.0.0' || host === '::1';
|
||||
const normalizedPath = parsed.pathname || '/';
|
||||
const pathSegments = normalizedPath.split('/').filter(Boolean).length;
|
||||
const hasRootPath = normalizedPath === '/' || normalizedPath === '';
|
||||
const hasQueryOrHash = Boolean(parsed.search || parsed.hash);
|
||||
|
||||
let score = 0;
|
||||
if (isLocalHost) score += 50;
|
||||
if (hasRootPath) score += 30;
|
||||
score -= Math.min(pathSegments * 5, 20);
|
||||
if (hasQueryOrHash) score -= 10;
|
||||
return score;
|
||||
};
|
||||
|
||||
portCandidates.sort((a, b) => scoreCandidate(b) - scoreCandidate(a));
|
||||
return portCandidates[0]?.parsed.origin ?? portCandidates[0]?.raw ?? null;
|
||||
}
|
||||
|
||||
return normalized[0] ?? null;
|
||||
};
|
||||
|
||||
export const ProjectActionsButton = ({
|
||||
projectRef,
|
||||
@@ -307,6 +265,39 @@ export const ProjectActionsButton = ({
|
||||
}, [actions, canUseAutoDiscover, selectedActionId]);
|
||||
|
||||
React.useEffect(() => {
|
||||
/**
|
||||
* Decides what an auto-discovery run found, once its servers have had a
|
||||
* moment to announce themselves. One address is opened; several are offered
|
||||
* in the browser panel, because choosing between them would be a guess
|
||||
* dressed up as a feature.
|
||||
*/
|
||||
const settleAutoDiscovery = (runKey: string) => {
|
||||
delete previewWaitTimeoutByRunKeyRef.current[runKey];
|
||||
const watch = urlWatchByRunKeyRef.current[runKey];
|
||||
if (!watch || watch.openedUrl) return;
|
||||
|
||||
const store = useTerminalStore.getState();
|
||||
const run = store.projectActionRuns[runKey];
|
||||
if (!run) return;
|
||||
|
||||
const candidates = watch.announced;
|
||||
if (candidates.length === 0) return;
|
||||
watch.openedUrl = true;
|
||||
store.updateProjectActionRunStatus(runKey, 'running');
|
||||
|
||||
if (candidates.length === 1) {
|
||||
setAnnouncedDevServers(run.directory, []);
|
||||
setTabPreviewUrl(run.directory, run.tabId, candidates[0], { locked: false, autoOpened: true });
|
||||
openContextPreview(run.directory, candidates[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
watch.offering = true;
|
||||
setAnnouncedDevServers(run.directory, candidates);
|
||||
useUIStore.getState().openContextSurface(run.directory, 'browser');
|
||||
toast.info(t('projectActions.toast.multipleServers'));
|
||||
};
|
||||
|
||||
const monitorRuns = () => {
|
||||
const terminalStore = useTerminalStore.getState();
|
||||
const terminalSessions = terminalStore.sessions;
|
||||
@@ -319,7 +310,7 @@ export const ProjectActionsButton = ({
|
||||
continue;
|
||||
}
|
||||
|
||||
const watch = urlWatchByRunKeyRef.current[runKey] ?? { lastSeenChunkId: null, openedUrl: false, tail: '', openInPreview: false };
|
||||
const watch = urlWatchByRunKeyRef.current[runKey] ?? { lastSeenChunkId: null, openedUrl: false, tail: '', openInPreview: false, announced: [], offering: false };
|
||||
urlWatchByRunKeyRef.current[runKey] = watch;
|
||||
const action = displayActions.find((item) => item.id === entry.actionId);
|
||||
const bufferChunks = terminalStore.getBuffer(entry.directory, entry.tabId).chunks;
|
||||
@@ -330,7 +321,34 @@ export const ProjectActionsButton = ({
|
||||
|
||||
const combined = nextChunks.map((chunk) => chunk.data).join('');
|
||||
const textForScan = `${watch.tail}${combined}`;
|
||||
const maybeUrl = !watch.openedUrl && action.autoOpenUrl === true ? extractBestUrl(textForScan) : null;
|
||||
// Auto-discovery inferred the command; it must not also infer the
|
||||
// address. It collects what the servers announce and decides once they
|
||||
// have had a moment to all speak up.
|
||||
// Keep listening after the panel starts offering candidates: servers in
|
||||
// one project can be seconds apart, and a list that froze at whoever was
|
||||
// ready first would quietly omit the rest.
|
||||
if (watch.openInPreview && (!watch.openedUrl || watch.offering)) {
|
||||
const announced = extractAnnouncedUrls(textForScan);
|
||||
const before = watch.announced.length;
|
||||
for (const url of announced) {
|
||||
if (!watch.announced.includes(url)) watch.announced.push(url);
|
||||
}
|
||||
const added = watch.announced.length - before;
|
||||
|
||||
if (watch.offering && added > 0) {
|
||||
setAnnouncedDevServers(entry.directory, watch.announced);
|
||||
} else if (!watch.openedUrl && before === 0 && watch.announced.length > 0) {
|
||||
window.clearTimeout(previewWaitTimeoutByRunKeyRef.current[runKey]);
|
||||
previewWaitTimeoutByRunKeyRef.current[runKey] = window.setTimeout(
|
||||
() => settleAutoDiscovery(runKey),
|
||||
AUTO_DISCOVER_SETTLE_MS,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const maybeUrl = !watch.openedUrl && action.autoOpenUrl === true && !watch.openInPreview
|
||||
? extractProjectActionUrl(textForScan)
|
||||
: null;
|
||||
const lastChunkId = nextChunks[nextChunks.length - 1]?.id ?? watch.lastSeenChunkId;
|
||||
|
||||
watch.lastSeenChunkId = lastChunkId;
|
||||
@@ -551,6 +569,8 @@ export const ProjectActionsButton = ({
|
||||
openedUrl: Boolean(desktopForwardUrl) || Boolean(manualOpenUrl) || hasCustomOpenUrl,
|
||||
tail: '',
|
||||
openInPreview: discovered.id === AUTO_DISCOVER_ACTION_ID,
|
||||
announced: [],
|
||||
offering: false,
|
||||
};
|
||||
|
||||
const normalizedCommand = stripControlChars(discovered.command.trim().replace(/\r\n|\r/g, '\n'));
|
||||
|
||||
@@ -10,6 +10,7 @@ import { GitHubSettings } from './GitHubSettings';
|
||||
import { VoiceSettings } from './VoiceSettings';
|
||||
import { TunnelSettings } from './TunnelSettings';
|
||||
import { OpenCodeCliSettings } from './OpenCodeCliSettings';
|
||||
import { OpenChamberToolsSettings } from './OpenChamberToolsSettings';
|
||||
import { DesktopNetworkSettings } from './DesktopNetworkSettings';
|
||||
import { KeyboardShortcutsSettings } from './KeyboardShortcutsSettings';
|
||||
import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
|
||||
@@ -52,6 +53,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
|
||||
<DefaultsSettings />
|
||||
{showDesktopNetworkSettings && <DesktopNetworkSettings />}
|
||||
{!isVSCode && <OpenCodeCliSettings />}
|
||||
{!isVSCode && <OpenChamberToolsSettings />}
|
||||
<SessionRetentionSettings />
|
||||
{isWebRuntime() && !isDesktopShell() && !isVSCode && !isCapacitorApp() && <PasskeySettings />}
|
||||
{showAbout && <AboutSettings />}
|
||||
@@ -144,6 +146,7 @@ const GeneralSectionContent: React.FC = () => {
|
||||
{showDesktopNetworkSettings && <DesktopNetworkSettings />}
|
||||
{showPasskeySettings && <PasskeySettings />}
|
||||
{!isVSCode && <OpenCodeCliSettings />}
|
||||
{!isVSCode && <OpenChamberToolsSettings />}
|
||||
<OpenChamberVisualSettings visibleSettings={[
|
||||
'fileEditorKeymap',
|
||||
'autoSaveEnabled',
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import {
|
||||
SettingsSection,
|
||||
SettingsCheckboxRow,
|
||||
SETTINGS_OPTION_STACK_CLASS,
|
||||
} from '@/components/sections/shared/SettingsSection';
|
||||
import { recordDeferredOpenCodeRestart } from '@/lib/opencode/deferredRestart';
|
||||
import { updateDesktopSettings } from '@/lib/persistence';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
|
||||
/**
|
||||
* Which OpenChamber capabilities agents are given.
|
||||
*
|
||||
* Each entry is one tool the managed OpenCode child is handed, so the choices
|
||||
* belong together and not under the CLI's own configuration — the binary path
|
||||
* is about which OpenCode runs, these are about what it can do.
|
||||
*
|
||||
* A toggle is written immediately but only reaches agents once OpenCode
|
||||
* restarts, so each one records a pending restart rather than implying the
|
||||
* change is already live.
|
||||
*/
|
||||
export const OpenChamberToolsSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const agentControlToolEnabled = useUIStore((state) => state.agentControlToolEnabled);
|
||||
const setAgentControlToolEnabled = useUIStore((state) => state.setAgentControlToolEnabled);
|
||||
const agentWebToolEnabled = useUIStore((state) => state.agentWebToolEnabled);
|
||||
const setAgentWebToolEnabled = useUIStore((state) => state.setAgentWebToolEnabled);
|
||||
|
||||
const handleAgentControlToolChange = React.useCallback((enabled: boolean) => {
|
||||
setAgentControlToolEnabled(enabled);
|
||||
void updateDesktopSettings({ agentControlToolEnabled: enabled });
|
||||
recordDeferredOpenCodeRestart('cli', { id: 'agent-control-tool' });
|
||||
}, [setAgentControlToolEnabled]);
|
||||
|
||||
const handleAgentWebToolChange = React.useCallback((enabled: boolean) => {
|
||||
setAgentWebToolEnabled(enabled);
|
||||
void updateDesktopSettings({ agentWebToolEnabled: enabled });
|
||||
recordDeferredOpenCodeRestart('cli', { id: 'agent-web-tool' });
|
||||
}, [setAgentWebToolEnabled]);
|
||||
|
||||
return (
|
||||
<SettingsSection title={t('settings.openchamber.tools.title')}>
|
||||
<div className={SETTINGS_OPTION_STACK_CLASS}>
|
||||
<SettingsCheckboxRow
|
||||
settingsItem="sessions.agent-control-tool"
|
||||
checked={agentControlToolEnabled}
|
||||
onChange={handleAgentControlToolChange}
|
||||
label={t('settings.openchamber.tools.field.agentControlTool')}
|
||||
ariaLabel={t('settings.openchamber.tools.field.agentControlToolAria')}
|
||||
info={t('settings.openchamber.tools.field.agentControlToolInfo')}
|
||||
/>
|
||||
|
||||
<SettingsCheckboxRow
|
||||
settingsItem="sessions.agent-web-tool"
|
||||
checked={agentWebToolEnabled}
|
||||
onChange={handleAgentWebToolChange}
|
||||
label={t('settings.openchamber.tools.field.agentWebTool')}
|
||||
ariaLabel={t('settings.openchamber.tools.field.agentWebToolAria')}
|
||||
info={t('settings.openchamber.tools.field.agentWebToolInfo')}
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
);
|
||||
};
|
||||
@@ -26,8 +26,6 @@ export const OpenCodeCliSettings: React.FC = () => {
|
||||
const [isSaving, setIsSaving] = React.useState(false);
|
||||
const showOpenCodeUpdateNotifications = useUIStore((state) => state.showOpenCodeUpdateNotifications);
|
||||
const setShowOpenCodeUpdateNotifications = useUIStore((state) => state.setShowOpenCodeUpdateNotifications);
|
||||
const agentControlToolEnabled = useUIStore((state) => state.agentControlToolEnabled);
|
||||
const setAgentControlToolEnabled = useUIStore((state) => state.setAgentControlToolEnabled);
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
@@ -102,11 +100,6 @@ export const OpenCodeCliSettings: React.FC = () => {
|
||||
void updateDesktopSettings({ showOpenCodeUpdateNotifications: enabled });
|
||||
}, [setShowOpenCodeUpdateNotifications]);
|
||||
|
||||
const handleAgentControlToolChange = React.useCallback((enabled: boolean) => {
|
||||
setAgentControlToolEnabled(enabled);
|
||||
void updateDesktopSettings({ agentControlToolEnabled: enabled });
|
||||
}, [setAgentControlToolEnabled]);
|
||||
|
||||
return (
|
||||
<SettingsSection title={t('settings.openchamber.opencodeCli.title')}>
|
||||
<div className="space-y-0.5">
|
||||
@@ -160,15 +153,6 @@ export const OpenCodeCliSettings: React.FC = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<SettingsCheckboxRow
|
||||
settingsItem="sessions.agent-control-tool"
|
||||
checked={agentControlToolEnabled}
|
||||
onChange={handleAgentControlToolChange}
|
||||
label={t('settings.openchamber.opencodeCli.field.agentControlTool')}
|
||||
ariaLabel={t('settings.openchamber.opencodeCli.field.agentControlToolAria')}
|
||||
info={t('settings.openchamber.opencodeCli.field.agentControlToolInfo')}
|
||||
/>
|
||||
|
||||
<div className="flex justify-start py-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
|
||||
@@ -654,9 +654,12 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
|
||||
const unsubscribe = subscribeOpenchamberEvents((event) => {
|
||||
if (event.type === 'scheduled-task-ran') {
|
||||
needsGlobalRefresh = true;
|
||||
} else {
|
||||
} else if (event.type === 'session-created') {
|
||||
sessionDirectories.add(event.directory);
|
||||
requestWorktreeDiscovery();
|
||||
} else {
|
||||
// Browser control events carry no session state; nothing to refresh.
|
||||
return;
|
||||
}
|
||||
if (refreshTimeout) {
|
||||
clearTimeout(refreshTimeout);
|
||||
|
||||
Reference in New Issue
Block a user