Initial commit - RUSTLE Wails implementation
- Added Go-based Wails application for RUSTLE UCXL browser - Implemented basic application structure and configuration - Added project documentation and setup instructions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
13
rustle/frontend/index.html
Normal file
13
rustle/frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>rustle</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./src/main.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1419
rustle/frontend/package-lock.json
generated
Normal file
1419
rustle/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
rustle/frontend/package.json
Normal file
22
rustle/frontend/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.17",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@vitejs/plugin-react": "^2.0.1",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.7"
|
||||
}
|
||||
}
|
||||
1
rustle/frontend/package.json.md5
Executable file
1
rustle/frontend/package.json.md5
Executable file
@@ -0,0 +1 @@
|
||||
f26173c7304a0bf8ea5c86eb567e7db2
|
||||
277
rustle/frontend/src/App.css
Normal file
277
rustle/frontend/src/App.css
Normal file
@@ -0,0 +1,277 @@
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Tab Styles */
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 2px solid #e1e8ed;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #657786;
|
||||
transition: all 0.2s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: #1da1f2;
|
||||
background-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
padding: 12px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #1da1f2;
|
||||
border-bottom: 2px solid #1da1f2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
color: #14171a;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="text"], .uri-input, .search-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ccd6dd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, .uri-input:focus, .search-input:focus {
|
||||
outline: none;
|
||||
border-color: #1da1f2;
|
||||
box-shadow: 0 0 0 2px rgba(29, 161, 242, 0.1);
|
||||
}
|
||||
|
||||
.markdown-editor {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ccd6dd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
resize: vertical;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.markdown-editor:focus {
|
||||
outline: none;
|
||||
border-color: #1da1f2;
|
||||
box-shadow: 0 0 0 2px rgba(29, 161, 242, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
background-color: #1da1f2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background-color: #1991da;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #aab8c2;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Response Section */
|
||||
.response-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.response-section h3 {
|
||||
margin-bottom: 10px;
|
||||
color: #14171a;
|
||||
}
|
||||
|
||||
.response {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.response:empty {
|
||||
color: #657786;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.response:empty::before {
|
||||
content: "Response will appear here...";
|
||||
}
|
||||
|
||||
/* DHT and Network specific styles */
|
||||
.dht-status {
|
||||
color: #657786;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
background: #f7f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.network-info p {
|
||||
margin: 0 0 12px 0;
|
||||
color: #14171a;
|
||||
}
|
||||
|
||||
.network-info ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.network-info li {
|
||||
margin: 6px 0;
|
||||
color: #657786;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.network-info strong {
|
||||
color: #14171a;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e1e8ed;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.status-connected {
|
||||
color: #17bf63;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
color: #e0245e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: #ffad1f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Demo Content Styles */
|
||||
.demo-content {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
font-weight: 600;
|
||||
color: #14171a;
|
||||
min-width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-row select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccd6dd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-row select:focus {
|
||||
outline: none;
|
||||
border-color: #1da1f2;
|
||||
box-shadow: 0 0 0 2px rgba(29, 161, 242, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.form-row input[type="text"],
|
||||
.form-row .uri-input,
|
||||
.form-row .search-input {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-row label {
|
||||
min-width: auto;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
590
rustle/frontend/src/App.tsx
Normal file
590
rustle/frontend/src/App.tsx
Normal file
@@ -0,0 +1,590 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import './App.css';
|
||||
import { ContentRenderer } from './components/ContentRenderer';
|
||||
import { createMockEnvelope, Envelope } from './types/Envelope';
|
||||
import * as WailsApp from './wails/go/main/App';
|
||||
|
||||
function App() {
|
||||
const [activeTab, setActiveTab] = useState<'get' | 'post' | 'search' | 'renderer'>('renderer');
|
||||
const [uri, setUri] = useState('ucxl://rustle:browser@demo:showcase/*^/sample.md');
|
||||
const [response, setResponse] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [currentEnvelope, setCurrentEnvelope] = useState<Envelope | null>(null);
|
||||
const [renderMode, setRenderMode] = useState<'full' | 'preview' | 'minimal'>('full');
|
||||
const [bzzzStatus, setBzzzStatus] = useState<any>(null);
|
||||
|
||||
// Form states
|
||||
const [markdownContent, setMarkdownContent] = useState('# Example Document\\n\\nThis is example markdown content.');
|
||||
const [author, setAuthor] = useState('User');
|
||||
const [title, setTitle] = useState('Test Document');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [searchTags, setSearchTags] = useState('');
|
||||
|
||||
// Load BZZZ status on mount
|
||||
useEffect(() => {
|
||||
const loadBZZZStatus = async () => {
|
||||
try {
|
||||
const status = await WailsApp.GetBZZZStatus();
|
||||
setBzzzStatus(status);
|
||||
} catch (error) {
|
||||
console.error('Failed to load BZZZ status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadBZZZStatus();
|
||||
// Refresh status every 30 seconds
|
||||
const interval = setInterval(loadBZZZStatus, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Function to fetch real content from backend
|
||||
const fetchRealContent = async (uri: string): Promise<Envelope | null> => {
|
||||
try {
|
||||
const result = await WailsApp.GetUCXLContent(uri);
|
||||
|
||||
return {
|
||||
id: result.content_hash.substring(0, 8), // Use hash substring as ID
|
||||
ucxl_uri: { toString: () => result.ucxl_uri },
|
||||
content: {
|
||||
raw: result.content.raw,
|
||||
content_type: result.content.content_type,
|
||||
encoding: result.content.encoding
|
||||
},
|
||||
metadata: {
|
||||
author: result.metadata.author,
|
||||
title: result.metadata.title,
|
||||
tags: result.metadata.tags ? result.metadata.tags.split(',') : [],
|
||||
source: result.metadata.source,
|
||||
context_data: {}
|
||||
},
|
||||
timestamp: result.timestamp,
|
||||
version: result.version,
|
||||
content_hash: result.content_hash
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch content:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// Function to validate UCXL address
|
||||
const validateAddress = async (uri: string) => {
|
||||
try {
|
||||
const result = await WailsApp.ValidateUCXLAddress(uri);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Failed to validate address:', error);
|
||||
return { valid: false, error: 'Validation failed' };
|
||||
}
|
||||
};
|
||||
|
||||
// Demo content creation functions
|
||||
const createDemoMarkdownEnvelope = (): Envelope => {
|
||||
return createMockEnvelope(
|
||||
'ucxl://claude:coder@chorus:content-demo/docs/markdown-sample.md',
|
||||
`# RUSTLE - UCXL Content Browser
|
||||
|
||||
This is a **demonstration** of the RUSTLE content rendering engine running on **Wails**.
|
||||
|
||||
## Features
|
||||
|
||||
- Native desktop application with Go backend
|
||||
- React-based content rendering components
|
||||
- Multi-format content support:
|
||||
- Markdown with syntax highlighting
|
||||
- Interactive JSON visualization
|
||||
- Code rendering for multiple languages
|
||||
- Image display with zoom functionality
|
||||
- UCXL contextual metadata rendering
|
||||
|
||||
### Code Example
|
||||
|
||||
\`\`\`go
|
||||
package main
|
||||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"log"
|
||||
|
||||
"github.com/wailsapp/wails/v2/pkg/runtime"
|
||||
)
|
||||
|
||||
// App struct
|
||||
type App struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
// NewApp creates a new App application struct
|
||||
func NewApp() *App {
|
||||
return &App{}
|
||||
}
|
||||
|
||||
// startup is called when the app starts
|
||||
func (a *App) startup(ctx context.Context) {
|
||||
a.ctx = ctx
|
||||
runtime.LogInfo(ctx, "RUSTLE started successfully!")
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
### Integration with BZZZ
|
||||
|
||||
RUSTLE integrates seamlessly with the BZZZ distributed system:
|
||||
|
||||
1. **SLURP Integration** - Contextual intelligence processing
|
||||
2. **COOEE Messaging** - Agent-to-agent communication
|
||||
3. **DHT Storage** - Distributed content storage
|
||||
4. **UCXL Addressing** - Universal contextual locators
|
||||
|
||||
This native desktop application provides a much cleaner and more reliable experience than the previous Tauri implementation.`,
|
||||
'text/markdown',
|
||||
{
|
||||
title: 'RUSTLE Wails Demo',
|
||||
author: 'BZZZ Team',
|
||||
tags: ['demo', 'markdown', 'wails', 'native-app'],
|
||||
source: 'rustle-wails-demo',
|
||||
context_data: {
|
||||
demo_type: 'markdown',
|
||||
platform: 'wails',
|
||||
features: ['native-desktop', 'go-backend', 'react-frontend'],
|
||||
complexity: 'medium'
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const createDemoJSONEnvelope = (): Envelope => {
|
||||
const jsonContent = {
|
||||
application_info: {
|
||||
name: "RUSTLE",
|
||||
platform: "Wails v2",
|
||||
backend: "Go",
|
||||
frontend: "React + TypeScript"
|
||||
},
|
||||
system_integration: {
|
||||
bzzz_connected: true,
|
||||
slurp_enabled: true,
|
||||
cooee_messaging: true,
|
||||
dht_available: true
|
||||
},
|
||||
performance_metrics: {
|
||||
startup_time_ms: 250,
|
||||
memory_usage_mb: 45,
|
||||
render_performance: "excellent",
|
||||
native_integration: true
|
||||
},
|
||||
content_capabilities: {
|
||||
markdown_rendering: true,
|
||||
code_highlighting: true,
|
||||
json_visualization: true,
|
||||
image_display: true,
|
||||
context_metadata: true,
|
||||
supported_formats: [
|
||||
"text/markdown",
|
||||
"application/json",
|
||||
"text/x-go",
|
||||
"text/x-rust",
|
||||
"application/javascript",
|
||||
"text/x-python",
|
||||
"image/png",
|
||||
"image/jpeg"
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
return createMockEnvelope(
|
||||
'ucxl://rustle:system@wails:info/app/capabilities.json',
|
||||
JSON.stringify(jsonContent, null, 2),
|
||||
'application/json',
|
||||
{
|
||||
title: 'RUSTLE Application Info',
|
||||
author: 'RUSTLE System',
|
||||
tags: ['json', 'app-info', 'capabilities', 'wails'],
|
||||
source: 'rustle-system-info',
|
||||
context_data: {
|
||||
demo_type: 'json',
|
||||
data_structure: 'nested',
|
||||
interactive: true,
|
||||
platform: 'wails'
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const createDemoCodeEnvelope = (): Envelope => {
|
||||
const goCode = `package main
|
||||
|
||||
import (
|
||||
"context"
|
||||
"embed"
|
||||
"fmt"
|
||||
|
||||
"github.com/wailsapp/wails/v2"
|
||||
"github.com/wailsapp/wails/v2/pkg/options"
|
||||
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
|
||||
)
|
||||
|
||||
//go:embed all:frontend/dist
|
||||
var assets embed.FS
|
||||
|
||||
// App struct
|
||||
type App struct {
|
||||
ctx context.Context
|
||||
}
|
||||
|
||||
// NewApp creates a new App application struct
|
||||
func NewApp() *App {
|
||||
return &App{}
|
||||
}
|
||||
|
||||
// startup is called when the app starts
|
||||
func (a *App) startup(ctx context.Context) {
|
||||
a.ctx = ctx
|
||||
}
|
||||
|
||||
// GetUCXLContent retrieves content by UCXL address
|
||||
func (a *App) GetUCXLContent(uri string) (map[string]interface{}, error) {
|
||||
// Integration with BZZZ/SLURP system
|
||||
content, err := bzzz.RetrieveContent(uri)
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("failed to retrieve content: %w", err)
|
||||
}
|
||||
|
||||
// Process through SLURP if needed
|
||||
if contextRequired(uri) {
|
||||
content, err = slurp.ProcessContext(content)
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("context processing failed: %w", err)
|
||||
}
|
||||
}
|
||||
|
||||
return content, nil
|
||||
}
|
||||
|
||||
// PostUCXLContent stores content at UCXL address
|
||||
func (a *App) PostUCXLContent(uri string, content string) error {
|
||||
envelope := &bzzz.Envelope{
|
||||
UCXL: uri,
|
||||
Content: content,
|
||||
Timestamp: time.Now(),
|
||||
}
|
||||
|
||||
return bzzz.StoreContent(envelope)
|
||||
}
|
||||
|
||||
func main() {
|
||||
// Create an instance of the app structure
|
||||
app := NewApp()
|
||||
|
||||
// Create application with options
|
||||
err := wails.Run(&options.App{
|
||||
Title: "RUSTLE - UCXL Content Browser",
|
||||
Width: 1200,
|
||||
Height: 800,
|
||||
AssetServer: &assetserver.Options{
|
||||
Assets: assets,
|
||||
},
|
||||
OnStartup: app.startup,
|
||||
})
|
||||
|
||||
if err != nil {
|
||||
println("Error:", err.Error())
|
||||
}
|
||||
}`;
|
||||
|
||||
return createMockEnvelope(
|
||||
'ucxl://rustle:wails@main:app/src/main.go',
|
||||
goCode,
|
||||
'text/x-go',
|
||||
{
|
||||
title: 'RUSTLE Wails Main Application',
|
||||
author: 'BZZZ Team',
|
||||
tags: ['go', 'wails', 'main', 'application'],
|
||||
source: 'rustle-main-go',
|
||||
context_data: {
|
||||
demo_type: 'code',
|
||||
language: 'go',
|
||||
framework: 'wails',
|
||||
complexity: 'high'
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container" style={{ padding: 0, margin: 0, height: '100vh' }}>
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white',
|
||||
padding: '16px',
|
||||
textAlign: 'center',
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
🚀 RUSTLE - UCXL Content Browser (Wails)
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="tabs" style={{ padding: '16px', background: '#f8f9fa' }}>
|
||||
<button
|
||||
className={activeTab === 'renderer' ? 'tab-active' : 'tab'}
|
||||
onClick={() => setActiveTab('renderer')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
margin: '0 8px',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
background: activeTab === 'renderer' ? '#007bff' : '#e9ecef',
|
||||
color: activeTab === 'renderer' ? 'white' : '#495057',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Content Renderer
|
||||
</button>
|
||||
<button
|
||||
className={activeTab === 'get' ? 'tab-active' : 'tab'}
|
||||
onClick={() => setActiveTab('get')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
margin: '0 8px',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
background: activeTab === 'get' ? '#007bff' : '#e9ecef',
|
||||
color: activeTab === 'get' ? 'white' : '#495057',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Get Content
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="tab-content" style={{ padding: '16px', height: 'calc(100vh - 140px)', overflow: 'auto' }}>
|
||||
{activeTab === 'renderer' && (
|
||||
<div className="section">
|
||||
<div className="form-row" style={{ marginBottom: '16px' }}>
|
||||
<label htmlFor="render-mode" style={{ marginRight: '12px' }}>Render Mode:</label>
|
||||
<select
|
||||
id="render-mode"
|
||||
value={renderMode}
|
||||
onChange={(e) => setRenderMode(e.target.value as 'full' | 'preview' | 'minimal')}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
marginRight: '12px',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<option value="full">Full</option>
|
||||
<option value="preview">Preview</option>
|
||||
<option value="minimal">Minimal</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const envelope = await fetchRealContent('ucxl://rustle:browser@demo:showcase/*^/sample.md');
|
||||
if (envelope) setCurrentEnvelope(envelope);
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
margin: '0 6px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: '#28a745',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Load Real Markdown
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const envelope = await fetchRealContent('ucxl://rustle:browser@demo:showcase/*^/data.json');
|
||||
if (envelope) setCurrentEnvelope(envelope);
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
margin: '0 6px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: '#17a2b8',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Load Real JSON
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const envelope = await fetchRealContent('ucxl://rustle:browser@demo:showcase/*^/main.go');
|
||||
if (envelope) setCurrentEnvelope(envelope);
|
||||
}}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
margin: '0 6px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: '#ffc107',
|
||||
color: '#212529',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Load Real Code
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCurrentEnvelope(createDemoMarkdownEnvelope())}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
margin: '0 6px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: '#6c757d',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Mock Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{currentEnvelope && (
|
||||
<div className="demo-content">
|
||||
<ContentRenderer
|
||||
envelope={currentEnvelope}
|
||||
renderMode={renderMode}
|
||||
showMetadata={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!currentEnvelope && (
|
||||
<div style={{
|
||||
textAlign: 'center',
|
||||
padding: '60px',
|
||||
color: '#6c757d',
|
||||
fontSize: '18px'
|
||||
}}>
|
||||
👆 Click a demo button above to test the content rendering engine
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'get' && (
|
||||
<div className="section">
|
||||
<h3>Retrieve Content</h3>
|
||||
|
||||
{/* BZZZ Status */}
|
||||
{bzzzStatus && (
|
||||
<div style={{
|
||||
marginBottom: '16px',
|
||||
padding: '12px',
|
||||
background: '#f8f9fa',
|
||||
border: '1px solid #dee2e6',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
<strong>BZZZ Status:</strong>
|
||||
<span style={{ color: bzzzStatus.connected ? '#28a745' : '#dc3545', marginLeft: '8px' }}>
|
||||
{bzzzStatus.connected ? 'Connected' : 'Mock Mode'}
|
||||
</span>
|
||||
<span style={{ marginLeft: '16px' }}>
|
||||
Agent: {bzzzStatus.agent}/{bzzzStatus.role} | Project: {bzzzStatus.project} | Peers: {bzzzStatus.peers}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-row">
|
||||
<input
|
||||
type="text"
|
||||
value={uri}
|
||||
onChange={(e) => setUri(e.target.value)}
|
||||
placeholder="ucxl://agent:role@project:task/temporal/path"
|
||||
style={{
|
||||
width: '70%',
|
||||
padding: '8px 12px',
|
||||
marginRight: '12px',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const envelope = await fetchRealContent(uri);
|
||||
if (envelope) {
|
||||
setResponse(JSON.stringify(envelope, null, 2));
|
||||
setCurrentEnvelope(envelope);
|
||||
} else {
|
||||
setResponse('Failed to fetch content');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: loading ? '#6c757d' : '#007bff',
|
||||
color: 'white',
|
||||
cursor: loading ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Loading...' : 'Get Content'}
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const validation = await validateAddress(uri);
|
||||
setResponse(JSON.stringify(validation, null, 2));
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
margin: '0 8px',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
background: '#6f42c1',
|
||||
color: 'white',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Validate Address
|
||||
</button>
|
||||
</div>
|
||||
<div style={{
|
||||
marginTop: '16px',
|
||||
padding: '12px',
|
||||
background: '#f8f9fa',
|
||||
border: '1px solid #dee2e6',
|
||||
borderRadius: '4px',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '14px',
|
||||
minHeight: '100px',
|
||||
maxHeight: '400px',
|
||||
overflow: 'auto'
|
||||
}}>
|
||||
{response || 'Content will appear here...'}
|
||||
</div>
|
||||
|
||||
{/* If we have current envelope, show it rendered */}
|
||||
{currentEnvelope && (
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<h4>Rendered Content:</h4>
|
||||
<div className="demo-content">
|
||||
<ContentRenderer
|
||||
envelope={currentEnvelope}
|
||||
renderMode={renderMode}
|
||||
showMetadata={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
93
rustle/frontend/src/assets/fonts/OFL.txt
Normal file
93
rustle/frontend/src/assets/fonts/OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
rustle/frontend/src/assets/fonts/nunito-v16-latin-regular.woff2
Normal file
BIN
rustle/frontend/src/assets/fonts/nunito-v16-latin-regular.woff2
Normal file
Binary file not shown.
BIN
rustle/frontend/src/assets/images/logo-universal.png
Normal file
BIN
rustle/frontend/src/assets/images/logo-universal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
99
rustle/frontend/src/components/ContentRenderer.css
Normal file
99
rustle/frontend/src/components/ContentRenderer.css
Normal file
@@ -0,0 +1,99 @@
|
||||
.content-renderer {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.content-renderer--minimal {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content-renderer--preview {
|
||||
max-height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.content-renderer--minimal .content-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content-unknown {
|
||||
padding: 16px;
|
||||
background: #f9f9f9;
|
||||
border-left: 4px solid #ff9800;
|
||||
}
|
||||
|
||||
.content-unknown h4 {
|
||||
margin: 0 0 12px 0;
|
||||
color: #ff9800;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content-raw {
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 14px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.content-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.content-stats span {
|
||||
padding: 2px 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.content-renderer {
|
||||
background: #1e1e1e;
|
||||
border-color: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.content-unknown {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.content-raw {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
background: #2d2d2d;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.content-stats span {
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
118
rustle/frontend/src/components/ContentRenderer.tsx
Normal file
118
rustle/frontend/src/components/ContentRenderer.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import React from 'react';
|
||||
import { Envelope } from '../types/Envelope';
|
||||
import { MarkdownRenderer } from './renderers/MarkdownRenderer';
|
||||
import { CodeRenderer } from './renderers/CodeRenderer';
|
||||
import { JSONRenderer } from './renderers/JSONRenderer';
|
||||
import { ImageRenderer } from './renderers/ImageRenderer';
|
||||
// import { ContextRenderer as UCXLContextRenderer } from './renderers/ContextRenderer';
|
||||
import { ErrorRenderer } from './renderers/ErrorRenderer';
|
||||
import { MetadataRenderer } from './renderers/MetadataRenderer';
|
||||
import './ContentRenderer.css';
|
||||
|
||||
interface ContentRendererProps {
|
||||
envelope: Envelope;
|
||||
showMetadata?: boolean;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
export const ContentRenderer: React.FC<ContentRendererProps> = ({
|
||||
envelope,
|
||||
showMetadata = true,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const renderContent = () => {
|
||||
const contentType = envelope.content.content_type;
|
||||
const content = envelope.content.raw;
|
||||
|
||||
try {
|
||||
switch (contentType) {
|
||||
// Markdown content
|
||||
case 'text/markdown':
|
||||
case 'text/x-markdown':
|
||||
return <MarkdownRenderer content={content} renderMode={renderMode} />;
|
||||
|
||||
// Code files
|
||||
case 'text/plain':
|
||||
case 'text/x-go':
|
||||
case 'text/x-rust':
|
||||
case 'text/x-python':
|
||||
case 'text/x-javascript':
|
||||
case 'text/x-typescript':
|
||||
case 'application/javascript':
|
||||
case 'application/typescript':
|
||||
return <CodeRenderer content={content} contentType={contentType} renderMode={renderMode} />;
|
||||
|
||||
// JSON and structured data
|
||||
case 'application/json':
|
||||
case 'text/json':
|
||||
return <JSONRenderer content={content} renderMode={renderMode} />;
|
||||
|
||||
// Image content
|
||||
case 'image/png':
|
||||
case 'image/jpeg':
|
||||
case 'image/jpg':
|
||||
case 'image/gif':
|
||||
case 'image/webp':
|
||||
case 'image/svg+xml':
|
||||
return <ImageRenderer content={content} contentType={contentType} renderMode={renderMode} />;
|
||||
|
||||
// UCXL contextual content
|
||||
case 'application/ucxl-context':
|
||||
case 'application/ucxl-metadata':
|
||||
// return <UCXLContextRenderer envelope={envelope} renderMode={renderMode} />;
|
||||
return <div className="context-placeholder">Context rendering temporarily disabled</div>;
|
||||
|
||||
// Decision records and reports
|
||||
case 'application/ucxl-decision':
|
||||
case 'application/ucxl-report':
|
||||
return <MarkdownRenderer
|
||||
content={content}
|
||||
renderMode={renderMode}
|
||||
specialType="decision-record"
|
||||
/>;
|
||||
|
||||
// Unknown or unsupported content types
|
||||
default:
|
||||
return (
|
||||
<div className="content-unknown">
|
||||
<h4>Unknown Content Type: {contentType}</h4>
|
||||
<pre className="content-raw">{content}</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
return <ErrorRenderer error={error} contentType={contentType} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`content-renderer content-renderer--${renderMode}`}>
|
||||
{showMetadata && (
|
||||
<MetadataRenderer
|
||||
metadata={envelope.metadata}
|
||||
uri={envelope.ucxl_uri}
|
||||
timestamp={envelope.timestamp}
|
||||
version={envelope.version}
|
||||
renderMode={renderMode}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="content-body">
|
||||
{renderContent()}
|
||||
</div>
|
||||
|
||||
{renderMode === 'full' && (
|
||||
<div className="content-footer">
|
||||
<div className="content-stats">
|
||||
<span>Size: {envelope.content.raw.length} bytes</span>
|
||||
<span>Type: {envelope.content.content_type}</span>
|
||||
<span>Encoding: {envelope.content.encoding}</span>
|
||||
<span>Hash: {envelope.content_hash.substring(0, 8)}...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentRenderer;
|
||||
262
rustle/frontend/src/components/renderers/CodeRenderer.css
Normal file
262
rustle/frontend/src/components/renderers/CodeRenderer.css
Normal file
@@ -0,0 +1,262 @@
|
||||
.code-renderer {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #e9ecef;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.language-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.language-badge {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.content-type {
|
||||
font-size: 11px;
|
||||
color: #6c757d;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.code-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
display: flex;
|
||||
background: white;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.code-renderer--preview .code-container {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.code-renderer--minimal .code-container {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #e9ecef;
|
||||
padding: 12px 8px;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
min-width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
line-height: 1.4;
|
||||
color: #6c757d;
|
||||
font-size: 12px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.code-content pre {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.code-content code {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Syntax highlighting styles */
|
||||
.keyword {
|
||||
color: #0066cc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #007f7f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.string {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.url {
|
||||
color: #3498db;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.path {
|
||||
color: #8e44ad;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
/* Language-specific badge colors */
|
||||
.language-badge:has-text("go") {
|
||||
background: #00add8;
|
||||
}
|
||||
|
||||
.language-badge:has-text("rust") {
|
||||
background: #ce422b;
|
||||
}
|
||||
|
||||
.language-badge:has-text("python") {
|
||||
background: #3776ab;
|
||||
}
|
||||
|
||||
.language-badge:has-text("javascript") {
|
||||
background: #f7df1e;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.language-badge:has-text("typescript") {
|
||||
background: #3178c6;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Minimal mode styling */
|
||||
.code-renderer--minimal .code-header {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.code-renderer--minimal .language-badge {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.code-renderer--minimal .code-content pre {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.code-renderer--minimal .code-content code {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.code-renderer {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: #404040;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.content-type {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.code-content code {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #4ec9b0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: #6a9955;
|
||||
}
|
||||
|
||||
.string {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.url {
|
||||
color: #74c0fc;
|
||||
}
|
||||
|
||||
.path {
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: #b5cea8;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
216
rustle/frontend/src/components/renderers/CodeRenderer.tsx
Normal file
216
rustle/frontend/src/components/renderers/CodeRenderer.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import './CodeRenderer.css';
|
||||
|
||||
interface CodeRendererProps {
|
||||
content: string;
|
||||
contentType: string;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
export const CodeRenderer: React.FC<CodeRendererProps> = ({
|
||||
content,
|
||||
contentType,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const getLanguageFromContentType = (contentType: string): string => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'text/x-go': 'go',
|
||||
'text/x-rust': 'rust',
|
||||
'text/x-python': 'python',
|
||||
'text/x-javascript': 'javascript',
|
||||
'text/x-typescript': 'typescript',
|
||||
'application/javascript': 'javascript',
|
||||
'application/typescript': 'typescript',
|
||||
'text/plain': 'text'
|
||||
};
|
||||
return typeMap[contentType] || 'text';
|
||||
};
|
||||
|
||||
const language = getLanguageFromContentType(contentType);
|
||||
|
||||
// Basic syntax highlighting patterns
|
||||
const applySyntaxHighlighting = (code: string, lang: string): string => {
|
||||
let highlighted = escapeHtml(code);
|
||||
|
||||
switch (lang) {
|
||||
case 'go':
|
||||
highlighted = highlightGo(highlighted);
|
||||
break;
|
||||
case 'rust':
|
||||
highlighted = highlightRust(highlighted);
|
||||
break;
|
||||
case 'python':
|
||||
highlighted = highlightPython(highlighted);
|
||||
break;
|
||||
case 'javascript':
|
||||
case 'typescript':
|
||||
highlighted = highlightJavaScript(highlighted);
|
||||
break;
|
||||
default:
|
||||
// For plain text, just highlight URLs and file paths
|
||||
highlighted = highlightGeneric(highlighted);
|
||||
}
|
||||
|
||||
return highlighted;
|
||||
};
|
||||
|
||||
const escapeHtml = (text: string): string => {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
};
|
||||
|
||||
const highlightGo = (code: string): string => {
|
||||
// Go keywords
|
||||
code = code.replace(/\b(package|import|func|var|const|type|struct|interface|if|else|for|range|switch|case|default|return|defer|go|chan|select|map|make|new|len|cap|append|copy|delete|close|nil|true|false)\b/g, '<span class="keyword">$1</span>');
|
||||
|
||||
// Go types
|
||||
code = code.replace(/\b(int|int8|int16|int32|int64|uint|uint8|uint16|uint32|uint64|float32|float64|complex64|complex128|bool|byte|rune|string|error)\b/g, '<span class="type">$1</span>');
|
||||
|
||||
// Comments
|
||||
code = code.replace(/(\/\/.*$)/gm, '<span class="comment">$1</span>');
|
||||
code = code.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="comment">$1</span>');
|
||||
|
||||
// Strings
|
||||
code = code.replace(/(".*?"|`.*?`)/g, '<span class="string">$1</span>');
|
||||
|
||||
return code;
|
||||
};
|
||||
|
||||
const highlightRust = (code: string): string => {
|
||||
// Rust keywords
|
||||
code = code.replace(/\b(fn|let|mut|const|static|use|mod|pub|struct|enum|impl|trait|for|if|else|match|while|loop|break|continue|return|true|false|Some|None|Ok|Err|Self|self|super|crate)\b/g, '<span class="keyword">$1</span>');
|
||||
|
||||
// Rust types
|
||||
code = code.replace(/\b(i8|i16|i32|i64|i128|isize|u8|u16|u32|u64|u128|usize|f32|f64|bool|char|str|String|Vec|Option|Result)\b/g, '<span class="type">$1</span>');
|
||||
|
||||
// Comments
|
||||
code = code.replace(/(\/\/.*$)/gm, '<span class="comment">$1</span>');
|
||||
code = code.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="comment">$1</span>');
|
||||
|
||||
// Strings
|
||||
code = code.replace(/(".*?"|'.*?')/g, '<span class="string">$1</span>');
|
||||
|
||||
return code;
|
||||
};
|
||||
|
||||
const highlightPython = (code: string): string => {
|
||||
// Python keywords
|
||||
code = code.replace(/\b(def|class|import|from|if|elif|else|for|while|try|except|finally|with|as|return|yield|lambda|and|or|not|in|is|True|False|None|pass|break|continue|global|nonlocal)\b/g, '<span class="keyword">$1</span>');
|
||||
|
||||
// Python built-ins
|
||||
code = code.replace(/\b(str|int|float|bool|list|dict|tuple|set|len|range|enumerate|zip|map|filter|print|input|open|type|isinstance|hasattr|getattr|setattr)\b/g, '<span class="type">$1</span>');
|
||||
|
||||
// Comments
|
||||
code = code.replace(/(#.*$)/gm, '<span class="comment">$1</span>');
|
||||
|
||||
// Strings
|
||||
code = code.replace(/("""[\s\S]*?"""|'''[\s\S]*?'''|".*?"|'.*?')/g, '<span class="string">$1</span>');
|
||||
|
||||
return code;
|
||||
};
|
||||
|
||||
const highlightJavaScript = (code: string): string => {
|
||||
// JavaScript keywords
|
||||
code = code.replace(/\b(function|const|let|var|if|else|for|while|do|switch|case|default|return|break|continue|try|catch|finally|throw|new|this|class|extends|import|export|from|as|async|await|yield|true|false|null|undefined)\b/g, '<span class="keyword">$1</span>');
|
||||
|
||||
// JavaScript types and built-ins
|
||||
code = code.replace(/\b(String|Number|Boolean|Array|Object|Date|RegExp|Promise|Map|Set|Symbol|console|window|document|Math|JSON)\b/g, '<span class="type">$1</span>');
|
||||
|
||||
// Comments
|
||||
code = code.replace(/(\/\/.*$)/gm, '<span class="comment">$1</span>');
|
||||
code = code.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="comment">$1</span>');
|
||||
|
||||
// Strings
|
||||
code = code.replace(/(`.*?`|".*?"|'.*?')/g, '<span class="string">$1</span>');
|
||||
|
||||
return code;
|
||||
};
|
||||
|
||||
const highlightGeneric = (code: string): string => {
|
||||
// URLs
|
||||
code = code.replace(/(https?:\/\/[^\s]+)/g, '<span class="url">$1</span>');
|
||||
|
||||
// File paths
|
||||
code = code.replace(/(\/[^\s]*)/g, '<span class="path">$1</span>');
|
||||
|
||||
// Numbers
|
||||
code = code.replace(/\b(\d+\.?\d*)\b/g, '<span class="number">$1</span>');
|
||||
|
||||
return code;
|
||||
};
|
||||
|
||||
const processedContent = useMemo(() => {
|
||||
if (renderMode === 'preview') {
|
||||
const lines = content.split('\n');
|
||||
const previewLines = lines.slice(0, 20);
|
||||
return applySyntaxHighlighting(previewLines.join('\n'), language);
|
||||
}
|
||||
return applySyntaxHighlighting(content, language);
|
||||
}, [content, language, renderMode]);
|
||||
|
||||
const getLineNumbers = (text: string): string[] => {
|
||||
const lines = text.split('\n');
|
||||
return lines.map((_, index) => (index + 1).toString());
|
||||
};
|
||||
|
||||
const lineNumbers = getLineNumbers(renderMode === 'preview' ? content.split('\n').slice(0, 20).join('\n') : content);
|
||||
|
||||
const handleCopyToClipboard = () => {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
// Could add a toast notification here
|
||||
console.log('Code copied to clipboard');
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`code-renderer code-renderer--${renderMode}`}>
|
||||
<div className="code-header">
|
||||
<div className="language-label">
|
||||
<span className="language-badge">{language}</span>
|
||||
<span className="content-type">{contentType}</span>
|
||||
</div>
|
||||
{renderMode === 'full' && (
|
||||
<div className="code-actions">
|
||||
<button
|
||||
className="copy-button"
|
||||
onClick={handleCopyToClipboard}
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="code-container">
|
||||
{renderMode !== 'minimal' && (
|
||||
<div className="line-numbers">
|
||||
{lineNumbers.map((num, index) => (
|
||||
<div key={index} className="line-number">
|
||||
{num}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="code-content">
|
||||
<pre>
|
||||
<code
|
||||
className={`language-${language}`}
|
||||
dangerouslySetInnerHTML={{ __html: processedContent }}
|
||||
/>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{renderMode === 'preview' && content.split('\n').length > 20 && (
|
||||
<div className="content-truncated">
|
||||
<em>Showing first 20 lines. Click to view full content.</em>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeRenderer;
|
||||
306
rustle/frontend/src/components/renderers/ContextRenderer.css
Normal file
306
rustle/frontend/src/components/renderers/ContextRenderer.css
Normal file
@@ -0,0 +1,306 @@
|
||||
.context-renderer {
|
||||
background: white;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.context-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.context-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.format-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.generated-time {
|
||||
font-size: 11px;
|
||||
opacity: 0.9;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.context-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.context-metadata {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.context-type {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
background: #17a2b8;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
border-left: 3px solid #e9ecef;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.metadata-section h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.metadata-section p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
background: #e3f2fd;
|
||||
color: #1565c0;
|
||||
border: 1px solid #bbdefb;
|
||||
}
|
||||
|
||||
.context-tag {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
border: 1px solid #e1bee7;
|
||||
}
|
||||
|
||||
.insight-list,
|
||||
.dependency-list,
|
||||
.file-list,
|
||||
.decision-list {
|
||||
margin: 4px 0 0 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.insight-list li {
|
||||
margin-bottom: 4px;
|
||||
color: #495057;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dependency-item,
|
||||
.decision-item {
|
||||
margin-bottom: 4px;
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.file-item code {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
color: #e83e8c;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.confidence-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.confidence-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.confidence-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.confidence-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.confidence-value {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Context type specific styling */
|
||||
.context-renderer--minimal .metadata-section {
|
||||
border-left-width: 2px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.context-renderer--minimal .metadata-section h4 {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.context-renderer--minimal .tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.context-renderer--preview .context-content {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Special styling for different context types */
|
||||
.metadata-section:has(.type-badge:contains("file")) {
|
||||
border-left-color: #28a745;
|
||||
}
|
||||
|
||||
.metadata-section:has(.type-badge:contains("directory")) {
|
||||
border-left-color: #ffc107;
|
||||
}
|
||||
|
||||
.metadata-section:has(.type-badge:contains("project")) {
|
||||
border-left-color: #007bff;
|
||||
}
|
||||
|
||||
.metadata-section:has(.type-badge:contains("global")) {
|
||||
border-left-color: #6f42c1;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.context-renderer {
|
||||
background: #1e1e1e;
|
||||
border-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.context-content {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
border-left-color: #555;
|
||||
}
|
||||
|
||||
.metadata-section h4 {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.metadata-section p {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
background: #1a365d;
|
||||
color: #90cdf4;
|
||||
border-color: #2a69ac;
|
||||
}
|
||||
|
||||
.context-tag {
|
||||
background: #44337a;
|
||||
color: #d8b4fe;
|
||||
border-color: #6b46c1;
|
||||
}
|
||||
|
||||
.insight-list li {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.dependency-item,
|
||||
.decision-item {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.file-item code {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.confidence-indicator {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.confidence-label,
|
||||
.confidence-value {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.confidence-bar {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
239
rustle/frontend/src/components/renderers/ContextRenderer.tsx
Normal file
239
rustle/frontend/src/components/renderers/ContextRenderer.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Envelope } from '../../types/Envelope';
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
import { JSONRenderer } from './JSONRenderer';
|
||||
import './ContextRenderer.css';
|
||||
|
||||
interface ContextRendererProps {
|
||||
envelope: Envelope;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
interface UCXLContext {
|
||||
summary?: string;
|
||||
purpose?: string;
|
||||
technologies?: string[];
|
||||
tags?: string[];
|
||||
insights?: string[];
|
||||
dependencies?: string[];
|
||||
related_files?: string[];
|
||||
decision_records?: string[];
|
||||
rag_confidence?: number;
|
||||
generated_at?: string;
|
||||
context_type?: 'file' | 'directory' | 'project' | 'global';
|
||||
}
|
||||
|
||||
export const ContextRenderer: React.FC<ContextRendererProps> = ({
|
||||
envelope,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const contextData = useMemo((): UCXLContext | null => {
|
||||
try {
|
||||
const content = envelope.content.raw;
|
||||
|
||||
// Try to parse as JSON first
|
||||
if (envelope.content.content_type === 'application/json' ||
|
||||
envelope.content.content_type === 'application/ucxl-context') {
|
||||
return JSON.parse(content);
|
||||
}
|
||||
|
||||
// If it's markdown with front matter, try to extract context
|
||||
if (envelope.content.content_type === 'text/markdown') {
|
||||
const frontMatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
|
||||
if (frontMatterMatch) {
|
||||
const frontMatter = frontMatterMatch[1];
|
||||
// Simple YAML-like parsing for common fields
|
||||
const context: UCXLContext = {};
|
||||
|
||||
frontMatter.split('\n').forEach(line => {
|
||||
const match = line.match(/^(\w+):\s*(.+)$/);
|
||||
if (match) {
|
||||
const [, key, value] = match;
|
||||
if (key === 'technologies' || key === 'tags' || key === 'insights') {
|
||||
context[key as keyof UCXLContext] = value.split(',').map(s => s.trim()) as any;
|
||||
} else {
|
||||
(context as any)[key] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return context;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}, [envelope.content]);
|
||||
|
||||
const renderContextMetadata = (context: UCXLContext) => (
|
||||
<div className="context-metadata">
|
||||
{context.context_type && (
|
||||
<div className="context-type">
|
||||
<span className="type-badge">{context.context_type}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.summary && (
|
||||
<div className="metadata-section">
|
||||
<h4>Summary</h4>
|
||||
<p>{context.summary}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.purpose && (
|
||||
<div className="metadata-section">
|
||||
<h4>Purpose</h4>
|
||||
<p>{context.purpose}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.technologies && context.technologies.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Technologies</h4>
|
||||
<div className="tag-list">
|
||||
{context.technologies.map((tech, index) => (
|
||||
<span key={index} className="tag tech-tag">{tech}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.tags && context.tags.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Tags</h4>
|
||||
<div className="tag-list">
|
||||
{context.tags.map((tag, index) => (
|
||||
<span key={index} className="tag context-tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.insights && context.insights.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Key Insights</h4>
|
||||
<ul className="insight-list">
|
||||
{context.insights.map((insight, index) => (
|
||||
<li key={index}>{insight}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.dependencies && context.dependencies.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Dependencies</h4>
|
||||
<ul className="dependency-list">
|
||||
{context.dependencies.map((dep, index) => (
|
||||
<li key={index} className="dependency-item">{dep}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.related_files && context.related_files.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Related Files</h4>
|
||||
<ul className="file-list">
|
||||
{context.related_files.map((file, index) => (
|
||||
<li key={index} className="file-item">
|
||||
<code>{file}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{context.decision_records && context.decision_records.length > 0 && (
|
||||
<div className="metadata-section">
|
||||
<h4>Decision Records</h4>
|
||||
<ul className="decision-list">
|
||||
{context.decision_records.map((record, index) => (
|
||||
<li key={index} className="decision-item">{record}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderConfidenceIndicator = (confidence?: number) => {
|
||||
if (!confidence) return null;
|
||||
|
||||
const getConfidenceColor = (score: number): string => {
|
||||
if (score >= 0.8) return '#28a745';
|
||||
if (score >= 0.6) return '#ffc107';
|
||||
return '#dc3545';
|
||||
};
|
||||
|
||||
const getConfidenceLabel = (score: number): string => {
|
||||
if (score >= 0.8) return 'High';
|
||||
if (score >= 0.6) return 'Medium';
|
||||
return 'Low';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="confidence-indicator">
|
||||
<span className="confidence-label">RAG Confidence:</span>
|
||||
<div className="confidence-bar">
|
||||
<div
|
||||
className="confidence-fill"
|
||||
style={{
|
||||
width: `${confidence * 100}%`,
|
||||
backgroundColor: getConfidenceColor(confidence)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="confidence-value">
|
||||
{getConfidenceLabel(confidence)} ({(confidence * 100).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// If we can't parse the context, fall back to other renderers
|
||||
if (!contextData) {
|
||||
if (envelope.content.content_type === 'application/json') {
|
||||
return <JSONRenderer content={envelope.content.raw} renderMode={renderMode} />;
|
||||
} else {
|
||||
return <MarkdownRenderer content={envelope.content.raw} renderMode={renderMode} />;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`context-renderer context-renderer--${renderMode}`}>
|
||||
{renderMode === 'full' && (
|
||||
<div className="context-header">
|
||||
<div className="context-info">
|
||||
<span className="format-badge">UCXL Context</span>
|
||||
{contextData.generated_at && (
|
||||
<span className="generated-time">
|
||||
Generated: {new Date(contextData.generated_at).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="context-content">
|
||||
{renderContextMetadata(contextData)}
|
||||
|
||||
{contextData.rag_confidence && renderMode !== 'minimal' && (
|
||||
<div className="metadata-section">
|
||||
{renderConfidenceIndicator(contextData.rag_confidence)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderMode === 'preview' && (
|
||||
<div className="content-truncated">
|
||||
<em>Context preview - click to view full details</em>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContextRenderer;
|
||||
259
rustle/frontend/src/components/renderers/ErrorRenderer.css
Normal file
259
rustle/frontend/src/components/renderers/ErrorRenderer.css
Normal file
@@ -0,0 +1,259 @@
|
||||
.error-renderer {
|
||||
background: #fff5f5;
|
||||
border: 1px solid #fed7d7;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #fed7d7;
|
||||
border-bottom: 1px solid #feb2b2;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 2rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.error-title h3 {
|
||||
margin: 0 0 4px 0;
|
||||
color: #c53030;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-title p {
|
||||
margin: 0;
|
||||
color: #744210;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error-title code {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.error-details {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.error-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.error-section h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #c53030;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.error-info,
|
||||
.tech-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.error-field,
|
||||
.tech-field {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-weight: 500;
|
||||
color: #744210;
|
||||
min-width: 80px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
color: #2d3748;
|
||||
font-size: 0.85rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.field-value code {
|
||||
background: #f7fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.stack-trace {
|
||||
background: #f7fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: #4a5568;
|
||||
overflow-x: auto;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: pre;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.suggestion-list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
margin-bottom: 6px;
|
||||
color: #4a5568;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.suggestion-item::marker {
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
background: #f7fafc;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.retry-button,
|
||||
.report-button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
background: #38a169;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background: #2f855a;
|
||||
}
|
||||
|
||||
.report-button {
|
||||
background: #4299e1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.report-button:hover {
|
||||
background: #3182ce;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.error-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.error-field,
|
||||
.tech-field {
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
min-width: auto;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.error-renderer {
|
||||
background: #3d1a1b;
|
||||
border-color: #842029;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
background: #842029;
|
||||
border-color: #6c1f28;
|
||||
}
|
||||
|
||||
.error-title h3 {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.error-title p {
|
||||
color: #f7d794;
|
||||
}
|
||||
|
||||
.error-title code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.error-section h4 {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
color: #f7d794;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
.field-value code {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.stack-trace {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.suggestion-item::marker {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
}
|
||||
168
rustle/frontend/src/components/renderers/ErrorRenderer.tsx
Normal file
168
rustle/frontend/src/components/renderers/ErrorRenderer.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React from 'react';
|
||||
import './ErrorRenderer.css';
|
||||
|
||||
interface ErrorRendererProps {
|
||||
error: any;
|
||||
contentType: string;
|
||||
}
|
||||
|
||||
export const ErrorRenderer: React.FC<ErrorRendererProps> = ({
|
||||
error,
|
||||
contentType
|
||||
}) => {
|
||||
const getErrorDetails = (error: any) => {
|
||||
if (error instanceof Error) {
|
||||
return {
|
||||
name: error.name,
|
||||
message: error.message,
|
||||
stack: error.stack
|
||||
};
|
||||
}
|
||||
|
||||
if (typeof error === 'string') {
|
||||
return {
|
||||
name: 'Rendering Error',
|
||||
message: error,
|
||||
stack: null
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Unknown Error',
|
||||
message: 'An unexpected error occurred while rendering this content',
|
||||
stack: null
|
||||
};
|
||||
};
|
||||
|
||||
const errorDetails = getErrorDetails(error);
|
||||
|
||||
const getErrorIcon = (contentType: string): string => {
|
||||
if (contentType.startsWith('image/')) return '🖼️';
|
||||
if (contentType.includes('json')) return '📄';
|
||||
if (contentType.includes('markdown')) return '📝';
|
||||
if (contentType.startsWith('text/')) return '📄';
|
||||
return '⚠️';
|
||||
};
|
||||
|
||||
const getSuggestions = (contentType: string): string[] => {
|
||||
const suggestions: string[] = [];
|
||||
|
||||
if (contentType.includes('json')) {
|
||||
suggestions.push('Check if the JSON syntax is valid');
|
||||
suggestions.push('Verify there are no trailing commas or unescaped quotes');
|
||||
}
|
||||
|
||||
if (contentType.includes('markdown')) {
|
||||
suggestions.push('Check for malformed markdown syntax');
|
||||
suggestions.push('Verify code blocks are properly closed');
|
||||
}
|
||||
|
||||
if (contentType.startsWith('image/')) {
|
||||
suggestions.push('Verify the image data is not corrupted');
|
||||
suggestions.push('Check if the image format is supported');
|
||||
suggestions.push('Ensure base64 encoding is correct if applicable');
|
||||
}
|
||||
|
||||
if (contentType.startsWith('text/')) {
|
||||
suggestions.push('Check for special characters or encoding issues');
|
||||
suggestions.push('Verify the content matches the declared content type');
|
||||
}
|
||||
|
||||
suggestions.push('Try refreshing the content');
|
||||
suggestions.push('Contact support if the problem persists');
|
||||
|
||||
return suggestions;
|
||||
};
|
||||
|
||||
const suggestions = getSuggestions(contentType);
|
||||
|
||||
return (
|
||||
<div className="error-renderer">
|
||||
<div className="error-header">
|
||||
<div className="error-icon">{getErrorIcon(contentType)}</div>
|
||||
<div className="error-title">
|
||||
<h3>Content Rendering Error</h3>
|
||||
<p>Unable to display content of type: <code>{contentType}</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="error-details">
|
||||
<div className="error-section">
|
||||
<h4>Error Details</h4>
|
||||
<div className="error-info">
|
||||
<div className="error-field">
|
||||
<span className="field-label">Type:</span>
|
||||
<span className="field-value">{errorDetails.name}</span>
|
||||
</div>
|
||||
<div className="error-field">
|
||||
<span className="field-label">Message:</span>
|
||||
<span className="field-value">{errorDetails.message}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorDetails.stack && (
|
||||
<div className="error-section">
|
||||
<h4>Stack Trace</h4>
|
||||
<pre className="stack-trace">{errorDetails.stack}</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="error-section">
|
||||
<h4>Suggestions</h4>
|
||||
<ul className="suggestion-list">
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<li key={index} className="suggestion-item">
|
||||
{suggestion}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="error-section">
|
||||
<h4>Technical Information</h4>
|
||||
<div className="tech-info">
|
||||
<div className="tech-field">
|
||||
<span className="field-label">Content Type:</span>
|
||||
<code className="field-value">{contentType}</code>
|
||||
</div>
|
||||
<div className="tech-field">
|
||||
<span className="field-label">Error Time:</span>
|
||||
<span className="field-value">{new Date().toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="tech-field">
|
||||
<span className="field-label">Browser:</span>
|
||||
<span className="field-value">{navigator.userAgent.split(' ')[0]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="error-actions">
|
||||
<button
|
||||
className="retry-button"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
🔄 Retry
|
||||
</button>
|
||||
<button
|
||||
className="report-button"
|
||||
onClick={() => {
|
||||
const errorReport = {
|
||||
contentType,
|
||||
error: errorDetails,
|
||||
timestamp: new Date().toISOString(),
|
||||
userAgent: navigator.userAgent
|
||||
};
|
||||
console.error('Content rendering error:', errorReport);
|
||||
// Could integrate with error reporting service here
|
||||
}}
|
||||
>
|
||||
📋 Copy Error Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorRenderer;
|
||||
262
rustle/frontend/src/components/renderers/ImageRenderer.css
Normal file
262
rustle/frontend/src/components/renderers/ImageRenderer.css
Normal file
@@ -0,0 +1,262 @@
|
||||
.image-renderer {
|
||||
background: white;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.image-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.format-badge {
|
||||
background: #17a2b8;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.content-type,
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: #6c757d;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.image-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zoom-button {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.zoom-button:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f8f9fa;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.image-renderer--preview .image-container {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.image-renderer--minimal .image-container {
|
||||
min-height: 100px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(248, 249, 250, 0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-content {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.image-content:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.image-content.preview {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.image-content.minimal {
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.zoom-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoomed-image {
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.image-footer {
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-stats {
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Error state */
|
||||
.image-error {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.error-content h4 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
/* Format-specific badge colors */
|
||||
.format-badge:has-text("JPG"),
|
||||
.format-badge:has-text("JPEG") {
|
||||
background: #fd7e14;
|
||||
}
|
||||
|
||||
.format-badge:has-text("PNG") {
|
||||
background: #20c997;
|
||||
}
|
||||
|
||||
.format-badge:has-text("GIF") {
|
||||
background: #e83e8c;
|
||||
}
|
||||
|
||||
.format-badge:has-text("WEBP") {
|
||||
background: #6f42c1;
|
||||
}
|
||||
|
||||
.format-badge:has-text("SVG") {
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.image-renderer {
|
||||
background: #1e1e1e;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.image-header {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.content-type,
|
||||
.file-size {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
background: rgba(45, 45, 45, 0.9);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.image-footer {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.image-stats {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.image-error {
|
||||
background: #3d1a1b;
|
||||
border-color: #842029;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.error-content h4 {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
color: #f7d794;
|
||||
}
|
||||
}
|
||||
149
rustle/frontend/src/components/renderers/ImageRenderer.tsx
Normal file
149
rustle/frontend/src/components/renderers/ImageRenderer.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import React, { useState } from 'react';
|
||||
import './ImageRenderer.css';
|
||||
|
||||
interface ImageRendererProps {
|
||||
content: string; // Base64 encoded or URL
|
||||
contentType: string;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
export const ImageRenderer: React.FC<ImageRendererProps> = ({
|
||||
content,
|
||||
contentType,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [hasError, setHasError] = useState(false);
|
||||
const [isZoomed, setIsZoomed] = useState(false);
|
||||
|
||||
// Determine if content is base64 or URL
|
||||
const getImageSrc = (): string => {
|
||||
if (content.startsWith('data:')) {
|
||||
return content;
|
||||
} else if (content.startsWith('http')) {
|
||||
return content;
|
||||
} else {
|
||||
// Assume base64 without data prefix
|
||||
return `data:${contentType};base64,${content}`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageLoad = () => {
|
||||
setIsLoading(false);
|
||||
setHasError(false);
|
||||
};
|
||||
|
||||
const handleImageError = () => {
|
||||
setIsLoading(false);
|
||||
setHasError(true);
|
||||
};
|
||||
|
||||
const toggleZoom = () => {
|
||||
if (renderMode === 'full') {
|
||||
setIsZoomed(!isZoomed);
|
||||
}
|
||||
};
|
||||
|
||||
const getFileExtension = (mimeType: string): string => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'image/jpeg': 'jpg',
|
||||
'image/jpg': 'jpg',
|
||||
'image/png': 'png',
|
||||
'image/gif': 'gif',
|
||||
'image/webp': 'webp',
|
||||
'image/svg+xml': 'svg'
|
||||
};
|
||||
return typeMap[mimeType] || 'img';
|
||||
};
|
||||
|
||||
const getImageDimensions = (element: HTMLImageElement): { width: number; height: number } => {
|
||||
return {
|
||||
width: element.naturalWidth,
|
||||
height: element.naturalHeight
|
||||
};
|
||||
};
|
||||
|
||||
const formatFileSize = (base64String: string): string => {
|
||||
// Rough estimation of file size from base64
|
||||
const bytes = (base64String.length * 3) / 4;
|
||||
if (bytes < 1024) return `${bytes.toFixed(0)} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
if (hasError) {
|
||||
return (
|
||||
<div className="image-renderer image-error">
|
||||
<div className="error-content">
|
||||
<div className="error-icon">🖼️</div>
|
||||
<h4>Unable to display image</h4>
|
||||
<p>Content Type: {contentType}</p>
|
||||
<p>The image data may be corrupted or in an unsupported format.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`image-renderer image-renderer--${renderMode}`}>
|
||||
{renderMode === 'full' && (
|
||||
<div className="image-header">
|
||||
<div className="image-info">
|
||||
<span className="format-badge">{getFileExtension(contentType).toUpperCase()}</span>
|
||||
<span className="content-type">{contentType}</span>
|
||||
<span className="file-size">{formatFileSize(content)}</span>
|
||||
</div>
|
||||
{!hasError && (
|
||||
<div className="image-actions">
|
||||
<button
|
||||
className="zoom-button"
|
||||
onClick={toggleZoom}
|
||||
title={isZoomed ? "Zoom out" : "Zoom in"}
|
||||
>
|
||||
{isZoomed ? '🔍 Zoom Out' : '🔍 Zoom In'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`image-container ${isZoomed ? 'zoomed' : ''}`}>
|
||||
{isLoading && (
|
||||
<div className="loading-overlay">
|
||||
<div className="loading-spinner">Loading image...</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={getImageSrc()}
|
||||
alt="UCXL content"
|
||||
className={`image-content ${renderMode}`}
|
||||
onLoad={handleImageLoad}
|
||||
onError={handleImageError}
|
||||
onClick={toggleZoom}
|
||||
style={{ cursor: renderMode === 'full' ? 'pointer' : 'default' }}
|
||||
/>
|
||||
|
||||
{isZoomed && (
|
||||
<div className="zoom-overlay" onClick={toggleZoom}>
|
||||
<img
|
||||
src={getImageSrc()}
|
||||
alt="UCXL content (zoomed)"
|
||||
className="zoomed-image"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderMode === 'full' && !hasError && !isLoading && (
|
||||
<div className="image-footer">
|
||||
<div className="image-stats">
|
||||
<span>Click to zoom</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageRenderer;
|
||||
324
rustle/frontend/src/components/renderers/JSONRenderer.css
Normal file
324
rustle/frontend/src/components/renderers/JSONRenderer.css
Normal file
@@ -0,0 +1,324 @@
|
||||
.json-renderer {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.json-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #e9ecef;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.json-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.format-badge {
|
||||
background: #6f42c1;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.size-info {
|
||||
font-size: 11px;
|
||||
color: #6c757d;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.json-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.json-content {
|
||||
background: white;
|
||||
padding: 12px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.json-renderer--preview .json-content {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.json-renderer--minimal .json-content {
|
||||
max-height: 200px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.json-node {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.json-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.collapse-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
margin-right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.collapse-toggle:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.json-key {
|
||||
color: #0066cc;
|
||||
font-weight: 500;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.json-value {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.json-value--string {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.json-value--number {
|
||||
color: #009999;
|
||||
}
|
||||
|
||||
.json-value--boolean {
|
||||
color: #0066cc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.json-value--null {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.json-value--object,
|
||||
.json-value--array {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.json-preview {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.json-children {
|
||||
margin-left: 20px;
|
||||
border-left: 1px solid #e9ecef;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.json-truncated {
|
||||
padding: 4px 0;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.json-ellipsis {
|
||||
background: #f8f9fa;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* Level-based indentation */
|
||||
.level-0 { }
|
||||
.level-1 { }
|
||||
.level-2 { }
|
||||
.level-3 { opacity: 0.9; }
|
||||
.level-4 { opacity: 0.8; }
|
||||
.level-5 { opacity: 0.7; }
|
||||
|
||||
/* Error state */
|
||||
.json-error {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
background: #f5c6cb;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f1aeb5;
|
||||
}
|
||||
|
||||
.error-badge {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
margin: 0 0 12px 0;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.raw-content {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.json-renderer {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.json-header {
|
||||
background: #404040;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.size-info {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.json-content {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.collapse-toggle {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.collapse-toggle:hover {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.json-key {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.json-value--string {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.json-value--number {
|
||||
color: #b5cea8;
|
||||
}
|
||||
|
||||
.json-value--boolean {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.json-value--null {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.json-value--object,
|
||||
.json-value--array {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.json-preview {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.json-children {
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.json-truncated {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.json-ellipsis {
|
||||
background: #404040;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.json-error {
|
||||
background: #3d1a1b;
|
||||
border-color: #842029;
|
||||
}
|
||||
|
||||
.error-header {
|
||||
background: #842029;
|
||||
border-color: #6c1f28;
|
||||
}
|
||||
|
||||
.error-content p {
|
||||
color: #ea868f;
|
||||
}
|
||||
|
||||
.raw-content {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
212
rustle/frontend/src/components/renderers/JSONRenderer.tsx
Normal file
212
rustle/frontend/src/components/renderers/JSONRenderer.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import './JSONRenderer.css';
|
||||
|
||||
interface JSONRendererProps {
|
||||
content: string;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
interface JSONNode {
|
||||
key?: string;
|
||||
value: any;
|
||||
type: 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
|
||||
level: number;
|
||||
isExpanded?: boolean;
|
||||
}
|
||||
|
||||
export const JSONRenderer: React.FC<JSONRendererProps> = ({
|
||||
content,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
||||
|
||||
const parsedJSON = useMemo(() => {
|
||||
try {
|
||||
return JSON.parse(content);
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
const toggleNode = (path: string) => {
|
||||
const newExpanded = new Set(expandedNodes);
|
||||
if (newExpanded.has(path)) {
|
||||
newExpanded.delete(path);
|
||||
} else {
|
||||
newExpanded.add(path);
|
||||
}
|
||||
setExpandedNodes(newExpanded);
|
||||
};
|
||||
|
||||
const getValueType = (value: any): JSONNode['type'] => {
|
||||
if (value === null) return 'null';
|
||||
if (Array.isArray(value)) return 'array';
|
||||
if (typeof value === 'object') return 'object';
|
||||
return typeof value as JSONNode['type'];
|
||||
};
|
||||
|
||||
const formatValue = (value: any, type: JSONNode['type']): string => {
|
||||
switch (type) {
|
||||
case 'string':
|
||||
return `"${value}"`;
|
||||
case 'number':
|
||||
case 'boolean':
|
||||
return String(value);
|
||||
case 'null':
|
||||
return 'null';
|
||||
case 'array':
|
||||
return `Array(${value.length})`;
|
||||
case 'object':
|
||||
const keys = Object.keys(value);
|
||||
return `Object{${keys.length}}`;
|
||||
default:
|
||||
return String(value);
|
||||
}
|
||||
};
|
||||
|
||||
const renderJSONNode = (
|
||||
value: any,
|
||||
key?: string,
|
||||
level: number = 0,
|
||||
path: string = ''
|
||||
): React.ReactNode => {
|
||||
const type = getValueType(value);
|
||||
const currentPath = path ? `${path}.${key}` : key || '';
|
||||
const isExpanded = expandedNodes.has(currentPath);
|
||||
const isCollapsible = type === 'object' || type === 'array';
|
||||
|
||||
// In preview mode, limit depth and number of items
|
||||
if (renderMode === 'preview' && level > 2) {
|
||||
return (
|
||||
<div key={currentPath} className="json-truncated">
|
||||
<span className="json-ellipsis">...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={currentPath} className={`json-node json-node--${type} level-${level}`}>
|
||||
<div className="json-line">
|
||||
{isCollapsible && (
|
||||
<button
|
||||
className={`collapse-toggle ${isExpanded ? 'expanded' : 'collapsed'}`}
|
||||
onClick={() => toggleNode(currentPath)}
|
||||
>
|
||||
{isExpanded ? '▼' : '▶'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{key && (
|
||||
<span className="json-key">
|
||||
"{key}":
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className={`json-value json-value--${type}`}>
|
||||
{formatValue(value, type)}
|
||||
</span>
|
||||
|
||||
{isCollapsible && !isExpanded && (
|
||||
<span className="json-preview">
|
||||
{type === 'array' ? `[${value.length} items]` : `{${Object.keys(value).length} keys}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isCollapsible && isExpanded && (
|
||||
<div className="json-children">
|
||||
{type === 'array' ? (
|
||||
value.map((item: any, index: number) =>
|
||||
renderJSONNode(item, String(index), level + 1, currentPath)
|
||||
)
|
||||
) : (
|
||||
Object.entries(value).map(([childKey, childValue]) =>
|
||||
renderJSONNode(childValue, childKey, level + 1, currentPath)
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const handleCopyToClipboard = () => {
|
||||
navigator.clipboard.writeText(content).then(() => {
|
||||
console.log('JSON copied to clipboard');
|
||||
});
|
||||
};
|
||||
|
||||
const handleExpandAll = () => {
|
||||
const getAllPaths = (obj: any, prefix: string = ''): string[] => {
|
||||
const paths: string[] = [];
|
||||
if (typeof obj === 'object' && obj !== null) {
|
||||
Object.keys(obj).forEach(key => {
|
||||
const currentPath = prefix ? `${prefix}.${key}` : key;
|
||||
paths.push(currentPath);
|
||||
if (typeof obj[key] === 'object' && obj[key] !== null) {
|
||||
paths.push(...getAllPaths(obj[key], currentPath));
|
||||
}
|
||||
});
|
||||
}
|
||||
return paths;
|
||||
};
|
||||
|
||||
if (parsedJSON) {
|
||||
setExpandedNodes(new Set(getAllPaths(parsedJSON)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCollapseAll = () => {
|
||||
setExpandedNodes(new Set());
|
||||
};
|
||||
|
||||
if (!parsedJSON) {
|
||||
return (
|
||||
<div className="json-renderer json-error">
|
||||
<div className="error-header">
|
||||
<span className="error-badge">Invalid JSON</span>
|
||||
</div>
|
||||
<div className="error-content">
|
||||
<p>Unable to parse JSON content. Displaying as raw text:</p>
|
||||
<pre className="raw-content">{content}</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`json-renderer json-renderer--${renderMode}`}>
|
||||
{renderMode === 'full' && (
|
||||
<div className="json-header">
|
||||
<div className="json-info">
|
||||
<span className="format-badge">JSON</span>
|
||||
<span className="size-info">{content.length} characters</span>
|
||||
</div>
|
||||
<div className="json-actions">
|
||||
<button onClick={handleExpandAll} className="action-button">
|
||||
Expand All
|
||||
</button>
|
||||
<button onClick={handleCollapseAll} className="action-button">
|
||||
Collapse All
|
||||
</button>
|
||||
<button onClick={handleCopyToClipboard} className="action-button">
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="json-content">
|
||||
{renderJSONNode(parsedJSON)}
|
||||
</div>
|
||||
|
||||
{renderMode === 'preview' && (
|
||||
<div className="content-truncated">
|
||||
<em>Preview mode - some nested content may be hidden</em>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JSONRenderer;
|
||||
247
rustle/frontend/src/components/renderers/MarkdownRenderer.css
Normal file
247
rustle/frontend/src/components/renderers/MarkdownRenderer.css
Normal file
@@ -0,0 +1,247 @@
|
||||
.markdown-renderer {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-content h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.markdown-content h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
color: #34495e;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.markdown-content h3 {
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem 0 0.75rem 0;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.markdown-content p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.markdown-content ul {
|
||||
margin: 0 0 1rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-content li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.markdown-content strong {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.markdown-content em {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.markdown-content .inline-code {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
.markdown-content .code-block {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-content .code-block::before {
|
||||
content: attr(data-lang);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
background: #e9ecef;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.markdown-content .code-block code {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Preview mode styling */
|
||||
.markdown-content.preview {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.markdown-content.preview::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2rem;
|
||||
background: linear-gradient(transparent, white);
|
||||
}
|
||||
|
||||
/* Minimal mode styling */
|
||||
.markdown-content.minimal h1,
|
||||
.markdown-content.minimal h2,
|
||||
.markdown-content.minimal h3 {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.markdown-content.minimal .code-block {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Decision Record specific styling */
|
||||
.markdown-renderer--decision-record {
|
||||
border-left: 4px solid #28a745;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.decision-record .front-matter {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.decision-record .front-matter h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #495057;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.decision-record .front-matter pre {
|
||||
margin: 0;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.decision-content {
|
||||
border-top: 1px solid #e9ecef;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
border-top: 1px solid #e9ecef;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.markdown-renderer {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.markdown-content h1,
|
||||
.markdown-content h2,
|
||||
.markdown-content h3 {
|
||||
color: #f8f9fa;
|
||||
border-color: #495057;
|
||||
}
|
||||
|
||||
.markdown-content strong {
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.markdown-content em {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
color: #74c0fc;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
border-bottom-color: #74c0fc;
|
||||
}
|
||||
|
||||
.markdown-content .inline-code {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
color: #fd7e14;
|
||||
}
|
||||
|
||||
.markdown-content .code-block {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.markdown-content .code-block::before {
|
||||
background: #6c757d;
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.markdown-content .code-block code {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
.decision-record .front-matter {
|
||||
background: #495057;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.decision-record .front-matter h4 {
|
||||
color: #ced4da;
|
||||
}
|
||||
|
||||
.decision-record .front-matter pre {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.decision-content {
|
||||
border-color: #6c757d;
|
||||
}
|
||||
|
||||
.content-truncated {
|
||||
color: #adb5bd;
|
||||
border-color: #6c757d;
|
||||
}
|
||||
}
|
||||
116
rustle/frontend/src/components/renderers/MarkdownRenderer.tsx
Normal file
116
rustle/frontend/src/components/renderers/MarkdownRenderer.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import './MarkdownRenderer.css';
|
||||
|
||||
interface MarkdownRendererProps {
|
||||
content: string;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
specialType?: 'decision-record' | 'context-metadata' | 'standard';
|
||||
}
|
||||
|
||||
export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
|
||||
content,
|
||||
renderMode = 'full',
|
||||
specialType = 'standard'
|
||||
}) => {
|
||||
// Simple markdown parsing for common elements
|
||||
const parseMarkdown = (text: string): string => {
|
||||
let html = text;
|
||||
|
||||
// Headers
|
||||
html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
|
||||
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
|
||||
|
||||
// Bold and italic
|
||||
html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||||
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
|
||||
|
||||
// Code blocks
|
||||
html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
|
||||
return `<pre class="code-block" data-lang="${lang || 'text'}"><code>${escapeHtml(code.trim())}</code></pre>`;
|
||||
});
|
||||
|
||||
// Inline code
|
||||
html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
|
||||
|
||||
// Lists
|
||||
html = html.replace(/^\s*\* (.+)$/gm, '<li>$1</li>');
|
||||
html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
|
||||
|
||||
// Links
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
||||
|
||||
// Line breaks
|
||||
html = html.replace(/\n/g, '<br>');
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
const escapeHtml = (text: string): string => {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
};
|
||||
|
||||
const processedContent = useMemo(() => {
|
||||
if (renderMode === 'preview') {
|
||||
// For preview mode, truncate content
|
||||
const lines = content.split('\n');
|
||||
const previewLines = lines.slice(0, 10);
|
||||
return parseMarkdown(previewLines.join('\n'));
|
||||
}
|
||||
return parseMarkdown(content);
|
||||
}, [content, renderMode]);
|
||||
|
||||
const extractFrontMatter = (text: string) => {
|
||||
const frontMatterMatch = text.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
|
||||
if (frontMatterMatch) {
|
||||
try {
|
||||
const frontMatter = frontMatterMatch[1];
|
||||
const content = frontMatterMatch[2];
|
||||
return { frontMatter, content };
|
||||
} catch {
|
||||
return { frontMatter: null, content: text };
|
||||
}
|
||||
}
|
||||
return { frontMatter: null, content: text };
|
||||
};
|
||||
|
||||
const { frontMatter, content: mainContent } = extractFrontMatter(content);
|
||||
|
||||
const renderDecisionRecord = () => (
|
||||
<div className="decision-record">
|
||||
{frontMatter && (
|
||||
<div className="front-matter">
|
||||
<h4>Decision Metadata</h4>
|
||||
<pre>{frontMatter}</pre>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="markdown-content decision-content"
|
||||
dangerouslySetInnerHTML={{ __html: parseMarkdown(mainContent) }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderStandardMarkdown = () => (
|
||||
<div
|
||||
className={`markdown-content ${renderMode}`}
|
||||
dangerouslySetInnerHTML={{ __html: processedContent }}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`markdown-renderer markdown-renderer--${specialType}`}>
|
||||
{specialType === 'decision-record' ? renderDecisionRecord() : renderStandardMarkdown()}
|
||||
|
||||
{renderMode === 'preview' && content.split('\n').length > 10 && (
|
||||
<div className="content-truncated">
|
||||
<em>Content truncated for preview...</em>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkdownRenderer;
|
||||
290
rustle/frontend/src/components/renderers/MetadataRenderer.css
Normal file
290
rustle/frontend/src/components/renderers/MetadataRenderer.css
Normal file
@@ -0,0 +1,290 @@
|
||||
.metadata-renderer {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 12px 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.metadata-renderer--preview {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metadata-renderer--minimal {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metadata-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.uri-section h4,
|
||||
.metadata-info h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.uri-breakdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.uri-part {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.uri-label {
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
min-width: 50px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.uri-value {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uri-value.agent {
|
||||
background: rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.uri-value.role {
|
||||
background: rgba(155, 89, 182, 0.3);
|
||||
}
|
||||
|
||||
.uri-value.project {
|
||||
background: rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
.uri-value.task {
|
||||
background: rgba(230, 126, 34, 0.3);
|
||||
}
|
||||
|
||||
.uri-value.path {
|
||||
background: rgba(241, 196, 15, 0.3);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.metadata-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
min-width: 60px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.info-value.title {
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.info-value.author {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-value.timestamp {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.info-value.version {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.info-value.source {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.tags-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tags-section h5 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.context-data {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.context-data h5 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.context-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.context-entry {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.context-key {
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.context-value {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
flex: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Minimal mode specific styles */
|
||||
.minimal-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uri-badge {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.title-minimal {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.author-minimal {
|
||||
color: #6c757d;
|
||||
font-size: 0.75rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.metadata-header {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.uri-part,
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.uri-label,
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.minimal-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode specific adjustments */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.metadata-renderer--minimal {
|
||||
background: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
.title-minimal {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.author-minimal {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.uri-badge {
|
||||
background: #0d6efd;
|
||||
}
|
||||
}
|
||||
189
rustle/frontend/src/components/renderers/MetadataRenderer.tsx
Normal file
189
rustle/frontend/src/components/renderers/MetadataRenderer.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import React from 'react';
|
||||
import './MetadataRenderer.css';
|
||||
|
||||
interface EnvelopeMetadata {
|
||||
author?: string;
|
||||
title?: string;
|
||||
tags: string[];
|
||||
source?: string;
|
||||
context_data: Record<string, any>;
|
||||
}
|
||||
|
||||
interface UCXLUri {
|
||||
toString(): string;
|
||||
// Add other UCXL URI properties as needed
|
||||
}
|
||||
|
||||
interface MetadataRendererProps {
|
||||
metadata: EnvelopeMetadata;
|
||||
uri: UCXLUri;
|
||||
timestamp: string;
|
||||
version: string;
|
||||
renderMode?: 'full' | 'preview' | 'minimal';
|
||||
}
|
||||
|
||||
export const MetadataRenderer: React.FC<MetadataRendererProps> = ({
|
||||
metadata,
|
||||
uri,
|
||||
timestamp,
|
||||
version,
|
||||
renderMode = 'full'
|
||||
}) => {
|
||||
const formatTimestamp = (timestamp: string): string => {
|
||||
try {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString();
|
||||
} catch {
|
||||
return timestamp;
|
||||
}
|
||||
};
|
||||
|
||||
const formatURI = (uri: UCXLUri): { agent: string; role: string; project: string; task: string; path: string } => {
|
||||
const uriString = uri.toString();
|
||||
|
||||
// Parse UCXL URI format: ucxl://agent:role@project:task/temporal/path
|
||||
const match = uriString.match(/^ucxl:\/\/([^:]+):([^@]+)@([^:]+):([^\/]+)(.*)$/);
|
||||
|
||||
if (match) {
|
||||
const [, agent, role, project, task, pathPart] = match;
|
||||
// Extract temporal and path parts
|
||||
const pathMatch = pathPart.match(/^\/([^\/]*)(.*)$/);
|
||||
const temporal = pathMatch ? pathMatch[1] : '';
|
||||
const path = pathMatch ? pathMatch[2] : pathPart;
|
||||
|
||||
return {
|
||||
agent,
|
||||
role,
|
||||
project,
|
||||
task,
|
||||
path: temporal ? `${temporal}${path}` : path
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback for non-standard format
|
||||
return {
|
||||
agent: 'unknown',
|
||||
role: 'unknown',
|
||||
project: 'unknown',
|
||||
task: 'unknown',
|
||||
path: uriString
|
||||
};
|
||||
};
|
||||
|
||||
const uriParts = formatURI(uri);
|
||||
|
||||
const renderContextData = (data: Record<string, any>) => {
|
||||
const entries = Object.entries(data);
|
||||
if (entries.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="context-data">
|
||||
<h5>Context Data</h5>
|
||||
<div className="context-entries">
|
||||
{entries.map(([key, value]) => (
|
||||
<div key={key} className="context-entry">
|
||||
<span className="context-key">{key}:</span>
|
||||
<span className="context-value">
|
||||
{typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (renderMode === 'minimal') {
|
||||
return (
|
||||
<div className="metadata-renderer metadata-renderer--minimal">
|
||||
<div className="minimal-info">
|
||||
<span className="uri-badge">{uriParts.project}/{uriParts.task}</span>
|
||||
{metadata.title && <span className="title-minimal">{metadata.title}</span>}
|
||||
{metadata.author && <span className="author-minimal">by {metadata.author}</span>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`metadata-renderer metadata-renderer--${renderMode}`}>
|
||||
<div className="metadata-header">
|
||||
<div className="uri-section">
|
||||
<h4>UCXL Address</h4>
|
||||
<div className="uri-breakdown">
|
||||
<div className="uri-part">
|
||||
<span className="uri-label">Agent:</span>
|
||||
<span className="uri-value agent">{uriParts.agent}</span>
|
||||
</div>
|
||||
<div className="uri-part">
|
||||
<span className="uri-label">Role:</span>
|
||||
<span className="uri-value role">{uriParts.role}</span>
|
||||
</div>
|
||||
<div className="uri-part">
|
||||
<span className="uri-label">Project:</span>
|
||||
<span className="uri-value project">{uriParts.project}</span>
|
||||
</div>
|
||||
<div className="uri-part">
|
||||
<span className="uri-label">Task:</span>
|
||||
<span className="uri-value task">{uriParts.task}</span>
|
||||
</div>
|
||||
{uriParts.path && (
|
||||
<div className="uri-part">
|
||||
<span className="uri-label">Path:</span>
|
||||
<span className="uri-value path">{uriParts.path}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metadata-info">
|
||||
{metadata.title && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">Title:</span>
|
||||
<span className="info-value title">{metadata.title}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{metadata.author && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">Author:</span>
|
||||
<span className="info-value author">{metadata.author}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">Created:</span>
|
||||
<span className="info-value timestamp">{formatTimestamp(timestamp)}</span>
|
||||
</div>
|
||||
|
||||
<div className="info-row">
|
||||
<span className="info-label">Version:</span>
|
||||
<span className="info-value version">{version.substring(0, 8)}...</span>
|
||||
</div>
|
||||
|
||||
{metadata.source && (
|
||||
<div className="info-row">
|
||||
<span className="info-label">Source:</span>
|
||||
<span className="info-value source">{metadata.source}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{metadata.tags.length > 0 && (
|
||||
<div className="tags-section">
|
||||
<h5>Tags</h5>
|
||||
<div className="tags-list">
|
||||
{metadata.tags.map((tag, index) => (
|
||||
<span key={index} className="tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{renderMode === 'full' && renderContextData(metadata.context_data)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetadataRenderer;
|
||||
14
rustle/frontend/src/main.tsx
Normal file
14
rustle/frontend/src/main.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import './style.css'
|
||||
import App from './App'
|
||||
|
||||
const container = document.getElementById('root')
|
||||
|
||||
const root = createRoot(container!)
|
||||
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App/>
|
||||
</React.StrictMode>
|
||||
)
|
||||
26
rustle/frontend/src/style.css
Normal file
26
rustle/frontend/src/style.css
Normal file
@@ -0,0 +1,26 @@
|
||||
html {
|
||||
background-color: rgba(27, 38, 54, 1);
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(""),
|
||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
101
rustle/frontend/src/types/Envelope.ts
Normal file
101
rustle/frontend/src/types/Envelope.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
// Type definitions for UCXL content rendering
|
||||
|
||||
export interface EnvelopeContent {
|
||||
raw: string;
|
||||
content_type: string;
|
||||
encoding: string;
|
||||
}
|
||||
|
||||
export interface EnvelopeMetadata {
|
||||
author?: string;
|
||||
title?: string;
|
||||
tags: string[];
|
||||
source?: string;
|
||||
context_data: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface UCXLUri {
|
||||
toString(): string;
|
||||
}
|
||||
|
||||
export interface Envelope {
|
||||
id: string;
|
||||
ucxl_uri: UCXLUri;
|
||||
content: EnvelopeContent;
|
||||
metadata: EnvelopeMetadata;
|
||||
version: string;
|
||||
parent_version?: string;
|
||||
timestamp: string;
|
||||
content_hash: string;
|
||||
}
|
||||
|
||||
// Content type categories for easier handling
|
||||
export type ContentCategory =
|
||||
| 'markdown'
|
||||
| 'code'
|
||||
| 'json'
|
||||
| 'image'
|
||||
| 'context'
|
||||
| 'decision'
|
||||
| 'unknown';
|
||||
|
||||
export const getContentCategory = (contentType: string): ContentCategory => {
|
||||
if (contentType === 'text/markdown' || contentType === 'text/x-markdown') {
|
||||
return 'markdown';
|
||||
}
|
||||
|
||||
if (contentType.startsWith('text/x-') ||
|
||||
contentType === 'text/plain' ||
|
||||
contentType.startsWith('application/javascript') ||
|
||||
contentType.startsWith('application/typescript')) {
|
||||
return 'code';
|
||||
}
|
||||
|
||||
if (contentType === 'application/json' || contentType === 'text/json') {
|
||||
return 'json';
|
||||
}
|
||||
|
||||
if (contentType.startsWith('image/')) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (contentType === 'application/ucxl-context' ||
|
||||
contentType === 'application/ucxl-metadata') {
|
||||
return 'context';
|
||||
}
|
||||
|
||||
if (contentType === 'application/ucxl-decision' ||
|
||||
contentType === 'application/ucxl-report') {
|
||||
return 'decision';
|
||||
}
|
||||
|
||||
return 'unknown';
|
||||
};
|
||||
|
||||
// Utility functions for working with envelopes
|
||||
export const createMockEnvelope = (
|
||||
uri: string,
|
||||
content: string,
|
||||
contentType: string,
|
||||
metadata: Partial<EnvelopeMetadata> = {}
|
||||
): Envelope => {
|
||||
return {
|
||||
id: `envelope-${Date.now()}`,
|
||||
ucxl_uri: { toString: () => uri },
|
||||
content: {
|
||||
raw: content,
|
||||
content_type: contentType,
|
||||
encoding: 'utf-8'
|
||||
},
|
||||
metadata: {
|
||||
author: metadata.author,
|
||||
title: metadata.title,
|
||||
tags: metadata.tags || [],
|
||||
source: metadata.source,
|
||||
context_data: metadata.context_data || {}
|
||||
},
|
||||
version: `v${Date.now()}`,
|
||||
timestamp: new Date().toISOString(),
|
||||
content_hash: `hash-${Date.now()}`
|
||||
};
|
||||
};
|
||||
1
rustle/frontend/src/vite-env.d.ts
vendored
Normal file
1
rustle/frontend/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
44
rustle/frontend/src/wails/go/main/App.d.ts
vendored
Normal file
44
rustle/frontend/src/wails/go/main/App.d.ts
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
// Type definitions for Wails App bindings
|
||||
|
||||
export interface UCXLValidationResult {
|
||||
valid: boolean;
|
||||
error: string;
|
||||
components: {
|
||||
agent: string;
|
||||
role: string;
|
||||
project: string;
|
||||
task: string;
|
||||
temporal: string;
|
||||
path: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface BZZZStatus {
|
||||
connected: boolean;
|
||||
mode: string;
|
||||
peers: number;
|
||||
agent: string;
|
||||
role: string;
|
||||
project: string;
|
||||
capabilities: string[];
|
||||
}
|
||||
|
||||
export interface UCXLContent {
|
||||
ucxl_uri: string;
|
||||
content: {
|
||||
raw: string;
|
||||
content_type: string;
|
||||
encoding: string;
|
||||
};
|
||||
metadata: { [key: string]: string };
|
||||
timestamp: string;
|
||||
version: string;
|
||||
content_hash: string;
|
||||
}
|
||||
|
||||
export declare function GetBZZZStatus(): Promise<BZZZStatus>;
|
||||
export declare function GetUCXLContent(uri: string): Promise<UCXLContent>;
|
||||
export declare function Greet(name: string): Promise<string>;
|
||||
export declare function PostUCXLContent(uri: string, content: string, contentType: string, metadata: { [key: string]: string }): Promise<void>;
|
||||
export declare function SearchUCXLContent(query: string, tags: string[], limit: number): Promise<UCXLContent[]>;
|
||||
export declare function ValidateUCXLAddress(uri: string): Promise<UCXLValidationResult>;
|
||||
27
rustle/frontend/src/wails/go/main/App.js
Normal file
27
rustle/frontend/src/wails/go/main/App.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// @ts-check
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function GetBZZZStatus() {
|
||||
return window['go']['main']['App']['GetBZZZStatus']();
|
||||
}
|
||||
|
||||
export function GetUCXLContent(arg1) {
|
||||
return window['go']['main']['App']['GetUCXLContent'](arg1);
|
||||
}
|
||||
|
||||
export function Greet(arg1) {
|
||||
return window['go']['main']['App']['Greet'](arg1);
|
||||
}
|
||||
|
||||
export function PostUCXLContent(arg1, arg2, arg3, arg4) {
|
||||
return window['go']['main']['App']['PostUCXLContent'](arg1, arg2, arg3, arg4);
|
||||
}
|
||||
|
||||
export function SearchUCXLContent(arg1, arg2, arg3) {
|
||||
return window['go']['main']['App']['SearchUCXLContent'](arg1, arg2, arg3);
|
||||
}
|
||||
|
||||
export function ValidateUCXLAddress(arg1) {
|
||||
return window['go']['main']['App']['ValidateUCXLAddress'](arg1);
|
||||
}
|
||||
31
rustle/frontend/tsconfig.json
Normal file
31
rustle/frontend/tsconfig.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": [
|
||||
"DOM",
|
||||
"DOM.Iterable",
|
||||
"ESNext"
|
||||
],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
11
rustle/frontend/tsconfig.node.json
Normal file
11
rustle/frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
7
rustle/frontend/vite.config.ts
Normal file
7
rustle/frontend/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {defineConfig} from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
})
|
||||
14
rustle/frontend/wailsjs/go/main/App.d.ts
vendored
Executable file
14
rustle/frontend/wailsjs/go/main/App.d.ts
vendored
Executable file
@@ -0,0 +1,14 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function GetBZZZStatus():Promise<Record<string, any>>;
|
||||
|
||||
export function GetUCXLContent(arg1:string):Promise<Record<string, any>>;
|
||||
|
||||
export function Greet(arg1:string):Promise<string>;
|
||||
|
||||
export function PostUCXLContent(arg1:string,arg2:string,arg3:string,arg4:Record<string, string>):Promise<void>;
|
||||
|
||||
export function SearchUCXLContent(arg1:string,arg2:Array<string>,arg3:number):Promise<Array<Record<string, any>>>;
|
||||
|
||||
export function ValidateUCXLAddress(arg1:string):Promise<Record<string, any>>;
|
||||
27
rustle/frontend/wailsjs/go/main/App.js
Executable file
27
rustle/frontend/wailsjs/go/main/App.js
Executable file
@@ -0,0 +1,27 @@
|
||||
// @ts-check
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function GetBZZZStatus() {
|
||||
return window['go']['main']['App']['GetBZZZStatus']();
|
||||
}
|
||||
|
||||
export function GetUCXLContent(arg1) {
|
||||
return window['go']['main']['App']['GetUCXLContent'](arg1);
|
||||
}
|
||||
|
||||
export function Greet(arg1) {
|
||||
return window['go']['main']['App']['Greet'](arg1);
|
||||
}
|
||||
|
||||
export function PostUCXLContent(arg1, arg2, arg3, arg4) {
|
||||
return window['go']['main']['App']['PostUCXLContent'](arg1, arg2, arg3, arg4);
|
||||
}
|
||||
|
||||
export function SearchUCXLContent(arg1, arg2, arg3) {
|
||||
return window['go']['main']['App']['SearchUCXLContent'](arg1, arg2, arg3);
|
||||
}
|
||||
|
||||
export function ValidateUCXLAddress(arg1) {
|
||||
return window['go']['main']['App']['ValidateUCXLAddress'](arg1);
|
||||
}
|
||||
24
rustle/frontend/wailsjs/runtime/package.json
Normal file
24
rustle/frontend/wailsjs/runtime/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@wailsapp/runtime",
|
||||
"version": "2.0.0",
|
||||
"description": "Wails Javascript runtime library",
|
||||
"main": "runtime.js",
|
||||
"types": "runtime.d.ts",
|
||||
"scripts": {
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/wailsapp/wails.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Wails",
|
||||
"Javascript",
|
||||
"Go"
|
||||
],
|
||||
"author": "Lea Anthony <lea.anthony@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/wailsapp/wails/issues"
|
||||
},
|
||||
"homepage": "https://github.com/wailsapp/wails#readme"
|
||||
}
|
||||
249
rustle/frontend/wailsjs/runtime/runtime.d.ts
vendored
Normal file
249
rustle/frontend/wailsjs/runtime/runtime.d.ts
vendored
Normal file
@@ -0,0 +1,249 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export interface Position {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface Size {
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export interface Screen {
|
||||
isCurrent: boolean;
|
||||
isPrimary: boolean;
|
||||
width : number
|
||||
height : number
|
||||
}
|
||||
|
||||
// Environment information such as platform, buildtype, ...
|
||||
export interface EnvironmentInfo {
|
||||
buildType: string;
|
||||
platform: string;
|
||||
arch: string;
|
||||
}
|
||||
|
||||
// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
|
||||
// emits the given event. Optional data may be passed with the event.
|
||||
// This will trigger any event listeners.
|
||||
export function EventsEmit(eventName: string, ...data: any): void;
|
||||
|
||||
// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
|
||||
export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
|
||||
// sets up a listener for the given event name, but will only trigger a given number times.
|
||||
export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
|
||||
|
||||
// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
|
||||
// sets up a listener for the given event name, but will only trigger once.
|
||||
export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
|
||||
// unregisters the listener for the given event name.
|
||||
export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
|
||||
|
||||
// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
|
||||
// unregisters all listeners.
|
||||
export function EventsOffAll(): void;
|
||||
|
||||
// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
|
||||
// logs the given message as a raw message
|
||||
export function LogPrint(message: string): void;
|
||||
|
||||
// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
|
||||
// logs the given message at the `trace` log level.
|
||||
export function LogTrace(message: string): void;
|
||||
|
||||
// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
|
||||
// logs the given message at the `debug` log level.
|
||||
export function LogDebug(message: string): void;
|
||||
|
||||
// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
|
||||
// logs the given message at the `error` log level.
|
||||
export function LogError(message: string): void;
|
||||
|
||||
// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
|
||||
// logs the given message at the `fatal` log level.
|
||||
// The application will quit after calling this method.
|
||||
export function LogFatal(message: string): void;
|
||||
|
||||
// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
|
||||
// logs the given message at the `info` log level.
|
||||
export function LogInfo(message: string): void;
|
||||
|
||||
// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
|
||||
// logs the given message at the `warning` log level.
|
||||
export function LogWarning(message: string): void;
|
||||
|
||||
// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
|
||||
// Forces a reload by the main application as well as connected browsers.
|
||||
export function WindowReload(): void;
|
||||
|
||||
// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
|
||||
// Reloads the application frontend.
|
||||
export function WindowReloadApp(): void;
|
||||
|
||||
// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
|
||||
// Sets the window AlwaysOnTop or not on top.
|
||||
export function WindowSetAlwaysOnTop(b: boolean): void;
|
||||
|
||||
// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
|
||||
// *Windows only*
|
||||
// Sets window theme to system default (dark/light).
|
||||
export function WindowSetSystemDefaultTheme(): void;
|
||||
|
||||
// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
|
||||
// *Windows only*
|
||||
// Sets window to light theme.
|
||||
export function WindowSetLightTheme(): void;
|
||||
|
||||
// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
|
||||
// *Windows only*
|
||||
// Sets window to dark theme.
|
||||
export function WindowSetDarkTheme(): void;
|
||||
|
||||
// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
|
||||
// Centers the window on the monitor the window is currently on.
|
||||
export function WindowCenter(): void;
|
||||
|
||||
// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
|
||||
// Sets the text in the window title bar.
|
||||
export function WindowSetTitle(title: string): void;
|
||||
|
||||
// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
|
||||
// Makes the window full screen.
|
||||
export function WindowFullscreen(): void;
|
||||
|
||||
// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
|
||||
// Restores the previous window dimensions and position prior to full screen.
|
||||
export function WindowUnfullscreen(): void;
|
||||
|
||||
// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
|
||||
// Returns the state of the window, i.e. whether the window is in full screen mode or not.
|
||||
export function WindowIsFullscreen(): Promise<boolean>;
|
||||
|
||||
// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
|
||||
// Sets the width and height of the window.
|
||||
export function WindowSetSize(width: number, height: number): void;
|
||||
|
||||
// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
|
||||
// Gets the width and height of the window.
|
||||
export function WindowGetSize(): Promise<Size>;
|
||||
|
||||
// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
|
||||
// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMaxSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
|
||||
// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMinSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
|
||||
// Sets the window position relative to the monitor the window is currently on.
|
||||
export function WindowSetPosition(x: number, y: number): void;
|
||||
|
||||
// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
|
||||
// Gets the window position relative to the monitor the window is currently on.
|
||||
export function WindowGetPosition(): Promise<Position>;
|
||||
|
||||
// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
|
||||
// Hides the window.
|
||||
export function WindowHide(): void;
|
||||
|
||||
// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
|
||||
// Shows the window, if it is currently hidden.
|
||||
export function WindowShow(): void;
|
||||
|
||||
// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
|
||||
// Maximises the window to fill the screen.
|
||||
export function WindowMaximise(): void;
|
||||
|
||||
// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
|
||||
// Toggles between Maximised and UnMaximised.
|
||||
export function WindowToggleMaximise(): void;
|
||||
|
||||
// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
|
||||
// Restores the window to the dimensions and position prior to maximising.
|
||||
export function WindowUnmaximise(): void;
|
||||
|
||||
// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
|
||||
// Returns the state of the window, i.e. whether the window is maximised or not.
|
||||
export function WindowIsMaximised(): Promise<boolean>;
|
||||
|
||||
// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
|
||||
// Minimises the window.
|
||||
export function WindowMinimise(): void;
|
||||
|
||||
// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
|
||||
// Restores the window to the dimensions and position prior to minimising.
|
||||
export function WindowUnminimise(): void;
|
||||
|
||||
// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
|
||||
// Returns the state of the window, i.e. whether the window is minimised or not.
|
||||
export function WindowIsMinimised(): Promise<boolean>;
|
||||
|
||||
// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
|
||||
// Returns the state of the window, i.e. whether the window is normal or not.
|
||||
export function WindowIsNormal(): Promise<boolean>;
|
||||
|
||||
// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
|
||||
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
|
||||
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
|
||||
|
||||
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
|
||||
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
|
||||
export function ScreenGetAll(): Promise<Screen[]>;
|
||||
|
||||
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
|
||||
// Opens the given URL in the system browser.
|
||||
export function BrowserOpenURL(url: string): void;
|
||||
|
||||
// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
|
||||
// Returns information about the environment
|
||||
export function Environment(): Promise<EnvironmentInfo>;
|
||||
|
||||
// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
|
||||
// Quits the application.
|
||||
export function Quit(): void;
|
||||
|
||||
// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
|
||||
// Hides the application.
|
||||
export function Hide(): void;
|
||||
|
||||
// [Show](https://wails.io/docs/reference/runtime/intro#show)
|
||||
// Shows the application.
|
||||
export function Show(): void;
|
||||
|
||||
// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
|
||||
// Returns the current text stored on clipboard
|
||||
export function ClipboardGetText(): Promise<string>;
|
||||
|
||||
// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
|
||||
// Sets a text on the clipboard
|
||||
export function ClipboardSetText(text: string): Promise<boolean>;
|
||||
|
||||
// [OnFileDrop](https://wails.io/docs/reference/runtime/draganddrop#onfiledrop)
|
||||
// OnFileDrop listens to drag and drop events and calls the callback with the coordinates of the drop and an array of path strings.
|
||||
export function OnFileDrop(callback: (x: number, y: number ,paths: string[]) => void, useDropTarget: boolean) :void
|
||||
|
||||
// [OnFileDropOff](https://wails.io/docs/reference/runtime/draganddrop#dragandddropoff)
|
||||
// OnFileDropOff removes the drag and drop listeners and handlers.
|
||||
export function OnFileDropOff() :void
|
||||
|
||||
// Check if the file path resolver is available
|
||||
export function CanResolveFilePaths(): boolean;
|
||||
|
||||
// Resolves file paths for an array of files
|
||||
export function ResolveFilePaths(files: File[]): void
|
||||
238
rustle/frontend/wailsjs/runtime/runtime.js
Normal file
238
rustle/frontend/wailsjs/runtime/runtime.js
Normal file
@@ -0,0 +1,238 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export function LogPrint(message) {
|
||||
window.runtime.LogPrint(message);
|
||||
}
|
||||
|
||||
export function LogTrace(message) {
|
||||
window.runtime.LogTrace(message);
|
||||
}
|
||||
|
||||
export function LogDebug(message) {
|
||||
window.runtime.LogDebug(message);
|
||||
}
|
||||
|
||||
export function LogInfo(message) {
|
||||
window.runtime.LogInfo(message);
|
||||
}
|
||||
|
||||
export function LogWarning(message) {
|
||||
window.runtime.LogWarning(message);
|
||||
}
|
||||
|
||||
export function LogError(message) {
|
||||
window.runtime.LogError(message);
|
||||
}
|
||||
|
||||
export function LogFatal(message) {
|
||||
window.runtime.LogFatal(message);
|
||||
}
|
||||
|
||||
export function EventsOnMultiple(eventName, callback, maxCallbacks) {
|
||||
return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
|
||||
}
|
||||
|
||||
export function EventsOn(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, -1);
|
||||
}
|
||||
|
||||
export function EventsOff(eventName, ...additionalEventNames) {
|
||||
return window.runtime.EventsOff(eventName, ...additionalEventNames);
|
||||
}
|
||||
|
||||
export function EventsOnce(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, 1);
|
||||
}
|
||||
|
||||
export function EventsEmit(eventName) {
|
||||
let args = [eventName].slice.call(arguments);
|
||||
return window.runtime.EventsEmit.apply(null, args);
|
||||
}
|
||||
|
||||
export function WindowReload() {
|
||||
window.runtime.WindowReload();
|
||||
}
|
||||
|
||||
export function WindowReloadApp() {
|
||||
window.runtime.WindowReloadApp();
|
||||
}
|
||||
|
||||
export function WindowSetAlwaysOnTop(b) {
|
||||
window.runtime.WindowSetAlwaysOnTop(b);
|
||||
}
|
||||
|
||||
export function WindowSetSystemDefaultTheme() {
|
||||
window.runtime.WindowSetSystemDefaultTheme();
|
||||
}
|
||||
|
||||
export function WindowSetLightTheme() {
|
||||
window.runtime.WindowSetLightTheme();
|
||||
}
|
||||
|
||||
export function WindowSetDarkTheme() {
|
||||
window.runtime.WindowSetDarkTheme();
|
||||
}
|
||||
|
||||
export function WindowCenter() {
|
||||
window.runtime.WindowCenter();
|
||||
}
|
||||
|
||||
export function WindowSetTitle(title) {
|
||||
window.runtime.WindowSetTitle(title);
|
||||
}
|
||||
|
||||
export function WindowFullscreen() {
|
||||
window.runtime.WindowFullscreen();
|
||||
}
|
||||
|
||||
export function WindowUnfullscreen() {
|
||||
window.runtime.WindowUnfullscreen();
|
||||
}
|
||||
|
||||
export function WindowIsFullscreen() {
|
||||
return window.runtime.WindowIsFullscreen();
|
||||
}
|
||||
|
||||
export function WindowGetSize() {
|
||||
return window.runtime.WindowGetSize();
|
||||
}
|
||||
|
||||
export function WindowSetSize(width, height) {
|
||||
window.runtime.WindowSetSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMaxSize(width, height) {
|
||||
window.runtime.WindowSetMaxSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMinSize(width, height) {
|
||||
window.runtime.WindowSetMinSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetPosition(x, y) {
|
||||
window.runtime.WindowSetPosition(x, y);
|
||||
}
|
||||
|
||||
export function WindowGetPosition() {
|
||||
return window.runtime.WindowGetPosition();
|
||||
}
|
||||
|
||||
export function WindowHide() {
|
||||
window.runtime.WindowHide();
|
||||
}
|
||||
|
||||
export function WindowShow() {
|
||||
window.runtime.WindowShow();
|
||||
}
|
||||
|
||||
export function WindowMaximise() {
|
||||
window.runtime.WindowMaximise();
|
||||
}
|
||||
|
||||
export function WindowToggleMaximise() {
|
||||
window.runtime.WindowToggleMaximise();
|
||||
}
|
||||
|
||||
export function WindowUnmaximise() {
|
||||
window.runtime.WindowUnmaximise();
|
||||
}
|
||||
|
||||
export function WindowIsMaximised() {
|
||||
return window.runtime.WindowIsMaximised();
|
||||
}
|
||||
|
||||
export function WindowMinimise() {
|
||||
window.runtime.WindowMinimise();
|
||||
}
|
||||
|
||||
export function WindowUnminimise() {
|
||||
window.runtime.WindowUnminimise();
|
||||
}
|
||||
|
||||
export function WindowSetBackgroundColour(R, G, B, A) {
|
||||
window.runtime.WindowSetBackgroundColour(R, G, B, A);
|
||||
}
|
||||
|
||||
export function ScreenGetAll() {
|
||||
return window.runtime.ScreenGetAll();
|
||||
}
|
||||
|
||||
export function WindowIsMinimised() {
|
||||
return window.runtime.WindowIsMinimised();
|
||||
}
|
||||
|
||||
export function WindowIsNormal() {
|
||||
return window.runtime.WindowIsNormal();
|
||||
}
|
||||
|
||||
export function BrowserOpenURL(url) {
|
||||
window.runtime.BrowserOpenURL(url);
|
||||
}
|
||||
|
||||
export function Environment() {
|
||||
return window.runtime.Environment();
|
||||
}
|
||||
|
||||
export function Quit() {
|
||||
window.runtime.Quit();
|
||||
}
|
||||
|
||||
export function Hide() {
|
||||
window.runtime.Hide();
|
||||
}
|
||||
|
||||
export function Show() {
|
||||
window.runtime.Show();
|
||||
}
|
||||
|
||||
export function ClipboardGetText() {
|
||||
return window.runtime.ClipboardGetText();
|
||||
}
|
||||
|
||||
export function ClipboardSetText(text) {
|
||||
return window.runtime.ClipboardSetText(text);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for OnFileDrop returns a slice of file path strings when a drop is finished.
|
||||
*
|
||||
* @export
|
||||
* @callback OnFileDropCallback
|
||||
* @param {number} x - x coordinate of the drop
|
||||
* @param {number} y - y coordinate of the drop
|
||||
* @param {string[]} paths - A list of file paths.
|
||||
*/
|
||||
|
||||
/**
|
||||
* OnFileDrop listens to drag and drop events and calls the callback with the coordinates of the drop and an array of path strings.
|
||||
*
|
||||
* @export
|
||||
* @param {OnFileDropCallback} callback - Callback for OnFileDrop returns a slice of file path strings when a drop is finished.
|
||||
* @param {boolean} [useDropTarget=true] - Only call the callback when the drop finished on an element that has the drop target style. (--wails-drop-target)
|
||||
*/
|
||||
export function OnFileDrop(callback, useDropTarget) {
|
||||
return window.runtime.OnFileDrop(callback, useDropTarget);
|
||||
}
|
||||
|
||||
/**
|
||||
* OnFileDropOff removes the drag and drop listeners and handlers.
|
||||
*/
|
||||
export function OnFileDropOff() {
|
||||
return window.runtime.OnFileDropOff();
|
||||
}
|
||||
|
||||
export function CanResolveFilePaths() {
|
||||
return window.runtime.CanResolveFilePaths();
|
||||
}
|
||||
|
||||
export function ResolveFilePaths(files) {
|
||||
return window.runtime.ResolveFilePaths(files);
|
||||
}
|
||||
Reference in New Issue
Block a user