Files
blackroad-operating-system/prism-console/static/css/prism.css
Claude e84407660d feat: scaffold BlackRoad OS Phase 2 infrastructure
Implements complete Phase 2 scaffold across 6 core modules:

## New Modules

### 1. Backend API Enhancements
- Add system router with /version, /config/public, /os/state endpoints
- Register system router in main.py
- Add comprehensive tests for system endpoints

### 2. Core OS Runtime (core_os/)
- Implement UserSession, Window, OSState models
- Add state management functions (open_window, close_window, etc.)
- Create Backend API adapter for communication
- Include full test suite for models and state

### 3. Operator Engine (operator_engine/)
- Build job registry with example jobs
- Implement simple scheduler with lifecycle management
- Optional HTTP server on port 8001
- Complete tests for jobs and scheduler

### 4. Web Client Enhancements
- Add CoreOSClient JavaScript class
- Integrate system API endpoints
- Event-driven architecture for state updates
- Zero dependencies, vanilla JavaScript

### 5. Prism Console (prism-console/)
- Modern dark-themed admin UI
- Multi-tab navigation (Overview, Jobs, Agents, Logs, System)
- Real-time metrics dashboard
- Backend API integration with auto-refresh

### 6. Documentation (codex-docs/)
- Complete MkDocs-based documentation
- Architecture guides and component docs
- Infrastructure setup guides
- API reference documentation

## CI/CD

- Add core-os-tests.yml workflow
- Add operator-tests.yml workflow
- Add docs-build.yml workflow

## Documentation

- Create BLACKROAD_OS_REPO_MAP.md cross-reference
- Add README for each module
- Comprehensive integration documentation

## Summary

- 37 new files created
- ~3,500 lines of new code
- 5 test suites with 15+ tests
- 3 new CI workflows
- 10+ documentation pages

All modules are minimal working skeletons ready for integration.
Designed to be extracted into separate repos if needed.

Phase 2 scaffold complete and ready for review.
2025-11-18 03:47:13 +00:00

267 lines
4.7 KiB
CSS

/**
* Prism Console Styles
* BlackRoad OS Admin Interface
*/
:root {
--prism-primary: #6366f1;
--prism-secondary: #8b5cf6;
--prism-success: #10b981;
--prism-warning: #f59e0b;
--prism-danger: #ef4444;
--prism-bg: #0f172a;
--prism-surface: #1e293b;
--prism-border: #334155;
--prism-text: #e2e8f0;
--prism-text-muted: #94a3b8;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--prism-bg);
color: var(--prism-text);
line-height: 1.6;
}
.prism-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header */
.prism-header {
background: var(--prism-surface);
border-bottom: 1px solid var(--prism-border);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon {
font-size: 2rem;
}
.logo h1 {
font-size: 1.5rem;
font-weight: 600;
}
.header-info {
display: flex;
align-items: center;
gap: 1rem;
}
#environment-badge {
background: var(--prism-primary);
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
}
#health-status {
color: var(--prism-success);
font-size: 1.5rem;
}
/* Navigation */
.prism-nav {
background: var(--prism-surface);
border-bottom: 1px solid var(--prism-border);
padding: 0 2rem;
display: flex;
gap: 0.5rem;
}
.nav-item {
background: none;
border: none;
color: var(--prism-text-muted);
padding: 1rem 1.5rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.nav-item:hover {
color: var(--prism-text);
background: rgba(255, 255, 255, 0.05);
}
.nav-item.active {
color: var(--prism-primary);
border-bottom-color: var(--prism-primary);
}
/* Main Content */
.prism-content {
flex: 1;
padding: 2rem;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.tab-panel h2 {
margin-bottom: 1.5rem;
font-size: 1.875rem;
}
.tab-panel h3 {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.placeholder {
color: var(--prism-text-muted);
font-style: italic;
margin-bottom: 1.5rem;
}
/* Metrics Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.metric-card {
background: var(--prism-surface);
border: 1px solid var(--prism-border);
border-radius: 0.5rem;
padding: 1.5rem;
}
.metric-label {
color: var(--prism-text-muted);
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.metric-value {
font-size: 2rem;
font-weight: 700;
color: var(--prism-text);
}
/* Section */
.section {
background: var(--prism-surface);
border: 1px solid var(--prism-border);
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
/* Buttons */
.button-group {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.action-button {
background: var(--prism-primary);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
}
.action-button:hover {
background: var(--prism-secondary);
transform: translateY(-1px);
}
/* Tables */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
background: var(--prism-bg);
padding: 0.75rem;
text-align: left;
font-weight: 600;
border-bottom: 1px solid var(--prism-border);
}
.data-table td {
padding: 0.75rem;
border-bottom: 1px solid var(--prism-border);
}
.empty-state {
text-align: center;
color: var(--prism-text-muted);
font-style: italic;
}
/* Agent Categories */
.agent-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.category-card {
background: var(--prism-bg);
padding: 1rem;
border-radius: 0.375rem;
text-align: center;
border: 1px solid var(--prism-border);
}
/* Log Viewer */
.log-viewer {
background: var(--prism-bg);
border: 1px solid var(--prism-border);
border-radius: 0.375rem;
padding: 1rem;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
max-height: 400px;
overflow-y: auto;
}
.log-entry {
padding: 0.25rem 0;
color: var(--prism-text-muted);
}
/* Footer */
.prism-footer {
background: var(--prism-surface);
border-top: 1px solid var(--prism-border);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: var(--prism-text-muted);
}