### Run ContextOS Installation

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Executes the main ContextOS installation script. This command detects your IDE, backs up configuration files, patches settings, downloads models, and starts the proxy daemon.

```bash
contextos install
```

--------------------------------

### Install ContextOS

Source: https://github.com/skappal7/context-os/blob/main/README.md

Install the ContextOS Python package and run the installation command to set up the proxy and integrate with supported IDEs.

```bash
pip install contextos-dd && contextos install
```

--------------------------------

### Install ContextOS Package

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Installs the ContextOS package and its dependencies using pip. This is the primary installation command for most users.

```bash
pip install contextos-dd
```

--------------------------------

### Install llama-cpp-python Prebuilt Wheel (Windows)

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

On Windows, install the prebuilt llama-cpp-python wheel first to avoid path length issues during compilation. Then, install the main ContextOS package.

```powershell
pip install llama-cpp-python --extra-index-url https://abetlen.github.io/llama-cpp-python/whl/cpu
pip install contextos-dd
```

--------------------------------

### Install ContextOS (Minimal)

Source: https://github.com/skappal7/context-os/blob/main/README.md

Install ContextOS without downloading models initially, suitable for offline or air-gapped environments. Models will download on first compaction.

```bash
pip install contextos-dd
contextos install --skip-models
```

--------------------------------

### Warmup ContextOS Models

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Downloads and installs the necessary language models for ContextOS. This command can be run after an offline installation or to update models.

```bash
contextos warmup
```

--------------------------------

### Start ContextOS Daemon

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

If the ContextOS daemon is stopped, use this command to start it. Check daemon logs if issues persist.

```bash
contextos start
```

--------------------------------

### Install Dashboard Dependencies

Source: https://github.com/skappal7/context-os/blob/main/README.md

Install the necessary dependencies for the ContextOS dashboard using pip.

```bash
pip install 'contextos-dd[dashboard]'
```

--------------------------------

### Clone Repository and Install Development Dependencies

Source: https://github.com/skappal7/context-os/blob/main/README.md

Clone the ContextOS repository and install development and dashboard dependencies. Includes code checking and testing.

```bash
git clone https://github.com/skappal7/context-os
cd context-os
pip install -e ".[dev,dashboard]"
ruff check .
pytest -q
```

--------------------------------

### Start ContextOS Daemon Only

Source: https://github.com/skappal7/context-os/blob/main/README.md

Starts only the ContextOS daemon without launching the dashboard.

```bash
contextos start --no-dashboard
```

--------------------------------

### Start ContextOS Dashboard

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Launches the ContextOS dashboard in your web browser. This provides real-time insights into token savings and other metrics.

```bash
contextos dashboard
```

--------------------------------

### Start and Stop ContextOS

Source: https://github.com/skappal7/context-os/blob/main/README.md

Use these commands to manage the ContextOS service. Ensure CONTEXTOS_PASSTHROUGH is set for transparent proxying.

```bash
export CONTEXTOS_PASSTHROUGH=1
contextos stop && contextos start
```

--------------------------------

### Install ContextOS Without Models

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Installs ContextOS while skipping the model download step. This is useful for air-gapped or offline environments. Models can be downloaded later using 'contextos warmup'.

```bash
contextos install --skip-models
```

--------------------------------

### Verify ContextOS Installation

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Runs a diagnostic check on the ContextOS installation. It verifies paths, dependencies, network status, and IDE integrations.

```bash
contextos doctor
```

--------------------------------

### Start ContextOS Daemon in Foreground

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Run the ContextOS daemon in the foreground for live diagnostics. Output streams directly to the terminal, and Ctrl+C stops it cleanly.

```bash
contextos start --foreground
```

--------------------------------

### Reinstall llama-cpp-python for CPU

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

If you encounter installation errors with llama-cpp-python due to CPU instruction sets, reinstall version 0.2.90 using this command, which forces a CPU-specific wheel.

```bash
pip install --force-reinstall "llama-cpp-python==0.2.90" --extra-index-url https://abetlen.github.io/llama-cpp-python/whl/cpu
```

--------------------------------

### Listen for Step Changes

Source: https://github.com/skappal7/context-os/blob/main/index.html

Listens for custom 'cos-step-change' events and speaks the corresponding text if speech is enabled and audio is playing. Includes a delay to ensure camera movement starts first.

```javascript
document.addEventListener('cos-step-change', e => {
  const step = e.detail.step;
  if(step === lastSpokenStep) return;
  lastSpokenStep = step;
  if(playing && speechEnabled && SPEECH[step]){
    setTimeout(()=>speak(SPEECH[step]), 500);
  }
});
```

--------------------------------

### Three.js Particle Sphere Creation

Source: https://github.com/skappal7/context-os/blob/main/index.html

Creates an interactive 3D sphere using Three.js, featuring particles that can be animated and respond to mouse movement. Includes setup for renderer, scene, camera, and particle geometry.

```javascript
// ── THREE.JS SPHERE FACTORY ──
function createSphere(canvasId){
    const canvas=document.getElementById(canvasId);
    if(!canvas)return;
    const isHero=canvasId==='hero-canvas';
    // Circular soft-dot sprite — circles not squares
    const spr=document.createElement('canvas');spr.width=64;spr.height=64;
    const sc=spr.getContext('2d');
    const g=sc.createRadialGradient(32,32,0,32,32,32);
    g.addColorStop(0,'rgba(255,255,255,1)');
    g.addColorStop(0.4,'rgba(255,255,255,0.8)');
    g.addColorStop(0.8,'rgba(255,255,255,0.2)');
    g.addColorStop(1,'rgba(255,255,255,0)');
    sc.fillStyle=g;sc.fillRect(0,0,64,64);
    const sprite=new THREE.CanvasTexture(spr);
    const renderer=new THREE.WebGLRenderer({canvas,antialias:true,alpha:true});
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
    const scene=new THREE.Scene();
    const camera=new THREE.PerspectiveCamera(50,1,0.1,2000);
    camera.position.z=280;
    const resize=()=>{
        const p=canvas.parentElement;
        renderer.setSize(p.clientWidth,p.clientHeight,false);
        camera.aspect=p.clientWidth/p.clientHeight;
        camera.updateProjectionMatrix()
    };
    resize();
    window.addEventListener('resize',resize);
    // ── PARTICLE DATA ──────────────────────────────
    const N=2400; // Sphere positions (origin)
    const originPos = new Float32Array(N*3);
    // Explode-to positions: each dot flies to a random point on a large shell
    const explodePos = new Float32Array(N*3);
    const col = new Float32Array(N*3);
    // Live buffer written each frame
    const livePos = new Float32Array(N*3);
    const R=90, EXPLODE_R=420;
    const golden=Math.PI*(1+Math.sqrt(5));
    for(let i=0;i<N;i++){
        // Fibonacci lattice — perfect uniform sphere
        const phi = Math.acos(1-2*(i+0.5)/N);
        const theta= golden*i;
        const sx=R*Math.sin(phi)*Math.cos(theta);
        const sy=R*Math.cos(phi);
        const sz=R*Math.sin(phi)*Math.sin(theta);
        originPos[i*3 ]=sx;
        originPos[i*3+1]=sy;
        originPos[i*3+2]=sz;
        // Explode direction: radially outward + slight random drift
        // so dots don't all go exactly through origin
        const ex=sx + (Math.random()-0.5)*60;
        const ey=sy + (Math.random()-0.5)*60;
        const ez=sz + (Math.random()-0.5)*60;
        const len=Math.sqrt(ex*ex+ey*ey+ez*ez);
        explodePos[i*3 ]=(ex/len)*EXPLODE_R*(0.6+Math.random()*0.8);
        explodePos[i*3+1]=(ey/len)*EXPLODE_R*(0.6+Math.random()*0.8);
        explodePos[i*3+2]=(ez/len)*EXPLODE_R*(0.6+Math.random()*0.8);
        const b=0.3+0.7*Math.pow(Math.sin(phi),0.3)+Math.random()*0.1;
        col[i*3]=b;col[i*3+1]=b;col[i*3+2]=b;
        // Init live to origin
        livePos[i*3 ]=sx;
        livePos[i*3+1]=sy;
        livePos[i*3+2]=sz;
    }
    const geo=new THREE.BufferGeometry();
    geo.setAttribute('position',new THREE.BufferAttribute(livePos,3));
    geo.setAttribute('color', new THREE.BufferAttribute(col,3));
    const mat=new THREE.PointsMaterial({ size:4.2, map:sprite, vertexColors:true, transparent:true, opacity:0.9, sizeAttenuation:true, alphaTest:0.01, depthWrite:false });
    const points=new THREE.Points(geo,mat);
    scene.add(points);
    // ── MOUSE PARALLAX ─────────────────────────────
    let tx=0,ty=0,cx=0,cy=0;
    if(isHero){
        document.addEventListener('mousemove',e=>{
            tx=(e.clientX/window.innerWidth -0.5)*0.45;
            ty=(e.clientY/window.innerHeight-0.5)*0.45;
        });
    }
    // ── SCROLL PROGRESS (hero only) ────────────────
    // Easing: ease-in-out cubic so explosion feels physical
    function easeInOut(t){
        return t<0.5 ? 4*t*t*t : 1-Math.pow(-2*t+2,3)/2;
    }
    // Smooth scroll progress — lerped each frame for buttery feel
    let scrollProgress=0, targetScrol
```

--------------------------------

### Hero Scene Animation Loop

Source: https://github.com/skappal7/context-os/blob/main/index.html

Handles the main animation loop for the hero scene, including auto-rotation, mouse parallax, and scroll-based explosion effects. Requires a 'hero-canvas' element and associated setup.

```javascript
lProgress=0; if(isHero){ window.addEventListener('scroll',()=>{ const heroH=canvas.parentElement.clientHeight; targetScrollProgress=Math.min(window.scrollY/heroH,1); },{passive:true}); } // ── ANIMATION LOOP ───────────────────────────── (function animate(){ requestAnimationFrame(animate); // Slow auto-rotation points.rotation.y+=0.0022; // Mouse parallax cx+=(tx-cx)*0.04; cy+=(ty-cy)*0.04; if(isHero){ points.rotation.x=cy*0.6; points.rotation.z=cx*0.2; } if(isHero){ // Smooth scroll progress scrollProgress+=(targetScrollProgress-scrollProgress)*0.06; const p=easeInOut(scrollProgress); // Lerp every particle between origin and explode position const posAttr=geo.attributes.position; for(let i=0;i<N;i++){ posAttr.array[i*3 ]=originPos[i*3 ]+(explodePos[i*3 ]-originPos[i*3 ])*p; posAttr.array[i*3+1]=originPos[i*3+1]+(explodePos[i*3+1]-originPos[i*3+1])*p; posAttr.array[i*3+2]=originPos[i*3+2]+(explodePos[i*3+2]-originPos[i*3+2])*p; } posAttr.needsUpdate=true; // Fade out opacity as explosion progresses mat.opacity=0.9*(1-p*0.85); } renderer.render(scene,camera); })(); }
```

--------------------------------

### Initialize Three.js Renderer and Scene

Source: https://github.com/skappal7/context-os/blob/main/index.html

Sets up the WebGL renderer, scene, and camera. Includes event listeners for window resizing to adjust the renderer and camera aspect ratio.

```javascript
const renderer = new THREE.WebGLRenderer({canvas,antialias:true,alpha:false});
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
renderer.setClearColor(0x04040C,1);
const W=()=>wrap.clientWidth;
const H=()=>wrap.clientHeight;
renderer.setSize(W(),H(),false);
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x04040C,0.012);
const camera = new THREE.PerspectiveCamera(55,W()/H(),0.01,600);
window.addEventListener('resize',()=>{
  renderer.setSize(W(),H(),false);
  camera.aspect=W()/H();
  camera.updateProjectionMatrix();
  // rebuild overlay canvas
  rebuildOverlay();
},{passive:true});
```

--------------------------------

### Remove Corrupt Model and Warmup

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

If model compaction is slow, your model file might be corrupt. Remove the existing GGUF file and run 'contextos warmup' to re-download it.

```bash
rm ~/.contextos/models/Qwen2.5-*.gguf
contextos warmup
```

--------------------------------

### Ambient Audio System Initialization

Source: https://github.com/skappal7/context-os/blob/main/index.html

Initializes the ambient audio system using the Web Audio API. This system plays a drone, procedural tones, and speech synthesis without external files or CDNs.

```javascript
'use strict';

const btn = document.getElementById('cos-audio-btn');
const icon = document.getElementById('cos-audio-icon');
const label = document.getElementById('cos-audio-lab
```

--------------------------------

### Initialize LLM Node and Pulse Ring

Source: https://github.com/skappal7/context-os/blob/main/index.html

Sets up a 3D mesh for the LLM node and a visual pulse ring around it using Three.js. The ring material is set to be transparent and initially invisible.

```javascript
const llmNodeMat=new THREE.MeshBasicMaterial({color:0x8888ff,transparent:true,opacity:0.0 }); const llmNode=new THREE.Mesh(new THREE.SphereGeometry(0.5,16,16),llmNodeMat); llmNode.position.set(P3.x+18,0,0); scene.add(llmNode); // Pulse ring around LLM node const llmRingMat=new THREE.MeshBasicMaterial({color:0x8888ff,transparent:true,opacity:0.0,wireframe:true}); const llmRing=new THREE.Mesh(new THREE.TorusGeometry(1.2,0.06,4,32),llmRingMat); llmRing.position.set(P3.x+18,0,0); llmRing.rotation.x=Math.PI/2; scene.add(llmRing);
```

--------------------------------

### Build ContextOS Audio Graph

Source: https://github.com/skappal7/context-os/blob/main/index.html

Constructs the audio processing graph for ContextOS, including master gain, multiple oscillator layers for drones and pads, a scheduled pulse for a sci-fi tick, and filtered white noise for data stream effects. This function initializes the AudioContext and sets up all audio nodes.

```javascript
function buildAudio(){
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    // Master gain
    const master = audioCtx.createGain();
    master.gain.setValueAtTime(0, audioCtx.currentTime);
    master.gain.linearRampToValueAtTime(0.55, audioCtx.currentTime + 2.5);
    master.connect(audioCtx.destination);
    nodes.master = master;
    // ── LAYER 1: Deep sub-bass drone (40Hz) ──
    const sub = audioCtx.createOscillator();
    sub.type = 'sine';
    sub.frequency.value = 40;
    const subGain = audioCtx.createGain();
    subGain.gain.value = 0.35;
    sub.connect(subGain);
    subGain.connect(master);
    sub.start();
    // ── LAYER 2: Mid drone (80Hz) with slow LFO wobble ──
    const mid = audioCtx.createOscillator();
    mid.type = 'triangle';
    mid.frequency.value = 80;
    const midGain = audioCtx.createGain();
    midGain.gain.value = 0.18;
    // LFO on mid frequency
    const lfo1 = audioCtx.createOscillator();
    lfo1.frequency.value = 0.12;
    const lfoGain1 = audioCtx.createGain();
    lfoGain1.gain.value = 3;
    lfo1.connect(lfoGain1);
    lfoGain1.connect(mid.frequency);
    lfo1.start();
    mid.connect(midGain);
    midGain.connect(master);
    mid.start();
    // ── LAYER 3: High shimmer (320Hz) very faint ──
    const hi = audioCtx.createOscillator();
    hi.type = 'sine';
    hi.frequency.value = 320;
    const hiGain = audioCtx.createGain();
    hiGain.gain.value = 0.04;
    // LFO on hi gain for pulse
    const lfo2 = audioCtx.createOscillator();
    lfo2.frequency.value = 0.35;
    const lfoGain2 = audioCtx.createGain();
    lfoGain2.gain.value = 0.03;
    lfo2.connect(lfoGain2);
    lfoGain2.connect(hiGain.gain);
    lfo2.start();
    hi.connect(hiGain);
    hiGain.connect(master);
    hi.start();
    // ── LAYER 4: Slow pad chord (160Hz + 192Hz + 240Hz) ──
    [160, 192, 240].forEach((freq, i) => {
        const pad = audioCtx.createOscillator();
        pad.type = 'sine';
        pad.frequency.value = freq;
        const padGain = audioCtx.createGain();
        padGain.gain.value = 0.06;
        const padLFO = audioCtx.createOscillator();
        padLFO.frequency.value = 0.08 + i * 0.03;
        const padLFOGain = audioCtx.createGain();
        padLFOGain.gain.value = 0.05;
        padLFO.connect(padLFOGain);
        padLFOGain.connect(padGain.gain);
        padLFO.start();
        pad.connect(padGain);
        padGain.connect(master);
        pad.start();
    });
    // ── LAYER 5: Data stream noise (filtered white noise) ──
    const bufSize = audioCtx.sampleRate * 2;
    const noiseBuffer = audioCtx.createBuffer(1, bufSize, audioCtx.sampleRate);
    const noiseData = noiseBuffer.getChannelData(0);
    for(let i=0;i<bufSize;i++) noiseData[i]=(Math.random()*2-1);
    const noiseSource = audioCtx.createBufferSource();
    noiseSource.buffer = noiseBuffer;
    noiseSource.loop = true;
    const bpf = audioCtx.createBiquadFilter();
    bpf.type = 'bandpass';
    bpf.frequency.value = 1200;
    bpf.Q.value = 0.4;
    const noiseGain = audioCtx.createGain();
    noiseGain.gain.value = 0.018;
    // Slow LFO on noise frequency for sci-fi sweep
    const nLFO = audioCtx.createOscillator();
    nLFO.frequency.value = 0.07;
    const nLFOGain = audioCtx.createGain();
    nLFOGain.gain.value = 600;
    nLFO.connect(nLFOGain);
    nLFOGain.connect(bpf.frequency);
    nLFO.start();
    noiseSource.connect(bpf);
    bpf.connect(noiseGain);
    noiseGain.connect(master);
    noiseSource.start();
    nodes.master = master;
}
// ── SPEECH SYNTHESIS ──────────────────────────────────────────
function speak(text){
    if(!speechEnabled || !window.speechSynthesis) return;
    window.speechSynthesis.cancel();
    const utt = new SpeechSynthesisUtterance(text);
    utt.rate = 0.82;
    utt.pitch = 0.75;
    utt.volume = 0.65;
    // Prefer a deep/neutral voice if available
    const voices = window.speechSynthesis.getVoices();
    const preferred = voices.find(v=> v.lang.startsWith('en') && (

```

--------------------------------

### Uninstall ContextOS

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

Use this command to uninstall ContextOS. It restores IDE configurations and stops the daemon but does not delete data files.

```bash
contextos uninstall
```

--------------------------------

### Apply Visual Styles for Project Step

Source: https://github.com/skappal7/context-os/blob/main/index.html

Applies opacity and visual styles to various 3D model components (e.g., R1a, I2b, hexMats) based on the current project step. Controls the visibility and appearance of different stations and elements.

```javascript
function applyStep(step){
    // Station 1
    const s1=step>=0?0.88:0;
    R1a.mat.opacity=s1;
    R1b.mat.opacity=s1*0.8;
    R1c.mat.opacity=s1*0.65;
    cM1.opacity=s1*0.95;
    // Station 2
    const s2=step>=4?0.88:step===3?0.3:0;
    I2a.mat.opacity=s2;
    I2b.mat.opacity=s2*0.75;
    cM2.opacity=s2*0.95;
    compPts.material.opacity=step===5?0.88:step===4?0.4:0;
    // Station 3
    const s3=step>=5?0.88:step===4?0.25:0;
    hexMats.forEach(m=>m.opacity=s3*0.9);
    strutMats.forEach(m=>m.opacity=s3*0.65);
    cM3.
```

--------------------------------

### Set Proxy for Model Downloads

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

If model downloads fail due to corporate proxies, set the HTTPS_PROXY environment variable before running 'contextos warmup'. You may also need to disable HF_TRANSFER.

```bash
export HF_HUB_ENABLE_HF_TRANSFER=0
export HTTPS_PROXY=http://your-proxy:port
```

--------------------------------

### Enable Passthrough Mode on Windows

Source: https://github.com/skappal7/context-os/blob/main/README.md

Sets an environment variable to disable trimming and keep IDE interactions as-is. Requires stopping and restarting the daemon.

```bash
set CONTEXTOS_PASSTHROUGH=1
contextos stop && contextos start
```

--------------------------------

### Create Raw Blob Particle System

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates a cloud of points representing a raw blob. The points are randomly distributed within a defined volume and rendered as a particle system.

```javascript
const rawN=500,rawBase=new Float32Array(rawN*3); for(let i=0;i<rawN;i++){ rawBase[i*3]=-36+(Math.random()-0.5)*5; rawBase[i*3+1]=(Math.random()-0.5)*5; rawBase[i*3+2]=(Math.random()-0.5)*3; } const rawGeo=new THREE.BufferGeometry(); rawGeo.setAttribute('position',new THREE.BufferAttribute(rawBase.slice(),3)); const rawPts=new THREE.Points(rawGeo,PM(TX.orange,0.20,0)); scene.add(rawPts);
```

--------------------------------

### Step Narrative Configuration

Source: https://github.com/skappal7/context-os/blob/main/index.html

Defines the content and positioning for each step in a narrative sequence. Includes step number, title, description, token information, and an array of labels with text, world position, color, and size.

```javascript
const STEPS=\[ { num:'01', title:'THE COST OF CHAOS', desc:'A 2-hour AI session accumulates 800K+ tokens. Over 60% is stale noise. The model drowns before it can think.', token:'RAW SESSION\n800K TOKENS · UNMANAGED', labels:[
 {text:'YOUR IDE\nSESSION', world:[-36,4,0], color:'#E8522A',size:13},
 {text:'800K TOKENS\nOF NOISE',world:[-36,-3,0], color:'rgba(255,255,255,0.4)',size:11},
 ] }, { num:'02', title:'INTERCEPTED — ZERO FRICTION', desc:'Every LLM API call passes through ContextOS invisibly. Your IDE notices nothing. The bloated payload arrives at The Interceptor.', token:'PAYLOAD CAPTURED\n800K TOKENS INCOMING', labels:[
 {text:'THE\nINTERCEPTOR', world:[-20,6,0], color:'#5ECFCF',size:14},
 {text:'← API CALL\nINTERCEPTED',world:[-28,1,0],color:'rgba(255,255,255,0.5)',size:11},
 {text:'ZERO LATENCY\nTO YOUR IDE',world:[-20,-6,0],color:'rgba(94,207,207,0.6)',size:10},
 ] }, { num:'03', title:'FOUR STATES — INSTANT CLASSIFICATION', desc:'Every conversation turn is scored in milliseconds. Four buckets. No ML model. Pure signal intelligence.', token:'4 STATES ASSIGNED\nHOT · WARM · COLD · DEAD', labels:[
 {text:'🔴 HOT', world:[-20,3.5,0], color:'#FF5566',size:13},
 {text:'Active context\nLast 5 turns',world:[-14,3.5,0],color:'rgba(255,85,102,0.55)',size:10},
 {text:'🟡 WARM', world:[-20,1.2,0], color:'#FFD166',size:13},
 {text:'Recent resolved\nwork',world:[-14,1.2,0],color:'rgba(255,209,102,0.55)',size:10},
 {text:'🔵 COLD', world:[-20,-1.1,0],color:'#56CCF2',size:13},
 {text:'Stale completed\nwork',world:[-14,-1.1,0],color:'rgba(86,204,242,0.55)',size:10},
 {text:'⬛ DEAD', world:[-20,-3.4,0],color:'#888899',size:13},
 {text:'Duplicate noise\ndrop entirely',world:[-14,-3.4,0],color:'rgba(136,136,153,0.55)',size:10},
 ] }, { num:'04', title:'DEAD TURNS — DROPPED ENTIRELY', desc:'Duplicate content, repeated errors, redundant file inclusions. Never forwarded. Never seen by the model. Gone.', token:'DEAD TOKENS DROPPED\n−180K ELIMINATED', labels:[
 {text:'⬛ DEAD TURNS\nDROPPED',world:[-20,-6,0],color:'#888899',size:13},
 {text:'−180K TOKENS\nELIMINATED',world:[-28,-5,0],color:'rgba(255,255,255,0.4)',size:12},
 {text:'THE INTERCEPTOR\nFILTERING',world:[-20,6,0],color:'#5ECFCF',size:12},
 ] }, { num:'05', title:'COLD CONTEXT — COMPRESSED 95%', desc:'Stale completed work flows to The Memory Engine. 2,400 raw tokens become 120 narrative tokens. Every decision preserved.', token:'COMPACTION ACTIVE\n2,400 → 120 TOKENS', labels:[
 {text:'THE MEMORY\nENGINE',world:[0,6.5,0],color:'#E8522A',size:14},
 {text:'🔵 COLD CONTEXT\nIN',world:[-10,1,0],color:'#56CCF2',size:12},
 {text:'2,400 TOKENS',world:[0,-5,0],color:'rgba(86,204,242,0.6)',size:11},
 {text:'↓ COMPRESSED TO',world:[6,-5,0],color:'rgba(255,255,255,0.3)',size:10},
 {text:'120 TOKENS',world:[11,-5,0],color:'#E8522A',size:12},
 ] }, { num:'06', title:'ARCHIVED — ZERO BYTES LEAVE', desc:'Compressed summaries seal into The Recall Vault locally. Semantic embeddings stored. Retrievable in milliseconds. Your machine only.', token:'ARCHIVED LOCALLY\nZERO BYTES LEAVE MACHINE', labels:[
 {text:'THE RECALL\nVAULT',world:[20,7,0],color:'#9988FF',size:14},
 {text:'MEMORIES\nARCHIVED',world:[20,-6,0],color:'rgba(153,136,255,0.6)',size:11},
 {text:'100% LOCAL\nZERO CLOUD',world:[28,0,0],color:'rgba(255,255,255,0.4)',size:10},
 {text:'SEMANTIC\nEMBEDDINGS',world:[14,2,0],color:'rgba(153,136,255,0.5)',size:10},
 ] }, { num:'07', title:'RECALL — CONTEXT RETRIEVED ON DEMAND', desc:'The model signals it needs prior context. The Recall Vault detects the trigger phrase and fires the exact segment back silently.', token:'RECALL SIGNAL FIRED\nCONTEXT RE-INJECTED', labels:[
 {text:'RETRIEVAL\nTRI',world:[20,-6,0],color:'rgba(153,136,255,0.6)',size:11},
 ] }\];
```

--------------------------------

### Create and Show Scene Beams

Source: https://github.com/skappal7/context-os/blob/main/index.html

Functions to create and manage visual beams between points in the scene. 'mkBeam' creates a static beam, while 'showBeam' and 'hideBeam' control its visibility and update its geometry.

```javascript
function mkBeam(f,t,col){ const geo=new THREE.BufferGeometry().setFromPoints([f.clone(),f.clone()]); const mat=new THREE.LineBasicMaterial({color:col,transparent:true,opacity:0}); const line=new THREE.Line(geo,mat); scene.add(line); return {line,geo,mat,from:f.clone(),to:t.clone()}; } function showBeam(b,op){ const a=b.geo.attributes.position.array; a[0]=b.from.x;a[1]=b.from.y;a[2]=b.from.z; a[3]=b.to.x;a[4]=b.to.y;a[5]=b.to.z; b.geo.attributes.position.needsUpdate=true; b.mat.opacity=op; } function hideBeam(b){b.mat.opacity=0;} const bAB=mkBeam(P1,P2,0x56ccf2); const bBC=mkBeam(P2,P3,0xe85020); const bCA=mkBeam(P3,P1,0x9988ff); const bOut=mkBeam(new THREE.Vector3(P3.x+10,0,0),new THREE.Vector3(P3.x+18,0,0),0xffffff);
```

--------------------------------

### Create Heat Cloud Particle System

Source: https://github.com/skappal7/context-os/blob/main/index.html

A factory function to create 'heat clouds' with customizable texture, vertical offset, and number of particles. Each cloud is a particle system added to the scene.

```javascript
function hCloud(tx,yOff,n){ const pos=new Float32Array(n*3),orig=new Float32Array(n*3); for(let i=0;i<n;i++){ const x=P1.x+(Math.random()-0.5)*4,y=yOff+(Math.random()-0.5)*1,z=(Math.random()-0.5)*2; pos[i*3]=orig[i*3]=x; pos[i*3+1]=orig[i*3+1]=y; pos[i*3+2]=orig[i*3+2]=z; } const geo=new THREE.BufferGeometry(); geo.setAttribute('position',new THREE.BufferAttribute(pos.slice(),3)); const mat=PM(tx,0.22,0); const pts=new THREE.Points(geo,mat); scene.add(pts); return {pts,geo,mat,orig}; } const HS={hot:hCloud(TX.red,2.2,60),warm:hCloud(TX.yellow,0.7,50),cold:hCloud(TX.blue,-0.9,65),dead:hCloud(TX.grey,-2.4,50)};
```

--------------------------------

### Wipe All ContextOS Data

Source: https://github.com/skappal7/context-os/blob/main/INSTALL.md

After uninstalling, use these commands to completely remove all ContextOS data from your system. This includes configuration files, models, and logs.

```bash
contextos uninstall
rm -rf ~/.contextos          # Linux / macOS
```

```powershell
Remove-Item -Recurse -Force $env:LOCALAPPDATA\DataDojo\contextos   # Windows
```

--------------------------------

### Create Clean Payload Particle System

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates a clean payload particle system with points distributed in a spherical pattern. The particles are rendered with a white material.

```javascript
const cleanN=140,cleanPos=new Float32Array(cleanN*3); for(let i=0;i<cleanN;i++){ const phi=Math.acos(1-2*(i+0.5)/cleanN),theta=Math.PI*(1+Math.sqrt(5))*i,r=1.8; cleanPos[i*3]=P3.x+10+r*Math.sin(phi)*Math.cos(theta); cleanPos[i*3+1]=r*Math.cos(phi); cleanPos[i*3+2]=r*Math.sin(phi)*Math.sin(theta); } const cleanGeo=new THREE.BufferGeometry(); cleanGeo.setAttribute('position',new THREE.BufferAttribute(cleanPos.slice(),3)); const cleanPts=new THREE.Points(cleanGeo,PM(TX.white,0.22,0)); scene.add(cleanPts);
```

--------------------------------

### Update UI Elements for Project Step

Source: https://github.com/skappal7/context-os/blob/main/index.html

Updates the title, description, and step number displayed on the UI based on the current project step. Also manages the visual state of progress dots.

```javascript
function updateUI(step){
    const s=STEPS[step];
    if(titleEl){titleEl.style.opacity='0';titleEl.style.transform='translateY(10px)'; setTimeout(()=>{titleEl.textContent=s.title;titleEl.style.opacity='1';titleEl.style.transform='translateY(0)';},150);}
    if(descEl){descEl.style.opacity='0'; setTimeout(()=>{descEl.textContent=s.desc;descEl.style.opacity='1';},200);}
    if(stepEl) stepEl.textContent=`STEP ${s.num} / 09`;
    targetTokens=TOKEN_VALS[step];
    targetLabelOpacity=0;
    setTimeout(()=>{ targetLabelOpacity=1; },300);
    STEPS.forEach((_,i)=>{
        const d=document.getElementById(`cos-dot-${i}`);
        if(d) d.style.cssText=`width:${i===step?'16px':'5px'};height:5px;border-radius:3px;background:${i===step?'var(--orange)':'rgba(255,255,255,0.18)'};transition:all 0.35s;`;
    });
    if(hintEl) hintEl.style.opacity=step===0?'1':'0';
}
```

--------------------------------

### Check ContextOS Status

Source: https://github.com/skappal7/context-os/blob/main/README.md

Displays the health status of the daemon and lists detected IDEs.

```bash
contextos status
```

--------------------------------

### Create Starfield Geometry and Points

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates a starfield using Three.js BufferGeometry and Points. Positions stars randomly within a defined volume.

```javascript
(function(){
  const N=1400,pos=new Float32Array(N*3);
  for(let i=0;i<N;i++){
    pos[i*3]=(Math.random()-0.5)*260;
    pos[i*3+1]=(Math.random()-0.5)*150;
    pos[i*3+2]=(Math.random()-0.5)*160-20;
  }
  const geo=new THREE.BufferGeometry();
  geo.setAttribute('position',new THREE.BufferAttribute(pos,3));
  scene.add(new THREE.Points(geo,PM(TX.white,0.12,0.28)));
})();
```

--------------------------------

### Navigation Controls for Animation Steps

Source: https://github.com/skappal7/context-os/blob/main/index.html

Handles user navigation through animation steps using buttons, keyboard arrows, and touch gestures. It updates the current step, camera position, and UI elements.

```javascript
let currentStep=0;
const camPos=new THREE.Vector3(-42,7,34);
const camLook=new THREE.Vector3(-20,0,0);
const tgtPos=new THREE.Vector3(-42,7,34);
const tgtLook=new THREE.Vector3(-20,0,0);

function goTo(s){
    if(s<0||s>=STEPS.length) return;
    currentStep=s;
    const k=CAM[s];
    tgtPos.set(k.p[0],k.p[1],k.p[2]);
    tgtLook.set(k.l[0],k.l[1],k.l[2]);
    updateUI(s);
    if(window.cosAudioStepChange) window.cosAudioStepChange(s);
}

const prevBtn=document.getElementById('cos-prev');
const nextBtn=document.getElementById('cos-next');
if(prevBtn) prevBtn.addEventListener('click',e=>{
    e.stopPropagation();
    goTo(currentStep-1);
});
if(nextBtn) nextBtn.addEventListener('click',e=>{
    e.stopPropagation();
    goTo(currentStep+1);
});

document.addEventListener('keydown',e=>{
    if(e.key==='ArrowRight'||e.key==='ArrowDown') goTo(currentStep+1);
    if(e.key==='ArrowLeft' ||e.key==='ArrowUp') goTo(currentStep-1);
});

let tx0=0,ty0=0;
wrap.addEventListener('touchstart',e=>{
    tx0=e.touches[0].clientX;
    ty0=e.touches[0].clientY;
},{passive:true});
wrap.addEventListener('touchend',e=>{
    const dx=e.changedTouches[0].clientX-tx0;
    const dy=e.changedTouches[0].clientY-ty0;
    if(Math.abs(dx)>Math.abs(dy)+10&&Math.abs(dx)>40){
        if(dx<0) goTo(currentStep+1);
        else goTo(currentStep-1);
    }
},{passive:true});

let md=false,mx0=0;
wrap.addEventListener('mousedown',e=>{
    md=true;
    mx0=e.clientX;
    wrap.style.cursor='grabbing';
});
window.addEventListener('mouseup',e=>{
    if(md){
        const dx=e.clientX-mx0;
        if(Math.abs(dx)>50){
            if(dx<0) goTo(currentStep+1);
            else goTo(currentStep-1);
        }
        md=false;
        wrap.style.cursor='grab';
    }
});
```

--------------------------------

### Expose Step Change Functionality

Source: https://github.com/skappal7/context-os/blob/main/index.html

Exposes a global function `cosAudioStepChange` that allows external scripts to trigger a step change event, which in turn can initiate speech.

```javascript
window.cosAudioStepChange = function(step){
  document.dispatchEvent(new CustomEvent('cos-step-change',{detail:{step}}));
};
```

--------------------------------

### Create and Manage 2D Overlay Canvas

Source: https://github.com/skappal7/context-os/blob/main/index.html

Creates a 2D canvas overlay for drawing labels or other 2D elements on top of the 3D scene. It handles scaling based on device pixel ratio and window size.

```javascript
const oc = document.createElement('canvas');
oc.style.cssText='position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;';
wrap.appendChild(oc);
let ctx;
function rebuildOverlay(){
  oc.width = W() * window.devicePixelRatio;
  oc.height = H() * window.devicePixelRatio;
  oc.style.width = W()+'px';
  oc.style.height = H()+'px';
  ctx = oc.getContext('2d');
  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}
rebuildOverlay();
```

--------------------------------

### Implement Scroll Reveal Animation

Source: https://github.com/skappal7/context-os/blob/main/index.html

Observes elements with the 'reveal' class and adds a 'visible' class when they enter the viewport, triggering animations. Includes support for transition delays.

```javascript
const revealEls = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const el = e.target;
      const delay = parseFloat(el.style.transitionDelay || el.dataset.delay || 0) * 1000;
      setTimeout(() => {
        el.classList.add('visible');
        const op = el.dataset.opacity;
        if (op) el.style.opacity = op;
      }, delay);
      obs.unobserve(el);
    }
  });
}, {
  threshold: 0.1
});
revealEls.forEach(el => obs.observe(el));
```

--------------------------------

### Create Orbit Ring Dots

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates points arranged in a circular pattern to represent an orbit ring, using a custom PointsMaterial.

```javascript
(function(){
  const N=100,p=new Float32Array(N*3);
  for(let i=0;i<N;i++){
    const a=(i/N)*Math.PI*2;
    p[i*3]=Math.cos(a)*4;
    p[i*3+2]=Math.sin(a)*4;
  }
  const geo=new THREE.BufferGeometry();
  geo.setAttribute('position',new THREE.BufferAttribute(p,3));
  const pts=new THREE.Points(geo,PM(TX.teal,0.18,0.88));
  pts.rotation.x=Math.PI/2;
  G1.add(pts);
})();
```

--------------------------------

### Create Custom Dot Textures

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates a radial gradient texture for use with Three.js PointsMaterial. Allows customization of color and gradient stops.

```javascript
function dotTex(r,g,b){
  const c=document.createElement('canvas');
  c.width=c.height=128;
  const x=c.getContext('2d');
  const g2=x.createRadialGradient(64,64,0,64,64,60);
  g2.addColorStop(0,\`rgba(${r},${g},${b},1)\`)
  g2.addColorStop(0.4,\`rgba(${r},${g},${b},0.85)\`)
  g2.addColorStop(0.8,\`rgba(${r},${g},${b},0.25)\`)
  g2.addColorStop(1,\`rgba(0,0,0,0)\`)
  x.fillStyle=g2;
  x.fillRect(0,0,128,128);
  return new THREE.CanvasTexture(c);
}
const TX={
  white :dotTex(255,255,255),
  teal :dotTex(60,220,200),
  orange:dotTex(240,100,50),
  indigo:dotTex(150,140,255),
  red :dotTex(255,80,80),
  yellow:dotTex(255,210,70),
  blue :dotTex(70,180,255),
  grey :dotTex(90,90,110),
};
```

--------------------------------

### Create Icosahedron Mesh with Phong Material

Source: https://github.com/skappal7/context-os/blob/main/index.html

Generates an icosahedron mesh with a Phong material, configured for wireframe rendering with emissive color and transparency.

```javascript
function mkIco(sz,col,rx,ry){
  const mat=new THREE.MeshPhongMaterial({color:col,emissive:col,emissiveIntensity:0.4, wireframe:true,transparent:true,opacity:0.88});
  const m=new THREE.Mesh(new THREE.IcosahedronGeometry(sz,1),mat);
  m.rotation.set(rx,ry,0);
  G2.add(m);
  return {mesh:m,mat};
}
const I2a=mkIco(4.0,0xe85020,0,0);
const I2b=mkIco(3.2,0xff7744,Math.PI/3,Math.PI/4);
const cM2=new THREE.MeshPhongMaterial({color:0xff9966,emissive:0xe86020,emissiveIntensity:1.4, transparent:true,opacity:0.95});
G2.add(new THREE.Mesh(new THREE.SphereGeometry(1.0,32,32),cM2));
```

--------------------------------

### Camera Keyframes Configuration

Source: https://github.com/skappal7/context-os/blob/main/index.html

Defines an array of camera positions and look-at points for defining camera movements or keyframes within a 3D scene. Each element specifies 'p' (position) and 'l' (look-at) coordinates.

```javascript
const CAM=\[ {p:[-42,7,34],l:[-20,0,0]}, {p:[-28,4,22],l:[-20,0,0]}, {p:[-16,2,16],l:[-20,0,0]}, {p:[-16,0,12],l:[-20,-2,0]}, {p:[ -4,5,20],l:[ 0,0,0]}, {p:[ 5,2,14],l:[ 0,0,0]}, {p:[ 14,5,20],l:[ 20,0,0]}, {p:[ 25,2,16],l:[ 20,0,0]}, {p:[ 38,6,26],l:[ 30,0,-6]}, \];
```

--------------------------------

### Early Access Modal Dialog

Source: https://github.com/skappal7/context-os/blob/main/index.html

Manages an early access modal dialog, including opening, closing, and handling form submissions via Fetch API. It prevents page reloads and provides feedback on submission status.

```javascript
document.addEventListener('DOMContentLoaded', function(){
const overlay = document.getElementById('ea-overlay');
const eaClose = document.getElementById('ea-close');
const eaForm = document.getElementById('ea-form');
const eaSuccess = document.getElementById('ea-success');

if(!overlay) return; // safety guard

function openModal(){
  overlay.style.display='flex';
  document.body.style.overflow='hidden';
}

function closeModal(){
  overlay.style.display='none';
  document.body.style.overflow='';
  if(eaSuccess && eaSuccess.style.display==='block'){
    eaSuccess.style.display='none';
    eaForm.style.display='flex';
    const btn=document.getElementById('ea-submit');
    if(btn){
      btn.textContent='CLAIM MY EARLY ACCESS SPOT';
      btn.disabled=false;
      btn.style.background='var(--orange)';
    }
  }
}

// Delegated click — works on all [data-modal] elements including dynamically added ones
document.addEventListener('click', function(e){
  const el = e.target.closest('[data-modal="early-access"]');
  if(el){
    e.preventDefault();
    openModal();
  }
});

// Close handlers
overlay.addEventListener('click', function(e){
  if(e.target===overlay) closeModal();
});
eaClose.addEventListener('click', closeModal);
document.addEventListener('keydown', function(e){
  if(e.key==='Escape' && overlay.style.display==='flex') closeModal();
});

// Netlify form submit via fetch — no page reload
eaForm.addEventListener('submit', function(e){
  e.preventDefault();
  const btn=document.getElementById('ea-submit');
  btn.textContent='SUBMITTING...';
  btn.disabled=true;
  fetch('/',{
    method:'POST',
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    body:new URLSearchParams(new FormData(eaForm)).toString()
  })
  .then(function(){
    eaForm.style.display='none';
    eaSuccess.style.display='block';
    setTimeout(closeModal,4000);
  })
  .catch(function(){
    btn.textContent='ERROR — TRY AGAIN';
    btn.disabled=false;
    btn.style.background='#c0392b';
  });
});
});
```

--------------------------------

### Define Points Material

Source: https://github.com/skappal7/context-os/blob/main/index.html

Creates a PointsMaterial for Three.js, configuring texture, size, transparency, and rendering properties like size attenuation and alpha testing.

```javascript
function PM(tx,sz,op){
  return new THREE.PointsMaterial({
    map:tx,
    size:sz,
    transparent:true,
    opacity:op,
    sizeAttenuation:true,
    alphaTest:0.005,
    depthWrite:false
  });
}
```