Show description
penguinOS - Settings
penguinOS - Settings
penguinOS
System Settings
CPU12%
RAM6.3 / 31.2 GB
NET
↓ 1.24 GB/s ↑ 72.6 MB/s
CONTAINERS
12 running
UPDATES
2 available
KERNEL
6.8.9-penguin
SECURE BOOT
Active
10:42:31 UTC
SAT 17 MAY 2026
Overview
AI Core
Appearance
Workspace
Devices
Displays
Network
Sound
Privacy
Security
Updates
2
Containers
Power
Automation
Time Travel
Accessibility
Developer
Storage
Accounts
About
⚙ 1. Penguin AI Core
Model
PenguinLM 3.1 70B (Local)
Ready
Inference
Local Only
Hybrid
Cloud Secure
Context Window128K tokens
Reasoning Mode
Balanced (Default)
Details
Temperature
0.35
Permission Scope
Project A (~/code/project-a)
Edit
Latency Target
Low (
Code refactor in main.go
2m ago
Approved
Install rpackages libxml2
15m ago
Approved
Edit file /etc/nginx/nginx.conf
1h ago
Approved
9. Workspace Time Travel
Capture and restore complete workspace states.
Snapshots: 12
Open Time Travel
10. Semantic Permissions
Grant permissions by domain or project.
Active Domains: 5
Manage Domains
11. Adaptive Resource Budgeting
Scale AI resources with system conditions.
Mode
Balanced
Max Compute Budget
70%
12. Explainability
Inspect, replay, and justify all AI actions.
Verified Actions (7d): 342
Open Explainability
13.…
penguinOS - Settings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>penguinOS - Settings</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
bg: '#050507',
panel: '#0B0B0F',
panelHover: '#121218',
border: '#1F1F26',
accent: '#FF6B00',
accentDark: '#CC5500',
textMain: '#D1D5DB',
textMuted: '#6B7280',
success: '#10B981',
warning: '#F59E0B',
danger: '#EF4444'
},
fontFamily: {
mono: ['"Fira Code"', 'monospace'],
sans: ['Inter', 'sans-serif']
},
fontSize: {
'xxs': '0.65rem',
'xs': '0.75rem',
'sm': '0.8rem',
}
}
}
}
</script>
<style>
body { background-color: #050507; color: #D1D5DB; overflow: hidden; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0B0B0F; }
::-webkit-scrollbar-thumb { background: #1F1F26; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #FF6B00; }
.panel {
background-color: #0B0B0F;
border: 1px solid #1F1F26;
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel-header {
font-size: 0.65rem;
color: #D1D5DB;
padding: 0.4rem 0.6rem;
border-bottom: 1px solid #1F1F26;
display: flex;
align-items: center;
gap: 0.5rem;
background: #0E0E12;
font-weight: 500;
}
.glow-text { text-shadow: 0 0 8px rgba(255, 107, 0, 0.6); }
/* Custom Inputs */
select {
background-color: #121218;
border: 1px solid #1F1F26;
color: #D1D5DB;
outline: none;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.65rem;
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 0.4rem top 50%;
background-size: 0.4rem auto;
padding-right: 1.2rem;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 10px; width: 10px;
border-radius: 50%;
background: #FF6B00;
cursor: pointer;
margin-top: -4px;
box-shadow: 0 0 8px rgba(255, 107, 0, 0.8);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%; height: 2px;
cursor: pointer; background: #1F1F26;
}
/* Sidebar Item Active */
.nav-item.active {
border-left: 2px solid #FF6B00;
color: #FF6B00;
background: linear-gradient(90deg, rgba(255,107,0,0.1) 0%, rgba(255,107,0,0) 100%);
}
/* Toggle Switch Override */
.peer:checked ~ .peer-checked\:bg-accent { background-color: #FF6B00 !important; }
.peer:checked ~ .peer-checked\:after\:translate-x-full { transform: translateX(100%); }
.peer:checked ~ .peer-checked\:after\:border-white { border-color: #fff; }
</style>
</head>
<body class="font-sans text-xs h-screen flex flex-col select-none antialiased min-w-[1400px]">
<!-- TOP BAR -->
<header class="flex items-center justify-between px-4 py-2 bg-panel border-b border-border shrink-0 font-mono">
<div class="flex items-center gap-3 w-64">
<i class="ph-fill ph-linux-logo text-3xl text-white"></i>
<div>
<h1 class="text-sm font-bold text-white tracking-wide">penguinOS</h1>
<p class="text-[0.55rem] text-textMuted uppercase tracking-widest">System Settings</p>
</div>
</div>
<div class="flex gap-8 items-center flex-1 justify-center px-4">
<div class="flex flex-col gap-0.5 w-20">
<div class="flex justify-between items-baseline"><span class="text-textMuted text-[0.6rem]">CPU</span><span class="text-white text-xs">12%</span></div>
<div class="h-4 relative w-full"><canvas id="spark-cpu" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<div class="flex flex-col gap-0.5 w-24">
<div class="flex justify-between items-baseline"><span class="text-textMuted text-[0.6rem]">RAM</span><span class="text-accent text-xs">6.3 / 31.2 GB</span></div>
<div class="h-4 relative w-full"><canvas id="spark-ram" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<div class="flex flex-col w-28">
<span class="text-textMuted text-[0.6rem]">NET</span>
<span class="text-white text-xs"><span class="text-accent glow-text">↓ 1.24 GB/s</span> <span class="text-textMuted">↑ 72.6 MB/s</span></span>
</div>
<div class="flex flex-col">
<span class="text-textMuted text-[0.6rem]">CONTAINERS</span>
<span class="text-white text-xs">12 running</span>
</div>
<div class="flex flex-col">
<span class="text-textMuted text-[0.6rem]">UPDATES</span>
<span class="text-accent text-xs">2 available</span>
</div>
<div class="flex flex-col">
<span class="text-textMuted text-[0.6rem]">KERNEL</span>
<span class="text-white text-xs">6.8.9-penguin</span>
</div>
<div class="flex flex-col">
<span class="text-textMuted text-[0.6rem]">SECURE BOOT</span>
<span class="text-success text-xs flex items-center gap-1"><i class="ph-fill ph-shield-check"></i> Active</span>
</div>
</div>
<div class="flex items-center gap-4 text-textMuted w-48 justify-end">
<i class="ph ph-magnifying-glass hover:text-white cursor-pointer text-lg"></i>
<i class="ph ph-app-window hover:text-white cursor-pointer text-lg"></i>
<i class="ph ph-squares-four hover:text-white cursor-pointer text-lg"></i>
<i class="ph ph-power hover:text-accent cursor-pointer text-lg"></i>
<div class="text-right font-sans">
<div class="text-white text-sm font-semibold" id="clock">10:42:31 UTC</div>
<div class="text-[0.6rem]">SAT 17 MAY 2026</div>
</div>
</div>
</header>
<div class="flex flex-1 overflow-hidden">
<!-- LEFT SIDEBAR NAVIGATION -->
<aside class="w-56 bg-bg border-r border-border flex flex-col shrink-0 overflow-y-auto">
<div class="p-3">
<div class="bg-panel border border-border rounded flex items-center px-2 py-1.5 gap-2 text-textMuted mb-2">
<i class="ph ph-magnifying-glass"></i>
<input type="text" placeholder="Search settings" class="bg-transparent border-none outline-none text-xs w-full text-white placeholder-textMuted">
</div>
</div>
<nav class="flex flex-col text-xxs font-medium gap-0.5 pb-4">
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white transition-colors"><i class="ph ph-squares-four text-sm"></i> Overview</a>
<a href="#" class="nav-item active flex items-center gap-3 px-4 py-2"><i class="ph-fill ph-brain text-sm"></i> AI Core</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-palette text-sm"></i> Appearance</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-desktop text-sm"></i> Workspace</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-keyboard text-sm"></i> Devices</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-monitor text-sm"></i> Displays</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-wifi-high text-sm"></i> Network</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-speaker-high text-sm"></i> Sound</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-eye-slash text-sm"></i> Privacy</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-shield-check text-sm"></i> Security</a>
<a href="#" class="nav-item flex items-center justify-between px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white">
<div class="flex items-center gap-3"><i class="ph ph-arrows-clockwise text-sm"></i> Updates</div>
<span class="bg-accent/20 text-accent px-1.5 py-0.5 rounded text-[0.55rem]">2</span>
</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-cube text-sm"></i> Containers</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-battery-charging text-sm"></i> Power</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-robot text-sm"></i> Automation</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-clock-counter-clockwise text-sm"></i> Time Travel</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-person-arms-spread text-sm"></i> Accessibility</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-terminal-window text-sm"></i> Developer</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-hard-drives text-sm"></i> Storage</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-users text-sm"></i> Accounts</a>
<a href="#" class="nav-item flex items-center gap-3 px-4 py-2 text-textMuted hover:bg-panelHover hover:text-white"><i class="ph ph-info text-sm"></i> About</a>
</nav>
</aside>
<!-- MAIN GRID AREA -->
<main class="flex-1 overflow-y-auto p-3 flex flex-col gap-3">
<!-- Top Grid (4 columns) -->
<div class="grid grid-cols-4 gap-3 shrink-0">
<!-- 1. Penguin AI Core -->
<div class="panel col-span-1 min-h-[220px]">
<div class="panel-header"><span class="text-accent">⚙</span> 1. Penguin AI Core</div>
<div class="p-3 flex flex-col gap-3 text-xxs">
<div class="flex justify-between items-center">
<span class="text-textMuted">Model</span>
<div class="flex items-center gap-2">
<select class="w-32"><option>PenguinLM 3.1 70B (Local)</option></select>
<div class="flex items-center gap-1 text-success"><div class="w-1.5 h-1.5 bg-success rounded-full animate-pulse"></div> Ready</div>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Inference</span>
<div class="flex bg-bg border border-border rounded overflow-hidden">
<button class="px-3 py-1 bg-accent/20 text-accent border-r border-border">Local Only</button>
<button class="px-3 py-1 hover:bg-panelHover border-r border-border">Hybrid</button>
<button class="px-3 py-1 hover:bg-panelHover">Cloud Secure</button>
</div>
</div>
<div class="flex flex-col gap-1">
<div class="flex justify-between text-textMuted"><span>Context Window</span><span>128K tokens</span></div>
<input type="range" min="0" max="100" value="75">
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Reasoning Mode</span>
<div class="flex gap-2">
<select class="w-24"><option>Balanced (Default)</option></select>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Details</button>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Temperature</span>
<div class="flex items-center gap-2 w-32">
<input type="range" min="0" max="100" value="35" class="w-full">
<span class="w-6 text-right">0.35</span>
</div>
</div>
<div class="flex justify-between items-center border-t border-border/50 pt-2">
<span class="text-textMuted">Permission Scope</span>
<div class="flex gap-2 items-center">
<span class="truncate w-24 text-right opacity-70">Project A (~/code/project-a)</span>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Edit</button>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Latency Target</span>
<div class="flex gap-1">
<button class="border border-accent text-accent bg-accent/10 px-2 py-0.5 rounded">Low (<150ms)</button>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Balanced</button>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Throughput</button>
</div>
</div>
</div>
</div>
<!-- 2. System-wide AI Integration -->
<div class="panel col-span-1">
<div class="panel-header">2. System-wide AI Integration</div>
<div class="p-3 flex flex-col gap-2.5 text-xxs">
<!-- Helper component for toggles -->
<script>
function renderToggle(label, desc, checked = true) {
document.write(`
<div class="flex justify-between items-center hover:bg-white/5 p-1 -mx-1 rounded transition-colors">
<div>
<div class="text-white">${label}</div>
<div class="text-textMuted text-[0.55rem]">${desc}</div>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" ${checked ? 'checked' : ''}>
<div class="w-6 h-3 bg-bg border border-border peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-textMuted after:rounded-full after:h-2.5 after:w-2.5 after:transition-all peer-checked:bg-accent peer-checked:after:bg-white"></div>
</label>
</div>
`);
}
</script>
<script>renderToggle('AI in Terminal', 'Smart commands, explanations, fixes');</script>
<script>renderToggle('AI in File Manager', 'Semantic actions, smart organize');</script>
<script>renderToggle('AI in Package Manager', 'Vuln analysis, smart updates');</script>
<script>renderToggle('AI in Browser', 'Summaries, content understanding');</script>
<script>renderToggle('AI in Code Workspace', 'Completion, refactor, text generation');</script>
<script>renderToggle('AI Notifications', 'Intelligent grouping & prioritization');</script>
<script>renderToggle('Clipboard Intelligence', 'Understand & act on clipboard');</script>
<script>renderToggle('Workspace Memory', 'Remember context across apps', false);</script>
<script>renderToggle('Semantic Search', 'Natural language system search');</script>
</div>
</div>
<!-- 3. Action Policies -->
<div class="panel col-span-1">
<div class="panel-header">3. Action Policies</div>
<div class="p-3 text-xxs flex flex-col h-full">
<div class="grid grid-cols-4 text-textMuted border-b border-border pb-1 mb-2 font-medium">
<div class="col-span-2">Capability</div>
<div class="col-span-1">Risk</div>
<div class="col-span-1 text-right">Approval Level</div>
</div>
<div class="flex flex-col gap-2 flex-1">
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Suggest & Explain</div>
<div class="col-span-1 text-success">Low</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right appearance-none"><option>Auto</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Refactor Code</div>
<div class="col-span-1 text-warning">Medium</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right text-accent"><option>Ask</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Execute Safe Commands</div>
<div class="col-span-1 text-warning">Medium</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right text-accent"><option>Ask</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Run Package Installs</div>
<div class="col-span-1 text-danger">High</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right"><option>Approve</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Manage System Services</div>
<div class="col-span-1 text-danger">High</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right"><option>Approve</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Edit Files</div>
<div class="col-span-1 text-warning">Medium</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right text-accent"><option>Ask</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Access Containers</div>
<div class="col-span-1 text-danger">High</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right"><option>Approve</option></select></div>
</div>
<div class="grid grid-cols-4 items-center">
<div class="col-span-2">Schedule Tasks / Cron</div>
<div class="col-span-1 text-warning">Medium</div>
<div class="col-span-1 text-right"><select class="w-full bg-transparent border-none text-right text-accent"><option>Ask</option></select></div>
</div>
</div>
<div class="flex justify-between items-center mt-2 pt-2 border-t border-border">
<div class="flex items-center gap-2"><span class="text-textMuted">Policy Preset</span> <select><option>Developer (Default)</option></select></div>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Customize</button>
</div>
</div>
</div>
<!-- 4. Memory & Knowledge -->
<div class="panel col-span-1">
<div class="panel-header">4. Memory & Knowledge</div>
<div class="p-3 text-xxs flex flex-col gap-3">
<div class="flex justify-between items-center">
<span class="text-textMuted">Retention (Global)</span>
<div class="flex items-center gap-2"><span>90 days</span> <i class="ph ph-caret-down text-textMuted"></i></div>
</div>
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center">
<span>Workspace Memory</span>
<div class="flex items-center gap-2"><span>24.6 GB</span> <button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Manage</button></div>
</div>
<div class="w-full h-1 bg-border rounded-full overflow-hidden"><div class="h-full bg-accent w-[60%]"></div></div>
</div>
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center">
<span>Project Embeddings</span>
<div class="flex items-center gap-2"><span>15.2 GB</span> <button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Manage</button></div>
</div>
<div class="w-full h-1 bg-border rounded-full overflow-hidden"><div class="h-full bg-blue-500 w-[40%]"></div></div>
</div>
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center">
<span>Knowledge Vault</span>
<div class="flex items-center gap-2"><span>8.1 GB</span> <button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Open</button></div>
</div>
<div class="w-full h-1 bg-border rounded-full overflow-hidden"><div class="h-full bg-success w-[20%]"></div></div>
</div>
<div class="border-t border-border/50 pt-2 flex flex-col gap-2 mt-1">
<div class="flex justify-between items-center text-textMuted">
<span>Per-project Context Quota</span>
<span>8 GB <i class="ph ph-caret-down"></i></span>
</div>
<div class="flex flex-col gap-1 mt-1">
<div class="flex justify-between text-textMuted"><span>Auto-prune Threshold</span><span>75%</span></div>
<input type="range" min="0" max="100" value="75">
</div>
</div>
<div class="flex justify-between gap-2 mt-auto pt-2">
<button class="flex-1 border border-border py-1 rounded hover:bg-panelHover">Clear Cache...</button>
<button class="flex-1 border border-border py-1 rounded hover:bg-panelHover">Rebuild Index</button>
<button class="flex-1 border border-accent/30 text-accent bg-accent/5 py-1 rounded hover:bg-accent hover:text-white transition-colors">Reset All</button>
</div>
</div>
</div>
</div>
<!-- Middle Grid (4 columns) -->
<div class="grid grid-cols-4 gap-3 shrink-0">
<!-- 5. Privacy & Trust Boundary -->
<div class="panel col-span-1">
<div class="panel-header">5. Privacy & Trust Boundary</div>
<div class="p-3 flex flex-col gap-3 text-xxs">
<script>renderToggle('Local-only Mode', 'All inference stays on device', true);</script>
<div class="flex justify-between items-center">
<span class="text-textMuted">Redaction Rules</span>
<div class="flex items-center gap-2">
<select class="w-28"><option>Emails, API Keys, Secrets</option></select>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Edit</button>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Secret Detection</span>
<div class="flex items-center gap-2">
<select class="w-28"><option>High sensitivity</option></select>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">Edit</button>
</div>
</div>
<div class="flex justify-between items-center border-t border-border/50 pt-2">
<span class="text-textMuted">Telemetry Level</span>
<select class="w-32"><option>Minimal</option></select>
</div>
<script>renderToggle('Offline Fallback', 'Use local models when offline', true);</script>
<script>renderToggle('Encrypted Memory', 'Encrypt AI context in RAM', false);</script>
<div class="flex justify-between items-center pt-1">
<div class="flex flex-col"><span class="text-white">Audit Logs</span><span class="text-textMuted text-[0.55rem]">Log all AI actions</span></div>
<div class="flex items-center gap-2">
<label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" checked><div class="w-6 h-3 bg-bg border border-border peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-textMuted after:rounded-full after:h-2.5 after:w-2.5 after:transition-all peer-checked:bg-accent peer-checked:after:bg-white"></div></label>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">View</button>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex flex-col"><span class="text-white">Signed Model Updates</span><span class="text-textMuted text-[0.55rem]">Verify model signatures</span></div>
<div class="flex items-center gap-2">
<label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" checked><div class="w-6 h-3 bg-bg border border-border peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-textMuted after:rounded-full after:h-2.5 after:w-2.5 after:transition-all peer-checked:bg-accent peer-checked:after:bg-white"></div></label>
<button class="border border-border px-2 py-0.5 rounded hover:bg-panelHover">View</button>
</div>
</div>
</div>
</div>
<!-- 6. Automation / Agents -->
<div class="panel col-span-1">
<div class="panel-header">6. Automation / Agents</div>
<div class="p-3 flex flex-col h-full text-xxs">
<div class="grid grid-cols-12 text-textMuted border-b border-border pb-1 mb-2 font-medium">
<div class="col-span-4">Agent</div>
<div class="col-span-2">Status</div>
<div class="col-span-2">Schedule</div>
<div class="col-span-2">CPU Cap</div>
<div class="col-span-2">Memory Cap</div>
</div>
<div class="flex flex-col gap-3 flex-1">
<div class="grid grid-cols-12 items-center">
<div class="col-span-4 flex items-center gap-1"><i class="ph-fill ph-package text-accent"></i> Package Auditor</div>
<div class="col-span-2 text-success flex items-center gap-1"><div class="w-1.5 h-1.5 bg-success rounded-full"></div> Running</div>
<div class="col-span-2 text-textMuted">Daily</div>
<div class="col-span-2 text-white">15%</div>
<div class="col-span-2 text-white flex justify-between">512 MB <i class="ph ph-toggle-right text-accent text-sm"></i></div>
</div>
<div class="grid grid-cols-12 items-center">
<div class="col-span-4 flex items-center gap-1"><i class="ph-fill ph-file-text text-blue-400"></i> Doc Indexer</div>
<div class="col-span-2 text-textMuted flex items-center gap-1"><div class="w-1.5 h-1.5 bg-border rounded-full"></div> Idle</div>
<div class="col-span-2 text-textMuted">Hourly</div>
<div class="col-span-2 text-white">10%</div>
<div class="col-span-2 text-white flex justify-between">1 GB <i class="ph ph-toggle-right text-accent text-sm"></i></div>
</div>
<div class="grid grid-cols-12 items-center">
<div class="col-span-4 flex items-center gap-1"><i class="ph-fill ph-wrench text-warning"></i> Service Healer</div>
<div class="col-span-2 text-success flex items-center gap-1"><div class="w-1.5 h-1.5 bg-success rounded-full"></div> Running</div>
<div class="col-span-2 text-textMuted">On Event</div>
<div class="col-span-2 text-white">20%</div>
<div class="col-span-2 text-white flex justify-between">512 MB <i class="ph ph-toggle-right text-accent text-sm"></i></div>
</div>
<div class="grid grid-cols-12 items-center">
<div class="col-span-4 flex items-center gap-1"><i class="ph-fill ph-clock-counter-clockwise text-purple-400"></i> Backup Planner</div>
<div class="col-span-2 text-textMuted flex items-center gap-1"><div class="w-1.5 h-1.5 bg-border rounded-full"></div> Idle</div>
<div class="col-span-2 text-textMuted">Daily</div>
<div class="col-span-2 text-white">5%</div>
<div class="col-span-2 text-white flex justify-between">256 MB <i class="ph ph-toggle-left text-textMuted text-sm"></i></div>
</div>
<div class="grid grid-cols-12 items-center">
<div class="col-span-4 flex items-center gap-1"><i class="ph-fill ph-terminal text-green-400"></i> Code Assistant</div>
<div class="col-span-2 text-success flex items-center gap-1"><div class="w-1.5 h-1.5 bg-success rounded-full"></div> Running</div>
<div class="col-span-2 text-textMuted">Always</div>
<div class="col-span-2 text-white">25%</div>
<div class="col-span-2 text-white flex justify-between">1 GB <i class="ph ph-toggle-right text-accent text-sm"></i></div>
</div>
</div>
<div class="flex justify-between items-center mt-auto pt-2 border-t border-border">
<button class="flex items-center gap-1 text-textMuted hover:text-white"><i class="ph ph-plus"></i> Add Agent</button>
<button class="border border-border px-3 py-1 rounded hover:bg-panelHover">Manage All Agents</button>
</div>
</div>
</div>
<!-- 7. Preview & Behavior -->
<div class="panel col-span-1">
<div class="panel-header">7. Preview & Behavior</div>
<div class="p-3 flex gap-4 h-full">
<!-- Mock Chat Window -->
<div class="flex-1 border border-border rounded flex flex-col bg-bg overflow-hidden relative">
<div class="bg-panel border-b border-border text-[0.6rem] px-2 py-1 flex items-center gap-1"><i class="ph-fill ph-magic-wand text-accent"></i> AI Assistant</div>
<div class="p-2 text-[0.65rem] text-white flex gap-2">
<i class="ph-fill ph-linux-logo text-accent text-lg shrink-0"></i>
<p class="leading-relaxed opacity-90">Hello! How can I help you with your project today?</p>
</div>
<div class="mt-auto p-2">
<div class="border border-border rounded px-2 py-1 flex items-center gap-2 bg-panelHover">
<i class="ph ph-microphone text-textMuted"></i>
<span class="text-textMuted text-[0.6rem]">Ask anything...</span>
</div>
</div>
</div>
<!-- Settings -->
<div class="w-32 flex flex-col gap-3 text-xxs justify-center">
<div class="flex justify-between items-center">
<span class="text-textMuted">Personality</span>
<select class="w-16"><option>Professional</option></select>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Verbosity</span>
<select class="w-16"><option>Balanced</option></select>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Tone</span>
<select class="w-16"><option>Helpful</option></select>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Response Mode</span>
<select class="w-16"><option>Detailed</option></select>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Keyboard Shortcut</span>
<span class="bg-panelHover border border-border px-1 rounded text-[0.55rem]">Ctrl + K</span>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Voice</span>
<span class="text-textMuted">Disabled</span>
</div>
<div class="flex justify-between items-center">
<span class="text-textMuted">Notification Style</span>
<select class="w-16"><option>Banners</option></select>
</div>
<div class="mt-auto flex justify-between items-center pt-2 border-t border-border">
<span class="text-textMuted">Theme Match</span>
<label class="relative inline-flex items-center cursor-pointer"><input type="checkbox" class="sr-only peer" checked><div class="w-6 h-3 bg-bg border border-border peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-textMuted after:rounded-full after:h-2.5 after:w-2.5 after:transition-all peer-checked:bg-accent peer-checked:after:bg-white"></div></label>
</div>
</div>
</div>
</div>
<!-- 8. Observability -->
<div class="panel col-span-1">
<div class="panel-header">8. Observability</div>
<div class="p-3 text-xxs flex flex-col h-full gap-2">
<div class="grid grid-cols-2 gap-4">
<!-- Token Usage -->
<div class="flex flex-col gap-0.5">
<div class="flex justify-between"><span class="text-textMuted">Token Usage (24h)</span><span class="text-success">+12%</span></div>
<span class="text-white text-sm">1.24M tokens</span>
<div class="h-8 w-full mt-1 relative"><canvas id="obs-chart-1" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<!-- Latency -->
<div class="flex flex-col gap-0.5">
<div class="flex justify-between"><span class="text-textMuted">Inference Latency (p95)</span><span class="text-success">-5%</span></div>
<span class="text-white text-sm">142 ms</span>
<div class="h-8 w-full mt-1 relative"><canvas id="obs-chart-2" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<!-- Memory -->
<div class="flex flex-col gap-0.5">
<div class="flex justify-between"><span class="text-textMuted">Memory Footprint</span><span class="text-danger">+5%</span></div>
<span class="text-white text-sm">6.8 GB</span>
<div class="h-8 w-full mt-1 relative"><canvas id="obs-chart-3" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<!-- Cache Hit -->
<div class="flex flex-col gap-0.5">
<div class="flex justify-between"><span class="text-textMuted">Model Cache Hit Rate</span><span class="text-success">+7%</span></div>
<span class="text-white text-sm">92%</span>
<div class="h-8 w-full mt-1 relative"><canvas id="obs-chart-4" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
</div>
<div class="mt-auto pt-2 border-t border-border">
<div class="flex justify-between items-center mb-1"><span class="text-textMuted uppercase text-[0.6rem]">Recent Actions</span><span class="text-accent cursor-pointer hover:underline">View All Activity ></span></div>
<div class="flex flex-col gap-1 text-[0.6rem]">
<div class="flex items-center gap-2">
<i class="ph-fill ph-code text-blue-400"></i>
<span class="text-white flex-1 truncate">Code refactor in main.go</span>
<span class="text-textMuted">2m ago</span>
<span class="text-success border border-success/30 bg-success/10 px-1 rounded">Approved</span>
</div>
<div class="flex items-center gap-2">
<i class="ph-fill ph-package text-accent"></i>
<span class="text-white flex-1 truncate">Install rpackages libxml2</span>
<span class="text-textMuted">15m ago</span>
<span class="text-success border border-success/30 bg-success/10 px-1 rounded">Approved</span>
</div>
<div class="flex items-center gap-2 opacity-70">
<i class="ph-fill ph-file-text text-green-400"></i>
<span class="text-white flex-1 truncate">Edit file /etc/nginx/nginx.conf</span>
<span class="text-textMuted">1h ago</span>
<span class="text-success border border-success/30 bg-success/10 px-1 rounded">Approved</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Row (Flex container for 5 small panels) -->
<div class="flex gap-3 h-24 shrink-0">
<!-- 9. Time Travel -->
<div class="panel flex-[1.2] relative overflow-hidden">
<div class="panel-header border-none bg-transparent absolute top-0 z-10">9. Workspace Time Travel</div>
<div class="p-3 pt-7 text-xxs flex flex-col justify-between h-full relative z-10">
<span class="text-textMuted leading-tight w-3/4">Capture and restore complete workspace states.</span>
<div class="flex justify-between items-end mt-1">
<span class="text-white text-xs">Snapshots: <span class="font-bold">12</span></span>
<button class="border border-accent text-accent hover:bg-accent hover:text-white px-2 py-0.5 rounded transition-colors">Open Time Travel <i class="ph ph-arrow-square-out"></i></button>
</div>
</div>
<i class="ph ph-clock-counter-clockwise absolute -right-4 -bottom-4 text-[5rem] text-white/[0.03] rotate-12"></i>
</div>
<!-- 10. Semantic Permissions -->
<div class="panel flex-1 relative overflow-hidden">
<div class="panel-header border-none bg-transparent absolute top-0 z-10">10. Semantic Permissions</div>
<div class="p-3 pt-7 text-xxs flex flex-col justify-between h-full relative z-10">
<span class="text-textMuted leading-tight w-3/4">Grant permissions by domain or project.</span>
<div class="flex justify-between items-end mt-1">
<span class="text-white text-xs">Active Domains: <span class="font-bold">5</span></span>
<button class="border border-border text-white hover:bg-panelHover px-2 py-0.5 rounded transition-colors">Manage Domains</button>
</div>
</div>
<!-- Minimal connected nodes graphic -->
<svg class="absolute right-2 bottom-2 w-16 h-16 opacity-30 stroke-accent" viewBox="0 0 100 100">
<line x1="20" y1="50" x2="50" y2="20" stroke-width="1"/>
<line x1="50" y1="20" x2="80" y2="50" stroke-width="1"/>
<line x1="80" y1="50" x2="50" y2="80" stroke-width="1"/>
<line x1="50" y1="80" x2="20" y2="50" stroke-width="1"/>
<circle cx="20" cy="50" r="3" fill="#FF6B00"/>
<circle cx="50" cy="20" r="3" fill="#FF6B00"/>
<circle cx="80" cy="50" r="3" fill="#FF6B00"/>
<circle cx="50" cy="80" r="3" fill="#FF6B00"/>
<circle cx="50" cy="50" r="4" fill="#FF6B00" class="animate-pulse"/>
<line x1="50" y1="50" x2="20" y2="50" stroke-width="1"/>
<line x1="50" y1="50" x2="50" y2="20" stroke-width="1"/>
</svg>
</div>
<!-- 11. Adaptive Resource Budgeting -->
<div class="panel flex-1 relative overflow-hidden">
<div class="panel-header border-none bg-transparent absolute top-0 z-10">11. Adaptive Resource Budgeting</div>
<div class="p-3 pt-7 text-xxs flex flex-col h-full relative z-10 w-full">
<div class="flex justify-between items-center mb-1">
<span class="text-textMuted">Scale AI resources with system conditions.</span>
<!-- Animated sine wave placeholder -->
<div class="w-12 h-6 relative"><canvas id="obs-chart-5" class="absolute inset-0 w-full h-full"></canvas></div>
</div>
<div class="flex items-center gap-2 mb-2">
<span class="text-textMuted">Mode</span>
<select class="flex-1"><option>Balanced</option></select>
</div>
<div class="flex items-center gap-2">
<span class="text-textMuted whitespace-nowrap">Max Compute Budget</span>
<input type="range" min="0" max="100" value="70" class="flex-1">
<span class="text-white w-6 text-right">70%</span>
</div>
</div>
</div>
<!-- 12. Explainability -->
<div class="panel flex-[0.9] relative overflow-hidden">
<div class="panel-header border-none bg-transparent absolute top-0 z-10">12. Explainability</div>
<div class="p-3 pt-7 text-xxs flex flex-col justify-between h-full relative z-10">
<span class="text-textMuted leading-tight w-4/5">Inspect, replay, and justify all AI actions.</span>
<div class="flex justify-between items-end mt-1">
<span class="text-white text-xs whitespace-nowrap">Verified Actions (7d): <span class="font-bold">342</span></span>
<button class="border border-border text-accent hover:bg-panelHover px-2 py-0.5 rounded transition-colors whitespace-nowrap">Open Explainability</button>
</div>
</div>
<!-- Isometric Cube SVG -->
<svg class="absolute right-2 bottom-2 w-12 h-12 opacity-30 stroke-accent fill-none" viewBox="0 0 100 100">
<polygon points="50,10 90,30 90,70 50,90 10,70 10,30" stroke-width="1.5"/>
<line x1="50" y1="50" x2="50" y2="90" stroke-width="1.5"/>
<line x1="50" y1="50" x2="10" y2="30" stroke-width="1.5"/>
<line x1="50" y1="50" x2="90" y2="30" stroke-width="1.5"/>
</svg>
</div>
<!-- 13. Model Routing -->
<div class="panel flex-[1.1] relative overflow-hidden">
<div class="panel-header border-none bg-transparent absolute top-0 z-10">13. Model Routing</div>
<div class="p-3 pt-7 text-xxs flex flex-col justify-between h-full relative z-10">
<span class="text-textMuted leading-tight w-3/4">Route requests to best available model.</span>
<div class="flex justify-between items-end mt-1">
<span class="text-white text-xs">Active Routes: <span class="font-bold">3</span></span>
<button class="border border-border text-white hover:bg-panelHover px-2 py-0.5 rounded transition-colors">Configure Routing</button>
</div>
</div>
<!-- Routing nodes graphic -->
<svg class="absolute right-2 bottom-2 w-14 h-14 opacity-40 stroke-accent" viewBox="0 0 100 100">
<circle cx="20" cy="50" r="4" fill="#FF6B00"/>
<circle cx="80" cy="20" r="4" fill="#FF6B00"/>
<circle cx="80" cy="50" r="4" fill="#FF6B00"/>
<circle cx="80" cy="80" r="4" fill="#FF6B00"/>
<line x1="20" y1="50" x2="80" y2="20" stroke-width="1.5" stroke-dasharray="4,4"/>
<line x1="20" y1="50" x2="80" y2="50" stroke-width="1.5"/>
<line x1="20" y1="50" x2="80" y2="80" stroke-width="1.5" stroke-dasharray="4,4"/>
</svg>
</div>
</div>
</main>
<!-- RIGHT SIDEBAR (Fixed width) -->
<aside class="w-72 bg-bg border-l border-border flex flex-col shrink-0 overflow-y-auto p-3 gap-3">
<!-- AI Recommendations -->
<div class="flex flex-col gap-2">
<div class="flex items-center gap-1 text-xs text-white font-medium border-b border-border pb-1"><i class="ph-fill ph-lightbulb text-accent"></i> AI Recommendations</div>
<div class="flex flex-col gap-2 text-xxs">
<div class="bg-panel border border-border p-2 rounded flex justify-between items-start">
<div class="flex flex-col w-3/4">
<span class="text-white font-medium mb-0.5">Enable semantic search in terminal</span>
<span class="text-textMuted leading-tight">Speeds up dev workflows.</span>
</div>
<button class="text-accent border border-accent/50 hover:bg-accent/10 px-2 py-0.5 rounded">Enable</button>
</div>
<div class="bg-panel border border-border p-2 rounded flex justify-between items-start">
<div class="flex flex-col w-3/4">
<span class="text-white font-medium mb-0.5">Allow auto-fix for low-risk issues</span>
<span class="text-textMuted leading-tight">Improves productivity.</span>
</div>
<button class="text-accent border border-accent/50 hover:bg-accent/10 px-2 py-0.5 rounded">Enable</button>
</div>
<div class="bg-panel border border-border p-2 rounded flex justify-between items-start">
<div class="flex flex-col w-3/4">
<span class="text-white font-medium mb-0.5">Increase context window to 128K</span>
<span class="text-textMuted leading-tight">Better for large codebases.</span>
</div>
<button class="bg-accent text-white px-2 py-0.5 rounded shadow-[0_0_10px_rgba(255,107,0,0.4)]">Apply</button>
</div>
<div class="flex justify-between items-center mt-1 px-1">
<span class="text-textMuted">2 more recommendations</span>
<span class="text-accent hover:underline cursor-pointer">View All ></span>
</div>
</div>
</div>
<!-- System Health -->
<div class="flex flex-col gap-2 mt-2">
<div class="flex items-center gap-1 text-xs text-white font-medium border-b border-border pb-1"><i class="ph-fill ph-heartbeat text-success"></i> System Health</div>
<div class="bg-panel border border-border p-3 rounded flex items-center gap-4">
<!-- Score Circle -->
<div class="relative w-16 h-16 flex items-center justify-center">
<svg class="absolute inset-0 w-full h-full -rotate-90">
<circle cx="32" cy="32" r="28" fill="none" stroke="#1F1F26" stroke-width="4"></circle>
<circle cx="32" cy="32" r="28" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="175" stroke-dashoffset="3.5" class="shadow-[0_0_10px_rgba(16,185,129,0.5)]"></circle>
</svg>
<div class="flex flex-col items-center">
<span class="text-white text-lg font-bold leading-none mt-1">98</span>
<span class="text-success text-[0.5rem] uppercase">Excellent</span>
</div>
</div>
<div class="flex-1 flex flex-col gap-1 text-xxs">
<div class="flex justify-between"><span class="text-textMuted">AI Services</span><span class="text-success">Healthy</span></div>
<div class="flex justify-between"><span class="text-textMuted">Model Load</span><span class="text-success">23%</span></div>
<div class="flex justify-between"><span class="text-textMuted">Memory Pressure</span><span class="text-success">Low</span></div>
<div class="flex justify-between"><span class="text-textMuted">Thermals</span><span class="text-success">Optimal</span></div>
</div>
</div>
</div>
<!-- Live Preview Terminal -->
<div class="flex flex-col gap-2 mt-2">
<div class="flex items-center gap-1 text-xs text-white font-medium border-b border-border pb-1"><i class="ph-fill ph-code text-accent"></i> Live Preview</div>
<div class="bg-bg border border-border rounded flex flex-col overflow-hidden font-mono text-[0.6rem] relative h-48">
<div class="bg-panel border-b border-border px-2 py-1 flex items-center justify-between text-textMuted">
<div class="flex gap-1 items-center"><i class="ph-fill ph-linux-logo text-accent"></i> penguinOS AI Assistant</div>
<div class="flex gap-1"><i class="ph ph-minus"></i><i class="ph ph-square"></i><i class="ph ph-x"></i></div>
</div>
<div class="p-2 overflow-y-auto flex-1 leading-relaxed">
<span class="text-blue-400">> explain this function</span><br>
<span class="text-accent">function</span> <span class="text-green-400">hashFile</span>(path) {<br>
<span class="text-textMuted">// reads file and returns sha256</span><br>
}<br><br>
<span class="text-textMuted">● This function reads the file at the given path and returns its SHA-256 hash as a hex string.</span><br>
<span class="text-textMuted opacity-50">Sources: crypto/sha256.go:42</span>
</div>
<div class="p-2 mt-auto border-t border-border/50 bg-panelHover flex items-center">
<span class="text-textMuted opacity-50">Ask anything (Ctrl+K)</span>
</div>
</div>
</div>
<!-- Risk Assessment -->
<div class="flex flex-col gap-2 mt-2">
<div class="flex items-center gap-1 text-xs text-white font-medium border-b border-border pb-1"><i class="ph-fill ph-shield-warning text-warning"></i> Risk Assessment</div>
<div class="bg-panel border border-border p-2 rounded text-xxs">
<div class="flex items-center justify-between mb-2">
<div class="flex flex-col">
<span class="text-textMuted">Overall Risk</span>
<span class="text-warning text-sm font-semibold">Medium</span>
</div>
<div class="flex flex-col gap-0.5 text-right w-24">
<div class="flex justify-between"><span>Model</span><span class="text-success">Low</span></div>
<div class="flex justify-between"><span>Actions</span><span class="text-warning">Medium</span></div>
<div class="flex justify-between"><span>Data Exposure</span><span class="text-success">Low</span></div>
</div>
</div>
<div class="text-textMuted leading-tight mb-2">Review policies to reduce high-risk areas.</div>
<div class="text-right"><span class="text-accent hover:underline cursor-pointer">Open Risk Center ></span></div>
</div>
</div>
<!-- Quick Actions -->
<div class="flex flex-col gap-2 mt-2 flex-1">
<div class="flex items-center gap-1 text-xs text-white font-medium border-b border-border pb-1"><i class="ph-fill ph-lightning text-white"></i> Quick Actions</div>
<div class="grid grid-cols-2 gap-2 text-xxs h-full pb-2">
<button class="bg-panel border border-border rounded hover:bg-panelHover flex items-center justify-center gap-1 text-textMuted hover:text-white transition-colors"><i class="ph ph-chat-teardrop text-sm"></i> Open AI Assistant <span class="bg-bg border border-border px-1 rounded text-[0.5rem] ml-1">Ctrl+K</span></button>
<button class="bg-panel border border-border rounded hover:bg-panelHover flex items-center justify-center gap-1 text-textMuted hover:text-white transition-colors"><i class="ph ph-stethoscope text-sm"></i> Run System Audit</button>
<button class="bg-panel border border-border rounded hover:bg-panelHover flex items-center justify-center gap-1 text-textMuted hover:text-white transition-colors"><i class="ph ph-list-dashes text-sm"></i> View AI Activity Log</button>
<button class="bg-panel border border-border rounded hover:bg-panelHover flex items-center justify-center gap-1 text-textMuted hover:text-white transition-colors"><i class="ph ph-brain text-sm"></i> Manage Models</button>
</div>
</div>
</aside>
</div>
<!-- BOTTOM STATUS BAR -->
<footer class="flex justify-between items-center text-[0.6rem] text-textMuted px-4 py-1.5 bg-panel border-t border-border shrink-0">
<div class="flex items-center gap-6">
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem]">System Status</span><span class="text-success flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-success"></div> Excellent</span></div>
<div class="w-px h-6 bg-border"></div>
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem] flex items-center gap-1"><i class="ph-fill ph-brain"></i> AI Status</span><span class="text-success flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-success"></div> Online</span></div>
<div class="w-px h-6 bg-border"></div>
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem] flex items-center gap-1"><i class="ph-fill ph-hard-drives"></i> Storage</span><span class="text-white">1.2 TB free</span></div>
<div class="w-px h-6 bg-border"></div>
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem] flex items-center gap-1"><i class="ph-fill ph-wifi-high"></i> Network</span><span class="text-white"><span class="text-accent">↓ 1.24 GB/s</span> ↑ 72.6 MB/s</span></div>
<div class="w-px h-6 bg-border"></div>
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem] flex items-center gap-1"><i class="ph-fill ph-plug"></i> Power</span><span class="text-success flex items-center gap-1"><i class="ph-fill ph-check-circle"></i> AC Connected 100%</span></div>
<div class="w-px h-6 bg-border"></div>
<div class="flex flex-col"><span class="uppercase tracking-wider opacity-60 text-[0.55rem] flex items-center gap-1">Performance</span><span class="text-white flex items-center gap-1"><i class="ph-fill ph-scales"></i> Balanced</span></div>
</div>
<div class="flex items-center gap-6">
<div class="flex flex-col items-end"><span class="uppercase tracking-wider opacity-60 text-[0.55rem]">Secure Channel</span><span class="text-white">TLS 1.3 • AES-256</span></div>
<div class="flex flex-col items-end"><span class="uppercase tracking-wider opacity-60 text-[0.55rem]">Location</span><span class="text-white flex items-center gap-1"><i class="ph ph-globe"></i> UTC+0</span></div>
<div class="flex flex-col items-end"><span class="uppercase tracking-wider opacity-60 text-[0.55rem]">OS Version</span><span class="text-white flex items-center gap-1"><i class="ph-fill ph-linux-logo"></i> penguinOS 24.05</span></div>
<div class="flex flex-col items-end"><span class="uppercase tracking-wider opacity-60 text-[0.55rem]">Kernel</span><span class="text-white">6.8.9-penguin</span></div>
<div class="flex items-center gap-3 bg-bg border border-border px-3 py-1 rounded ml-4">
<span class="uppercase tracking-wider opacity-60 text-[0.55rem] mr-2">Quick Controls</span>
<i class="ph ph-terminal-window text-sm hover:text-white cursor-pointer"></i>
<i class="ph ph-folder text-sm hover:text-white cursor-pointer"></i>
<i class="ph ph-browser text-sm hover:text-white cursor-pointer"></i>
<div class="w-px h-4 bg-border mx-1"></div>
<i class="ph ph-speaker-high text-sm hover:text-white cursor-pointer"></i>
<i class="ph ph-sun text-sm hover:text-white cursor-pointer"></i>
<i class="ph ph-wifi-high text-sm hover:text-white cursor-pointer"></i>
<i class="ph ph-bluetooth text-sm hover:text-white cursor-pointer"></i>
</div>
</div>
</footer>
<!-- CANVAS ANIMATION SCRIPTS -->
<script>
function setupCanvas(id) {
const canvas = document.getElementById(id);
if (!canvas) return null;
const ctx = canvas.getContext('2d');
const parent = canvas.parentElement;
const resize = () => {
const rect = parent.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
canvas.style.width = `${rect.width}px`;
canvas.style.height = `${rect.height}px`;
return { w: rect.width, h: rect.height };
};
let dims = resize();
window.addEventListener('resize', () => { dims = resize(); });
return { canvas, ctx, getDims: () => dims };
}
// Draw animated sparklines for top bar
const drawSparkline = (id, color, baseline, volatility) => {
const setup = setupCanvas(id);
if (!setup) return;
const { ctx, getDims } = setup;
const points = Array(30).fill(baseline);
function draw() {
const { w, h } = getDims();
ctx.clearRect(0, 0, w, h);
// Add new point, remove old
if (Math.random() > 0.5) {
points.shift();
const newPoint = baseline + (Math.random() - 0.5) * volatility;
points.push(Math.max(0.1, Math.min(0.9, newPoint)));
}
ctx.beginPath();
const step = w / (points.length - 1);
ctx.moveTo(0, h - points[0] * h);
for(let i = 1; i < points.length; i++) {
const x = i * step;
const y = h - points[i] * h;
ctx.lineTo(x, y);
}
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
// Fill
ctx.lineTo(w, h);
ctx.lineTo(0, h);
const grad = ctx.createLinearGradient(0, 0, 0, h);
grad.addColorStop(0, color.replace('1)', '0.3)'));
grad.addColorStop(1, color.replace('1)', '0)'));
ctx.fillStyle = grad;
ctx.fill();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
};
// Initialize UI Animations
window.onload = () => {
// Top bar sparklines
drawSparkline('spark-cpu', 'rgba(255, 255, 255, 1)', 0.12, 0.1);
drawSparkline('spark-ram', 'rgba(255, 107, 0, 1)', 0.2, 0.05);
// Observability charts
drawSparkline('obs-chart-1', 'rgba(255, 107, 0, 1)', 0.4, 0.2); // Token Usage (Orange)
drawSparkline('obs-chart-2', 'rgba(100, 150, 255, 1)', 0.3, 0.15); // Latency (Blue-ish)
drawSparkline('obs-chart-3', 'rgba(255, 107, 0, 1)', 0.6, 0.1); // Memory (Orange)
drawSparkline('obs-chart-4', 'rgba(16, 185, 129, 1)', 0.9, 0.05); // Cache (Green)
// Adaptive Resource S-Curve animation
drawSparkline('obs-chart-5', 'rgba(255, 107, 0, 1)', 0.5, 0.3);
// Clock update
setInterval(() => {
const now = new Date();
document.getElementById('clock').textContent = now.toISOString().substr(11, 8) + ' UTC';
}, 1000);
};
</script>
</body>
</html>