/**
* Cece Ultra - Full Stack Cognition Interface
*
* Interactive dashboard for the Cece Ultra cognitive processing engine.
* Provides:
* - Input normalization visualization
* - 15-step cognitive pipeline tracking
* - Architecture layer visualization
* - Multi-agent orchestration display
* - Execution history
*/
window.Apps = window.Apps || {};
window.Apps.CeceUltra = {
// State
currentExecution: null,
executionHistory: [],
isProcessing: false,
/**
* Initialize Cece Ultra app
*/
init() {
console.log('💜 Cece Ultra initialized');
this.render();
this.loadHistory();
},
/**
* Render main UI
*/
render() {
const container = document.getElementById('ceceultra-container');
if (!container) {
console.error('Cece Ultra container not found');
return;
}
container.innerHTML = `
🟣 Cece Ultra
Full Stack Cognition Engine v1.0
Ready
Loading...
Loading...
Loading...
Loading...
📜 Execution History
Loading history...
Invocation: "Cece, run cognition." |
Docs: /docs/CECE_ULTRAPROMPT.md |
Slash Command: /cece-ultra
`;
},
/**
* Switch between result tabs
*/
switchTab(tabName) {
// Update button styles
const tabs = ['pipeline', 'architecture', 'action', 'summary'];
tabs.forEach(tab => {
const btn = document.getElementById(`tab-${tab}`);
const content = document.getElementById(`tab-content-${tab}`);
if (tab === tabName) {
btn.style.background = '#800080';
btn.style.color = 'white';
btn.style.border = '2px solid #800080';
content.style.display = 'block';
} else {
btn.style.background = '#c0c0c0';
btn.style.color = 'black';
btn.style.border = '2px solid #808080';
content.style.display = 'none';
}
});
},
/**
* Run full cognition
*/
async runCognition() {
const input = document.getElementById('cece-input').value.trim();
if (!input) {
alert('Please enter some input to process');
return;
}
const mode = document.getElementById('cece-mode').value;
const orchestrate = document.getElementById('cece-orchestrate').checked;
this.showStatus('🟣 Running full stack cognition...', true);
this.isProcessing = true;
try {
const response = await fetch('/api/cece/cognition', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
input,
mode,
orchestrate,
save_to_memory: true,
context: {
source: 'ceceultra-app',
timestamp: new Date().toISOString()
}
})
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${await response.text()}`);
}
const result = await response.json();
this.currentExecution = result;
this.showStatus('✅ Cognition complete!', false);
this.displayResults(result);
this.loadHistory();
} catch (error) {
console.error('Cognition error:', error);
this.showStatus(`❌ Error: ${error.message}`, false);
alert(`Cognition failed: ${error.message}`);
} finally {
this.isProcessing = false;
}
},
/**
* Quick analysis (lightweight)
*/
async quickAnalysis() {
const input = document.getElementById('cece-input').value.trim();
if (!input) {
alert('Please enter some input to analyze');
return;
}
this.showStatus('⚡ Running quick analysis...', true);
try {
const response = await fetch('/api/cece/cognition/analyze', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
input,
focus: 'emotional'
})
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${await response.text()}`);
}
const result = await response.json();
this.showStatus('✅ Analysis complete!', false);
// Display quick analysis in alert
const summary = `
Quick Analysis Results:
Emotional Payload: ${result.emotional_payload}
Urgency: ${result.urgency}
Vibe: ${result.vibe}
Suggestions:
${result.suggestions.map((s, i) => `${i+1}. ${s}`).join('\n')}
`.trim();
alert(summary);
} catch (error) {
console.error('Analysis error:', error);
this.showStatus(`❌ Error: ${error.message}`, false);
alert(`Analysis failed: ${error.message}`);
}
},
/**
* Display cognition results
*/
displayResults(result) {
const resultsDiv = document.getElementById('cece-results');
resultsDiv.style.display = 'block';
// Pipeline tab
this.renderPipeline(result.cognitive_pipeline, result.normalized_input);
// Architecture tab
this.renderArchitecture(result.architecture_output);
// Action plan tab
this.renderActionPlan(result.action_plan);
// Summary tab
this.renderSummary(result);
// Switch to pipeline tab
this.switchTab('pipeline');
},
/**
* Render cognitive pipeline visualization
*/
renderPipeline(pipeline, normalizedInput) {
const container = document.getElementById('tab-content-pipeline');
const steps = [
{ emoji: '🚨', label: 'Not Ok', key: 'trigger' },
{ emoji: '❓', label: 'Why', key: 'root_cause' },
{ emoji: '⚡', label: 'Impulse', key: 'impulse' },
{ emoji: '🪞', label: 'Reflect', key: 'reflection' },
{ emoji: '⚔️', label: 'Argue', key: 'challenge' },
{ emoji: '🔁', label: 'Counterpoint', key: 'counterpoint' },
{ emoji: '🎯', label: 'Determine', key: 'determination' },
{ emoji: '🧐', label: 'Question', key: 'question' },
{ emoji: '⚖️', label: 'Offset Bias', key: 'bias_offset' },
{ emoji: '🧱', label: 'Reground', key: 'values_alignment' },
{ emoji: '✍️', label: 'Clarify', key: 'clarification' },
{ emoji: '♻️', label: 'Restate', key: 'restatement' },
{ emoji: '🔎', label: 'Clarify Again', key: 'final_clarification' },
{ emoji: '🤝', label: 'Validate', key: 'validation' },
{ emoji: '⭐', label: 'Final', key: 'final_answer' }
];
const stepsHTML = steps.map(step => `
${step.emoji} ${step.label}
${pipeline[step.key] || 'N/A'}
`).join('');
container.innerHTML = `
🔮 Normalized Input
Real Question: ${normalizedInput.real_question}
Emotional Payload: ${normalizedInput.emotional_payload}
Urgency: ${normalizedInput.urgency}
Vibe: ${normalizedInput.vibe}
🧠 15-Step Pipeline
${stepsHTML}
Emotional State: ${pipeline.emotional_state_before} → ${pipeline.emotional_state_after}
Confidence: ${(pipeline.confidence * 100).toFixed(0)}%
`;
},
/**
* Render architecture layer visualization
*/
renderArchitecture(architecture) {
const container = document.getElementById('tab-content-architecture');
container.innerHTML = `
🛠️ Architecture Layer
${architecture.structure ? `
🟦 Structure
${JSON.stringify(architecture.structure, null, 2)}
` : ''}
${architecture.priorities ? `
🟥 Priorities
${JSON.stringify(architecture.priorities, null, 2)}
` : ''}
${architecture.translation ? `
🟩 Translation
${JSON.stringify(architecture.translation, null, 2)}
` : ''}
${architecture.stabilization ? `
🟪 Stabilization
${JSON.stringify(architecture.stabilization, null, 2)}
` : ''}
${architecture.project_plan ? `
🟨 Project Plan
${JSON.stringify(architecture.project_plan, null, 2)}
` : ''}
🟧 Loopback Needed: ${architecture.loopback_needed ? 'Yes' : 'No'}
`;
},
/**
* Render action plan
*/
renderActionPlan(actionPlan) {
const container = document.getElementById('tab-content-action');
const stepsHTML = actionPlan.map((step, index) => `
${step}
`).join('');
container.innerHTML = `
🪜 Action Plan
${stepsHTML || 'No action plan generated
'}
`;
},
/**
* Render stable summary
*/
renderSummary(result) {
const container = document.getElementById('tab-content-summary');
container.innerHTML = `
🌿 Stable Summary
${result.stable_summary}
${result.orchestration ? `
👥 Multi-Agent Orchestration
Mode: ${result.orchestration.orchestration_mode}
Agents Used: ${result.orchestration.agents_used.join(', ')}
Chain: ${result.orchestration.chain_of_thought}
` : ''}
🎁 Extras
${JSON.stringify(result.extras, null, 2)}
Execution ID: ${result.execution_id}
Status: ${result.status}
Timestamp: ${new Date(result.timestamp).toLocaleString()}
`;
},
/**
* Load execution history
*/
async loadHistory() {
const container = document.getElementById('cece-history');
try {
const response = await fetch('/api/cece/cognition/history?limit=10');
if (!response.ok) {
throw new Error('Failed to load history');
}
const history = await response.json();
this.executionHistory = history;
if (history.length === 0) {
container.innerHTML = 'No execution history yet
';
return;
}
const historyHTML = history.map(exec => `
${new Date(exec.started_at).toLocaleString()}
${exec.input_preview}
Status: ${exec.status} |
Duration: ${exec.duration_seconds ? exec.duration_seconds.toFixed(2) + 's' : 'N/A'} |
Confidence: ${exec.confidence ? (exec.confidence * 100).toFixed(0) + '%' : 'N/A'}
`).join('');
container.innerHTML = historyHTML;
} catch (error) {
console.error('Error loading history:', error);
container.innerHTML = 'Error loading history
';
}
},
/**
* Load specific execution from history
*/
async loadExecution(executionId) {
this.showStatus('📥 Loading execution...', true);
try {
const response = await fetch(`/api/cece/cognition/${executionId}`);
if (!response.ok) {
throw new Error('Failed to load execution');
}
const result = await response.json();
this.currentExecution = result;
this.showStatus('✅ Execution loaded!', false);
this.displayResults(result);
} catch (error) {
console.error('Error loading execution:', error);
this.showStatus(`❌ Error: ${error.message}`, false);
alert(`Failed to load execution: ${error.message}`);
}
},
/**
* Show status message
*/
showStatus(message, isLoading) {
const statusDiv = document.getElementById('cece-status');
const statusText = document.getElementById('cece-status-text');
statusText.textContent = message;
statusDiv.style.display = 'block';
if (!isLoading) {
setTimeout(() => {
statusDiv.style.display = 'none';
}, 3000);
}
}
};