Show description
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 (
Balanced
Throughput
2. System-wide AI Integration
3. Action Policies
Capability
Risk
Approval Level
Suggest & Explain
Low
Auto
Refactor Code
Medium
Ask
Execute Safe Commands
Medium
Ask
Run Package Installs
High
Approve
Manage System Services
High
Approve
Edit Files
Medium
Ask
Access Containers
High
Approve
Schedule Tasks / Cron
Medium
Ask
Policy Preset Developer (Default)
Customize
4. Memory & Knowledge
Retention (Global)
90 days
Workspace Memory
24.6 GB Manage
Project Embeddings
15.2 GB Manage
Knowledge Vault
8.1 GB Open
Per-project Context Quota
8 GB
Auto-prune Threshold75%
Clear Cache...
Rebuild Index
Reset All
5. Privacy & Trust Boundary
Redaction Rules
Emails, API Keys, Secrets
Edit
Secret Detection
High sensitivity
Edit
Telemetry Level
Minimal
Audit LogsLog all AI actions
View
Signed Model UpdatesVerify model signatures
View
6. Automation / Agents
Agent
Status
Schedule
CPU Cap
Memory Cap
Package Auditor
Running
Daily
15%
512 MB
Doc Indexer
Idle
Hourly
10%
1 GB
Service Healer
Running
On Event
20%
512 MB
Backup Planner
Idle
Daily
5%
256 MB
Code Assistant
Running
Always
25%
1 GB
Add Agent
Manage All Agents
7. Preview & Behavior
AI Assistant
Hello! How can I help you with your project today?
Ask anything...
Personality
Professional
Verbosity
Balanced
Tone
Helpful
Response Mode
Detailed
Keyboard Shortcut
Ctrl + K
Voice
Disabled
Notification Style
Banners
Theme Match
8.…
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>