107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
/**
|
|
* Browser Inspector - Browser-Use inspired
|
|
*
|
|
* Shows: URL, title, tabs, page stats, interactive elements
|
|
*
|
|
* Credit: https://github.com/browser-use/browser-use
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import { Box, Text } from 'ink';
|
|
import { colors } from '../../tui-theme.mjs';
|
|
import { getCapabilities } from '../../terminal-profile.mjs';
|
|
|
|
const h = React.createElement;
|
|
|
|
/**
|
|
* Browser Inspector Component
|
|
*/
|
|
const BrowserInspector = ({
|
|
url = null,
|
|
title = null,
|
|
tabs = [],
|
|
pageInfo = null,
|
|
pageStats = null,
|
|
interactiveElements = [],
|
|
screenshot = null,
|
|
isExpanded = false,
|
|
width = 40
|
|
}) => {
|
|
const caps = getCapabilities();
|
|
const [expanded, setExpanded] = useState(isExpanded);
|
|
|
|
// Truncate URL for display
|
|
const displayUrl = url
|
|
? (url.length > width - 10 ? url.slice(0, width - 13) + '...' : url)
|
|
: 'No page';
|
|
|
|
// Collapsed view
|
|
if (!expanded) {
|
|
return h(Box, { flexDirection: 'row' },
|
|
h(Text, { color: colors.muted, bold: true }, '🌐 Browser: '),
|
|
h(Text, { color: colors.accent }, displayUrl)
|
|
);
|
|
}
|
|
|
|
// Expanded view
|
|
return h(Box, { flexDirection: 'column', width },
|
|
// Header
|
|
h(Text, { color: colors.accent, bold: true }, '🌐 Browser Inspector'),
|
|
|
|
// URL
|
|
h(Box, { flexDirection: 'row', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, 'URL: '),
|
|
h(Text, { color: colors.accent }, displayUrl)
|
|
),
|
|
|
|
// Title
|
|
title ? h(Box, { flexDirection: 'row', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, 'Title: '),
|
|
h(Text, { color: colors.fg }, title.slice(0, width - 10))
|
|
) : null,
|
|
|
|
// Tabs
|
|
tabs.length > 0 ? h(Box, { flexDirection: 'column', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, `Tabs (${tabs.length}):`),
|
|
...tabs.slice(0, 3).map((tab, i) =>
|
|
h(Text, { key: i, color: colors.muted, dimColor: true },
|
|
` ${i + 1}. ${(tab.title || tab.url || '').slice(0, width - 8)}`
|
|
)
|
|
),
|
|
tabs.length > 3
|
|
? h(Text, { color: colors.muted, dimColor: true }, ` +${tabs.length - 3} more`)
|
|
: null
|
|
) : null,
|
|
|
|
// Page stats
|
|
pageStats ? h(Box, { flexDirection: 'row', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, 'Stats: '),
|
|
h(Text, { color: colors.muted, dimColor: true },
|
|
`${pageStats.links || 0} links, ${pageStats.buttons || 0} buttons, ${pageStats.inputs || 0} inputs`
|
|
)
|
|
) : null,
|
|
|
|
// Interactive elements (first 5)
|
|
interactiveElements.length > 0 ? h(Box, { flexDirection: 'column', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, 'Elements:'),
|
|
...interactiveElements.slice(0, 5).map((el, i) =>
|
|
h(Text, { key: i, color: colors.muted, dimColor: true },
|
|
` [${el.id || i}] ${el.tag}: ${(el.text || el.name || '').slice(0, 25)}`
|
|
)
|
|
),
|
|
interactiveElements.length > 5
|
|
? h(Text, { color: colors.muted, dimColor: true }, ` +${interactiveElements.length - 5} more`)
|
|
: null
|
|
) : null,
|
|
|
|
// Screenshot link
|
|
screenshot ? h(Box, { flexDirection: 'row', paddingLeft: 1 },
|
|
h(Text, { color: colors.muted }, '📷 '),
|
|
h(Text, { color: colors.accent, underline: true }, 'View screenshot')
|
|
) : null
|
|
);
|
|
};
|
|
|
|
export default BrowserInspector;
|
|
export { BrowserInspector };
|