diff --git a/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx b/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx index 6cd8a50d1..f50d3ad8c 100644 --- a/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx +++ b/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx @@ -1,5 +1,6 @@ import { ArrowsLeftRight, Buildings, Camera, Eye, Users, Warning } from '@phosphor-icons/react' +import { Box, Typography } from '@mui/material' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui' import type { AppLevel, Tenant, User } from '@/lib/level-types' @@ -8,7 +9,6 @@ import { GodUsersTab } from '../../level5/tabs/GodUsersTab' import { PowerTransferTab } from '../../level5/tabs/power-transfer/PowerTransferTab' import { PreviewTab } from '../../level5/tabs/PreviewTab' import { TenantsTab } from '../../level5/tabs/TenantsTab' -import { ScreenshotAnalyzer } from '../../misc/demos/ScreenshotAnalyzer' import { ResultsPane } from '../sections/ResultsPane' interface Level5NavigatorProps { @@ -97,7 +97,14 @@ export function Level5Navigator({ - + + + Screenshot Analyzer is now a Lua package + + + See packages/screenshot_analyzer for the implementation + + diff --git a/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx b/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx deleted file mode 100644 index bb737d5eb..000000000 --- a/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/** - * DBAL Demo Component - * - * Demonstrates the integration of the DBAL TypeScript client - * with the MetaBuilder application. - */ - -import { useMemo, useState } from 'react' - -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui' -import { useDBAL } from '@/hooks/use-dbal/use-dbal' - -import { BlobStorageDemo } from './dbal/BlobStorageDemo' -import { CachedDataDemo } from './dbal/CachedDataDemo' -import { ConnectionForm } from './dbal/ConnectionForm' -import { DBAL_CONTAINER_CLASS, DBAL_TAB_GRID_CLASS, DBALTabConfig } from './dbal/dbal-demo.utils' -import { KVStoreDemo } from './dbal/KVStoreDemo' -import { LogsPanel } from './dbal/LogsPanel' -import { ResultPanel } from './dbal/ResultPanel' - -const tabs: DBALTabConfig[] = [ - { value: 'kv', label: 'Key-Value Store', content: }, - { value: 'blob', label: 'Blob Storage', content: }, - { value: 'cache', label: 'Cached Data', content: }, -] - -export function DBALDemo() { - const { isReady, error } = useDBAL() - const [logs, setLogs] = useState([]) - const [latestResult, setLatestResult] = useState(null) - - const statusMessage = useMemo(() => { - if (error) return `Error: ${error}` - return isReady ? 'Connected' : 'Initializing...' - }, [error, isReady]) - - const handleConnect = (config: { endpoint: string; apiKey: string }) => { - const timestamp = new Date().toLocaleTimeString() - setLogs(current => [...current, `${timestamp}: Connected to ${config.endpoint}`]) - setLatestResult({ - endpoint: config.endpoint, - apiKey: config.apiKey ? '***' : 'Not provided', - ready: isReady, - }) - } - - return ( -
-
-

DBAL Integration Demo

-

- Demonstration of the TypeScript DBAL client integrated with MetaBuilder -

-
- -
- - -
- -
- -
- - - - {tabs.map(tab => ( - - {tab.label} - - ))} - - - {tabs.map(tab => ( - - {tab.content} - - ))} - -
- ) -} diff --git a/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx b/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx deleted file mode 100644 index 223bd9d13..000000000 --- a/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import { Box, Card, CardContent, CardHeader, Chip, Grid, Typography } from '@mui/material' -import { useState } from 'react' -import { toast } from 'sonner' - -import { captureDomSnapshot } from '@/lib/screenshot/capture-dom-snapshot' -import { requestScreenshotAnalysis } from '@/lib/screenshot/request-screenshot-analysis' -import type { ScreenshotAnalysisResult } from '@/lib/screenshot/types' - -import { ResultPanel } from './screenshot-analyzer/ResultPanel' -import { UploadSection } from './screenshot-analyzer/UploadSection' - -export function ScreenshotAnalyzer() { - const [isCapturing, setIsCapturing] = useState(false) - const [screenshotData, setScreenshotData] = useState(null) - const [analysisReport, setAnalysisReport] = useState('') - const [analysisResult, setAnalysisResult] = useState(null) - const [isAnalyzing, setIsAnalyzing] = useState(false) - - const captureScreenshot = async () => { - setIsCapturing(true) - try { - toast.info('Capturing screenshot...') - const dataUrl = await captureDomSnapshot() - setScreenshotData(dataUrl) - toast.success('Screenshot captured!') - - await analyzeScreenshot() - } catch (error) { - console.error('Error capturing screenshot:', error) - toast.error('Failed to capture screenshot') - } finally { - setIsCapturing(false) - } - } - - const analyzeScreenshot = async () => { - setIsAnalyzing(true) - try { - const textSample = document.body.innerText.substring(0, 3000) - const htmlSample = document.body.innerHTML.substring(0, 3000) - - const result = await requestScreenshotAnalysis({ - title: document.title, - url: window.location.href, - viewport: { - width: window.innerWidth, - height: window.innerHeight, - }, - textSample, - htmlSample, - }) - - setAnalysisReport(result.report) - setAnalysisResult(result) - toast.success('Analysis complete') - } catch (error) { - console.error('Error analyzing:', error) - setAnalysisReport('') - setAnalysisResult(null) - toast.error('Failed to analyze screenshot') - } finally { - setIsAnalyzing(false) - } - } - - const downloadScreenshot = () => { - if (!screenshotData) return - - const link = document.createElement('a') - link.href = screenshotData - link.download = `screenshot-${Date.now()}.png` - link.click() - toast.success('Screenshot downloaded!') - } - - return ( - - - - - Screenshot Analyzer - - Capture and analyze the current page - - - - - - - - - - - - - - - Title: - - - {document.title} - - - - - URL: - - - {typeof window !== 'undefined' ? window.location.href : ''} - - - - - Viewport: - - - {typeof window !== 'undefined' - ? `${window.innerWidth} × ${window.innerHeight}` - : ''} - - - - - User Agent: - - - {typeof navigator !== 'undefined' - ? navigator.userAgent.substring(0, 50) + '...' - : ''} - - - - - - - ) -} diff --git a/frontends/nextjs/src/components/misc/demos/dbal/BlobStorageDemo.tsx b/frontends/nextjs/src/components/misc/demos/dbal/BlobStorageDemo.tsx deleted file mode 100644 index 0118c48ee..000000000 --- a/frontends/nextjs/src/components/misc/demos/dbal/BlobStorageDemo.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { useState } from 'react' -import { toast } from 'sonner' - -import { - Button, - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, - Input, - Label, -} from '@/components/ui' -import { useBlobStorage } from '@/hooks/useDBAL' - -import { renderInitializationBadge } from './dbal-demo.utils' - -export function BlobStorageDemo() { - const blob = useBlobStorage() - const [fileName, setFileName] = useState('demo.txt') - const [fileContent, setFileContent] = useState('Hello from DBAL blob storage!') - const [files, setFiles] = useState([]) - const [downloadedContent, setDownloadedContent] = useState(null) - - const handleUpload = async () => { - try { - const encoder = new TextEncoder() - const data = encoder.encode(fileContent) - await blob.upload(fileName, data, { - 'content-type': 'text/plain', - 'uploaded-at': new Date().toISOString(), - }) - handleList() - } catch (error) { - console.error('Upload Error:', error) - } - } - - const handleDownload = async () => { - try { - const data = await blob.download(fileName) - const decoder = new TextDecoder() - const content = decoder.decode(data) - setDownloadedContent(content) - toast.success('Downloaded successfully') - } catch (error) { - console.error('Download Error:', error) - } - } - - const handleDelete = async () => { - try { - await blob.delete(fileName) - setDownloadedContent(null) - handleList() - } catch (error) { - console.error('Delete Error:', error) - } - } - - const handleList = async () => { - try { - const fileList = await blob.list() - setFiles(fileList) - toast.success(`Found ${fileList.length} files`) - } catch (error) { - console.error('List Error:', error) - } - } - - return ( - - - Blob Storage Operations - Upload, download, and manage binary data - - -
- - setFileName(e.target.value)} - placeholder="file.txt" - /> -
-
- -