Skip to content
LAM
Read Home Blog
Make Projects HTML Tools Games
Touch grass Notes Resume Links
Home Blog HTML Projects
Tools Games Notes Resume Links
Back penguinOS - AI-Native Linux Programming
Download Open
Show description 1,982 chars · Programming

penguinOS - AI-Native Linux

penguinOS - AI-Native Linux

penguinOS

the AI-native linux operating system

CPU23% 3.2 GHz

RAM47% 14.9 / 31.7 GB

NET↓ 1.24 Gbps ↑ 287 Mbps

PROCESSES312

CONTAINERS12 8 running

UPDATES3 security

KERNEL6.8.9-penguin

SECURE TPM 2.0

10:42:31 UTC

SAT 17 MAY 2026

System Overview

Core65%

Services17%

Utils9%

Dependency Graph

Filesystem as Habitat

Git History as Currentmain

2,341commits

128contributors

3 PRs open

Penguin AI Core

Modelpengui-7b

Context128K

Temp0.2

ACTIVE

Reasoning...

Hardware

Intel Core i9-13900K

32 cores / 64 threads

NVIDIA RTX 4090

Driver: 550.54.14

Uptime: 7h 42m

Terminalaurora@workstation:~

.--.
|o_o |
|:_/ |
// \ \
(| | )
/'\_ _/`\
\___)=(___/

aurora@workstation

OS: penguinOS Aurora x86_64

Host: Aurora Workstation

Kernel: 6.8.9-penguin

Uptime: 7 hours, 42 mins

Packages: 3144 (pacman)

Shell: zsh 5.9

DE: penguin-shell

WM: Iceberg

aurora@workstation ~ $ __

Live Network

↓ 1.2 GB/s
↑ 287 MB/s

NotificationsClear All

Security update available

linux-firmware 20240514

2m ago

Build finished successfully

project: penguin-builder

12m ago

Backup completed

/home/aurora -> coldstore

1h ago

planner.rs

models.rs

executor.rs

118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

pub async fn plan_action(
&self,
input: ActionInput,
) -> Result<Plan, PlannerError> {

// 1. Build context
let context = self.build_context(&input).await?;

// 2. Query AI model for plan
let plan = self.model
.generate_plan(&context)
.await
.map_err(PlannerError::Model)?;

// 3. Validate & score
let scored = self.score_plan(&plan, &context).await?;

// 4. Return best plan
Ok(scored.best_plan)
}

async fn build_context(&self, input: &ActionInput) -> Result<Context> {
let mut ctx = Context::new();
ctx.push_workspace_state(&self.ws).await?;
ctx.push_recent_history(50).await?;
Ok(ctx)
}

Git Blame

a1b2c3d4L. Ortega

d4e5f6a7M. Iqbal

f0a1d2c3You

b7c8d9e0S. Chen

a1b2c3d4L.…

penguinOS - AI-Native Linux

60,403 bytes · HTML source
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>penguinOS - AI-Native Linux</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: '#08080A',
                        panel: '#0E0E12',
                        panelHover: '#14141A',
                        border: '#24242C',
                        accent: '#FF6B00',
                        accentDark: '#CC5500',
                        accentGlow: 'rgba(255, 107, 0, 0.2)',
                        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: #08080A; color: #D1D5DB; overflow-x: hidden; }
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: #0E0E12; }
        ::-webkit-scrollbar-thumb { background: #24242C; border-radius: 2px; }
        ::-webkit-scrollbar-thumb:hover { background: #FF6B00; }
        
        .panel { 
            background-color: #0E0E12; 
            border: 1px solid #24242C; 
            border-radius: 4px; 
            display: flex; 
            flex-direction: column;
            overflow: hidden;
        }
        .panel-header {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #6B7280;
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid #24242C;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #111115;
        }
        .glow-text { text-shadow: 0 0 8px rgba(255, 107, 0, 0.6); }
        .canvas-container { position: relative; width: 100%; height: 100%; min-height: 120px; }
        canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        
        /* Syntax Highlighting Mock */
        .kw { color: #FF6B00; }
        .fn { color: #60A5FA; }
        .str { color: #10B981; }
        .cmt { color: #6B7280; font-style: italic; }
        .typ { color: #FCD34D; }
        
        /* Range slider styling */
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 12px;
            width: 12px;
            border-radius: 50%;
            background: #FF6B00;
            cursor: pointer;
            margin-top: -5px;
            box-shadow: 0 0 10px rgba(255, 107, 0, 0.8);
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 2px;
            cursor: pointer;
            background: #24242C;
        }
    </style>
</head>
<body class="font-mono text-xs min-w-[1600px] h-screen flex flex-col p-2 gap-2 select-none">

    <!-- TOP BAR -->
    <header class="flex items-center justify-between px-2 py-1 bg-panel border border-border rounded-sm shrink-0">
        <div class="flex items-center gap-2">
            <i class="ph-fill ph-linux-logo text-2xl text-accent glow-text"></i>
            <div>
                <h1 class="text-sm font-bold text-white tracking-wide">penguinOS</h1>
                <p class="text-[0.55rem] text-textMuted uppercase tracking-widest">the AI-native linux operating system</p>
            </div>
        </div>
        
        <div class="flex gap-6 items-center flex-1 justify-center px-10">
            <div class="flex flex-col"><span class="text-textMuted text-xxs">CPU</span><span class="text-white text-sm">23% <span class="text-xxs text-textMuted">3.2 GHz</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">RAM</span><span class="text-white text-sm">47% <span class="text-xxs text-textMuted">14.9 / 31.7 GB</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">NET</span><span class="text-accent text-sm glow-text">↓ 1.24 <span class="text-xxs">Gbps</span> <span class="text-textMuted text-xxs">↑ 287 Mbps</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">PROCESSES</span><span class="text-white text-sm">312</span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">CONTAINERS</span><span class="text-white text-sm">12 <span class="text-xxs text-textMuted">8 running</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">UPDATES</span><span class="text-accent text-sm">3 <span class="text-xxs text-accentDark">security</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">KERNEL</span><span class="text-white text-sm">6.8.9<span class="text-xxs text-textMuted">-penguin</span></span></div>
            <div class="flex flex-col"><span class="text-textMuted text-xxs">SECURE</span><span class="text-success text-sm flex items-center gap-1"><i class="ph ph-shield-check"></i> <span class="text-xxs">TPM 2.0</span></span></div>
        </div>

        <div class="flex items-center gap-4 text-textMuted">
            <i class="ph ph-bell hover:text-white cursor-pointer"></i>
            <i class="ph ph-gear hover:text-white cursor-pointer"></i>
            <i class="ph ph-power hover:text-accent cursor-pointer"></i>
            <div class="text-right">
                <div class="text-white text-sm" id="clock">10:42:31 UTC</div>
                <div class="text-xxs">SAT 17 MAY 2026</div>
            </div>
        </div>
    </header>

    <!-- VISUALIZATIONS ROW -->
    <section class="grid grid-cols-5 gap-2 h-32 shrink-0">
        <!-- Cityscape -->
        <div class="panel">
            <div class="panel-header"><span>System Overview</span><i class="ph ph-dots-three"></i></div>
            <div class="flex-1 flex px-3 items-center gap-4">
                <div class="flex-1 canvas-container"><canvas id="canvas-city"></canvas></div>
                <div class="w-32 flex flex-col gap-1 text-xxs">
                    <div class="flex justify-between"><span>Core</span><span class="text-white">65%</span></div>
                    <div class="w-full bg-border h-1 rounded-full"><div class="bg-white h-full rounded-full" style="width: 65%"></div></div>
                    <div class="flex justify-between mt-1"><span>Services</span><span class="text-accent">17%</span></div>
                    <div class="w-full bg-border h-1 rounded-full"><div class="bg-accent h-full rounded-full" style="width: 17%"></div></div>
                    <div class="flex justify-between mt-1"><span>Utils</span><span class="text-white">9%</span></div>
                    <div class="w-full bg-border h-1 rounded-full"><div class="bg-white h-full rounded-full" style="width: 9%"></div></div>
                </div>
            </div>
        </div>
        <!-- Dependency Graph -->
        <div class="panel">
            <div class="panel-header"><span>Dependency Graph</span><i class="ph ph-arrows-out-simple"></i></div>
            <div class="flex-1 canvas-container"><canvas id="canvas-nodes"></canvas></div>
        </div>
        <!-- Filesystem -->
        <div class="panel">
            <div class="panel-header"><span>Filesystem as Habitat</span><i class="ph ph-magnifying-glass"></i></div>
            <div class="flex-1 canvas-container"><canvas id="canvas-fs"></canvas></div>
        </div>
        <!-- Git History -->
        <div class="panel">
            <div class="panel-header"><span>Git History as Current</span><span class="text-accent bg-accent/10 px-1 rounded">main</span></div>
            <div class="flex-1 flex">
                <div class="flex-1 canvas-container"><canvas id="canvas-git"></canvas></div>
                <div class="w-24 border-l border-border p-2 flex flex-col justify-center gap-2 text-xxs">
                    <div><span class="text-white block">2,341</span>commits</div>
                    <div><span class="text-white block">128</span>contributors</div>
                    <div class="mt-2 text-accent">3 PRs open</div>
                </div>
            </div>
        </div>
        <!-- AI Core -->
        <div class="panel">
            <div class="panel-header"><span>Penguin AI Core</span><i class="ph ph-brain"></i></div>
            <div class="flex-1 flex px-2 items-center">
                <div class="w-32 h-full canvas-container"><canvas id="canvas-ai"></canvas></div>
                <div class="flex-1 flex flex-col gap-1 text-xxs pl-2 border-l border-border/50">
                    <div class="flex justify-between"><span>Model</span><span class="text-white">pengui-7b</span></div>
                    <div class="flex justify-between"><span>Context</span><span class="text-white">128K</span></div>
                    <div class="flex justify-between"><span>Temp</span><span class="text-white">0.2</span></div>
                    <div class="flex items-center gap-1 mt-2 text-accent glow-text"><div class="w-2 h-2 rounded-full bg-accent animate-pulse"></div> ACTIVE</div>
                    <div class="text-[0.6rem] text-textMuted mt-1">Reasoning...</div>
                </div>
            </div>
        </div>
    </section>

    <!-- MAIN CONTENT GRID -->
    <main class="flex-1 grid grid-cols-12 gap-2 min-h-0 overflow-hidden">
        
        <!-- LEFT COLUMN (3 spans) -->
        <div class="col-span-3 flex flex-col gap-2 h-full overflow-hidden">
            <!-- Hardware Details -->
            <div class="panel flex-none">
                <div class="panel-header"><span>Hardware</span></div>
                <div class="p-3 text-xxs flex flex-col gap-2">
                    <div class="flex items-center gap-2"><i class="ph-fill ph-cpu text-textMuted"></i> <span class="text-white">Intel Core i9-13900K</span></div>
                    <div class="pl-5 text-textMuted">32 cores / 64 threads</div>
                    <div class="flex items-center gap-2 mt-1"><i class="ph-fill ph-graphics-card text-textMuted"></i> <span class="text-white">NVIDIA RTX 4090</span></div>
                    <div class="pl-5 text-textMuted">Driver: 550.54.14</div>
                    <div class="flex items-center gap-2 mt-1"><i class="ph ph-clock text-textMuted"></i> <span class="text-white">Uptime: 7h 42m</span></div>
                </div>
            </div>

            <!-- Terminal -->
            <div class="panel flex-1 min-h-[200px]">
                <div class="panel-header"><span>Terminal</span><span class="lowercase text-textMuted">aurora@workstation:~</span></div>
                <div class="p-3 text-[0.6rem] leading-tight overflow-hidden flex gap-4 h-full relative">
                    <div class="text-accent/80 whitespace-pre font-bold select-none" style="line-height: 1.1;">
       .--.
      |o_o |
      |:_/ |
     //   \ \
    (|     | )
   /'\_   _/`\
   \___)=(___/
                    </div>
                    <div class="flex flex-col gap-1 z-10">
                        <div><span class="text-accent font-bold">aurora@workstation</span></div>
                        <div><span class="text-textMuted">OS:</span> <span class="text-white">penguinOS Aurora x86_64</span></div>
                        <div><span class="text-textMuted">Host:</span> <span class="text-white">Aurora Workstation</span></div>
                        <div><span class="text-textMuted">Kernel:</span> <span class="text-white">6.8.9-penguin</span></div>
                        <div><span class="text-textMuted">Uptime:</span> <span class="text-white">7 hours, 42 mins</span></div>
                        <div><span class="text-textMuted">Packages:</span> <span class="text-white">3144 (pacman)</span></div>
                        <div><span class="text-textMuted">Shell:</span> <span class="text-white">zsh 5.9</span></div>
                        <div><span class="text-textMuted">DE:</span> <span class="text-white">penguin-shell</span></div>
                        <div><span class="text-textMuted">WM:</span> <span class="text-white">Iceberg</span></div>
                        
                        <div class="mt-4"><span class="text-accent">aurora@workstation</span> <span class="text-textMuted">~ $</span> _<span class="animate-pulse">_</span></div>
                    </div>
                    <!-- Slight terminal scanline effect -->
                    <div class="absolute inset-0 pointer-events-none bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[length:100%_4px,3px_100%] opacity-20"></div>
                </div>
            </div>

            <!-- Network Live -->
            <div class="panel h-32 flex-none">
                <div class="panel-header"><span>Live Network</span><i class="ph ph-chart-line-up"></i></div>
                <div class="flex-1 relative p-2 flex flex-col">
                    <div class="flex justify-between text-xxs mb-1">
                        <span class="text-accent">↓ 1.2 GB/s</span>
                        <span class="text-blue-400">↑ 287 MB/s</span>
                    </div>
                    <div class="flex-1 canvas-container"><canvas id="canvas-net"></canvas></div>
                </div>
            </div>

            <!-- Notifications -->
            <div class="panel flex-1">
                <div class="panel-header"><span>Notifications</span><span class="text-accent cursor-pointer">Clear All</span></div>
                <div class="p-2 flex flex-col gap-2 overflow-y-auto h-full text-xxs">
                    <div class="flex gap-2 p-2 bg-panelHover rounded border-l-2 border-accent">
                        <i class="ph-fill ph-shield-warning text-accent text-sm mt-0.5"></i>
                        <div>
                            <div class="text-white font-medium">Security update available</div>
                            <div class="text-textMuted">linux-firmware 20240514</div>
                        </div>
                        <span class="ml-auto text-textMuted">2m ago</span>
                    </div>
                    <div class="flex gap-2 p-2 bg-panelHover rounded border-l-2 border-success">
                        <i class="ph-fill ph-check-circle text-success text-sm mt-0.5"></i>
                        <div>
                            <div class="text-white font-medium">Build finished successfully</div>
                            <div class="text-textMuted">project: penguin-builder</div>
                        </div>
                        <span class="ml-auto text-textMuted">12m ago</span>
                    </div>
                    <div class="flex gap-2 p-2 bg-panelHover rounded border-l-2 border-blue-400">
                        <i class="ph-fill ph-floppy-disk text-blue-400 text-sm mt-0.5"></i>
                        <div>
                            <div class="text-white font-medium">Backup completed</div>
                            <div class="text-textMuted">/home/aurora -> coldstore</div>
                        </div>
                        <span class="ml-auto text-textMuted">1h ago</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- CENTER COLUMN (5 spans) -->
        <div class="col-span-5 flex flex-col gap-2 h-full overflow-hidden">
            <!-- IDE Area -->
            <div class="panel flex-[2] flex flex-col">
                <!-- Editor Tabs -->
                <div class="flex bg-[#0A0A0C] border-b border-border text-xxs pt-1 px-1 gap-1">
                    <div class="px-3 py-1.5 bg-panel border-t border-x border-border rounded-t flex items-center gap-2 text-white"><i class="ph-fill ph-file-code text-accent"></i> planner.rs <i class="ph ph-x text-textMuted hover:text-white cursor-pointer"></i></div>
                    <div class="px-3 py-1.5 text-textMuted hover:bg-panelHover flex items-center gap-2 cursor-pointer"><i class="ph-fill ph-file-code"></i> models.rs <span class="w-2 h-2 rounded-full bg-accent inline-block"></span></div>
                    <div class="px-3 py-1.5 text-textMuted hover:bg-panelHover flex items-center gap-2 cursor-pointer"><i class="ph-fill ph-file-code"></i> executor.rs</div>
                </div>
                
                <div class="flex-1 flex overflow-hidden">
                    <!-- Line Numbers -->
                    <div class="w-10 bg-[#0A0A0C] border-r border-border text-right pr-2 py-2 text-textMuted text-[0.65rem] select-none font-mono opacity-50 flex flex-col gap-[2px]">
                        <div>118</div><div>119</div><div>120</div><div>121</div><div>122</div><div>123</div><div>124</div><div>125</div><div>126</div><div>127</div><div>128</div><div>129</div><div>130</div><div>131</div><div>132</div><div>133</div><div>134</div><div>135</div><div>136</div><div>137</div><div>138</div><div>139</div><div>140</div><div>141</div><div>142</div>
                    </div>
                    <!-- Code Content -->
                    <div class="flex-1 bg-panel p-2 overflow-y-auto text-[0.7rem] font-mono leading-relaxed whitespace-pre" id="code-content">
<span class="kw">pub async fn</span> <span class="fn">plan_action</span>(
    &<span class="kw">self</span>, 
    input: ActionInput,
) -> <span class="typ">Result</span>&lt;Plan, PlannerError&gt; {

    <span class="cmt">// 1. Build context</span>
    <span class="kw">let</span> context = <span class="kw">self</span>.build_context(&input).<span class="fn">await</span>?;

    <span class="cmt">// 2. Query AI model for plan</span>
    <span class="kw">let</span> plan = <span class="kw">self</span>.model
        .<span class="fn">generate_plan</span>(&context)
        .<span class="fn">await</span>
        .<span class="fn">map_err</span>(PlannerError::Model)?;

    <span class="cmt">// 3. Validate & score</span>
    <span class="kw">let</span> scored = <span class="kw">self</span>.<span class="fn">score_plan</span>(&plan, &context).<span class="fn">await</span>?;

    <span class="cmt">// 4. Return best plan</span>
    <span class="typ">Ok</span>(scored.best_plan)
}

<span class="kw">async fn</span> <span class="fn">build_context</span>(&<span class="kw">self</span>, input: &ActionInput) -> <span class="typ">Result</span>&lt;Context&gt; {
    <span class="kw">let mut</span> ctx = Context::<span class="fn">new</span>();
    ctx.push_workspace_state(&<span class="kw">self</span>.ws).<span class="fn">await</span>?;
    ctx.push_recent_history(<span class="typ">50</span>).<span class="fn">await</span>?;
    <span class="typ">Ok</span>(ctx)
}</div>
                    <!-- Git Blame Sidebar -->
                    <div class="w-48 bg-[#0E0E12] border-l border-border p-2 text-xxs flex flex-col gap-[2px] opacity-80">
                        <div class="text-textMuted uppercase mb-2 border-b border-border pb-1">Git Blame</div>
                        <div class="flex justify-between items-center"><span class="text-textMuted truncate w-16">a1b2c3d4</span><span class="truncate w-16 text-right">L. Ortega</span></div>
                        <div class="flex justify-between items-center"><span class="text-textMuted truncate w-16">d4e5f6a7</span><span class="truncate w-16 text-right">M. Iqbal</span></div>
                        <div class="flex justify-between items-center mt-6"><span class="text-textMuted truncate w-16">f0a1d2c3</span><span class="text-accent truncate w-16 text-right">You</span></div>
                        <div class="flex justify-between items-center"><span class="text-textMuted truncate w-16">b7c8d9e0</span><span class="truncate w-16 text-right">S. Chen</span></div>
                        <div class="flex justify-between items-center mt-5"><span class="text-textMuted truncate w-16">a1b2c3d4</span><span class="truncate w-16 text-right">L. Ortega</span></div>
                    </div>
                </div>
                
                <!-- Diagnostics / Problems Panel inside Editor -->
                <div class="h-32 bg-[#111115] border-t border-border flex flex-col">
                    <div class="flex text-xxs border-b border-border">
                        <div class="px-3 py-1.5 border-b-2 border-accent text-white flex gap-1 items-center">Problems <span class="bg-danger/20 text-danger px-1 rounded-full text-[0.55rem]">2</span></div>
                        <div class="px-3 py-1.5 text-textMuted hover:text-white cursor-pointer">Terminal</div>
                        <div class="px-3 py-1.5 text-textMuted hover:text-white cursor-pointer">Output</div>
                        <div class="px-3 py-1.5 text-textMuted hover:text-white cursor-pointer">Debug Console</div>
                    </div>
                    <div class="flex-1 p-2 overflow-y-auto text-xxs font-mono flex flex-col gap-1">
                        <div class="flex items-start gap-2 text-textMuted hover:bg-white/5 p-1 rounded cursor-pointer">
                            <i class="ph-fill ph-x-circle text-danger mt-[2px]"></i>
                            <div class="flex-1"><span class="text-white">E0308</span> mismatched types</div>
                            <div>planner.rs:131:17</div>
                        </div>
                        <div class="flex items-start gap-2 text-textMuted hover:bg-white/5 p-1 rounded cursor-pointer">
                            <i class="ph-fill ph-warning-circle text-warning mt-[2px]"></i>
                            <div class="flex-1"><span class="text-white">W01</span> unused variable `ctx`</div>
                            <div>planner.rs:142:9</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Center Row (split) -->
            <div class="flex h-40 gap-2 shrink-0">
                <!-- Package Manager -->
                <div class="panel flex-1">
                    <div class="panel-header"><span>Package Manager</span><i class="ph ph-package"></i></div>
                    <div class="p-2 text-xxs flex flex-col h-full">
                        <div class="flex bg-[#0A0A0C] rounded overflow-hidden border border-border mb-2">
                            <input type="text" placeholder="Search packages..." class="bg-transparent border-none outline-none px-2 py-1 flex-1 text-white">
                            <i class="ph ph-magnifying-glass p-1.5 text-textMuted"></i>
                        </div>
                        <div class="flex justify-between text-[0.6rem] text-textMuted mb-1 px-1"><span>Updates (3)</span><span>Size</span></div>
                        <div class="overflow-y-auto flex-1 flex flex-col gap-1 pr-1">
                            <div class="flex items-center gap-2 hover:bg-panelHover p-1 rounded">
                                <input type="checkbox" checked class="accent-accent">
                                <span class="text-white flex-1 truncate">linux-firmware</span>
                                <span class="text-textMuted">320.4 MB</span>
                            </div>
                            <div class="flex items-center gap-2 hover:bg-panelHover p-1 rounded">
                                <input type="checkbox" checked class="accent-accent">
                                <span class="text-white flex-1 truncate">pgpool2</span>
                                <span class="text-textMuted">12.1 MB</span>
                            </div>
                            <div class="flex items-center gap-2 hover:bg-panelHover p-1 rounded">
                                <input type="checkbox" checked class="accent-accent">
                                <span class="text-white flex-1 truncate">firefox</span>
                                <span class="text-textMuted">72.4 MB</span>
                            </div>
                        </div>
                        <button class="mt-2 w-full bg-accent/10 text-accent border border-accent/30 py-1 rounded hover:bg-accent hover:text-white transition-colors">Upgrade Selected</button>
                    </div>
                </div>
                <!-- Test Results -->
                <div class="panel flex-[0.7]">
                    <div class="panel-header"><span>Test Results</span><i class="ph ph-check-square"></i></div>
                    <div class="flex-1 flex flex-col items-center justify-center p-2 relative">
                        <!-- Circular Progress -->
                        <div class="w-20 h-20 rounded-full border-4 border-border flex items-center justify-center relative shadow-[0_0_15px_rgba(255,107,0,0.1)]">
                            <svg class="absolute inset-0 w-full h-full -rotate-90">
                                <circle cx="36" cy="36" r="36" class="stroke-accent fill-none" stroke-width="4" stroke-dasharray="226" stroke-dashoffset="30" style="transform: translate(4px, 4px)"></circle>
                            </svg>
                            <span class="text-white text-lg font-bold">87%</span>
                        </div>
                        <div class="mt-3 w-full text-xxs flex flex-col gap-1 px-4">
                            <div class="flex justify-between"><span>Passed</span><span class="text-success">1,248</span></div>
                            <div class="flex justify-between"><span>Failed</span><span class="text-danger">186</span></div>
                            <div class="flex justify-between"><span>Skipped</span><span class="text-warning">12</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RIGHT COLUMN (4 spans) -->
        <div class="col-span-4 flex flex-col gap-2 h-full overflow-hidden">
            <!-- AI Workspace -->
            <div class="panel flex-[1.5]">
                <div class="panel-header">
                    <span>Penguin AI Workspace</span>
                    <div class="flex gap-2"><i class="ph ph-arrows-out-simple cursor-pointer hover:text-white"></i><i class="ph ph-x cursor-pointer hover:text-white"></i></div>
                </div>
                <div class="flex text-xxs border-b border-border bg-[#0A0A0C]">
                    <div class="px-4 py-2 border-b-2 border-accent text-white font-medium">Context</div>
                    <div class="px-4 py-2 text-textMuted hover:text-white cursor-pointer">Actions</div>
                    <div class="px-4 py-2 text-textMuted hover:text-white cursor-pointer">Memory</div>
                </div>
                <div class="p-3 flex flex-col h-full overflow-y-auto">
                    <!-- Task -->
                    <div class="mb-4">
                        <div class="text-[0.65rem] text-textMuted uppercase flex items-center gap-1 mb-1"><i class="ph-fill ph-target"></i> Current Task</div>
                        <div class="bg-panelHover p-2 rounded border border-border text-xs text-white">Refactor <code class="text-accent bg-accent/10 px-1 rounded">score_plan</code> for parallel evaluation</div>
                    </div>
                    
                    <!-- Context Files -->
                    <div class="mb-4">
                        <div class="text-[0.65rem] text-textMuted uppercase mb-1 flex justify-between"><span>Active Context</span><span class="text-accent">3 files</span></div>
                        <div class="flex gap-2">
                            <div class="bg-[#181820] border border-border rounded px-2 py-1 text-xxs flex items-center gap-1"><i class="ph-fill ph-file-code text-blue-400"></i> planner.rs</div>
                            <div class="bg-[#181820] border border-border rounded px-2 py-1 text-xxs flex items-center gap-1"><i class="ph-fill ph-file-code text-green-400"></i> models.rs</div>
                            <div class="bg-[#181820] border border-border rounded px-2 py-1 text-xxs flex items-center gap-1 opacity-50"><i class="ph ph-plus"></i> Add</div>
                        </div>
                    </div>

                    <!-- Suggestions -->
                    <div class="flex-1 flex flex-col">
                        <div class="text-[0.65rem] text-textMuted uppercase mb-2">Suggested Actions</div>
                        <div class="flex flex-col gap-2 flex-1">
                            <div class="bg-panelHover border border-border p-2 rounded flex justify-between items-center hover:border-accent/50 transition-colors cursor-pointer group">
                                <div class="flex items-center gap-2 text-xs">
                                    <i class="ph-fill ph-magic-wand text-accent"></i>
                                    <span class="text-white">Implement <code class="text-accent">tokio::join!</code> in scoring</span>
                                </div>
                                <button class="bg-white/5 text-white px-2 py-1 text-xxs rounded group-hover:bg-accent group-hover:text-white transition-colors">Apply</button>
                            </div>
                            <div class="bg-panelHover border border-border p-2 rounded flex justify-between items-center hover:border-accent/50 transition-colors cursor-pointer group">
                                <div class="flex items-center gap-2 text-xs">
                                    <i class="ph-fill ph-flask text-green-400"></i>
                                    <span class="text-white">Generate unit tests for edge cases</span>
                                </div>
                                <button class="bg-white/5 text-white px-2 py-1 text-xxs rounded group-hover:bg-accent group-hover:text-white transition-colors">Apply</button>
                            </div>
                        </div>
                        
                        <!-- AI Input -->
                        <div class="mt-2 bg-[#0A0A0C] border border-border rounded p-1 flex items-center focus-within:border-accent transition-colors">
                            <input type="text" placeholder="Ask Penguin AI to modify code..." class="bg-transparent border-none outline-none text-xs px-2 py-1 flex-1 text-white">
                            <button class="w-6 h-6 rounded bg-accent/20 text-accent flex items-center justify-center hover:bg-accent hover:text-white transition-colors"><i class="ph-bold ph-paper-plane-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profiler / Flame Graph -->
            <div class="panel flex-1">
                <div class="panel-header"><span>Profiler (CPU)</span><div class="flex gap-2"><span class="text-accent">Record</span><i class="ph ph-caret-down"></i></div></div>
                <div class="flex-1 flex flex-col p-2 relative">
                    <div class="flex-1 canvas-container"><canvas id="canvas-flame"></canvas></div>
                    <div class="mt-2 text-xxs grid grid-cols-2 gap-x-4 gap-y-1 text-textMuted border-t border-border pt-2">
                        <div class="flex justify-between"><span class="text-white truncate">score_plan</span><span>46.7%</span></div>
                        <div class="flex justify-between"><span class="truncate">build_context</span><span>12.3%</span></div>
                        <div class="flex justify-between"><span class="truncate">evaluate_node</span><span>9.1%</span></div>
                        <div class="flex justify-between"><span class="truncate">hash_state</span><span>6.4%</span></div>
                    </div>
                </div>
            </div>

            <!-- Memory / Storage Map -->
            <div class="panel flex-[0.8]">
                <div class="panel-header"><span>Storage Map</span><i class="ph ph-hard-drives"></i></div>
                <div class="p-3 text-xxs flex flex-col gap-3 justify-center h-full">
                    <div>
                        <div class="flex justify-between mb-1"><span>/ (nvme0n1p2)</span><span class="text-white">482 / 1,024 GB</span></div>
                        <div class="w-full bg-[#1A1A24] h-1.5 rounded overflow-hidden flex">
                            <div class="bg-accent h-full" style="width: 35%"></div>
                            <div class="bg-blue-500 h-full" style="width: 12%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1"><span>/home (nvme0n1p3)</span><span class="text-white">812 / 2,048 GB</span></div>
                        <div class="w-full bg-[#1A1A24] h-1.5 rounded overflow-hidden flex">
                            <div class="bg-white h-full" style="width: 20%"></div>
                            <div class="bg-green-500 h-full" style="width: 19%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between mb-1"><span>/data (nvme1n1p1)</span><span class="text-white">3.2 / 4.0 TB</span></div>
                        <div class="w-full bg-[#1A1A24] h-1.5 rounded overflow-hidden flex">
                            <div class="bg-accent h-full" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>

    <!-- BOTTOM ROW PANELS -->
    <section class="grid grid-cols-4 gap-2 h-32 shrink-0">
        <!-- Background Tasks -->
        <div class="panel">
            <div class="panel-header"><span>Background Tasks</span></div>
            <div class="p-2 text-xxs flex flex-col gap-2 overflow-y-auto">
                <div>
                    <div class="flex justify-between text-white mb-0.5"><span>Indexing codebase</span><span>42%</span></div>
                    <div class="w-full bg-border h-1 rounded-full"><div class="bg-accent h-full rounded-full w-[42%]"></div></div>
                </div>
                <div>
                    <div class="flex justify-between text-textMuted mb-0.5"><span>Cargo build (planner)</span><span>Running</span></div>
                    <div class="w-full bg-border h-1 rounded-full overflow-hidden relative">
                        <div class="bg-blue-500 h-full absolute left-0 top-0 w-1/3 animate-[slide_1.5s_ease-in-out_infinite_alternate]"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between text-textMuted mb-0.5"><span>AI Model Sync</span><span>Done</span></div>
                </div>
            </div>
        </div>
        
        <!-- AI Reasoning Trace -->
        <div class="panel col-span-2">
            <div class="panel-header"><span>AI Reasoning Trace</span><span class="text-accent">Live <span class="inline-block w-1.5 h-1.5 bg-accent rounded-full animate-pulse ml-1"></span></span></div>
            <div class="p-2 font-mono text-[0.65rem] text-textMuted flex flex-col gap-1 overflow-y-auto h-full">
                <div class="flex gap-2"><span class="text-blue-400">›</span><span>Analyzing `score_plan` for parallelization opportunities...</span></div>
                <div class="flex gap-2"><span class="text-blue-400">›</span><span>Detected independent scoring heuristics inside loop (lines 130-145).</span></div>
                <div class="flex gap-2"><span class="text-blue-400">›</span><span>Constructing AST modifications to inject `tokio::task::spawn`.</span></div>
                <div class="flex gap-2"><span class="text-blue-400">›</span><span class="text-white">Evaluating borrow checker constraints on `context` variable.</span></div>
                <div class="flex gap-2 pl-4 border-l border-border ml-1"><span class="text-warning">⚠</span><span>Warning: `context` is shared. Requires `Arc<Context>`.</span></div>
                <div class="flex gap-2"><span class="text-accent glow-text">›</span><span class="text-white">Generating final code patch...</span></div>
            </div>
        </div>

        <!-- Active Containers -->
        <div class="panel">
            <div class="panel-header"><span>Active Services</span><i class="ph ph-cube"></i></div>
            <div class="p-2 text-[0.65rem] flex flex-col gap-1 h-full overflow-y-auto">
                <div class="flex justify-between items-center p-1 hover:bg-panelHover rounded">
                    <div class="flex items-center gap-1"><i class="ph-fill ph-circle text-success text-[0.4rem]"></i> <span class="text-white">penguin-ai-core</span></div>
                    <span class="text-textMuted">1.2GB</span>
                </div>
                <div class="flex justify-between items-center p-1 hover:bg-panelHover rounded">
                    <div class="flex items-center gap-1"><i class="ph-fill ph-circle text-success text-[0.4rem]"></i> <span class="text-white">postgres-db</span></div>
                    <span class="text-textMuted">450MB</span>
                </div>
                <div class="flex justify-between items-center p-1 hover:bg-panelHover rounded">
                    <div class="flex items-center gap-1"><i class="ph-fill ph-circle text-success text-[0.4rem]"></i> <span class="text-white">redis-cache</span></div>
                    <span class="text-textMuted">64MB</span>
                </div>
                <div class="flex justify-between items-center p-1 hover:bg-panelHover rounded">
                    <div class="flex items-center gap-1"><i class="ph-fill ph-circle text-warning text-[0.4rem] animate-pulse"></i> <span class="text-white">builder-worker</span></div>
                    <span class="text-textMuted">CPU 98%</span>
                </div>
            </div>
        </div>
    </section>

    <!-- WORKSPACE TIME-TRAVEL (TIMELINE) -->
    <section class="h-14 bg-panel border border-border rounded-sm flex flex-col justify-center px-4 shrink-0 relative overflow-hidden">
        <div class="flex justify-between items-center text-xxs text-textMuted mb-2 relative z-10">
            <div class="flex items-center gap-2">
                <span class="text-white font-medium">WORKSPACE TIME-TRAVEL</span>
                <i class="ph ph-caret-left cursor-pointer hover:text-white"></i>
                <i class="ph ph-caret-right cursor-pointer hover:text-white"></i>
            </div>
            <div class="flex gap-4">
                <span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-white"></div> Commits</span>
                <span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-accent"></div> Edits</span>
                <span class="flex items-center gap-1"><div class="w-2 h-2 rounded-full bg-blue-500"></div> AI Actions</span>
            </div>
            <div class="flex gap-2">
                <button class="bg-[#1A1A24] px-2 py-0.5 rounded text-white flex items-center gap-1"><i class="ph-fill ph-record text-accent"></i> Live</button>
                <button class="bg-[#1A1A24] px-2 py-0.5 rounded hover:text-white"><i class="ph ph-rewind"></i> Rewind</button>
            </div>
        </div>
        
        <div class="relative w-full z-10 flex items-center h-4">
            <input type="range" min="0" max="100" value="85" class="w-full absolute z-20 opacity-0 cursor-pointer h-full" id="timeline-slider">
            <!-- Custom Track -->
            <div class="w-full h-[1px] bg-border absolute top-1/2 -translate-y-1/2 z-0"></div>
            <!-- Progress Fill -->
            <div class="h-[1px] bg-accent/50 absolute top-1/2 -translate-y-1/2 z-0 left-0" style="width: 85%"></div>
            
            <!-- Timeline markers (Mock) -->
            <div class="absolute w-full h-full pointer-events-none z-10 flex items-center">
                <div class="w-1.5 h-1.5 rounded-full bg-white absolute" style="left: 10%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 15%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 16%"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-blue-500 absolute" style="left: 25%"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white absolute" style="left: 40%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 45%"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-blue-500 absolute" style="left: 60%"></div>
                <div class="w-1.5 h-1.5 rounded-full bg-white absolute" style="left: 75%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 78%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 80%"></div>
                <div class="w-1 h-1 rounded-full bg-accent absolute" style="left: 82%"></div>
                
                <!-- Current Time Indicator -->
                <div class="absolute flex flex-col items-center -translate-x-1/2 pointer-events-none" style="left: 85%">
                    <div class="bg-accent text-bg font-bold px-1 py-[1px] rounded text-[0.5rem] mb-1">10:42</div>
                    <div class="w-3 h-3 rounded-full bg-bg border-2 border-accent shadow-[0_0_10px_rgba(255,107,0,0.8)]"></div>
                </div>
            </div>
        </div>
        <div class="flex justify-between text-[0.5rem] text-textMuted mt-1">
            <span>08:00</span><span>09:00</span><span>10:00</span><span>11:00</span>
        </div>
    </section>

    <!-- STATUS BAR -->
    <footer class="flex justify-between items-center text-[0.65rem] text-textMuted px-2 py-1 bg-panel border border-border rounded-sm shrink-0">
        <div class="flex items-center gap-6">
            <div class="flex items-center gap-1 text-white"><i class="ph-fill ph-check-circle text-success"></i> BUILD: OK</div>
            <div class="flex items-center gap-1"><i class="ph ph-git-branch text-accent"></i> feature/parallel-planner</div>
            <div class="flex items-center gap-1"><i class="ph ph-warning-circle text-warning"></i> 2 open issues</div>
        </div>
        <div class="flex items-center gap-6">
            <div class="flex items-center gap-2">
                <span>AI Context</span>
                <div class="w-24 h-1 bg-border rounded-full overflow-hidden"><div class="bg-accent h-full w-[95%]"></div></div>
                <span>128K / 128K</span>
            </div>
            <div>Secure Channel: <span class="text-success">TLS 1.3 / ChaCha20</span></div>
            <div>Latency: <span class="text-white">12 ms</span></div>
            <div>Load: <span class="text-white">0.42 0.38 0.31</span></div>
            <div class="flex items-center gap-2 bg-[#1A1A24] px-2 py-1 rounded cursor-pointer hover:bg-white/10 transition-colors">
                <span class="text-white">QUICK LAUNCH</span>
                <i class="ph-bold ph-rocket-launch text-accent"></i>
            </div>
        </div>
    </footer>

    <!-- CSS Animation keyframes used inline -->
    <style>
        @keyframes slide {
            0% { left: 0%; transform: translateX(0); }
            100% { left: 100%; transform: translateX(-100%); }
        }
    </style>

    <!-- SCRIPTS FOR CANVAS ANIMATIONS -->
    <script>
        // Utility for setting up high-DPI canvases
        function setupCanvas(id) {
            const canvas = document.getElementById(id);
            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 };
        }

        // 1. Cityscape (System Overview)
        const initCity = () => {
            const { ctx, getDims } = setupCanvas('canvas-city');
            const bars = Array.from({length: 40}, () => ({
                height: Math.random(),
                target: Math.random(),
                speed: 0.02 + Math.random() * 0.03
            }));

            function draw(time) {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                const barWidth = w / bars.length;
                
                bars.forEach((bar, i) => {
                    // Interpolate height
                    bar.height += (bar.target - bar.height) * bar.speed;
                    if (Math.abs(bar.target - bar.height) < 0.01) {
                        bar.target = Math.random();
                    }
                    
                    const actualHeight = bar.height * (h * 0.8) + (h * 0.1);
                    const x = i * barWidth;
                    const y = h - actualHeight;
                    
                    // Draw base
                    ctx.fillStyle = `rgba(20, 20, 26, 0.8)`;
                    ctx.fillRect(x + 1, y, barWidth - 2, actualHeight);
                    
                    // Draw orange top
                    const intensity = 0.5 + bar.height * 0.5;
                    ctx.fillStyle = `rgba(255, 107, 0, ${intensity})`;
                    ctx.fillRect(x + 1, y, barWidth - 2, 4);
                    
                    // Add some glowing dots
                    if (Math.sin(time * 0.005 + i) > 0.8) {
                        ctx.fillStyle = '#FFF';
                        ctx.fillRect(x + barWidth/2 - 1, y + Math.random() * actualHeight, 2, 2);
                    }
                });
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 2. Network Nodes (Dependency Graph)
        const initNodes = () => {
            const { ctx, getDims } = setupCanvas('canvas-nodes');
            const numNodes = 40;
            const nodes = Array.from({length: numNodes}, () => ({
                x: Math.random(), y: Math.random(),
                vx: (Math.random() - 0.5) * 0.002,
                vy: (Math.random() - 0.5) * 0.002,
                isHighlight: Math.random() > 0.8
            }));

            function draw() {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                
                nodes.forEach(n => {
                    n.x += n.vx; n.y += n.vy;
                    if (n.x < 0 || n.x > 1) n.vx *= -1;
                    if (n.y < 0 || n.y > 1) n.vy *= -1;
                });

                ctx.lineWidth = 1;
                for (let i = 0; i < numNodes; i++) {
                    for (let j = i + 1; j < numNodes; j++) {
                        const dx = nodes[i].x * w - nodes[j].x * w;
                        const dy = nodes[i].y * h - nodes[j].y * h;
                        const dist = Math.sqrt(dx*dx + dy*dy);
                        
                        if (dist < 60) {
                            ctx.beginPath();
                            ctx.moveTo(nodes[i].x * w, nodes[i].y * h);
                            ctx.lineTo(nodes[j].x * w, nodes[j].y * h);
                            const alpha = 1 - (dist / 60);
                            ctx.strokeStyle = `rgba(100, 100, 120, ${alpha * 0.5})`;
                            if (nodes[i].isHighlight || nodes[j].isHighlight) {
                                ctx.strokeStyle = `rgba(255, 107, 0, ${alpha * 0.8})`;
                            }
                            ctx.stroke();
                        }
                    }
                }

                nodes.forEach(n => {
                    ctx.beginPath();
                    ctx.arc(n.x * w, n.y * h, n.isHighlight ? 3 : 2, 0, Math.PI * 2);
                    ctx.fillStyle = n.isHighlight ? '#FF6B00' : '#888';
                    ctx.fill();
                    if (n.isHighlight) {
                        ctx.shadowBlur = 10;
                        ctx.shadowColor = '#FF6B00';
                        ctx.fill();
                        ctx.shadowBlur = 0;
                    }
                });
                
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 3. Filesystem Habitat (Tree/Branching)
        const initFS = () => {
            const { ctx, getDims } = setupCanvas('canvas-fs');
            let angleOffset = 0;

            function drawTree(x, y, length, angle, depth, maxDepth) {
                if (depth === 0) return;
                
                const endX = x + length * Math.cos(angle);
                const endY = y + length * Math.sin(angle);
                
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(endX, endY);
                
                const ratio = depth / maxDepth;
                ctx.strokeStyle = depth > 2 ? `rgba(200, 200, 220, ${ratio})` : `rgba(255, 107, 0, ${ratio})`;
                ctx.lineWidth = depth * 0.8;
                ctx.stroke();
                
                // Draw leaf/node
                if (depth === 1 || Math.random() > 0.8) {
                    ctx.beginPath();
                    ctx.arc(endX, endY, depth === 1 ? 2 : 1, 0, Math.PI * 2);
                    ctx.fillStyle = depth === 1 ? '#FF6B00' : '#AAA';
                    ctx.fill();
                }

                const newLen = length * 0.7;
                drawTree(endX, endY, newLen, angle - 0.5 + Math.sin(angleOffset)*0.1, depth - 1, maxDepth);
                drawTree(endX, endY, newLen, angle + 0.4 + Math.cos(angleOffset)*0.1, depth - 1, maxDepth);
            }

            function draw(time) {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                angleOffset = time * 0.001;
                drawTree(w/2, h - 10, h * 0.25, -Math.PI / 2, 7, 7);
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 4. Git History (Waves)
        const initGit = () => {
            const { ctx, getDims } = setupCanvas('canvas-git');
            
            function draw(time) {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                
                const t = time * 0.002;
                const waves = 4;
                
                for (let i = 0; i < waves; i++) {
                    ctx.beginPath();
                    ctx.moveTo(0, h/2);
                    
                    for (let x = 0; x < w; x += 5) {
                        const normalizedX = x / w;
                        // Combine multiple sine waves for complex organic feel
                        const yOffset = Math.sin(normalizedX * 10 + t + i) * 15 
                                      + Math.cos(normalizedX * 5 - t * 0.8 + i) * 10;
                        
                        // Pinch at the ends
                        const envelope = Math.sin(normalizedX * Math.PI); 
                        
                        ctx.lineTo(x, h/2 + yOffset * envelope);
                    }
                    
                    if (i === 0) {
                        ctx.strokeStyle = '#FF6B00';
                        ctx.lineWidth = 2;
                        ctx.shadowBlur = 10;
                        ctx.shadowColor = '#FF6B00';
                    } else {
                        ctx.strokeStyle = `rgba(150, 150, 170, ${0.1 + (i*0.1)})`;
                        ctx.lineWidth = 1;
                        ctx.shadowBlur = 0;
                    }
                    ctx.stroke();
                }
                ctx.shadowBlur = 0;
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 5. AI Core (Concentric Radar)
        const initAI = () => {
            const { ctx, getDims } = setupCanvas('canvas-ai');
            
            function draw(time) {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                
                const cx = w / 2;
                const cy = h / 2;
                const maxR = Math.min(w, h) / 2 - 5;
                const t = time * 0.0005;

                // Center glowing dot
                ctx.beginPath();
                ctx.arc(cx, cy, 4, 0, Math.PI * 2);
                ctx.fillStyle = '#FF6B00';
                ctx.shadowBlur = 15;
                ctx.shadowColor = '#FF6B00';
                ctx.fill();
                ctx.shadowBlur = 0;

                // Rings
                const rings = [
                    { r: maxR * 0.3, dashes: [], speed: 1, color: 'rgba(255, 107, 0, 0.8)', width: 2 },
                    { r: maxR * 0.5, dashes: [5, 15], speed: -0.5, color: 'rgba(100, 100, 120, 0.5)', width: 1 },
                    { r: maxR * 0.7, dashes: [2, 4], speed: 0.2, color: 'rgba(200, 200, 220, 0.3)', width: 1 },
                    { r: maxR * 0.9, dashes: [30, 20, 5, 20], speed: 0.8, color: '#FF6B00', width: 1.5 }
                ];

                rings.forEach((ring, i) => {
                    ctx.beginPath();
                    ctx.arc(cx, cy, ring.r, 0, Math.PI * 2);
                    ctx.setLineDash(ring.dashes);
                    // Rotate
                    ctx.save();
                    ctx.translate(cx, cy);
                    ctx.rotate(t * ring.speed);
                    ctx.translate(-cx, -cy);
                    
                    ctx.strokeStyle = ring.color;
                    ctx.lineWidth = ring.width;
                    ctx.stroke();
                    ctx.restore();
                });
                
                // Crosshairs
                ctx.setLineDash([]);
                ctx.strokeStyle = 'rgba(255, 107, 0, 0.2)';
                ctx.beginPath();
                ctx.moveTo(cx, 0); ctx.lineTo(cx, h);
                ctx.moveTo(0, cy); ctx.lineTo(w, cy);
                ctx.stroke();

                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 6. Network Live Line Chart
        const initNet = () => {
            const { ctx, getDims } = setupCanvas('canvas-net');
            const data1 = Array(50).fill(0).map(() => Math.random() * 0.5 + 0.2);
            const data2 = Array(50).fill(0).map(() => Math.random() * 0.3 + 0.1);
            
            function draw(time) {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                
                // Update data slowly
                if (Math.random() > 0.9) {
                    data1.shift(); data1.push(Math.random() * 0.6 + 0.2);
                    data2.shift(); data2.push(Math.random() * 0.4 + 0.1);
                }

                function drawLine(data, color, fillMode) {
                    ctx.beginPath();
                    const step = w / (data.length - 1);
                    ctx.moveTo(0, h - data[0] * h);
                    
                    for(let i=1; i<data.length; i++) {
                        // Smooth curves
                        const x0 = (i-1) * step;
                        const y0 = h - data[i-1] * h;
                        const x1 = i * step;
                        const y1 = h - data[i] * h;
                        const xc = (x0 + x1) / 2;
                        ctx.quadraticCurveTo(x0, y0, xc, (y0 + y1) / 2);
                        // For the last point
                        if (i === data.length - 1) {
                            ctx.quadraticCurveTo(xc, (y0 + y1) / 2, x1, y1);
                        }
                    }
                    
                    if (fillMode) {
                        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();
                    } else {
                        ctx.strokeStyle = color;
                        ctx.lineWidth = 1.5;
                        ctx.stroke();
                    }
                }

                drawLine(data1, 'rgba(255, 107, 0, 1)', true); // Orange fill
                drawLine(data1, 'rgba(255, 107, 0, 1)', false); // Orange line
                drawLine(data2, 'rgba(96, 165, 250, 1)', false); // Blue line
                
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // 7. Profiler Flame Graph
        const initFlame = () => {
            const { ctx, getDims } = setupCanvas('canvas-flame');
            
            // Mock flame graph blocks
            const blocks = [];
            const levels = 6;
            for (let l = 0; l < levels; l++) {
                let currentX = 0;
                while (currentX < 1) {
                    const width = Math.random() * 0.3 + 0.05;
                    if (currentX + width > 1) break; // keep it simple
                    blocks.push({
                        level: l,
                        x: currentX,
                        w: width,
                        color: `hsl(${15 + Math.random()*20}, 90%, ${40 + Math.random()*20}%)` // Oranges/Reds
                    });
                    currentX += width + 0.01;
                }
            }

            function draw() {
                const { w, h } = getDims();
                ctx.clearRect(0, 0, w, h);
                
                const blockH = h / levels - 2;
                
                blocks.forEach(b => {
                    const x = b.x * w;
                    const y = h - (b.level + 1) * (blockH + 2);
                    const width = b.w * w;
                    
                    ctx.fillStyle = b.color;
                    ctx.fillRect(x, y, width, blockH);
                    
                    // Highlight effect on hover (simulated by random pulse)
                    if (Math.random() > 0.99) {
                        ctx.fillStyle = 'rgba(255,255,255,0.3)';
                        ctx.fillRect(x, y, width, blockH);
                    }
                });
                
                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        };

        // Initialize all animations when window loads
        window.onload = () => {
            initCity();
            initNodes();
            initFS();
            initGit();
            initAI();
            initNet();
            initFlame();

            // Clock update
            setInterval(() => {
                const now = new Date();
                document.getElementById('clock').textContent = now.toISOString().substr(11, 8) + ' UTC';
            }, 1000);
        };
    </script>
</body>
</html>