Release v1.01 Enhanced: Vi Control, TUI Gen5, Core Stability

2025-12-20 01:12:45 +04:00
parent 2407c42eb9
commit 142aaeee1e
254 changed files with 44888 additions and 31025 deletions
--- a/bin/ui/components/BrowserInspector.mjs
+++ b/bin/ui/components/BrowserInspector.mjs
@@ -0,0 +1,106 @@
+/**
+ * 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 };