Welcome to your static Space!
You can modify this app directly by editing index.html in the Files and versions tab.
Also don't forget to check the
Spaces documentation.
`,
'style.css': `body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}
h1 {
font-size: 16px;
margin-top: 0;
}
p {
color: rgb(107, 114, 128);
font-size: 15px;
margin-bottom: 10px;
margin-top: 5px;
}
.card {
max-width: 620px;
margin: 0 auto;
padding: 16px;
border: 1px solid lightgray;
border-radius: 16px;
}
.card p:last-child {
margin-bottom: 0;
}`
};
this.init();
}
init() {
this.loadFiles();
this.initEditor();
this.setupEventListeners();
this.setupAI();
this.setupConsoleCapture();
this.broadcastChannel = this.setupBroadcastChannel();
// Open initial files
if (this.files.size === 0) {
Object.entries(this.initialFiles).forEach(([name, content]) => {
this.files.set(name, {
name,
content,
type: this.getFileType(name),
path: name
});
});
this.saveFiles();
}
this.renderFileTree();
// Open first HTML file or first file
const firstHtml = Array.from(this.files.keys()).find(f => f.endsWith('.html'));
const firstFile = firstHtml || this.files.keys().next().value;
if (firstFile) {
this.openFile(firstFile);
if (firstHtml) this.setPrimaryFile(firstHtml);
}
this.updatePrimaryFileSelect();
lucide.createIcons();
}
setupBroadcastChannel() {
if ('BroadcastChannel' in window) {
try {
const bc = new BroadcastChannel('codemaster_sync');
bc.onmessage = (event) => {
if (event.data.type === 'pong') {
console.log('Viewer connected');
}
};
return bc;
} catch (e) {
return null;
}
}
return null;
}
loadFiles() {
try {
const saved = localStorage.getItem('codemaster_files');
if (saved) {
const parsed = JSON.parse(saved);
this.files = new Map(Object.entries(parsed));
}
} catch (e) {
console.error('Failed to load files:', e);
}
}
saveFiles() {
try {
const obj = Object.fromEntries(this.files);
localStorage.setItem('codemaster_files', JSON.stringify(obj));
} catch (e) {
console.error('Failed to save files:', e);
}
}
initEditor() {
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' }});
require(['vs/editor/editor.main'], () => {
monaco.editor.defineTheme('codemaster-dark', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#020617',
'editor.lineHighlightBackground': '#1e293b',
'editorLineNumber.foreground': '#64748b',
'editorLineNumber.activeForeground': '#94a3b8',
}
});
this.editor = monaco.editor.create(document.getElementById('editor-container'), {
value: '',
language: 'html',
theme: 'codemaster-dark',
automaticLayout: true,
minimap: { enabled: true },
fontSize: 14,
fontFamily: 'JetBrains Mono, Consolas, Monaco, monospace',
wordWrap: 'on',
lineNumbers: 'on',
roundedSelection: false,
scrollBeyondLastLine: false,
renderLineHighlight: 'line',
padding: { top: 16 },
bracketPairColorization: { enabled: true },
autoIndent: 'advanced',
formatOnPaste: true,
formatOnType: true,
suggestOnTriggerCharacters: true,
quickSuggestions: true,
});
// AI-powered suggestions
this.editor.onDidType((e) => {
this.handleTyping(e);
});
// Track changes
this.editor.onDidChangeModelContent(() => {
if (this.activeTab) {
this.isDirty.add(this.activeTab);
this.updateTabStatus(this.activeTab);
this.aiLearning.recordEdit(this.activeTab, this.editor.getValue());
this.debouncedPreviewUpdate();
}
});
// Load initial content if exists
if (this.activeTab && this.files.has(this.activeTab)) {
const file = this.files.get(this.activeTab);
this.editor.setValue(file.content);
monaco.editor.setModelLanguage(this.editor.getModel(), file.type);
}
});
}
handleTyping(text) {
const position = this.editor.getPosition();
const model = this.editor.getModel();
const lineContent = model.getLineContent(position.lineNumber);
const beforeCursor = lineContent.substring(0, position.column - 1);
// Get AI suggestion
const suggestion = this.aiLearning.getSuggestion(beforeCursor, text, this.activeTab);
if (suggestion) {
this.showAISuggestion(suggestion, position);
} else {
this.hideAISuggestion();
}
}
showAISuggestion(suggestion, position) {
const coords = this.editor.getScrolledVisiblePosition(position);
const editorDom = document.getElementById('editor-container');
const suggestionEl = document.getElementById('ai-suggestion');
suggestionEl.style.left = (editorDom.offsetLeft + coords.left) + 'px';
suggestionEl.style.top = (editorDom.offsetTop + coords.top + 20) + 'px';
suggestionEl.textContent = 'AI: ' + suggestion.text;
suggestionEl.classList.remove('hidden');
// Auto-insert on Tab if high confidence
if (suggestion.confidence > 0.8) {
const disposable = this.editor.onKeyDown((e) => {
if (e.keyCode === monaco.KeyCode.Tab) {
e.preventDefault();
this.insertSuggestion(suggestion);
disposable.dispose();
}
});
// Dispose after 5 seconds
setTimeout(() => disposable.dispose(), 5000);
}
}
hideAISuggestion() {
document.getElementById('ai-suggestion').classList.add('hidden');
}
insertSuggestion(suggestion) {
const position = this.editor.getPosition();
this.editor.executeEdits('ai-suggestion', [{
range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
text: suggestion.insert
}]);
this.hideAISuggestion();
this.aiLearning.recordAcceptance(suggestion);
this.updateAIPanel();
}
setupAI() {
this.updateAIPanel();
setInterval(() => this.updateAIPanel(), 5000);
}
updateAIPanel() {
const stats = this.aiLearning.getStats();
document.getElementById('patterns-count').textContent = stats.patterns;
document.getElementById('confidence-bar').style.width = stats.confidence + '%';
document.getElementById('confidence-text').textContent = stats.confidence + '%';
const snippetsEl = document.getElementById('frequent-snippets');
snippetsEl.innerHTML = stats.topSnippets.map(s => `