Spaces:

aidn
/

agents-setup

Running

App Files Files Community

aidn commited on Apr 20

Commit

8c557f2

verified ·

1 Parent(s): 95e4820

Update index.html

Browse files

Files changed (1) hide show

index.html +597 -358

index.html CHANGED Viewed

@@ -3,384 +3,623 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>pi agents setup | valantic insights</title>
-<script src="https://cdn.tailwindcss.com"></script>
 <style>
-    /* valantic CI Colors & Typography */
-    @font-face {
-        font-family: 'Segoe UI Variable';
-        src: local('Segoe UI Variable'), local('Segoe UI'), local('Helvetica Neue'), sans-serif;
-    }
-    :root {
-        --v-black: #100C2A;
-        --v-red: #FF4B4B;
-        --v-orange: #FF744F;
-        --v-indigo: #193773;
-        --v-silver: #cdcdcd;
-    }
-    body {
-        font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
-        background-color: #ffffff;
-        color: var(--v-black);
-        overflow-x: hidden;
-    }
-    /* Topographic Route A Background (NO SVG) */
-    .topo-bg {
-        position: fixed;
-        top: 0; left: 0; right: 0; bottom: 0;
-        z-index: 0;
-        pointer-events: none;
-        background-image:
-            repeating-radial-gradient(circle at -10% -10%, transparent, transparent 40px, rgba(255, 75, 75, 0.03) 40px, rgba(255, 75, 75, 0.03) 41px),
-            repeating-radial-gradient(circle at 110% 50%, transparent, transparent 60px, rgba(255, 116, 79, 0.02) 60px, rgba(255, 116, 79, 0.02) 62px);
-        opacity: 0.8;
-    }
-    /* Gradients & Text */
-    .bg-v-gradient {
-        background: linear-gradient(315deg, var(--v-red), var(--v-orange));
-    }
-    .text-gradient {
-        background: linear-gradient(315deg, var(--v-red), var(--v-orange));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        display: inline-block;
-    }
-    /* Pill Shapes & UI */
-    .pill-inactive {
-        border: 1px solid var(--v-black);
-        background-color: #ffffff;
-        color: var(--v-black);
-        border-radius: 999px;
-        transition: all 0.3s ease;
-    }
-    .pill-active {
-        border: 1px solid var(--v-indigo);
-        background-color: var(--v-indigo);
-        color: #ffffff;
-        border-radius: 999px;
-        transition: all 0.3s ease;
-    }
-    /* valantic Custom Bullets */
-    ul.v-list {
-        list-style: none;
-        padding-left: 0;
-    }
-    ul.v-list li {
-        position: relative;
-        padding-left: 1.5rem;
-        margin-bottom: 0.5rem;
-    }
-    ul.v-list li::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0.6rem;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: linear-gradient(315deg, var(--v-red), var(--v-orange));
-    }
-    .glass-card {
-        background: rgba(255, 255, 255, 0.9);
-        backdrop-filter: blur(10px);
-    }
 </style>
 </head>
-<body class="antialiased relative selection:bg-[#193773] selection:text-white">
-<!-- Chosen Palette: valantic CI (White, valantic Black #100C2A, Red 01 #FF4B4B, valantic Orange #FF744F, Indigo #193773, Silver #cdcdcd) -->
-<!-- Application Structure Plan: Designed to reflect the valantic CI "Route A". It uses extreme whitespace, lightweight typography, and asymmetrical content blocks. The layout flows from an introduction to an interactive structure explorer, then to code execution, and finally replaces the chart with an interactive Model Recommendation grid based on Hugging Face data. This categorizes complex data into digestible, human-centric UI cards with Pill filters, aligning with valantic's clean, technological, yet approachable ethos. -->
-<!-- Visualization & Content Choices:
-1. Directory Tree -> Goal: Explain Structure -> Method: Minimalist clickable list with dynamic detail view -> Justification: Replaces static diagrams with exploratory text UI.
-2. Code Blocks -> Goal: Hands-on Implementation -> Method: Pill-shaped navigation tabs changing code views -> Justification: Keeps the UI uncluttered.
-3. Model Recommendations -> Goal: Filter Hugging Face Data -> Method: Interactive CSS Grid with Pill-shaped filters -> Justification: Condenses the massive scraped table into actionable, categorized insights without using SVG or complex chart libraries.
--->
-<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. Topographic lines generated via CSS repeating-radial-gradient. -->
-<div class="topo-bg"></div>
-<div class="relative z-10 max-w-7xl mx-auto px-6 sm:px-12 md:px-24 py-12">
-    <!-- Top Nav / Logo -->
-    <header class="mb-24 flex justify-between items-center">
-        <div class="font-bold text-2xl tracking-tight text-[#100C2A] lowercase">valantic</div>
-    </header>
-    <!-- Main Title -->
-    <section class="mb-32">
-        <p class="text-[0.65rem] uppercase tracking-[0.2em] text-[#cdcdcd] mb-4 font-semibold">T 010 : SETUP : MAC & HUGGING FACE</p>
-        <h1 class="text-5xl md:text-7xl font-light text-[#100C2A] leading-tight mb-6">
-            pi agents setup <br>
-            <span class="font-semibold text-gradient">auf dem mac</span>
-        </h1>
-        <p class="text-xl text-[#100C2A] max-w-2xl font-light leading-relaxed mt-8">
-            Dein maßgeschneiderter Workflow mit Hugging Face Pro & lokaler Projektstruktur. Ein cleanes, performantes Setup für die Entwicklung autonomer Agenten, konzipiert für Effizienz und Skalierbarkeit.
-        </p>
-    </section>
-    <!-- Section 1: Intro -->
-    <section class="mb-32">
-        <p class="text-[0.65rem] uppercase tracking-[0.2em] text-[#cdcdcd] mb-4 font-semibold">C 020 : CONCEPT : ARCHITECTURE</p>
-        <h2 class="text-3xl md:text-4xl font-light text-[#100C2A] mb-8">
-            isolierte <span class="font-semibold text-gradient">projektumgebung</span>
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
-            <div>
-                <p class="text-[#100C2A] leading-relaxed mb-6">
-                    Dieser Ansatz richtet eine vollständig isolierte Umgebung für Pi Agents (oder vergleichbare Frameworks) auf macOS ein. Durch die Auslagerung der Inferenz auf die Hugging Face Serverless API eliminieren wir lokale Hardware-Engpässe.
-                </p>
-                <ul class="v-list text-[#100C2A]">
-                    <li>Native Nutzung des macOS Terminals</li>
-                    <li>Strikte Trennung durch Python Virtual Environments</li>
-                    <li>Unlimitierter API-Zugriff via Hugging Face Pro</li>
-                </ul>
-            </div>
-            <div class="glass-card border border-[#cdcdcd] rounded-3xl p-8 flex flex-col justify-center">
-                <div class="text-sm text-[#cdcdcd] uppercase tracking-widest mb-2 font-semibold">Core Principle</div>
-                <div class="text-2xl font-light text-[#100C2A]">
-                    Logik lokal ausführen,<br>
-                    <span class="font-semibold text-gradient">Intelligenz in der Cloud rendern.</span>
-                </div>
-            </div>
         </div>
-    </section>
-    <!-- Section 2: Structure -->
-    <section class="mb-32">
-        <p class="text-[0.65rem] uppercase tracking-[0.2em] text-[#cdcdcd] mb-4 font-semibold">S 030 : STRUCTURE : DIRECTORY TREE</p>
-        <h2 class="text-3xl md:text-4xl font-light text-[#100C2A] mb-12">
-            die ideale <span class="font-semibold text-gradient">verzeichnisstruktur</span>
-        </h2>
-        <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
-            <div class="md:col-span-4">
-                <div class="flex flex-col space-y-3">
-                    <button class="dir-btn pill-active px-6 py-2 text-left font-semibold text-sm w-full" onclick="showDirDetail('root', this)">pi_project/</button>
-                    <button class="dir-btn pill-inactive px-6 py-2 text-left font-semibold text-sm w-full ml-4" onclick="showDirDetail('venv', this)">.venv/</button>
-                    <button class="dir-btn pill-inactive px-6 py-2 text-left font-semibold text-sm w-full ml-4" onclick="showDirDetail('env', this)">.env</button>
-                    <button class="dir-btn pill-inactive px-6 py-2 text-left font-semibold text-sm w-full ml-4" onclick="showDirDetail('agents', this)">agents/</button>
-                    <button class="dir-btn pill-inactive px-6 py-2 text-left font-semibold text-sm w-full ml-4" onclick="showDirDetail('workspace', this)">workspace/</button>
-                    <button class="dir-btn pill-inactive px-6 py-2 text-left font-semibold text-sm w-full ml-4" onclick="showDirDetail('main', this)">main.py</button>
-                </div>
-            </div>
-            <div class="md:col-span-8 flex items-center">
-                <div class="pl-0 md:pl-12">
-                    <h3 id="dir-title" class="text-2xl font-semibold text-[#100C2A] mb-4 lowercase">pi_project/</h3>
-                    <p id="dir-desc" class="text-[#100C2A] text-lg font-light leading-relaxed">
-                        Das Hauptverzeichnis. Öffne dein Mac Terminal und erstelle es mit einem einfachen Befehl. Hier wird die gesamte Architektur deiner KI-Agenten zentral orchestriert und gesteuert.
-                    </p>
-                </div>
             </div>
         </div>
-    </section>
-    <!-- Section 3: Implementation -->
-    <section class="mb-32">
-        <p class="text-[0.65rem] uppercase tracking-[0.2em] text-[#cdcdcd] mb-4 font-semibold">I 040 : IMPLEMENTATION : CODE & CONFIG</p>
-        <h2 class="text-3xl md:text-4xl font-light text-[#100C2A] mb-8">
-            hands-on <span class="font-semibold text-gradient">konfiguration</span>
-        </h2>
-        <div class="flex flex-wrap gap-4 mb-8">
-            <button class="tab-btn pill-active px-6 py-2 text-sm font-semibold tracking-wide" onclick="switchTab('terminal', this)">mac terminal</button>
-            <button class="tab-btn pill-inactive px-6 py-2 text-sm font-semibold tracking-wide" onclick="switchTab('envfile', this)">.env datei</button>
-            <button class="tab-btn pill-inactive px-6 py-2 text-sm font-semibold tracking-wide" onclick="switchTab('python', this)">main.py</button>
         </div>
-        <div class="bg-[#100C2A] text-white rounded-3xl p-8 shadow-xl overflow-x-auto">
-            <div id="tab-terminal" class="tab-content block font-mono text-sm leading-loose">
-                <span class="text-[#cdcdcd]"># 1. Projektordner erstellen und betreten</span><br>
-                mkdir pi_agents_workspace<br>
-                cd pi_agents_workspace<br><br>
-                <span class="text-[#cdcdcd]"># 2. Virtual Environment erstellen & aktivieren</span><br>
-                python3 -m venv .venv<br>
-                source .venv/bin/activate<br><br>
-                <span class="text-[#cdcdcd]"># 3. Pakete installieren</span><br>
-                <span class="text-[#FF744F]">pip install</span> huggingface_hub python-dotenv
             </div>
-            <div id="tab-envfile" class="tab-content hidden font-mono text-sm leading-loose">
-                <span class="text-[#cdcdcd]"># Konfiguration der Umgebungsvariablen</span><br><br>
-                HF_TOKEN=<span class="text-[#FF4B4B]">"hf_DeinPersoenlicherTokenHierEinfuegen"</span><br>
-                WORKSPACE_DIR=<span class="text-[#FF4B4B]">"./workspace"</span>
             </div>
-            <div id="tab-python" class="tab-content hidden font-mono text-sm leading-loose">
-                <span class="text-[#FF744F]">import</span> os<br>
-                <span class="text-[#FF744F]">from</span> dotenv <span class="text-[#FF744F]">import</span> load_dotenv<br>
-                <span class="text-[#FF744F]">from</span> huggingface_hub <span class="text-[#FF744F]">import</span> InferenceClient<br><br>
-                <span class="text-[#cdcdcd]"># Init</span><br>
-                load_dotenv()<br>
-                client = InferenceClient(model=<span class="text-[#FF4B4B]">"meta-llama/Llama-3.3-70B-Instruct"</span>, token=os.getenv(<span class="text-[#FF4B4B]">"HF_TOKEN"</span>))<br><br>
-                <span class="text-[#FF744F]">def</span> <span class="text-white">run_agent</span>(task):<br>
-                &nbsp;&nbsp;&nbsp;&nbsp;res = client.text_generation(task, max_new_tokens=500)<br>
-                &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-[#FF744F]">with open</span>(<span class="text-[#FF4B4B]">"workspace/out.txt"</span>, <span class="text-[#FF4B4B]">"w"</span>) <span class="text-[#FF744F]">as</span> f:<br>
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;f.write(res)<br><br>
-                run_agent(<span class="text-[#FF4B4B]">"Initiiere Systemanalyse."</span>)
             </div>
         </div>
-    </section>
-    <!-- Section 4: Model Recommendations -->
-    <section class="mb-32">
-        <p class="text-[0.65rem] uppercase tracking-[0.2em] text-[#cdcdcd] mb-4 font-semibold">M 050 : MODELS : HUGGING FACE INFERENCE</p>
-        <h2 class="text-3xl md:text-4xl font-light text-[#100C2A] mb-8">
-            modellempfehlung nach <span class="font-semibold text-gradient">stärken</span>
-        </h2>
-        <p class="text-[#100C2A] mb-8 max-w-3xl font-light">
-            Basierend auf aktuellen Metriken der Hugging Face Inference Providers haben wir die leistungsstärksten Modelle für deinen Agenten-Workflow kategorisiert. Wähle den Fokusbereich deines Agenten.
-        </p>
-        <!-- Filters -->
-        <div class="flex flex-wrap gap-3 mb-12">
-            <button class="filter-btn pill-active px-5 py-1.5 text-sm font-semibold tracking-wide" onclick="filterModels('all', this)">alle anzeigen</button>
-            <button class="filter-btn pill-inactive px-5 py-1.5 text-sm font-semibold tracking-wide" onclick="filterModels('reasoning', this)">reasoning & logik</button>
-            <button class="filter-btn pill-inactive px-5 py-1.5 text-sm font-semibold tracking-wide" onclick="filterModels('speed', this)">geschwindigkeit</button>
-            <button class="filter-btn pill-inactive px-5 py-1.5 text-sm font-semibold tracking-wide" onclick="filterModels('vision', this)">vision & multimodal</button>
-            <button class="filter-btn pill-inactive px-5 py-1.5 text-sm font-semibold tracking-wide" onclick="filterModels('coding', this)">code generierung</button>
         </div>
-        <!-- Model Grid -->
-        <div id="model-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <!-- Populated by JS -->
         </div>
-    </section>
-    <!-- Footer -->
-    <footer class="mt-32 pt-8 border-t border-[#cdcdcd] flex flex-col md:flex-row justify-between items-center text-xs text-[#cdcdcd] font-semibold uppercase tracking-widest">
-        <div class="text-[#100C2A] font-bold lowercase text-lg tracking-tight mb-4 md:mb-0">valantic</div>
-        <div class="mb-4 md:mb-0">20. APRIL 2026</div>
-        <div>PI AGENTS SETUP : PAGE 01</div>
-    </footer>
 </div>
 <script>
-    // --- Section 2: Directory Logic ---
-    const dirData = {
-        'root': { title: 'pi_project/', desc: 'Das Hauptverzeichnis. Öffne dein Mac Terminal und erstelle es mit "mkdir pi_project && cd pi_project". Hier wird alles zentral gesteuert.' },
-        'venv': { title: '.venv/', desc: 'Das Virtual Environment. Essentiell auf dem Mac, um globale Python-Pakete von System-Bibliotheken sauber zu trennen.' },
-        'env': { title: '.env', desc: 'Umgebungsvariablen. Speichert deinen HF_TOKEN sicher, fernab von Versionierungssystemen wie Git.' },
-        'agents': { title: 'agents/', desc: 'Der modulare Ordner für die Logik. Hier liegen die system-prompts und Skripte (z.B. research_agent.py).' },
-        'workspace': { title: 'workspace/', desc: 'Der autonome Arbeitsbereich. Agenten legen hier generierte Dokumente, JSON-Outputs oder Logs selbstständig ab.' },
-        'main': { title: 'main.py', desc: 'Der Orchestrator. Lädt Tokens, initiiert den Hugging Face InferenceClient und triggert den Workflow.' }
-    };
-    function showDirDetail(key, btnElement) {
-        document.getElementById('dir-title').innerText = dirData[key].title;
-        document.getElementById('dir-desc').innerText = dirData[key].desc;
-        document.querySelectorAll('.dir-btn').forEach(el => {
-            el.classList.remove('pill-active');
-            el.classList.add('pill-inactive');
-            // reset width logic for visual hierarchy
-            el.classList.remove('w-full');
-            if(el.innerText !== 'pi_project/') el.classList.add('w-[calc(100%-1rem)]');
-        });
-        btnElement.classList.remove('pill-inactive');
-        btnElement.classList.add('pill-active');
-    }
-    // --- Section 3: Tab Logic ---
-    function switchTab(tabId, btnElement) {
-        document.querySelectorAll('.tab-content').forEach(el => {
-            el.classList.remove('block');
-            el.classList.add('hidden');
-        });
-        document.querySelectorAll('.tab-btn').forEach(el => {
-            el.classList.remove('pill-active');
-            el.classList.add('pill-inactive');
-        });
-        const targetTab = document.getElementById('tab-' + tabId);
-        targetTab.classList.remove('hidden');
-        targetTab.classList.add('block');
-        btnElement.classList.remove('pill-inactive');
-        btnElement.classList.add('pill-active');
-    }
-    // --- Section 4: Model Recommendation Logic (Data extracted from prompt) ---
-    const modelsData = [
-        { name: "DeepSeek-R1", category: "reasoning", context: "163k", bestProvider: "Hyperbolic (Fastest)", desc: "Hervorragend für komplexe Logik, Mathematik und tiefgreifende analytische Tasks." },
-        { name: "Llama-3.3-70B-Instruct", category: "reasoning", context: "131k", bestProvider: "Groq (Fast) / Novita (Cheap)", desc: "Ein extrem starkes Allround-Modell für Agenten mit hohem Anspruch an Textverständnis." },
-        { name: "Llama-3.1-8B-Instruct", category: "speed", context: "16k-131k", bestProvider: "Cerebras (Fast) / Novita (Cheap)", desc: "Blitzschnell und ressourcenschonend. Perfekt für Routing oder schnelle Vorverarbeitung." },
-        { name: "Qwen3.5-9B", category: "speed", context: "262k", bestProvider: "Together", desc: "Kompakt, aber mit gewaltigem Kontextfenster für ausgedehnte Dokumentenanalysen." },
-        { name: "Qwen2.5-Coder-32B", category: "coding", context: "131k", bestProvider: "nscale (Cheapest/Fastest)", desc: "Führend in der Generierung, Analyse und dem autonomen Debugging von Code." },
-        { name: "Qwen3-Coder-Next", category: "coding", context: "262k", bestProvider: "Novita", desc: "Die neueste Iteration für komplexe Programmier-Workflows." },
-        { name: "GLM-4.5V", category: "vision", context: "65k", bestProvider: "Novita (Cheapest/Fastest)", desc: "Leistungsstarkes multimodales Modell zur Bild- und UI-Analyse." },
-        { name: "Qwen3-VL-8B-Instruct", category: "vision", context: "131k", bestProvider: "Novita", desc: "Effizientes Vision-Modell, ideal für schnelle visuelle Verifizierungs-Agenten." }
-    ];
-    function renderModels(filter) {
-        const grid = document.getElementById('model-grid');
-        grid.innerHTML = ''; // clear current
-        const filtered = filter === 'all'
-            ? modelsData
-            : modelsData.filter(m => m.category === filter);
-        filtered.forEach(model => {
-            const card = document.createElement('div');
-            card.className = "border border-[#cdcdcd] rounded-2xl p-6 bg-white hover:shadow-lg transition-shadow duration-300 flex flex-col";
-            // Category Badge styling
-            let catColor = "text-[#cdcdcd]";
-            if(model.category === 'reasoning') catColor = "text-[#193773]";
-            if(model.category === 'speed') catColor = "text-[#FF744F]";
-            if(model.category === 'coding') catColor = "text-[#100C2A]";
-            if(model.category === 'vision') catColor = "text-[#FF4B4B]";
-            card.innerHTML = `
-                <div class="text-[0.65rem] uppercase tracking-widest font-bold ${catColor} mb-2">${model.category}</div>
-                <h3 class="text-xl font-semibold text-[#100C2A] mb-3">${model.name}</h3>
-                <p class="text-sm text-[#100C2A] font-light mb-6 flex-grow">${model.desc}</p>
-                <div class="bg-stone-50 p-3 rounded-xl border border-stone-100 text-xs text-[#100C2A]">
-                    <div class="flex justify-between mb-1">
-                        <span class="font-semibold">Context:</span>
-                        <span>${model.context}</span>
-                    </div>
-                    <div class="flex justify-between">
-                        <span class="font-semibold">Top Provider:</span>
-                        <span class="text-right">${model.bestProvider}</span>
-                    </div>
-                </div>
-            `;
-            grid.appendChild(card);
-        });
-    }
-    function filterModels(category, btnElement) {
-        // update buttons
-        document.querySelectorAll('.filter-btn').forEach(el => {
-            el.classList.remove('pill-active');
-            el.classList.add('pill-inactive');
-        });
-        btnElement.classList.remove('pill-inactive');
-        btnElement.classList.add('pill-active');
-        // render grid
-        renderModels(category);
-    }
-    // Initialize Grid on load
-    document.addEventListener("DOMContentLoaded", () => {
-        renderModels('all');
     });
 </script>
 </body>
 </html>

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>pi — setup guide | valantic</title>
 <style>
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,600;9..40,700&display=swap');
+:root {
+    --black:  #100C2A;
+    --red:    #FF4B4B;
+    --orange: #FF744F;
+    --indigo: #193773;
+    --silver: #cdcdcd;
+    --bg:     #ffffff;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg); color: var(--black); overflow-x: hidden;
+}
+/* Topographic rings — Route A: top-right corner */
+.topo {
+    position: fixed; top: -28vw; right: -18vw;
+    width: 72vw; height: 72vw; border-radius: 50%;
+    pointer-events: none; z-index: 0;
+    box-shadow:
+        0 0 0 1px  rgba(255,75,75,.05),
+        0 0 0 38px rgba(255,75,75,.04),
+        0 0 0 76px rgba(255,116,79,.033),
+        0 0 0 114px rgba(255,75,75,.026),
+        0 0 0 152px rgba(255,116,79,.019),
+        0 0 0 190px rgba(255,75,75,.013),
+        0 0 0 228px rgba(255,116,79,.008),
+        0 0 0 266px rgba(255,75,75,.005),
+        0 0 0 304px rgba(255,116,79,.003);
+}
+.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 2.25rem; }
+/* Typography */
+.grad {
+    background: linear-gradient(315deg, var(--red), var(--orange));
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.eyebrow {
+    display: block; font-size: .6rem; letter-spacing: .2em;
+    text-transform: uppercase; color: var(--silver); font-weight: 600; margin-bottom: .9rem;
+}
+.h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); font-weight: 300; line-height: 1.09; letter-spacing: -.03em; }
+.h1 strong { font-weight: 600; }
+.h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 300; line-height: 1.15; letter-spacing: -.025em; }
+.h2 strong { font-weight: 600; }
+.lead { font-weight: 300; font-size: 1rem; line-height: 1.8; }
+.mono { font-family: 'SF Mono','Cascadia Code','Fira Code',monospace; }
+.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--silver) 40%, transparent); }
+/* Pills */
+.pill {
+    border-radius: 999px; cursor: pointer; transition: all .22s ease;
+    font-size: .78rem; font-weight: 600; letter-spacing: .01em;
+    padding: .38rem 1rem; border: 1.5px solid;
+    font-family: inherit;
+}
+.pill-off { border-color: #ccc; background: #fff; color: var(--black); }
+.pill-off:hover { border-color: var(--indigo); color: var(--indigo); }
+.pill-on  { border-color: var(--indigo); background: var(--indigo); color: #fff; }
+/* Cards */
+.card { border: 1.5px solid #e8e8e8; border-radius: 18px; padding: 1.5rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
+.card:hover { border-color: #bbb; box-shadow: 0 6px 24px rgba(16,12,42,.06); }
+.card-glass { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border: 1px solid rgba(205,205,205,.5); border-radius: 22px; padding: 1.8rem; }
+/* Bullets */
+ul.vl { list-style: none; }
+ul.vl li { position: relative; padding-left: 1.2rem; margin-bottom: .45rem; line-height: 1.65; font-weight: 300; font-size: .9rem; }
+ul.vl li::before { content: ''; position: absolute; left: 0; top: .55rem; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(315deg, var(--red), var(--orange)); }
+/* Code */
+.cb {
+    background: var(--black); border-radius: 20px; padding: 1.6rem 1.8rem;
+    overflow-x: auto; font-family: 'SF Mono','Cascadia Code','Fira Code',monospace;
+    font-size: .78rem; line-height: 1.9; color: #abb2bf;
+}
+.cb .c  { color: #4a5568; }
+.cb .k  { color: var(--orange); }
+.cb .s  { color: #e06c75; }
+.cb .b  { color: #61afef; }
+.cb .hi { color: #e5c07b; }
+/* Chip */
+.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; border: 1px solid #e2e2e2; font-size: .7rem; font-weight: 500; background: #fafafa; }
+.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(315deg, var(--red), var(--orange)); flex-shrink: 0; }
+/* tmux */
+.tmux-wrap { background: #0d1117; border-radius: 20px; padding: 1.5rem; border: 1px solid #21262d; }
+.tmux-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 1.2rem; }
+.tdot { width: 10px; height: 10px; border-radius: 50%; }
+.tpane { background: #010409; border-radius: 12px; padding: 1rem 1.2rem; font-family: 'SF Mono','Cascadia Code','Fira Code',monospace; font-size: .73rem; line-height: 1.75; border: 1px solid #21262d; }
+.tpane-title { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #484f58; font-weight: 600; margin-bottom: .5rem; font-family: 'DM Sans',sans-serif; }
+/* Grid */
+.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
+.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
+.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
+@media(max-width:860px){ .g3,.g4 { grid-template-columns: 1fr 1fr; } }
+@media(max-width:560px){ .g2,.g3,.g4 { grid-template-columns: 1fr; } }
+section { padding: 4.5rem 0; }
+section + section { border-top: 1px solid #f0f0f0; }
+.hidden { display: none !important; }
+/* Model card cat colors */
+.cat-r { color: var(--indigo); }
+.cat-s { color: var(--orange); }
+.cat-c { color: var(--black); }
+.cat-v { color: var(--red); }
+::-webkit-scrollbar { width: 3px; height: 3px; }
+::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 99px; }
 </style>
 </head>
+<body>
+<div class="topo"></div>
+<div class="wrap">
+<!-- HEADER -->
+<header style="padding:2.2rem 0 0;display:flex;justify-content:space-between;align-items:center;">
+    <div style="font-weight:700;font-size:1.1rem;letter-spacing:-.02em;">valantic</div>
+    <div style="font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);font-weight:600;">Intelligence &amp; Engineering</div>
+</header>
+<!-- HERO -->
+<section style="padding-top:4rem;">
+    <span class="eyebrow">setup guide · pi coding agent · hugging face</span>
+    <h1 class="h1" style="margin-bottom:1.4rem;">
+        pi agents<br>
+        <strong class="grad">aufsetzen &amp; nutzen</strong>
+    </h1>
+    <div class="rule" style="max-width:180px;margin-bottom:1.8rem;"></div>
+    <p class="lead" style="max-width:620px;margin-bottom:1.8rem;">
+        <strong style="font-weight:600;">pi</strong> ist ein minimaler, radikal erweiterbarer Terminal-Agent. Dieser Guide führt vom ersten Install bis zum laufenden Multi-Agent-Setup mit tmux — inklusive AGENTS.md, Skills und Hugging Face Inference.
+    </p>
+    <div style="display:flex;flex-wrap:wrap;gap:.55rem;">
+        <span class="chip"><span class="chip-dot"></span>npm install -g @mariozechner/pi-coding-agent</span>
+        <span class="chip"><span class="chip-dot"></span>15+ Provider</span>
+        <span class="chip"><span class="chip-dot"></span>TypeScript Extensions</span>
+        <span class="chip"><span class="chip-dot"></span>tmux Multi-Agent</span>
+    </div>
+</section>
+<!-- ══ 1 INSTALLATION ══ -->
+<section>
+    <span class="eyebrow">schritt 1 · installation</span>
+    <h2 class="h2" style="margin-bottom:2.2rem;">pi <strong class="grad">installieren</strong></h2>
+    <div class="g2" style="margin-bottom:1.4rem;align-items:start;">
+        <div>
+            <p class="lead" style="margin-bottom:1.1rem;">Node.js ≥ 18 ist die einzige Voraussetzung. Pi läuft danach global als CLI.</p>
+            <ul class="vl">
+                <li>Einmalige globale Installation via npm</li>
+                <li>Kein Python, keine virtuellen Environments nötig</li>
+                <li>Authentifizierung per API-Key <em>oder</em> OAuth (<span class="mono" style="font-size:.85em;">/login</span>)</li>
+                <li>Anthropic Pro, OpenAI Plus, GitHub Copilot, Google Gemini via Abo</li>
+                <li>Provider mid-session wechseln via Ctrl+L oder <span class="mono" style="font-size:.85em;">/model</span></li>
+            </ul>
         </div>
+        <div class="card-glass">
+            <span class="eyebrow" style="color:var(--indigo);">zwei auth-wege</span>
+            <div class="cb" style="border-radius:14px;padding:.9rem 1.1rem;font-size:.73rem;margin-top:.6rem;">
+<span class="c"># Option A — API Key</span>
+export ANTHROPIC_API_KEY=sk-ant-...
+pi
+<span class="c"># Option B — OAuth Login</span>
+pi
+/login  <span class="c"># Provider auswählen</span>
             </div>
         </div>
+    </div>
+    <div class="cb">
+<span class="c"># Pi global installieren</span>
+<span class="b">npm install -g @mariozechner/pi-coding-agent</span>
+<span class="c"># Starten — interaktiver Modus</span>
+pi
+<span class="c"># Mit initialem Prompt</span>
+pi "Zeige alle .ts Dateien in src/"
+<span class="c"># Non-interaktiv / für Skripte</span>
+cat README.md | pi -p "Fasse zusammen"
+<span class="c"># Alle 4 Modi</span>
+pi                    <span class="c"># interactive (TUI)</span>
+pi -p "query"         <span class="c"># print / non-interactive</span>
+pi --mode json        <span class="c"># JSON event stream</span>
+pi --mode rpc         <span class="c"># RPC über stdin/stdout</span>
+    </div>
+</section>
+<!-- ══ 2 PROJEKTSTRUKTUR ══ -->
+<section>
+    <span class="eyebrow">schritt 2 · projektstruktur</span>
+    <h2 class="h2" style="margin-bottom:2.2rem;">projekt <strong class="grad">aufbauen</strong></h2>
+    <div style="display:grid;grid-template-columns:1fr 1.5fr;gap:1.8rem;align-items:start;margin-bottom:1.4rem;">
+        <div style="display:flex;flex-direction:column;gap:.55rem;">
+            <button class="pill pill-on dir-btn" style="text-align:left;" onclick="showDir('root',this)">mein-projekt/</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:1.1rem;" onclick="showDir('pi',this)">.pi/</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:2.2rem;" onclick="showDir('system',this)">SYSTEM.md</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:2.2rem;" onclick="showDir('piset',this)">settings.json</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:2.2rem;" onclick="showDir('skills_dir',this)">skills/</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:2.2rem;" onclick="showDir('prompts_dir',this)">prompts/</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;margin-left:2.2rem;" onclick="showDir('ext_dir',this)">extensions/</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;" onclick="showDir('agents_md',this)">AGENTS.md</button>
+            <button class="pill pill-off dir-btn" style="text-align:left;" onclick="showDir('workspace',this)">workspace/</button>
+        </div>
+        <div style="padding-top:.2rem;">
+            <h3 id="dir-title" class="mono" style="font-size:1rem;font-weight:600;margin-bottom:.6rem;"></h3>
+            <p id="dir-desc" class="lead" style="font-size:.88rem;color:var(--black);"></p>
+            <div id="dir-code" style="margin-top:.9rem;"></div>
+        </div>
+    </div>
+    <div class="cb">
+<span class="c"># Projektordner anlegen</span>
+<span class="b">mkdir mein-projekt &amp;&amp; cd mein-projekt</span>
+<span class="c"># Pi-Konfig für dieses Projekt</span>
+<span class="b">mkdir -p .pi/skills/research .pi/prompts .pi/extensions</span>
+<span class="c"># Kontext-Datei (wird beim Start auto-geladen)</span>
+<span class="b">touch AGENTS.md</span>
+<span class="c"># Projekt-System-Prompt</span>
+<span class="b">touch .pi/SYSTEM.md</span>
+<span class="c"># Workspace für Agent-Outputs</span>
+<span class="b">mkdir -p workspace/outputs workspace/logs workspace/research</span>
+<span class="c"># Pi starten — lädt alles automatisch</span>
+pi
+    </div>
+</section>
+<!-- ══ 3 CONTEXT ENGINEERING ══ -->
+<section>
+    <span class="eyebrow">schritt 3 · context engineering</span>
+    <h2 class="h2" style="margin-bottom:2.2rem;">AGENTS.md &amp; <strong class="grad">system prompts</strong></h2>
+    <div class="g2" style="margin-bottom:1.4rem;align-items:start;">
+        <div>
+            <p class="lead" style="font-size:.9rem;margin-bottom:1rem;">Pi lädt <strong>AGENTS.md</strong> automatisch — aus dem aktuellen Verzeichnis, allen Elternordnern und <span class="mono" style="font-size:.85em;">~/.pi/agent/</span>. Alle Dateien werden zusammengeführt.</p>
+            <ul class="vl">
+                <li><strong>AGENTS.md</strong> — Rolle, Regeln, Konventionen</li>
+                <li><strong>.pi/SYSTEM.md</strong> — ersetzt den Standard-System-Prompt</li>
+                <li><strong>.pi/APPEND_SYSTEM.md</strong> — ergänzt nur, ohne zu ersetzen</li>
+                <li>Global: <span class="mono" style="font-size:.85em;">~/.pi/agent/AGENTS.md</span></li>
+                <li>Deaktivieren: <span class="mono" style="font-size:.85em;">pi -nc</span></li>
+            </ul>
+        </div>
+        <div class="card-glass">
+            <span class="eyebrow" style="color:var(--indigo);">ladereihenfolge</span>
+            <p style="font-size:.83rem;font-weight:300;line-height:1.7;">Global (~/.pi/agent/) → Elternverzeichnisse → aktuelles Verzeichnis. Projekt überschreibt global. Pi sucht auch nach CLAUDE.md als Alias.</p>
         </div>
+    </div>
+    <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;">
+        <button class="pill pill-on tab-btn" onclick="switchTab('t_agents',this)">AGENTS.md</button>
+        <button class="pill pill-off tab-btn" onclick="switchTab('t_system',this)">.pi/SYSTEM.md</button>
+        <button class="pill pill-off tab-btn" onclick="switchTab('t_global',this)">~/.pi/agent/AGENTS.md</button>
+    </div>
+    <div class="cb">
+        <div id="t_agents">
+<span class="c"># AGENTS.md — Projekt-Root</span>
+<span class="hi">## Rolle</span>
+Du bist ein autonomer Entwicklungsassistent für dieses Projekt.
+Alle erzeugten Dateien kommen in ./workspace/.
+<span class="hi">## Regeln</span>
+- Python mit type hints und Docstrings
+- Nach jeder Session eine Zeile in CHANGELOG.md
+- Für Code-Tasks: Qwen2.5-Coder-32B bevorzugen
+- Vor git push immer diff zeigen
+<span class="hi">## Konventionen</span>
+- Kommentare auf Deutsch
+- Commit-Messages: Conventional Commits Format
+- Tests für alle public functions
+        </div>
+        <div id="t_system" class="hidden">
+<span class="c"># .pi/SYSTEM.md — ersetzt den Default-System-Prompt für dieses Projekt</span>
+<span class="hi"># Research &amp; Analysis Agent</span>
+Du bist ein spezialisierter Research-Agent für Marktanalysen.
+Bei jeder Anfrage:
+1. Aufgabe in Teilschritte zerlegen
+2. Systematisch recherchieren (bash, web tools)
+3. Zwischenergebnisse in workspace/research/ speichern
+4. Finale Zusammenfassung mit Quellenangaben
+Format: Markdown, Deutsch, sachlich.
+        </div>
+        <div id="t_global" class="hidden">
+<span class="c"># ~/.pi/agent/AGENTS.md — gilt für ALLE Projekte</span>
+<span class="hi">## Globale Präferenzen</span>
+- Antworte auf Deutsch, außer Code-Kommentare
+- Erkläre nicht was du tust, tu es einfach
+- Bei Unsicherheit: kurz nachfragen statt raten
+<span class="hi">## Bevorzugte Modelle</span>
+- Reasoning: DeepSeek-R1 (Hyperbolic)
+- Code: Qwen2.5-Coder-32B (nscale)
+- Schnell: Llama-3.1-8B (Cerebras)
+<span class="hi">## Safety</span>
+- Niemals .env oder *secret* Dateien ausgeben
+- Vor rm -rf immer nachfragen
+        </div>
+    </div>
+</section>
+<!-- ══ 4 SKILLS ══ -->
+<section>
+    <span class="eyebrow">schritt 4 · skills</span>
+    <h2 class="h2" style="margin-bottom:2.2rem;"><strong class="grad">skills</strong> erstellen</h2>
+    <div class="g2" style="margin-bottom:1.4rem;align-items:start;">
+        <div>
+            <p class="lead" style="font-size:.9rem;margin-bottom:1rem;">Skills sind on-demand geladene Capability-Pakete — eine Markdown-Datei mit Anweisungen. Kein Prompt-Cache-Busting, da sie nur bei Bedarf aktiviert werden.</p>
+            <ul class="vl">
+                <li>Ablageort: <span class="mono" style="font-size:.85em;">.pi/skills/&lt;name&gt;/SKILL.md</span></li>
+                <li>Global: <span class="mono" style="font-size:.85em;">~/.pi/agent/skills/</span></li>
+                <li>Manuell aktivieren: <span class="mono" style="font-size:.85em;">/skill:name</span></li>
+                <li>Pi erkennt Kontext und lädt passende Skills selbst</li>
+                <li>Als Pi Package via npm oder git teilbar</li>
+            </ul>
+        </div>
+        <div class="cb" style="border-radius:16px;font-size:.73rem;">
+<span class="c"># Skill anlegen</span>
+<span class="b">mkdir -p .pi/skills/research</span>
+<span class="b">touch .pi/skills/research/SKILL.md</span>
+<span class="c"># Im Terminal aktivieren</span>
+/skill:research
+<span class="c"># Oder per Flag laden</span>
+pi --skill .pi/skills/research/SKILL.md
+        </div>
+    </div>
+    <div class="cb">
+<span class="c"># .pi/skills/research/SKILL.md</span>
+<span class="hi"># Research Agent Skill</span>
+Nutze diesen Skill bei Marktanalysen, Recherchen oder
+strukturierten Informationssammlungen.
+<span class="hi">## Workflow</span>
+1. Aufgabe in Teilfragen zerlegen
+2. Pro Teilfrage: bash-Recherche oder Websuche
+3. Zwischenergebnisse in workspace/research/&lt;thema&gt;/ speichern
+4. Quellen als Markdown-Liste anhängen
+5. Finales Dokument: workspace/research/summary.md
+<span class="hi">## Tools</span>
+- bash: curl, grep, find
+- write: strukturierte Markdown-Outputs
+- read: existierende Dokumente einlesen
+<span class="hi">## Output-Format</span>
+Markdown, H2-Abschnitte pro Teilfrage, Deutsche Sprache.
+    </div>
+</section>
+<!-- ══ 5 HUGGING FACE ══ -->
+<section>
+    <span class="eyebrow">schritt 5 · provider</span>
+    <h2 class="h2" style="margin-bottom:2rem;">hugging face <strong class="grad">inference</strong></h2>
+    <p class="lead" style="max-width:640px;margin-bottom:1.6rem;font-size:.9rem;">HF Pro Token setzen, dann Provider in Pi auswählen oder direkt per Flag übergeben. Wechsel mid-session jederzeit via Ctrl+L.</p>
+    <div class="cb" style="margin-bottom:1.4rem;">
+<span class="c"># Token setzen (in ~/.zshrc oder ~/.bashrc)</span>
+<span class="b">export HF_TOKEN="hf_DeinTokenHier"</span>
+<span class="c"># Pi starten und HF auswählen</span>
+pi
+/model  <span class="c"># → huggingface → Modell wählen</span>
+<span class="c"># Oder direkt per Flag</span>
+pi --provider huggingface --model "meta-llama/Llama-3.3-70B-Instruct"
+<span class="c"># Mit Thinking Level</span>
+pi --model "anthropic/claude-sonnet:high" "Löse dieses komplexe Problem"
+<span class="c"># Lieblings-Modelle für Ctrl+P cycling definieren</span>
+pi --models "deepseek*,qwen*,llama*"
+    </div>
+    <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem;">
+        <button class="pill pill-on filter-btn" onclick="filterModels('all',this)">alle</button>
+        <button class="pill pill-off filter-btn" onclick="filterModels('reasoning',this)">reasoning</button>
+        <button class="pill pill-off filter-btn" onclick="filterModels('speed',this)">speed</button>
+        <button class="pill pill-off filter-btn" onclick="filterModels('coding',this)">code</button>
+        <button class="pill pill-off filter-btn" onclick="filterModels('vision',this)">vision</button>
+    </div>
+    <div id="model-grid" class="g3"></div>
+</section>
+<!-- ══ 6 MULTI-AGENT TMUX ══ -->
+<section>
+    <span class="eyebrow">schritt 6 · multi-agent</span>
+    <h2 class="h2" style="margin-bottom:2rem;">multi-agent <strong class="grad">mit tmux</strong></h2>
+    <p class="lead" style="max-width:680px;margin-bottom:1.8rem;font-size:.9rem;">
+        Pi hat bewusst keine eingebauten Sub-Agenten. Die empfohlene Lösung: mehrere Pi-Instanzen in separaten tmux-Sessions. Volle Sichtbarkeit, direktes Eingreifen, kein Magic.
+    </p>
+    <!-- tmux visual -->
+    <div class="tmux-wrap" style="margin-bottom:1.4rem;">
+        <div class="tmux-bar">
+            <div class="tdot" style="background:#ff5f57;"></div>
+            <div class="tdot" style="background:#febc2e;"></div>
+            <div class="tdot" style="background:#28c840;"></div>
+            <div style="margin-left:.6rem;font-size:.58rem;color:#484f58;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:'DM Sans',sans-serif;">tmux · mein-projekt</div>
+        </div>
+        <div class="g3">
+            <div class="tpane">
+                <div class="tpane-title">session: research</div>
+                <div style="color:#7ee787;">$ pi --provider huggingface</div>
+                <div style="color:#e3b341;">  ▸ DeepSeek-R1 · high</div>
+                <div style="color:#79c0ff;">  &gt; Analysiere Markt...</div>
+                <div style="color:#8b949e;">  ⠿ Searching the web</div>
             </div>
+            <div class="tpane">
+                <div class="tpane-title">session: coder</div>
+                <div style="color:#7ee787;">$ pi --provider huggingface</div>
+                <div style="color:#e3b341;">  ▸ Qwen2.5-Coder-32B</div>
+                <div style="color:#79c0ff;">  &gt; Schreibe Tests für...</div>
+                <div style="color:#8b949e;">  ⠿ Writing tests.py</div>
             </div>
+            <div class="tpane">
+                <div class="tpane-title">session: orchestrator</div>
+                <div style="color:#7ee787;">$ pi -c</div>
+                <div style="color:#e3b341;">  ▸ Llama-3.3-70B</div>
+                <div style="color:#79c0ff;">  &gt; Koordiniere Tasks</div>
+                <div style="color:#8b949e;">  ⠿ Updating TODO.md</div>
             </div>
         </div>
+    </div>
+    <div class="cb" style="margin-bottom:1.4rem;">
+<span class="c"># ── tmux Multi-Agent Setup ─────────────────────────────────────</span>
+<span class="c"># Neue tmux Sessions (detached, im Projektordner)</span>
+<span class="b">tmux new-session -d -s research     -c ~/mein-projekt</span>
+<span class="b">tmux new-session -d -s coder        -c ~/mein-projekt</span>
+<span class="b">tmux new-session -d -s orchestrator -c ~/mein-projekt</span>
+<span class="c"># Pi in jeder Session starten</span>
+<span class="b">tmux send-keys -t research     "pi --provider huggingface --model 'deepseek-ai/DeepSeek-R1'" Enter</span>
+<span class="b">tmux send-keys -t coder        "pi --provider huggingface --model 'Qwen/Qwen2.5-Coder-32B-Instruct'" Enter</span>
+<span class="b">tmux send-keys -t orchestrator "pi --model 'meta-llama/Llama-3.3-70B-Instruct'" Enter</span>
+<span class="c"># Sessions im Blick — Split View in einem Fenster</span>
+<span class="b">tmux new-window -n overview</span>
+<span class="b">tmux split-window -h -t overview</span>
+<span class="b">tmux split-window -v -t overview:0.0</span>
+<span class="b">tmux send-keys -t overview:0.0 "tmux attach -t research"     Enter</span>
+<span class="b">tmux send-keys -t overview:0.1 "tmux attach -t coder"        Enter</span>
+<span class="b">tmux send-keys -t overview:0.2 "tmux attach -t orchestrator" Enter</span>
+<span class="c"># Navigation</span>
+Ctrl+B, s          <span class="c"># Session-Übersicht</span>
+Ctrl+B, $          <span class="c"># Session umbenennen</span>
+Ctrl+B, d          <span class="c"># Detach (Session läuft weiter)</span>
+tmux attach -t coder  <span class="c"># Session wieder attachen</span>
+    </div>
+    <div class="g3">
+        <div class="card">
+            <span class="eyebrow" style="color:var(--indigo);margin-bottom:.4rem;">research agent</span>
+            <p style="font-size:.85rem;font-weight:600;margin-bottom:.35rem;">DeepSeek-R1</p>
+            <p style="font-size:.8rem;font-weight:300;line-height:1.6;">Tiefe Analysen, Recherchen, Reports. Outputs in <span class="mono" style="font-size:.8em;">workspace/research/</span>. Koordiniert via Shared Files mit dem Orchestrator.</p>
         </div>
+        <div class="card">
+            <span class="eyebrow" style="color:var(--orange);margin-bottom:.4rem;">code agent</span>
+            <p style="font-size:.85rem;font-weight:600;margin-bottom:.35rem;">Qwen2.5-Coder-32B</p>
+            <p style="font-size:.8rem;font-weight:300;line-height:1.6;">Implementierung, Tests, Refactoring. Liest Spezifikationen aus <span class="mono" style="font-size:.8em;">workspace/specs/</span>, schreibt in <span class="mono" style="font-size:.8em;">src/</span>.</p>
         </div>
+        <div class="card">
+            <span class="eyebrow" style="color:var(--red);margin-bottom:.4rem;">orchestrator</span>
+            <p style="font-size:.85rem;font-weight:600;margin-bottom:.35rem;">Llama-3.3-70B</p>
+            <p style="font-size:.8rem;font-weight:300;line-height:1.6;">Aufgaben delegieren, Outputs zusammenführen. Tracked Fortschritt in <span class="mono" style="font-size:.8em;">TODO.md</span> und <span class="mono" style="font-size:.8em;">CHANGELOG.md</span>.</p>
+        </div>
+    </div>
+</section>
+<!-- ══ 7 REFERENZ ══ -->
+<section>
+    <span class="eyebrow">referenz · shortcuts &amp; sessions</span>
+    <h2 class="h2" style="margin-bottom:2.2rem;">sessions &amp; <strong class="grad">nützliche befehle</strong></h2>
+    <div class="g2" style="margin-bottom:1.4rem;align-items:start;">
+        <div>
+            <p class="lead" style="font-size:.9rem;margin-bottom:1rem;">Sessions als Baumstruktur — <span class="mono" style="font-size:.9em;">/tree</span> für Navigation, <span class="mono" style="font-size:.9em;">/fork</span> für neue Branches, <span class="mono" style="font-size:.9em;">/share</span> als GitHub Gist.</p>
+            <div class="cb" style="border-radius:16px;font-size:.73rem;">
+<span class="c"># CLI Session-Befehle</span>
+pi -c              <span class="c"># letzte Session fortführen</span>
+pi -r              <span class="c"># Session auswählen</span>
+pi --no-session    <span class="c"># ephemeral (kein Speichern)</span>
+pi --fork &lt;id&gt;    <span class="c"># Session forken</span>
+<span class="c"># In Pi: Commands</span>
+/tree     <span class="c"># Baum-Navigation</span>
+/fork     <span class="c"># ab Punkt neu</span>
+/compact  <span class="c"># Kontext komprimieren</span>
+/share    <span class="c"># als Gist teilen</span>
+/export   <span class="c"># als HTML exportieren</span>
+            </div>
+        </div>
+        <div>
+            <p class="lead" style="font-size:.9rem;margin-bottom:1rem;">Wichtige Shortcuts:</p>
+            <div style="display:flex;flex-direction:column;gap:.6rem;">
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">Ctrl+L</code>
+                    <span style="font-size:.82rem;font-weight:300;">Modell wechseln — mid-session, ohne Kontextverlust</span>
+                </div>
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">Ctrl+P</code>
+                    <span style="font-size:.82rem;font-weight:300;">Durch Lieblings-Modelle cyceln (via /scoped-models)</span>
+                </div>
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">Shift+Tab</code>
+                    <span style="font-size:.82rem;font-weight:300;">Thinking Level: off → minimal → low → medium → high</span>
+                </div>
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">@datei</code>
+                    <span style="font-size:.82rem;font-weight:300;">Datei per fuzzy-search in den Kontext einbinden</span>
+                </div>
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">!cmd</code>
+                    <span style="font-size:.82rem;font-weight:300;">Bash ausführen und Output direkt ans Modell schicken</span>
+                </div>
+                <div class="card" style="padding:.9rem;display:flex;gap:.9rem;align-items:flex-start;">
+                    <code style="background:var(--black);color:#fff;border-radius:7px;padding:1px 7px;font-size:.68rem;white-space:nowrap;flex-shrink:0;">Esc×2</code>
+                    <span style="font-size:.82rem;font-weight:300;">Session-Baum öffnen (/tree)</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- FOOTER -->
+<div class="rule" style="margin-top:3.5rem;"></div>
+<footer style="display:flex;justify-content:space-between;align-items:center;padding:1.6rem 0;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);font-weight:600;">
+    <div style="font-weight:700;font-size:1.05rem;letter-spacing:-.015em;color:var(--black);text-transform:none;">valantic</div>
+    <div>20. April 2026</div>
+    <div>Pi Agents Setup</div>
+</footer>
 </div>
 <script>
+// ── Directory ─────────────────────────────────────────────────
+const dirs = {
+    root:       { t:'mein-projekt/', d:'Der Projektordner. Pi lädt AGENTS.md aus diesem Verzeichnis und allen Elternordnern. Struktur ist konventionsbasiert — kein Config-File nötig.' },
+    pi:         { t:'.pi/', d:'Projekt-lokale Konfiguration — überschreibt ~/.pi/agent/ Einstellungen. Kann unter Versionskontrolle gestellt werden.' },
+    system:     { t:'.pi/SYSTEM.md', d:'Ersetzt den Standard-System-Prompt vollständig für dieses Projekt. APPEND_SYSTEM.md ergänzt nur. Skills und AGENTS.md werden weiterhin geladen.', code:'touch .pi/SYSTEM.md' },
+    piset:      { t:'.pi/settings.json', d:'Projekt-Einstellungen: Thinking Level, Auto-Compaction, Modell-Präferenzen. Überschreibt globale settings.json.', code:"echo '{\"thinkingLevel\":\"medium\"}' > .pi/settings.json" },
+    skills_dir: { t:'.pi/skills/', d:'Projekt-Skills: je ein Unterordner pro Skill mit SKILL.md. On-demand geladen via /skill:name oder automatisch nach Kontext. Kein Prompt-Cache-Busting.', code:'mkdir -p .pi/skills/mein-skill && touch .pi/skills/mein-skill/SKILL.md' },
+    prompts_dir:{ t:'.pi/prompts/', d:'Reusable Prompt-Templates als Markdown. Im Editor via /template-name expandieren. Unterstützen {{variablen}}.', code:'touch .pi/prompts/review.md' },
+    ext_dir:    { t:'.pi/extensions/', d:'TypeScript-Erweiterungen: eigene Tools, Commands, Shortcuts, UI-Komponenten. Full TUI-Zugriff. Werden beim Start geladen.', code:'touch .pi/extensions/my-ext.ts' },
+    agents_md:  { t:'AGENTS.md', d:'Die zentrale Kontext-Datei. Automatisch beim Start geladen. Definiere hier Rolle, Regeln, Konventionen und Modell-Präferenzen. CLAUDE.md funktioniert als Alias.' },
+    workspace:  { t:'workspace/', d:'Autonomer Arbeitsbereich für Outputs: Dokumente, JSON, Logs, Reports. Trennung vom Code hält die Projektstruktur sauber.' }
+};
+function showDir(k, btn) {
+    const d = dirs[k];
+    document.getElementById('dir-title').textContent = d.t;
+    document.getElementById('dir-desc').textContent  = d.d;
+    const ce = document.getElementById('dir-code');
+    ce.innerHTML = d.code ? `<div class="cb" style="border-radius:12px;padding:.7rem 1rem;font-size:.73rem;"><span class="b">${d.code}</span></div>` : '';
+    document.querySelectorAll('.dir-btn').forEach(b => { b.classList.remove('pill-on'); b.classList.add('pill-off'); });
+    btn.classList.remove('pill-off'); btn.classList.add('pill-on');
+}
+showDir('root', document.querySelector('.dir-btn'));
+// ── Tabs ──────────────────────────────────────────────────────
+function switchTab(id, btn) {
+    ['t_agents','t_system','t_global'].forEach(t => document.getElementById(t)?.classList.add('hidden'));
+    document.getElementById(id)?.classList.remove('hidden');
+    document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('pill-on'); b.classList.add('pill-off'); });
+    btn.classList.remove('pill-off'); btn.classList.add('pill-on');
+}
+// ── Models ────────────────────────────────────────────────────
+const models = [
+    { n:'DeepSeek-R1',            cat:'reasoning', cls:'cat-r', ctx:'163k',     p:'Hyperbolic',    d:'Führend bei komplexer Logik, Mathe und tiefen Analysen.' },
+    { n:'Llama-3.3-70B-Instruct', cat:'reasoning', cls:'cat-r', ctx:'131k',     p:'Groq · Novita', d:'Starkes Allround-Modell, hohes Textverständnis.' },
+    { n:'Llama-3.1-8B-Instruct',  cat:'speed',     cls:'cat-s', ctx:'16k–131k', p:'Cerebras',      d:'Blitzschnell — ideal für Routing und Vorverarbeitung.' },
+    { n:'Qwen3.5-9B',             cat:'speed',     cls:'cat-s', ctx:'262k',     p:'Together',      d:'Kompakt mit riesigem Kontext für lange Dokumente.' },
+    { n:'Qwen2.5-Coder-32B',      cat:'coding',    cls:'cat-c', ctx:'131k',     p:'nscale',        d:'Beste Wahl für Code-Generierung und Debugging.' },
+    { n:'Qwen3-Coder-Next',       cat:'coding',    cls:'cat-c', ctx:'262k',     p:'Novita',        d:'Neueste Iteration für komplexe Coding-Workflows.' },
+    { n:'GLM-4.5V',               cat:'vision',    cls:'cat-v', ctx:'65k',      p:'Novita',        d:'Starkes multimodales Modell für Bild- und UI-Analyse.' },
+    { n:'Qwen3-VL-8B-Instruct',   cat:'vision',    cls:'cat-v', ctx:'131k',     p:'Novita',        d:'Effizient für Screenshots und visuelle Verifizierung.' },
+];
+function renderModels(f) {
+    const g = document.getElementById('model-grid'); g.innerHTML = '';
+    (f==='all' ? models : models.filter(m=>m.cat===f)).forEach(m => {
+        const c = document.createElement('div'); c.className = 'card';
+        c.style = 'display:flex;flex-direction:column;';
+        c.innerHTML = `<div class="eyebrow ${m.cls}" style="margin-bottom:.35rem;">${m.cat}</div>
+            <p style="font-size:.88rem;font-weight:600;margin-bottom:.35rem;">${m.n}</p>
+            <p style="font-size:.78rem;font-weight:300;line-height:1.6;flex-grow:1;margin-bottom:.8rem;">${m.d}</p>
+            <div style="background:#f8f8f8;border-radius:9px;padding:.5rem .75rem;font-size:.7rem;">
+                <div style="display:flex;justify-content:space-between;margin-bottom:.2rem;"><span style="font-weight:600;">Context</span><span>${m.ctx}</span></div>
+                <div style="display:flex;justify-content:space-between;gap:.4rem;"><span style="font-weight:600;flex-shrink:0;">Provider</span><span style="text-align:right;">${m.p}</span></div>
+            </div>`;
+        g.appendChild(c);
     });
+}
+function filterModels(f, btn) {
+    document.querySelectorAll('.filter-btn').forEach(b => { b.classList.remove('pill-on'); b.classList.add('pill-off'); });
+    btn.classList.remove('pill-off'); btn.classList.add('pill-on');
+    renderModels(f);
+}
+renderModels('all');
 </script>
 </body>
 </html>