Pouya
1462 lines
96 KiB
HTML
1462 lines
96 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title data-i18n data-en="Your Agentic Environment — A Field Guide" data-de="Deine agentische Umgebung — ein Feldführer">Your Agentic Environment — A Field Guide</title>
|
||
<style>
|
||
/* =========================================================================
|
||
YOUR AGENTIC ENVIRONMENT — A FIELD GUIDE (single-file explainer)
|
||
Direction: editorial engineering field-guide, onboarding voice.
|
||
Family resemblance to the project's roadmap infographic: parchment+ink /
|
||
midnight+bone, rust-amber signature accent, Georgia display serif +
|
||
system sans body + ui-monospace labels, inline-SVG data viz, faint
|
||
engineering grid. Warmer, orientation-first — the "what & why".
|
||
Semantic colour language: RO = teal (read-only) · RW = crimson (write)
|
||
accent = rust-amber (the signature move)
|
||
slate = neutral / domain
|
||
i18n: bilingual EN/DE. Each text node carries data-en / data-de (HTML
|
||
strings); a tiny inline script swaps innerHTML on toggle. Default
|
||
English in markup -> graceful with JS off. navigator.language picks DE,
|
||
localStorage override persists. aria carried via data-en-aria/data-de-aria.
|
||
========================================================================= */
|
||
|
||
:root{
|
||
/* --- light: warm parchment, ink, rust-amber signature ------------------ */
|
||
--bg: #f3efe6;
|
||
--bg-grain: #ece6d8;
|
||
--surface: #faf7f0;
|
||
--surface-2: #f0ebdf;
|
||
--ink: #1b1714;
|
||
--ink-soft: #45403a;
|
||
--muted: #6c655b;
|
||
--faint: #948d80;
|
||
--border: #ddd5c5;
|
||
--border-strong: #c9c0ad;
|
||
--rule: #d6cdba;
|
||
|
||
--accent: #b1481b; /* rust-amber signature */
|
||
--accent-ink: #8c3811;
|
||
--accent-wash: #f5e3d6;
|
||
|
||
--ro: #167a6e; /* teal — read-only */
|
||
--ro-wash: #d8ebe7;
|
||
--rw: #b21e35; /* crimson — read + write */
|
||
--rw-wash: #f6dde0;
|
||
--slate: #4a5a78; /* neutral / domain */
|
||
--slate-wash: #e0e5ee;
|
||
|
||
--good: #167a6e;
|
||
--warn: #c47512;
|
||
--bad: #b21e35;
|
||
|
||
--shadow: 0 1px 0 rgba(27,23,20,.04), 0 10px 30px -22px rgba(27,23,20,.45);
|
||
--shadow-lift: 0 2px 0 rgba(27,23,20,.05), 0 24px 50px -28px rgba(27,23,20,.5);
|
||
|
||
--serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
|
||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
|
||
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Menlo", "Consolas", monospace;
|
||
|
||
--step--1: clamp(.78rem, .76rem + .12vw, .85rem);
|
||
--step-0: clamp(.95rem, .92rem + .2vw, 1.05rem);
|
||
--step-1: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
|
||
--step-2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
|
||
--step-3: clamp(2rem, 1.6rem + 1.6vw, 3rem);
|
||
--step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
|
||
|
||
--maxw: 1080px;
|
||
--gap: clamp(1.5rem, 1rem + 2vw, 3rem);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark){
|
||
:root{
|
||
--bg: #15130f;
|
||
--bg-grain: #1b1813;
|
||
--surface: #1f1c16;
|
||
--surface-2: #25211a;
|
||
--ink: #f1ece1;
|
||
--ink-soft: #d3cdc0;
|
||
--muted: #a39c8c;
|
||
--faint: #6f6a5d;
|
||
--border: #322d24;
|
||
--border-strong: #423c30;
|
||
--rule: #2c2820;
|
||
|
||
--accent: #e58a4e;
|
||
--accent-ink: #f0a570;
|
||
--accent-wash: #3a2418;
|
||
|
||
--ro: #4fc0b0;
|
||
--ro-wash: #163029;
|
||
--rw: #e26678;
|
||
--rw-wash: #3a2026;
|
||
--slate: #8ea3c7;
|
||
--slate-wash: #1f2632;
|
||
|
||
--good: #4fc0b0;
|
||
--warn: #e0a64a;
|
||
--bad: #e26678;
|
||
|
||
--shadow: 0 1px 0 rgba(0,0,0,.4), 0 14px 36px -24px rgba(0,0,0,.9);
|
||
--shadow-lift: 0 2px 0 rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.95);
|
||
}
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
|
||
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
|
||
body{
|
||
margin:0;
|
||
background:
|
||
radial-gradient(120% 80% at 100% 0%, var(--bg-grain) 0%, transparent 55%),
|
||
var(--bg);
|
||
color:var(--ink);
|
||
font-family:var(--sans);
|
||
font-size:var(--step-0);
|
||
line-height:1.6;
|
||
letter-spacing:.005em;
|
||
-webkit-font-smoothing:antialiased;
|
||
text-rendering:optimizeLegibility;
|
||
}
|
||
::selection{background:var(--accent);color:#fff}
|
||
@media (prefers-color-scheme: dark){::selection{color:#15130f}}
|
||
a{color:var(--accent-ink);text-underline-offset:.18em}
|
||
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}
|
||
|
||
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
|
||
|
||
/* faint engineering grid behind everything */
|
||
body::before{
|
||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(to right, var(--rule) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
|
||
background-size:46px 46px;
|
||
opacity:.22;
|
||
mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 80%);
|
||
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 80%);
|
||
}
|
||
|
||
/* skip link */
|
||
.skip{position:absolute;left:-9999px;top:0}
|
||
.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--ink);color:var(--bg);
|
||
padding:.6rem 1rem;border-radius:6px;font-family:var(--mono);font-size:var(--step--1)}
|
||
|
||
/* ---- type helpers ------------------------------------------------------- */
|
||
.mono{font-family:var(--mono)}
|
||
.num{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
|
||
.kicker{
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;
|
||
}
|
||
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.01em}
|
||
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
|
||
padding:.06em .36em;border-radius:4px;color:var(--accent-ink);border:1px solid var(--border)}
|
||
|
||
/* =========================================================================
|
||
MASTHEAD
|
||
========================================================================= */
|
||
.masthead{position:relative;padding:clamp(2.4rem,6vw,5rem) 0 0}
|
||
.masthead .topline{
|
||
display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:baseline;
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
color:var(--muted);letter-spacing:.04em;
|
||
border-bottom:1px solid var(--border-strong);
|
||
padding-bottom:.9rem;margin-bottom:clamp(1.6rem,4vw,2.8rem);
|
||
}
|
||
.masthead .topline strong{color:var(--ink);font-weight:600}
|
||
.masthead .topline .sep{color:var(--faint)}
|
||
.masthead .doc-id{margin-left:auto;color:var(--accent)}
|
||
|
||
.masthead h1{font-size:var(--step-4);margin:0 0 .5rem;max-width:16ch}
|
||
.masthead h1 .accent{color:var(--accent)}
|
||
.masthead .sub{
|
||
font-family:var(--mono);color:var(--muted);font-size:var(--step-0);letter-spacing:.02em;
|
||
}
|
||
.masthead .lede{
|
||
margin:1.6rem 0 0;max-width:60ch;font-size:var(--step-1);line-height:1.45;
|
||
color:var(--ink-soft);font-family:var(--serif);
|
||
}
|
||
.masthead .lede b{color:var(--ink)}
|
||
|
||
/* a tiny "read this like a map" orientation strip */
|
||
.compass{
|
||
display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem;
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
}
|
||
.compass a{
|
||
text-decoration:none;color:var(--ink-soft);
|
||
border:1px solid var(--border);background:var(--surface);
|
||
padding:.34em .7em;border-radius:99px;display:inline-flex;gap:.45rem;align-items:center;
|
||
transition:border-color .18s ease, color .18s ease;
|
||
}
|
||
.compass a:hover{border-color:var(--accent);color:var(--accent-ink)}
|
||
.compass a .n{color:var(--accent);font-weight:700}
|
||
|
||
/* ---- language selector (segmented pill, matches mono label system) ----- */
|
||
.langbar{
|
||
position:absolute;top:clamp(1rem,3vw,1.8rem);right:clamp(1.1rem,4vw,3rem);
|
||
display:flex;align-items:center;gap:.55rem;z-index:5;
|
||
}
|
||
.langbar .lglabel{
|
||
font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
|
||
color:var(--faint);font-weight:700;
|
||
}
|
||
.langseg{
|
||
display:inline-flex;border:1px solid var(--border-strong);border-radius:99px;
|
||
background:var(--surface);box-shadow:var(--shadow);overflow:hidden;
|
||
padding:2px;gap:2px;
|
||
}
|
||
.langseg button{
|
||
appearance:none;border:0;cursor:pointer;background:transparent;
|
||
font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
|
||
color:var(--muted);padding:.32em .82em;border-radius:99px;
|
||
transition:background-color .16s ease, color .16s ease;
|
||
line-height:1;
|
||
}
|
||
.langseg button:hover{color:var(--accent-ink)}
|
||
.langseg button[aria-pressed="true"]{
|
||
background:var(--accent);color:#fff;box-shadow:0 1px 6px -2px rgba(0,0,0,.4);
|
||
}
|
||
@media (prefers-color-scheme: dark){
|
||
.langseg button[aria-pressed="true"]{color:#15130f}
|
||
}
|
||
.langseg button:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
|
||
@media(max-width:560px){
|
||
.langbar .lglabel{display:none}
|
||
.langbar{top:.7rem;right:.9rem}
|
||
}
|
||
|
||
/* =========================================================================
|
||
SECTION SHELL
|
||
========================================================================= */
|
||
section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
|
||
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
|
||
.sec-head .tag{
|
||
font-family:var(--mono);font-weight:700;font-size:var(--step--1);
|
||
color:var(--bg);background:var(--ink);
|
||
padding:.28em .7em;border-radius:3px;letter-spacing:.1em;flex:none;
|
||
}
|
||
.sec-head h2{font-size:var(--step-3);margin:0;max-width:24ch}
|
||
.sec-head .note{
|
||
margin-left:auto;font-family:var(--mono);font-size:var(--step--1);
|
||
color:var(--muted);align-self:flex-end;text-align:right;max-width:36ch;line-height:1.5;
|
||
}
|
||
|
||
/* =========================================================================
|
||
SECTION 1 — ELEVATOR PITCH (split: chat -> org)
|
||
========================================================================= */
|
||
.pitch{
|
||
display:grid;grid-template-columns:1fr;gap:0;
|
||
border:1px solid var(--border);border-radius:14px;overflow:hidden;
|
||
box-shadow:var(--shadow-lift);background:var(--surface);
|
||
}
|
||
@media(min-width:760px){.pitch{grid-template-columns:.85fr 1.15fr}}
|
||
.pitch .was{
|
||
padding:clamp(1.6rem,4vw,2.6rem);
|
||
background:repeating-linear-gradient(135deg, var(--surface-2) 0 2px, transparent 2px 9px), var(--surface);
|
||
}
|
||
.pitch .lab{
|
||
font-family:var(--mono);font-size:var(--step--1);
|
||
text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin-bottom:.9rem;display:block;
|
||
}
|
||
.pitch .was .lab{color:var(--muted)}
|
||
.pitch .is{padding:clamp(1.6rem,4vw,2.6rem);background:var(--ink);color:var(--bg);position:relative}
|
||
.pitch .is .lab{color:var(--accent)}
|
||
.pitch blockquote{margin:0;font-family:var(--serif);
|
||
font-size:clamp(1.2rem,1rem+1vw,1.6rem);line-height:1.4;letter-spacing:-.01em}
|
||
.pitch .was blockquote{color:var(--ink-soft)}
|
||
.pitch .was em{font-style:italic;color:var(--muted)}
|
||
.pitch .is em{font-style:normal;font-weight:700;color:var(--accent-ink)}
|
||
.pitch .oneline{
|
||
margin-top:1.2rem;padding-top:1rem;border-top:1px dashed rgba(255,255,255,.22);
|
||
font-family:var(--mono);font-size:var(--step--1);letter-spacing:.02em;color:var(--bg);opacity:.92;
|
||
}
|
||
@media(prefers-color-scheme: dark){.pitch .oneline{border-top-color:rgba(0,0,0,.4)}}
|
||
.pitch .arrow-chip{
|
||
position:absolute;left:-18px;top:50%;transform:translateY(-50%);
|
||
width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;
|
||
display:grid;place-items:center;font-weight:700;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
|
||
}
|
||
@media(max-width:759px){.pitch .arrow-chip{left:50%;top:-18px;transform:translateX(-50%) rotate(90deg)}}
|
||
|
||
/* the "what it plugs into" micro-facts under the pitch */
|
||
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
|
||
@media(max-width:620px){.facts{grid-template-columns:1fr}}
|
||
.fact{background:var(--surface);border:1px solid var(--border);border-radius:11px;
|
||
padding:1rem 1.1rem;box-shadow:var(--shadow)}
|
||
.fact .ic{color:var(--accent);margin-bottom:.5rem;display:block}
|
||
.fact h3{font-size:var(--step-0);margin:0 0 .15rem;font-family:var(--serif)}
|
||
.fact p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.45}
|
||
.fact p code{font-size:.92em}
|
||
|
||
/* =========================================================================
|
||
SECTION 2 — FIVE PILLARS (cards)
|
||
========================================================================= */
|
||
.pillars{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}
|
||
.pillar{
|
||
grid-column:span 2;
|
||
background:var(--surface);border:1px solid var(--border);border-radius:13px;
|
||
border-top:3px solid var(--accent);box-shadow:var(--shadow);
|
||
padding:1.2rem 1.25rem 1.3rem;display:flex;flex-direction:column;
|
||
}
|
||
/* first two cards take half-width each on the top row for rhythm */
|
||
.pillar.wide{grid-column:span 3}
|
||
@media(max-width:880px){.pillar,.pillar.wide{grid-column:span 3}}
|
||
@media(max-width:560px){.pillar,.pillar.wide{grid-column:span 6}}
|
||
.pillar .pnum{
|
||
font-family:var(--mono);font-size:var(--step--1);font-weight:700;letter-spacing:.14em;
|
||
color:var(--accent);text-transform:uppercase;
|
||
}
|
||
.pillar .phead{display:flex;align-items:center;gap:.7rem;margin:.5rem 0 .4rem}
|
||
.pillar .pic{
|
||
width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
|
||
background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--border);
|
||
}
|
||
.pillar h3{font-size:var(--step-1);margin:0;line-height:1.1}
|
||
.pillar p{margin:0;color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
|
||
.pillar p b{color:var(--ink)}
|
||
.pillar .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
|
||
.pillar .tags span{
|
||
font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
|
||
background:var(--surface-2);border:1px solid var(--border);color:var(--ink-soft);
|
||
padding:.28em .55em;border-radius:5px;
|
||
}
|
||
|
||
/* =========================================================================
|
||
SECTION 3 — THE ROSTER (role cards, RO/RW encoded)
|
||
========================================================================= */
|
||
.access-legend{
|
||
display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin-bottom:1.3rem;
|
||
font-family:var(--mono);font-size:var(--step--1);color:var(--muted);align-items:center;
|
||
}
|
||
.access-legend .lg{display:inline-flex;align-items:center;gap:.45rem}
|
||
.access-legend .sw{width:13px;height:13px;border-radius:4px;flex:none}
|
||
.access-legend .sw.ro{background:var(--ro)}
|
||
.access-legend .sw.rw{background:var(--rw)}
|
||
.access-legend .sw.prop{background:var(--slate)}
|
||
|
||
.roster{display:grid;gap:13px;grid-template-columns:repeat(4,1fr)}
|
||
@media(max-width:900px){.roster{grid-template-columns:repeat(2,1fr)}}
|
||
@media(max-width:480px){.roster{grid-template-columns:1fr}}
|
||
.role{
|
||
background:var(--surface);border:1px solid var(--border);border-radius:12px;
|
||
box-shadow:var(--shadow);padding:1rem 1.05rem 1.05rem;
|
||
display:flex;flex-direction:column;position:relative;overflow:hidden;
|
||
}
|
||
.role::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
|
||
.role[data-a="ro"]::before{background:var(--ro)}
|
||
.role[data-a="rw"]::before{background:var(--rw)}
|
||
.role[data-a="prop"]::before{background:var(--slate)}
|
||
.role .rtop{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem}
|
||
.role .ric{
|
||
width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
|
||
background:var(--surface-2);border:1px solid var(--border);color:var(--ink-soft);
|
||
}
|
||
.role h3{font-size:var(--step-0);margin:0;line-height:1.15;flex:1;font-family:var(--serif)}
|
||
.role .badge{
|
||
font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
|
||
padding:.24em .5em;border-radius:99px;border:1px solid currentColor;white-space:nowrap;flex:none;
|
||
}
|
||
.role[data-a="ro"] .badge{color:var(--ro)}
|
||
.role[data-a="rw"] .badge{color:var(--rw)}
|
||
.role[data-a="prop"] .badge{color:var(--slate)}
|
||
.role p{margin:0;color:var(--muted);font-size:var(--step--1);line-height:1.45}
|
||
.role .em-tag{
|
||
margin-top:.7rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
|
||
color:var(--accent);font-weight:700;
|
||
}
|
||
|
||
/* the key-principle banner under the roster */
|
||
.principle{
|
||
margin-top:18px;border:1px solid var(--border);border-radius:14px;overflow:hidden;
|
||
background:
|
||
radial-gradient(120% 140% at 0% 0%, var(--accent-wash) 0%, transparent 55%),
|
||
var(--surface);
|
||
box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;align-items:center;
|
||
}
|
||
@media(max-width:640px){.principle{grid-template-columns:1fr}}
|
||
.principle .lock{
|
||
padding:clamp(1.2rem,3vw,1.8rem);display:grid;place-items:center;
|
||
border-right:1px solid var(--border);color:var(--accent);
|
||
}
|
||
@media(max-width:640px){.principle .lock{border-right:none;border-bottom:1px solid var(--border)}}
|
||
.principle .ptxt{padding:clamp(1.2rem,3vw,1.8rem)}
|
||
.principle .pk{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;
|
||
text-transform:uppercase;color:var(--accent);font-weight:700;display:block;margin-bottom:.5rem}
|
||
.principle blockquote{margin:0;font-family:var(--serif);
|
||
font-size:clamp(1.15rem,.9rem+1vw,1.5rem);line-height:1.35;color:var(--ink)}
|
||
.principle blockquote b{color:var(--accent-ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 4 — THE SELF-IMPROVING LOOP (centerpiece ring)
|
||
========================================================================= */
|
||
.loop-wrap{
|
||
border:1px solid var(--border);border-radius:16px;
|
||
background:
|
||
radial-gradient(120% 120% at 50% 0%, var(--accent-wash) 0%, transparent 55%),
|
||
var(--surface);
|
||
box-shadow:var(--shadow-lift);
|
||
padding:clamp(1.4rem,4vw,2.4rem);overflow:hidden;position:relative;
|
||
}
|
||
.loop-wrap::before{
|
||
content:"";position:absolute;inset:0;pointer-events:none;
|
||
background-image:
|
||
linear-gradient(to right, var(--rule) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
|
||
background-size:34px 34px;opacity:.16;
|
||
mask-image:radial-gradient(80% 70% at 50% 45%, transparent 30%, #000 95%);
|
||
-webkit-mask-image:radial-gradient(80% 70% at 50% 45%, transparent 30%, #000 95%);
|
||
}
|
||
.loop-grid{display:grid;gap:clamp(1.2rem,3vw,2rem);grid-template-columns:1fr;
|
||
align-items:center;position:relative;z-index:1}
|
||
@media(min-width:880px){.loop-grid{grid-template-columns:minmax(0,430px) 1fr}}
|
||
|
||
.ring{position:relative;width:100%;max-width:430px;margin:0 auto;aspect-ratio:1/1}
|
||
.ring > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
|
||
.ring .hub{
|
||
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
|
||
width:40%;aspect-ratio:1/1;border-radius:50%;
|
||
background:var(--ink);color:var(--bg);
|
||
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||
text-align:center;padding:.6rem;box-shadow:var(--shadow-lift);border:2px solid var(--accent);
|
||
}
|
||
.ring .hub .hk{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
|
||
.ring .hub .ht{font-family:var(--serif);font-weight:700;font-size:clamp(.9rem,.6rem+1.6vw,1.25rem);line-height:1.05;margin-top:.25rem}
|
||
.ring .hub .hsub{font-family:var(--mono);font-size:.55rem;letter-spacing:.02em;color:var(--bg);opacity:.62;margin-top:.3rem;line-height:1.3}
|
||
|
||
.ring .node{
|
||
position:absolute;width:30%;transform:translate(-50%,-50%);
|
||
background:var(--surface);border:1px solid var(--border-strong);
|
||
border-top:3px solid var(--accent);border-radius:11px;
|
||
padding:.55rem .5rem .6rem;text-align:center;box-shadow:var(--shadow);
|
||
}
|
||
.ring .node .nstep{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
|
||
.ring .node .ntitle{font-family:var(--serif);font-weight:700;font-size:.92rem;line-height:1.05;margin-top:.1rem}
|
||
.ring .node .nicon{display:block;margin:0 auto .15rem;color:var(--accent)}
|
||
.ring .node.n1{left:50%;top:6%}
|
||
.ring .node.n2{left:94%;top:38%}
|
||
.ring .node.n3{left:78%;top:90%}
|
||
.ring .node.n4{left:22%;top:90%}
|
||
.ring .node.n5{left:6%;top:38%}
|
||
.ring .gate{
|
||
position:absolute;left:13%;top:14%;transform:translate(-50%,-50%);
|
||
display:flex;flex-direction:column;align-items:center;gap:.18rem;
|
||
background:var(--bad);color:#fff;border-radius:9px;padding:.4rem .55rem;
|
||
box-shadow:0 8px 20px -8px rgba(0,0,0,.5);max-width:8.5rem;text-align:center;
|
||
border:1px solid rgba(255,255,255,.2);
|
||
}
|
||
.ring .gate .gk{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
|
||
.ring .gate .gt{font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.02em;line-height:1.2}
|
||
@media(prefers-color-scheme: dark){.ring .gate{color:#15130f}}
|
||
|
||
.loop-stages{display:grid;gap:.65rem}
|
||
.lstage{
|
||
display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
|
||
background:var(--surface);border:1px solid var(--border);border-radius:10px;
|
||
padding:.7rem .9rem;box-shadow:var(--shadow);
|
||
}
|
||
.lstage .ord{
|
||
font-family:var(--serif);font-weight:700;font-size:1.3rem;line-height:1;color:var(--accent);
|
||
width:1.4rem;text-align:center;flex:none;border-right:1px solid var(--border);
|
||
padding-right:.85rem;align-self:stretch;display:flex;align-items:center;
|
||
}
|
||
.lstage[data-gate="1"] .ord{color:var(--bad);border-right-color:var(--bad)}
|
||
.lstage h4{margin:0;font-family:var(--serif);font-size:var(--step-0);font-weight:700;line-height:1.2}
|
||
.lstage h4 .gateflag{
|
||
font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
|
||
color:var(--bad);border:1px solid var(--bad);border-radius:99px;padding:.12em .5em;margin-left:.5rem;
|
||
vertical-align:.12em;white-space:nowrap;
|
||
}
|
||
.lstage p{margin:.25rem 0 0;font-size:var(--step--1);line-height:1.5;color:var(--ink-soft)}
|
||
.lstage p b{color:var(--ink)}
|
||
.loop-cap{
|
||
margin-top:1.2rem;font-family:var(--serif);font-size:var(--step-1);line-height:1.4;
|
||
color:var(--ink-soft);max-width:62ch;text-align:center;margin-left:auto;margin-right:auto;
|
||
}
|
||
.loop-cap b{color:var(--accent-ink)}
|
||
|
||
/* =========================================================================
|
||
SECTION 5 — MEMORY ARCHITECTURE (layered stack)
|
||
========================================================================= */
|
||
.mem-grid{display:grid;gap:clamp(1.2rem,3vw,2rem);grid-template-columns:1fr;align-items:center}
|
||
@media(min-width:860px){.mem-grid{grid-template-columns:minmax(0,420px) 1fr}}
|
||
|
||
.mem-stack{display:grid;gap:12px}
|
||
.stratum{
|
||
position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;
|
||
background:var(--surface);box-shadow:var(--shadow);padding:1rem 1.15rem;
|
||
border-left:5px solid var(--slate);
|
||
}
|
||
.stratum[data-l="sem"]{border-left-color:var(--accent)}
|
||
.stratum[data-l="epi"]{border-left-color:var(--slate)}
|
||
.stratum[data-l="proc"]{border-left-color:var(--ro)}
|
||
.stratum .shead{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
|
||
.stratum .stype{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
|
||
.stratum[data-l="sem"] .stype{color:var(--accent)}
|
||
.stratum[data-l="epi"] .stype{color:var(--slate)}
|
||
.stratum[data-l="proc"] .stype{color:var(--ro)}
|
||
.stratum h3{font-size:var(--step-1);margin:0;font-family:var(--serif)}
|
||
.stratum .when{margin-left:auto;font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.04em}
|
||
.stratum p{margin:.45rem 0 0;font-size:var(--step--1);line-height:1.5;color:var(--ink-soft)}
|
||
.stratum p b{color:var(--ink)}
|
||
.stratum .ex{
|
||
margin-top:.6rem;font-family:var(--mono);font-size:.7rem;line-height:1.5;color:var(--muted);
|
||
background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:7px;padding:.5rem .65rem;
|
||
}
|
||
.stratum .ex .fk{color:var(--accent-ink)}
|
||
|
||
.mem-note{display:grid;gap:1rem}
|
||
.mem-note .big{font-family:var(--serif);font-size:var(--step-2);line-height:1.2;margin:0;color:var(--ink)}
|
||
.mem-note .big .accent{color:var(--accent)}
|
||
.mem-note p{margin:0;color:var(--ink-soft);font-size:var(--step-0);line-height:1.6;max-width:54ch}
|
||
.mem-note p b{color:var(--ink)}
|
||
.timecard{
|
||
border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:0 10px 10px 0;
|
||
background:var(--surface);padding:.8rem 1rem;box-shadow:var(--shadow);
|
||
}
|
||
.timecard .tk{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
|
||
color:var(--warn);font-weight:700;display:block;margin-bottom:.3rem}
|
||
.timecard p{font-size:var(--step--1);color:var(--ink-soft);margin:0;line-height:1.5}
|
||
|
||
/* =========================================================================
|
||
SECTION 6 — HOW SETUP WORKS (flow timeline)
|
||
========================================================================= */
|
||
.setup{display:grid;gap:0;position:relative}
|
||
.setup .sline{position:absolute;left:23px;top:18px;bottom:18px;width:2px;
|
||
background:linear-gradient(to bottom,var(--accent),var(--ro));opacity:.55}
|
||
@media(max-width:640px){.setup .sline{left:19px}}
|
||
.sstep{display:grid;grid-template-columns:48px 1fr;gap:1rem;padding:.55rem 0;position:relative}
|
||
@media(max-width:640px){.sstep{grid-template-columns:40px 1fr}}
|
||
.sstep .dot{
|
||
width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
|
||
background:var(--surface);border:2px solid var(--accent);color:var(--accent);
|
||
font-family:var(--serif);font-weight:700;font-size:1.3rem;z-index:1;box-shadow:var(--shadow);
|
||
}
|
||
@media(max-width:640px){.sstep .dot{width:40px;height:40px;font-size:1.05rem}}
|
||
.sstep .scard{
|
||
background:var(--surface);border:1px solid var(--border);border-radius:12px;
|
||
padding:.9rem 1.1rem;box-shadow:var(--shadow);margin:.1rem 0 .6rem;
|
||
}
|
||
.sstep .scard h3{font-size:var(--step-1);margin:0 0 .25rem;font-family:var(--serif)}
|
||
.sstep .scard p{margin:0;color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
|
||
.sstep .scard p b{color:var(--ink)}
|
||
.sstep .phasetag{
|
||
font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
|
||
color:var(--muted);font-weight:700;display:inline-block;margin-bottom:.3rem;
|
||
}
|
||
.motto{
|
||
margin-top:1.4rem;border:1px solid var(--border);border-radius:14px;
|
||
background:var(--ink);color:var(--bg);padding:1.2rem 1.4rem;
|
||
font-family:var(--serif);font-size:var(--step-1);line-height:1.35;text-align:center;
|
||
}
|
||
.motto em{font-style:normal;color:var(--accent)}
|
||
|
||
/* ---- "Get started" call-to-action — accent-bordered concrete next step ---- */
|
||
.getstarted{
|
||
margin-top:18px;border:1px solid var(--border);border-left:5px solid var(--accent);
|
||
border-radius:0 14px 14px 0;overflow:hidden;box-shadow:var(--shadow);
|
||
background:
|
||
radial-gradient(120% 140% at 0% 0%, var(--accent-wash) 0%, transparent 55%),
|
||
var(--surface);
|
||
padding:clamp(1.3rem,3.5vw,2rem) clamp(1.3rem,3.5vw,2.2rem);
|
||
}
|
||
.getstarted .gsk{
|
||
font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;
|
||
text-transform:uppercase;color:var(--accent);font-weight:700;display:flex;
|
||
align-items:center;gap:.5rem;margin-bottom:.5rem;
|
||
}
|
||
.getstarted .gsk svg{flex:none}
|
||
.getstarted h3{font-size:var(--step-2);margin:0 0 .55rem;font-family:var(--serif)}
|
||
.getstarted .gslede{margin:0;color:var(--ink-soft);font-size:var(--step-0);line-height:1.55;max-width:62ch}
|
||
.getstarted .gslede b{color:var(--ink)}
|
||
.getstarted ol.gssteps{
|
||
margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem;counter-reset:gs;
|
||
}
|
||
.getstarted ol.gssteps > li{
|
||
display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
|
||
font-size:var(--step--1);line-height:1.55;color:var(--ink-soft);
|
||
}
|
||
.getstarted ol.gssteps > li::before{
|
||
counter-increment:gs;content:counter(gs);
|
||
font-family:var(--mono);font-weight:700;font-size:.72rem;
|
||
width:1.55rem;height:1.55rem;flex:none;border-radius:50%;
|
||
display:grid;place-items:center;background:var(--accent-wash);
|
||
color:var(--accent-ink);border:1px solid var(--border-strong);
|
||
}
|
||
.getstarted ol.gssteps > li b{color:var(--ink)}
|
||
.getstarted .dl{
|
||
display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
|
||
font-family:var(--mono);font-weight:700;font-size:var(--step--1);letter-spacing:.02em;
|
||
color:#fff;background:var(--accent);border:1px solid var(--accent-ink);
|
||
padding:.5em .95em;border-radius:8px;box-shadow:var(--shadow);
|
||
transition:background-color .16s ease, transform .12s ease;
|
||
}
|
||
.getstarted .dl svg{flex:none}
|
||
.getstarted .dl:hover{background:var(--accent-ink)}
|
||
.getstarted .dl:active{transform:translateY(1px)}
|
||
@media(prefers-color-scheme: dark){.getstarted .dl{color:#15130f}}
|
||
.getstarted .cmd{
|
||
margin-top:.55rem;display:block;font-family:var(--mono);font-size:.82rem;line-height:1.5;
|
||
background:var(--ink);color:var(--bg);border:1px solid var(--border-strong);
|
||
border-radius:9px;padding:.75rem .9rem;white-space:pre-wrap;word-break:break-word;
|
||
}
|
||
@media(prefers-color-scheme: dark){
|
||
.getstarted .cmd{background:var(--surface-2);color:var(--ink);}
|
||
}
|
||
.getstarted .cmd .cprompt{color:var(--accent);user-select:none;margin-right:.4rem}
|
||
|
||
/* =========================================================================
|
||
SECTION 7 — PRINCIPLES & ANTI-PATTERNS (two columns)
|
||
========================================================================= */
|
||
.dodont{display:grid;gap:18px;grid-template-columns:1fr}
|
||
@media(min-width:760px){.dodont{grid-template-columns:1fr 1fr}}
|
||
.col-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
|
||
.col-card .ch{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.6rem}
|
||
.col-card .ch h3{font-size:var(--step-1);margin:0;font-family:var(--serif)}
|
||
.col-card .ch .chk{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
|
||
.col-card.do .ch{background:linear-gradient(180deg,var(--ro-wash),transparent 180%)}
|
||
.col-card.do .ch .chk{color:var(--good)}
|
||
.col-card.dont .ch{background:linear-gradient(180deg,var(--rw-wash),transparent 180%)}
|
||
.col-card.dont .ch .chk{color:var(--bad)}
|
||
.col-card ul{margin:0;padding:1rem 1.2rem 1.2rem;list-style:none;display:grid;gap:.7rem}
|
||
.col-card li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;
|
||
font-size:var(--step--1);line-height:1.5;color:var(--ink-soft)}
|
||
.col-card li .m{font-family:var(--mono);font-weight:700;flex:none;line-height:1.5}
|
||
.col-card.do li .m{color:var(--good)}
|
||
.col-card.dont li .m{color:var(--bad)}
|
||
.col-card li b{color:var(--ink)}
|
||
.col-card.dont li .rj{color:var(--muted);text-decoration:line-through;
|
||
text-decoration-color:var(--border-strong);text-decoration-thickness:1px}
|
||
.col-card li code{font-size:.92em}
|
||
|
||
/* =========================================================================
|
||
FOOTER
|
||
========================================================================= */
|
||
footer{border-top:1px solid var(--border-strong);padding:2.4rem 0 4rem;margin-top:1rem}
|
||
footer .fnote{font-family:var(--mono);font-size:var(--step--1);color:var(--muted);line-height:1.7;max-width:80ch}
|
||
footer .fnote b{color:var(--ink-soft)}
|
||
footer .fnote .prims{color:var(--accent-ink)}
|
||
footer .sig{
|
||
margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
|
||
font-family:var(--mono);font-size:var(--step--1);color:var(--faint);
|
||
}
|
||
footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
|
||
|
||
/* =========================================================================
|
||
MOTION — single calm reveal, reduced-motion safe
|
||
========================================================================= */
|
||
@media (prefers-reduced-motion: no-preference){
|
||
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
|
||
.reveal.in{opacity:1;transform:none}
|
||
}
|
||
|
||
/* =========================================================================
|
||
DARK-MODE CONTRAST FIX
|
||
The "inverted highlight" blocks use background:var(--ink);color:var(--bg),
|
||
which in dark mode turns into a cream box (light --ink) with washed-out
|
||
orange accents. Re-skin them as dark surfaces so they fit the dark theme
|
||
and the orange/text regain full contrast. Light mode is unaffected.
|
||
========================================================================= */
|
||
@media (prefers-color-scheme: dark){
|
||
.pitch .is,
|
||
.ring .hub,
|
||
.motto{ background:var(--surface-2); color:var(--ink); }
|
||
.pitch .is .oneline{ color:var(--ink-soft); opacity:1; border-top-color:var(--border); }
|
||
.ring .hub .hsub{ color:var(--ink-soft); opacity:1; }
|
||
.sec-head .tag{ background:var(--accent-wash); color:var(--accent-ink); }
|
||
}
|
||
|
||
/* =========================================================================
|
||
PRINT
|
||
========================================================================= */
|
||
@media print{
|
||
:root{--bg:#fff;--surface:#fff;--surface-2:#f4f4f4;--ink:#000;--ink-soft:#222;--muted:#555;--border:#bbb;--rule:#ddd}
|
||
body{background:#fff}
|
||
body::before{display:none}
|
||
section{page-break-inside:avoid;border-top:1px solid #ccc}
|
||
.pillar,.role,.fact,.lstage,.stratum,.sstep .scard,.col-card,.loop-wrap,.pitch,.principle,.getstarted,.getstarted .dl,.getstarted .cmd{box-shadow:none}
|
||
.reveal{opacity:1!important;transform:none!important}
|
||
.pitch .is,.motto,.getstarted .cmd{background:#111 !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
|
||
.compass,.langbar{display:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a class="skip" href="#main" data-i18n data-en="Skip to content" data-de="Zum Inhalt springen">Skip to content</a>
|
||
|
||
<!-- ============================ MASTHEAD ============================ -->
|
||
<header class="masthead wrap">
|
||
|
||
<div class="langbar" role="group"
|
||
data-en-aria="Language" data-de-aria="Sprache" aria-label="Language">
|
||
<span class="lglabel" data-i18n data-en="Language" data-de="Sprache">Language</span>
|
||
<div class="langseg">
|
||
<button type="button" id="lang-en" data-lang="en" aria-pressed="true"
|
||
data-en-aria="Switch to English" data-de-aria="Auf Englisch umschalten"
|
||
aria-label="Switch to English">EN</button>
|
||
<button type="button" id="lang-de" data-lang="de" aria-pressed="false"
|
||
data-en-aria="Switch to German" data-de-aria="Auf Deutsch umschalten"
|
||
aria-label="Switch to German">DE</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="topline">
|
||
<span><strong data-i18n data-en="YOUR AGENTIC ENVIRONMENT" data-de="DEINE AGENTISCHE UMGEBUNG">YOUR AGENTIC ENVIRONMENT</strong></span>
|
||
<span class="sep">/</span>
|
||
<span data-i18n data-en="A Field Guide" data-de="Ein Feldführer">A Field Guide</span>
|
||
<span class="sep">/</span>
|
||
<span data-i18n data-en="Companion to the setup doc" data-de="Begleiter zur Setup-Anleitung">Companion to the setup doc</span>
|
||
<span class="doc-id num">ORIENT·01</span>
|
||
</div>
|
||
<h1 data-i18n
|
||
data-en="Your Agentic Environment — <span class="accent">A Field Guide</span>"
|
||
data-de="Deine agentische Umgebung — <span class="accent">ein Feldführer</span>">Your Agentic Environment — <span class="accent">A Field Guide</span></h1>
|
||
<p class="sub" data-i18n
|
||
data-en="A personal team of AI experts for your homelab, code, and ideas"
|
||
data-de="Ein persönliches Team aus KI-Experten für dein Homelab, deinen Code und deine Ideen">A personal team of AI experts for your homelab, code, and ideas</p>
|
||
<p class="lede" data-i18n
|
||
data-en="Before your AI walks you through building it, here's the <b>shape</b> of the thing: what it is, why it's built this way, and how the pieces fit. This is the <b>what & why</b> — not the how. Read it like a map."
|
||
data-de="Bevor deine KI dich Schritt für Schritt durch den Aufbau führt, kommt hier die <b>grobe Form</b> des Ganzen: was es ist, warum es so gebaut ist und wie die Teile zusammenpassen. Das hier ist das <b>Was & Warum</b> — nicht das Wie. Lies es wie eine Landkarte.">Before your AI walks you through building it, here's the <b>shape</b> of the
|
||
thing: what it is, why it's built this way, and how the pieces fit. This is the
|
||
<b>what & why</b> — not the how. Read it like a map.</p>
|
||
|
||
<nav class="compass" aria-label="Jump to a section"
|
||
data-en-aria="Jump to a section" data-de-aria="Zu einem Abschnitt springen">
|
||
<a href="#what"><span class="n">1</span> <span data-i18n data-en="What it is" data-de="Was es ist">What it is</span></a>
|
||
<a href="#pillars"><span class="n">2</span> <span data-i18n data-en="Five pillars" data-de="Fünf Säulen">Five pillars</span></a>
|
||
<a href="#roster"><span class="n">3</span> <span data-i18n data-en="The roster" data-de="Das Team">The roster</span></a>
|
||
<a href="#loop"><span class="n">4</span> <span data-i18n data-en="The loop" data-de="Der Kreislauf">The loop</span></a>
|
||
<a href="#memory"><span class="n">5</span> <span data-i18n data-en="Memory" data-de="Gedächtnis">Memory</span></a>
|
||
<a href="#setup"><span class="n">6</span> <span data-i18n data-en="Setup" data-de="Setup">Setup</span></a>
|
||
<a href="#principles"><span class="n">7</span> <span data-i18n data-en="Do & avoid" data-de="Tun & meiden">Do & avoid</span></a>
|
||
<a href="#get-started"><span class="n" aria-hidden="true">→</span> <span data-i18n data-en="Get started" data-de="Loslegen">Get started</span></a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="wrap" id="main">
|
||
|
||
<!-- ============================ SECTION 1 ============================ -->
|
||
<section id="what" aria-labelledby="s1-h">
|
||
<div class="sec-head">
|
||
<span class="tag">1</span>
|
||
<h2 id="s1-h" data-i18n data-en="What this is" data-de="Was das ist">What this is</h2>
|
||
<p class="note" data-i18n
|
||
data-en="The elevator pitch — one idea, two states."
|
||
data-de="Der Elevator-Pitch — eine Idee, zwei Zustände.">The elevator pitch — one idea, two states.</p>
|
||
</div>
|
||
|
||
<div class="pitch reveal">
|
||
<div class="was">
|
||
<span class="lab" data-i18n data-en="Instead of" data-de="Statt">Instead of</span>
|
||
<blockquote data-i18n
|
||
data-en="One <em>general AI chat</em> that forgets, doesn't know your rules, and answers from a blank slate every time."
|
||
data-de="Einem <em>allgemeinen KI-Chat</em>, der vergisst, deine Regeln nicht kennt und jedes Mal bei null anfängt.">One <em>general AI chat</em> that forgets, doesn't know your rules, and answers from a blank slate every time.</blockquote>
|
||
</div>
|
||
<div class="is">
|
||
<span class="arrow-chip" aria-hidden="true">→</span>
|
||
<span class="lab" data-i18n data-en="You get" data-de="Bekommst du">You get</span>
|
||
<blockquote data-i18n
|
||
data-en="A <em>versioned, personal team of specialized AI agents</em> that share memory, follow your rules, and get sharper over time."
|
||
data-de="Ein <em>versioniertes, persönliches Team spezialisierter KI-Agenten</em>, die sich ein Gedächtnis teilen, deinen Regeln folgen und mit der Zeit schärfer werden.">A <em>versioned, personal team of specialized AI agents</em> that share memory, follow your rules, and get sharper over time.</blockquote>
|
||
<p class="oneline" data-i18n
|
||
data-en="Not a chatbot — a small, governed, self-improving AI org that's yours."
|
||
data-de="Kein Chatbot — eine kleine, geregelte, sich selbst verbessernde KI-Organisation, die dir gehört.">Not a chatbot — a small, governed, self-improving AI org that's yours.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="facts">
|
||
<div class="fact reveal">
|
||
<svg class="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3v6a3 3 0 0 0 6 0V3"/><path d="M18 21v-6a3 3 0 0 0-6 0v6"/><circle cx="6" cy="3" r="1.4"/><circle cx="18" cy="21" r="1.4"/></svg>
|
||
<h3 data-i18n data-en="It lives in a git repo" data-de="Es lebt in einem git-Repo">It lives in a git repo</h3>
|
||
<p data-i18n
|
||
data-en="Versioned and backed up from day one — you can read it, diff it, and roll it back."
|
||
data-de="Vom ersten Tag an versioniert und gesichert — du kannst es lesen, vergleichen und zurückrollen.">Versioned and backed up from day one — you can read it, diff it, and roll it back.</p>
|
||
</div>
|
||
<div class="fact reveal">
|
||
<svg class="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></svg>
|
||
<h3 data-i18n data-en="It plugs into Claude Code" data-de="Es klinkt sich in Claude Code ein">It plugs into Claude Code</h3>
|
||
<p data-i18n
|
||
data-en="Built on familiar primitives — subagents, slash commands, hooks. <code>No new app</code>."
|
||
data-de="Baut auf bekannten Bausteinen auf — Subagenten, Slash-Befehlen, Hooks. <code>Keine neue App</code>.">Built on familiar primitives — subagents, slash commands, hooks. <code>No new app</code>.</p>
|
||
</div>
|
||
<div class="fact reveal">
|
||
<svg class="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M12 12v9M12 12l8-4.5M12 12L4 7.5"/></svg>
|
||
<h3 data-i18n data-en="It adapts to YOUR stack" data-de="Es passt sich DEINEM Stack an">It adapts to YOUR stack</h3>
|
||
<p data-i18n
|
||
data-en="Nothing here is prescribed — your AI interviews you and tailors every specific."
|
||
data-de="Nichts davon ist vorgeschrieben — deine KI befragt dich und schneidert jedes Detail auf dich zu.">Nothing here is prescribed — your AI interviews you and tailors every specific.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 2 ============================ -->
|
||
<section id="pillars" aria-labelledby="s2-h">
|
||
<div class="sec-head">
|
||
<span class="tag">2</span>
|
||
<h2 id="s2-h" data-i18n data-en="The five pillars" data-de="Die fünf Säulen">The five pillars</h2>
|
||
<p class="note" data-i18n
|
||
data-en="Five ideas hold the whole thing up. Everything else is detail."
|
||
data-de="Fünf Ideen tragen das Ganze. Alles andere ist Detail.">Five ideas hold the whole thing up. Everything else is detail.</p>
|
||
</div>
|
||
|
||
<div class="pillars">
|
||
|
||
<article class="pillar wide reveal">
|
||
<span class="pnum" data-i18n data-en="Pillar 01" data-de="Säule 01">Pillar 01</span>
|
||
<div class="phead">
|
||
<span class="pic" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="3.2"/><circle cx="17" cy="8" r="2.4"/><path d="M2.5 19a5.5 5.5 0 0 1 11 0M14.5 19a4.5 4.5 0 0 1 7 0"/></svg></span>
|
||
<h3 data-i18n data-en="Expert subagents" data-de="Spezialisierte Subagenten">Expert subagents</h3>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Narrow, <b>role-scoped specialists</b> instead of one do-everything prompt. The infra agent thinks like an ops engineer; the security auditor thinks like an adversary. Each is good at its lane and stays in it."
|
||
data-de="Schmale, <b>auf ihre Rolle zugeschnittene Spezialisten</b> statt eines Alleskönner-Prompts. Der Infra-Agent denkt wie ein Ops-Engineer; der Security-Auditor denkt wie ein Angreifer. Jeder ist gut in seiner Spur — und bleibt drin.">Narrow, <b>role-scoped specialists</b> instead of one do-everything prompt. The infra
|
||
agent thinks like an ops engineer; the security auditor thinks like an adversary. Each
|
||
is good at its lane and stays in it.</p>
|
||
<div class="tags"><span data-i18n data-en="scoped roles" data-de="klare Rollen">scoped roles</span><span data-i18n data-en="no jack-of-all-trades" data-de="kein Allrounder">no jack-of-all-trades</span></div>
|
||
</article>
|
||
|
||
<article class="pillar wide reveal">
|
||
<span class="pnum" data-i18n data-en="Pillar 02" data-de="Säule 02">Pillar 02</span>
|
||
<div class="phead">
|
||
<span class="pic" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7c0-1.5 3.6-2.5 8-2.5S20 5.5 20 7s-3.6 2.5-8 2.5S4 8.5 4 7z"/><path d="M4 7v10c0 1.5 3.6 2.5 8 2.5s8-1 8-2.5V7M4 12c0 1.5 3.6 2.5 8 2.5s8-1 8-2.5"/></svg></span>
|
||
<h3 data-i18n data-en="Layered memory" data-de="Gedächtnis in Schichten">Layered memory</h3>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="<b>Semantic</b> (facts that are true now) + <b>episodic</b> (a decision journal) + <b>procedural</b> (skills & checklists) — with <b>time-awareness</b> so it doesn't silently go stale and start lying to you."
|
||
data-de="<b>Semantisch</b> (Fakten, die jetzt stimmen) + <b>episodisch</b> (ein Entscheidungs-Journal) + <b>prozedural</b> (Skills & Checklisten) — mit <b>Zeitbewusstsein</b>, damit es nicht klammheimlich veraltet und anfängt, dich anzulügen."><b>Semantic</b> (facts that are true now) + <b>episodic</b> (a decision journal) +
|
||
<b>procedural</b> (skills & checklists) — with <b>time-awareness</b> so it doesn't
|
||
silently go stale and start lying to you.</p>
|
||
<div class="tags"><span data-i18n data-en="semantic" data-de="semantisch">semantic</span><span data-i18n data-en="episodic" data-de="episodisch">episodic</span><span data-i18n data-en="procedural" data-de="prozedural">procedural</span><span data-i18n data-en="+ time-aware" data-de="+ zeitbewusst">+ time-aware</span></div>
|
||
</article>
|
||
|
||
<article class="pillar reveal">
|
||
<span class="pnum" data-i18n data-en="Pillar 03" data-de="Säule 03">Pillar 03</span>
|
||
<div class="phead">
|
||
<span class="pic" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
|
||
<h3 data-i18n data-en="Governance" data-de="Governance">Governance</h3>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Always-on rules: <b>no silent behaviour changes</b>, strict <b>secret hygiene</b>, and <b>human approval</b> for anything risky."
|
||
data-de="Immer geltende Regeln: <b>keine heimlichen Verhaltensänderungen</b>, strenge <b>Geheimnis-Hygiene</b> und <b>menschliche Freigabe</b> für alles Riskante.">Always-on rules: <b>no silent behaviour changes</b>, strict <b>secret hygiene</b>, and
|
||
<b>human approval</b> for anything risky.</p>
|
||
<div class="tags"><span data-i18n data-en="your rules" data-de="deine Regeln">your rules</span><span data-i18n data-en="secrets stay safe" data-de="Geheimnisse bleiben sicher">secrets stay safe</span></div>
|
||
</article>
|
||
|
||
<article class="pillar reveal">
|
||
<span class="pnum" data-i18n data-en="Pillar 04" data-de="Säule 04">Pillar 04</span>
|
||
<div class="phead">
|
||
<span class="pic" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.6"/><path d="M20 4v4h-4"/></svg></span>
|
||
<h3 data-i18n data-en="Self-improving loop" data-de="Selbstverbessernder Kreislauf">Self-improving loop</h3>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Agents flag friction → you run a periodic review → they get coached and improve. <b>Compounding</b>, <b>human-triggered</b>, <b>no always-on daemon</b>."
|
||
data-de="Agenten melden Reibung → du startest ab und zu ein Review → sie werden gecoacht und verbessern sich. <b>Mit Zinseszins-Effekt</b>, <b>von dir ausgelöst</b>, <b>kein dauerhaft laufender Daemon</b>.">Agents flag friction → you run a periodic review → they get coached and
|
||
improve. <b>Compounding</b>, <b>human-triggered</b>, <b>no always-on daemon</b>.</p>
|
||
<div class="tags"><span data-i18n data-en="compounds" data-de="wächst mit">compounds</span><span data-i18n data-en="you trigger it" data-de="du löst es aus">you trigger it</span></div>
|
||
</article>
|
||
|
||
<article class="pillar reveal">
|
||
<span class="pnum" data-i18n data-en="Pillar 05" data-de="Säule 05">Pillar 05</span>
|
||
<div class="phead">
|
||
<span class="pic" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></span>
|
||
<h3 data-i18n data-en="Grounding" data-de="Bodenhaftung">Grounding</h3>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Agents look at <b>reality</b> — your repos, optionally live systems — instead of guessing. <b>You choose the blast radius.</b>"
|
||
data-de="Agenten schauen auf die <b>Realität</b> — deine Repos, optional laufende Systeme — statt zu raten. <b>Du bestimmst die Reichweite.</b>">Agents look at <b>reality</b> — your repos, optionally live systems — instead of
|
||
guessing. <b>You choose the blast radius.</b></p>
|
||
<div class="tags"><span data-i18n data-en="see, don't guess" data-de="hinschauen statt raten">see, don't guess</span><span data-i18n data-en="you set the limits" data-de="du setzt die Grenzen">you set the limits</span></div>
|
||
</article>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 3 ============================ -->
|
||
<section id="roster" aria-labelledby="s3-h">
|
||
<div class="sec-head">
|
||
<span class="tag">3</span>
|
||
<h2 id="s3-h" data-i18n data-en="The roster" data-de="Das Team">The roster</h2>
|
||
<p class="note" data-i18n
|
||
data-en="Who's on the team — and what each one is trusted to touch."
|
||
data-de="Wer im Team ist — und woran jeder ran darf.">Who's on the team — and what each one is trusted to touch.</p>
|
||
</div>
|
||
|
||
<div class="access-legend" aria-hidden="true">
|
||
<span class="lg"><span class="sw ro"></span><span data-i18n data-en="Read-only — looks, never edits" data-de="Nur-Lesen — schaut, ändert nie">Read-only — looks, never edits</span></span>
|
||
<span class="lg"><span class="sw rw"></span><span data-i18n data-en="Read + Write — can change files" data-de="Lesen + Schreiben — darf Dateien ändern">Read + Write — can change files</span></span>
|
||
<span class="lg"><span class="sw prop"></span><span data-i18n data-en="Proposes — suggests, never applies" data-de="Schlägt vor — empfiehlt, wendet nie an">Proposes — suggests, never applies</span></span>
|
||
</div>
|
||
|
||
<div class="roster">
|
||
<article class="role reveal" data-a="ro">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg></span>
|
||
<h3 data-i18n data-en="Infra / Ops expert" data-de="Infra-/Ops-Experte">Infra / Ops expert</h3>
|
||
<span class="badge" data-i18n data-en="RO → RW" data-de="RO → RW">RO → RW</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Knows your homelab. Starts read-only; you decide if it earns write access."
|
||
data-de="Kennt dein Homelab. Startet nur lesend; du entscheidest, ob er sich Schreibrechte verdient.">Knows your homelab. Starts read-only; you decide if it earns write access.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="rw">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 8l-4 4 4 4M16 8l4 4-4 4M13 5l-2 14"/></svg></span>
|
||
<h3 data-i18n data-en="Dev expert(s)" data-de="Dev-Experte(n)">Dev expert(s)</h3>
|
||
<span class="badge">RW</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Writes and refactors code in your repos, following your conventions."
|
||
data-de="Schreibt und refaktoriert Code in deinen Repos — und hält sich an deine Konventionen.">Writes and refactors code in your repos, following your conventions.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="rw">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z"/></svg></span>
|
||
<h3 data-i18n data-en="UI / UX designer" data-de="UI-/UX-Designer">UI / UX designer</h3>
|
||
<span class="badge">RW</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Designs and builds interfaces with a committed point of view, not templates."
|
||
data-de="Entwirft und baut Interfaces mit einer klaren Haltung — keine Templates von der Stange.">Designs and builds interfaces with a committed point of view, not templates.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="ro">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/></svg></span>
|
||
<h3 data-i18n data-en="Security auditor" data-de="Security-Auditor">Security auditor</h3>
|
||
<span class="badge" data-i18n data-en="READ-ONLY" data-de="NUR-LESEN">READ-ONLY</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Hunts for risks and leaks. Reports them — never edits anything itself."
|
||
data-de="Jagt Risiken und Lecks. Meldet sie — ändert aber selbst nie etwas.">Hunts for risks and leaks. Reports them — never edits anything itself.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="ro">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.8-.9 1.7M12 17h.01"/><circle cx="12" cy="12" r="9"/></svg></span>
|
||
<h3 data-i18n data-en="Devil's advocate" data-de="Advocatus Diaboli">Devil's advocate</h3>
|
||
<span class="badge" data-i18n data-en="READ-ONLY" data-de="NUR-LESEN">READ-ONLY</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Argues the other side and pokes holes in plans before you commit to them."
|
||
data-de="Vertritt die Gegenseite und schießt Löcher in Pläne, bevor du dich festlegst.">Argues the other side and pokes holes in plans before you commit to them.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="ro">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 1 4 10.5c-.7.7-1 1.3-1 2.5H9c0-1.2-.3-1.8-1-2.5A6 6 0 0 1 12 3z"/></svg></span>
|
||
<h3 data-i18n data-en="Product / Idea partner" data-de="Produkt-/Ideenpartner">Product / Idea partner</h3>
|
||
<span class="badge" data-i18n data-en="READ-ONLY" data-de="NUR-LESEN">READ-ONLY</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Helps you turn raw ideas into shaped specs. Thinks with you, doesn't ship."
|
||
data-de="Hilft dir, rohe Ideen in ausgeformte Specs zu gießen. Denkt mit dir, liefert aber nicht aus.">Helps you turn raw ideas into shaped specs. Thinks with you, doesn't ship.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="ro">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l2 2 4-4"/><rect x="4" y="4" width="16" height="16" rx="2"/></svg></span>
|
||
<h3 data-i18n data-en="Remediation planner" data-de="Behebungs-Planer">Remediation planner</h3>
|
||
<span class="badge" data-i18n data-en="READ-ONLY" data-de="NUR-LESEN">READ-ONLY</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Turns audit findings into an ordered fix plan. Plans the work; doesn't do it."
|
||
data-de="Macht aus Audit-Befunden einen geordneten Maßnahmenplan. Plant die Arbeit; erledigt sie aber nicht.">Turns audit findings into an ordered fix plan. Plans the work; doesn't do it.</p>
|
||
</article>
|
||
|
||
<article class="role reveal" data-a="prop">
|
||
<div class="rtop">
|
||
<span class="ric" aria-hidden="true"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20h18M6 20V9m4 11V5m4 15v-7m4 7V8"/></svg></span>
|
||
<h3 data-i18n data-en="Engineering-manager" data-de="Engineering-Manager">Engineering-manager</h3>
|
||
<span class="badge" data-i18n data-en="PROPOSES" data-de="SCHLÄGT VOR">PROPOSES</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Runs the review and coaches the roster. Proposes changes — <b>you</b> approve them."
|
||
data-de="Leitet das Review und coacht das Team. Schlägt Änderungen vor — <b>du</b> gibst sie frei.">Runs the review and coaches the roster. Proposes changes — <b>you</b> approve them.</p>
|
||
<span class="em-tag" data-i18n
|
||
data-en="› runs the self-improving loop"
|
||
data-de="› treibt den selbstverbessernden Kreislauf an">› runs the self-improving loop</span>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="principle reveal">
|
||
<div class="lock" aria-hidden="true">
|
||
<svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15" r="1.4"/><path d="M12 16.4V18"/></svg>
|
||
</div>
|
||
<div class="ptxt">
|
||
<span class="pk" data-i18n data-en="The principle to remember" data-de="Das Prinzip, das hängen bleiben soll">The principle to remember</span>
|
||
<blockquote data-i18n
|
||
data-en="<b>Read-only by default; write is a privilege</b> — and the agent that decides what to change <b>never applies it unattended</b>. The reviewer is never the applier."
|
||
data-de="<b>Standardmäßig nur lesen; Schreiben ist ein Privileg</b> — und der Agent, der entscheidet, was geändert wird, <b>wendet es nie unbeaufsichtigt an</b>. Wer prüft, ist nie auch der, der ausführt."><b>Read-only by default; write is a privilege</b> — and the agent that
|
||
decides what to change <b>never applies it unattended</b>. The reviewer is never the applier.</blockquote>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 4 — CENTERPIECE ============================ -->
|
||
<section id="loop" aria-labelledby="s4-h">
|
||
<div class="sec-head">
|
||
<span class="tag">4</span>
|
||
<h2 id="s4-h" data-i18n data-en="The self-improving loop" data-de="Der selbstverbessernde Kreislauf">The self-improving loop</h2>
|
||
<p class="note" data-i18n
|
||
data-en="The heart of it. A closed cycle with one explicit <em>human-approval gate</em>."
|
||
data-de="Das Herzstück. Ein geschlossener Kreislauf mit genau einem expliziten <em>Freigabe-Tor</em>.">The heart of it. A closed cycle with one explicit <em>human-approval gate</em>.</p>
|
||
</div>
|
||
|
||
<div class="loop-wrap reveal">
|
||
<div class="loop-grid">
|
||
|
||
<!-- ----- the ring diagram ----- -->
|
||
<div class="ring" role="img"
|
||
data-en-aria="A clockwise five-stage cycle: 1 Capture friction during a session, 2 it lands in a local private Journal, 3 you run slash eng-review, 4 the Engineering-manager proposes coaching, then a human-approval gate where YOU approve the diffs, after which 5 the agents improve and the loop returns to Capture. The gate between Coach and Capture is the only place changes are applied."
|
||
data-de-aria="Ein im Uhrzeigersinn laufender fünfstufiger Kreislauf: 1 Reibung während einer Session festhalten, 2 sie landet in einem lokalen, privaten Journal, 3 du startest Slash eng-review, 4 der Engineering-Manager schlägt Coaching vor, dann ein menschliches Freigabe-Tor, an dem DU die Diffs freigibst, woraufhin sich 5 die Agenten verbessern und der Kreislauf zurück zu Festhalten führt. Das Tor zwischen Coachen und Festhalten ist der einzige Ort, an dem Änderungen angewendet werden."
|
||
aria-label="A clockwise five-stage cycle: 1 Capture friction during a session, 2 it lands in a local private Journal, 3 you run slash eng-review, 4 the Engineering-manager proposes coaching, then a human-approval gate where YOU approve the diffs, after which 5 the agents improve and the loop returns to Capture. The gate between Coach and Capture is the only place changes are applied.">
|
||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||
<defs>
|
||
<marker id="ah" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M0,0 L10,5 L0,10 z" fill="var(--accent)"/>
|
||
</marker>
|
||
<marker id="ahg" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||
<path d="M0,0 L10,5 L0,10 z" fill="var(--bad)"/>
|
||
</marker>
|
||
</defs>
|
||
<!-- five clockwise arcs on r=34 circle centered at 50,50.
|
||
nodes at angles -90, -22, 46, 134, 202 deg (top, upper-right,
|
||
lower-right, lower-left, upper-left). The Coach->Capture arc
|
||
(n4 upper-left -> n1 top) carries the human gate, drawn dashed. -->
|
||
<path d="M 50 16 A 34 34 0 0 1 81.5 38.5" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" marker-end="url(#ah)" opacity=".85"/>
|
||
<path d="M 81.5 38.5 A 34 34 0 0 1 74.5 74.5" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" marker-end="url(#ah)" opacity=".85"/>
|
||
<path d="M 74.5 74.5 A 34 34 0 0 1 25.5 74.5" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" marker-end="url(#ah)" opacity=".85"/>
|
||
<path d="M 25.5 74.5 A 34 34 0 0 1 18.5 38.5" fill="none" stroke="var(--accent)" stroke-width="1.6" stroke-linecap="round" marker-end="url(#ah)" opacity=".85"/>
|
||
<!-- the human gate arc: Coach(upper-left) -> Capture(top) -->
|
||
<path d="M 18.5 38.5 A 34 34 0 0 1 50 16" fill="none" stroke="var(--bad)" stroke-width="1.9" stroke-linecap="round" stroke-dasharray="3 2.4" marker-end="url(#ahg)"/>
|
||
</svg>
|
||
|
||
<div class="hub" aria-hidden="true">
|
||
<span class="hk" data-i18n data-en="Self-improving" data-de="Selbstverbessernd">Self-improving</span>
|
||
<span class="ht" data-i18n data-en="The loop" data-de="Der Kreislauf">The loop</span>
|
||
<span class="hsub" data-i18n data-en="sharper each<br>turn of the wheel" data-de="schärfer mit jeder<br>Umdrehung">sharper each<br>turn of the wheel</span>
|
||
</div>
|
||
|
||
<div class="node n1" aria-hidden="true">
|
||
<svg class="nicon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h13l3 3v13H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg>
|
||
<span class="nstep" data-i18n data-en="1 · Capture" data-de="1 · Festhalten">1 · Capture</span>
|
||
<span class="ntitle" data-i18n data-en="Friction" data-de="Reibung">Friction</span>
|
||
</div>
|
||
<div class="node n2" aria-hidden="true">
|
||
<svg class="nicon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h11l3 3v15H5z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>
|
||
<span class="nstep" data-i18n data-en="2 · Journal" data-de="2 · Journal">2 · Journal</span>
|
||
<span class="ntitle" data-i18n data-en="Private" data-de="Privat">Private</span>
|
||
</div>
|
||
<div class="node n3" aria-hidden="true">
|
||
<svg class="nicon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M16 16l5 5"/></svg>
|
||
<span class="nstep" data-i18n data-en="3 · Review" data-de="3 · Review">3 · Review</span>
|
||
<span class="ntitle">/eng-review</span>
|
||
</div>
|
||
<div class="node n4" aria-hidden="true">
|
||
<svg class="nicon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20h18M6 20V9m4 11V5m4 15v-7m4 7V8"/></svg>
|
||
<span class="nstep" data-i18n data-en="4 · Coach" data-de="4 · Coachen">4 · Coach</span>
|
||
<span class="ntitle" data-i18n data-en="EM proposes" data-de="EM schlägt vor">EM proposes</span>
|
||
</div>
|
||
<div class="node n5" aria-hidden="true">
|
||
<svg class="nicon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v5M12 3l-3 3M12 3l3 3"/><path d="M5 13a7 7 0 0 0 14 0"/></svg>
|
||
<span class="nstep" data-i18n data-en="5 · Improve" data-de="5 · Verbessern">5 · Improve</span>
|
||
<span class="ntitle" data-i18n data-en="Sharper" data-de="Schärfer">Sharper</span>
|
||
</div>
|
||
|
||
<div class="gate" aria-hidden="true">
|
||
<span class="gk" data-i18n data-en="Human gate" data-de="Freigabe-Tor">Human gate</span>
|
||
<span class="gt" data-i18n data-en="YOU APPROVE<br>the diffs" data-de="DU GIBST<br>die Diffs frei">YOU APPROVE<br>the diffs</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ----- stage details ----- -->
|
||
<div class="loop-stages">
|
||
<div class="lstage">
|
||
<span class="ord">1</span>
|
||
<div>
|
||
<h4 data-i18n data-en="Capture friction" data-de="Reibung festhalten">Capture friction</h4>
|
||
<p data-i18n
|
||
data-en="While you work, agents <b>flag what got in the way</b> — a missing fact, a gotcha, a correction you had to make."
|
||
data-de="Während du arbeitest, <b>markieren die Agenten, was im Weg stand</b> — ein fehlender Fakt, eine Stolperfalle, eine Korrektur, die du machen musstest.">While you work, agents <b>flag what got in the way</b> — a missing fact, a gotcha, a correction you had to make.</p>
|
||
</div>
|
||
</div>
|
||
<div class="lstage">
|
||
<span class="ord">2</span>
|
||
<div>
|
||
<h4 data-i18n data-en="Journal — local & private" data-de="Journal — lokal & privat">Journal — local & private</h4>
|
||
<p data-i18n
|
||
data-en="Those notes accrue into a <b>local, private decision journal</b>. It's read only at review time, so it never bloats your day-to-day startup."
|
||
data-de="Diese Notizen wachsen zu einem <b>lokalen, privaten Entscheidungs-Journal</b> an. Es wird nur beim Review gelesen und bläht so deinen Alltags-Start nie auf.">Those notes accrue into a <b>local, private decision journal</b>. It's read only at review time, so it never bloats your day-to-day startup.</p>
|
||
</div>
|
||
</div>
|
||
<div class="lstage">
|
||
<span class="ord">3</span>
|
||
<div>
|
||
<h4 data-i18n data-en="You run <code>/eng-review</code>" data-de="Du startest <code>/eng-review</code>">You run <code>/eng-review</code></h4>
|
||
<p data-i18n
|
||
data-en="Periodically — and <b>only when you choose</b>, never on a timer — you kick off the review."
|
||
data-de="Ab und zu — und <b>nur wenn du willst</b>, nie nach Zeitplan — stößt du das Review an.">Periodically — and <b>only when you choose</b>, never on a timer — you kick off the review.</p>
|
||
</div>
|
||
</div>
|
||
<div class="lstage">
|
||
<span class="ord">4</span>
|
||
<div>
|
||
<h4 data-i18n data-en="Engineering-manager proposes coaching" data-de="Engineering-Manager schlägt Coaching vor">Engineering-manager proposes coaching</h4>
|
||
<p data-i18n
|
||
data-en="It reads the journal, finds patterns, and proposes <b>concrete improvements</b> to memory, skills, and agent instructions."
|
||
data-de="Er liest das Journal, erkennt Muster und schlägt <b>konkrete Verbesserungen</b> für Gedächtnis, Skills und Agenten-Anweisungen vor.">It reads the journal, finds patterns, and proposes <b>concrete improvements</b> to memory, skills, and agent instructions.</p>
|
||
</div>
|
||
</div>
|
||
<div class="lstage" data-gate="1">
|
||
<span class="ord">★</span>
|
||
<div>
|
||
<h4 data-i18n
|
||
data-en="You approve the diffs <span class="gateflag">human gate</span>"
|
||
data-de="Du gibst die Diffs frei <span class="gateflag">Freigabe-Tor</span>">You approve the diffs <span class="gateflag">human gate</span></h4>
|
||
<p data-i18n
|
||
data-en="Nothing changes until <b>you say yes</b>. Then the agents improve — and the loop returns to Capture, a little sharper."
|
||
data-de="Nichts ändert sich, bis <b>du Ja sagst</b>. Dann verbessern sich die Agenten — und der Kreislauf kehrt zum Festhalten zurück, ein Stück schärfer.">Nothing changes until <b>you say yes</b>. Then the agents improve — and the loop returns to Capture, a little sharper.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<p class="loop-cap" data-i18n
|
||
data-en="It compounds — but <b>only if you actually run the review</b>. A start-of-session nudge reminds you when retros are piling up."
|
||
data-de="Es wächst mit Zinseszins — aber <b>nur, wenn du das Review auch wirklich startest</b>. Ein Hinweis zu Session-Beginn erinnert dich, wenn sich Retros stapeln.">It compounds — but <b>only if you actually run the review</b>.
|
||
A start-of-session nudge reminds you when retros are piling up.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 5 ============================ -->
|
||
<section id="memory" aria-labelledby="s5-h">
|
||
<div class="sec-head">
|
||
<span class="tag">5</span>
|
||
<h2 id="s5-h" data-i18n data-en="Memory architecture" data-de="Aufbau des Gedächtnisses">Memory architecture</h2>
|
||
<p class="note" data-i18n
|
||
data-en="Three layers, each with a different job. Together they make it remember."
|
||
data-de="Drei Schichten, jede mit einer eigenen Aufgabe. Zusammen geben sie ihm ein Gedächtnis.">Three layers, each with a different job. Together they make it remember.</p>
|
||
</div>
|
||
|
||
<div class="mem-grid">
|
||
<div class="mem-stack reveal" role="img"
|
||
data-en-aria="A three-layer memory stack. Top layer Semantic: facts that are true now, read at startup. Middle layer Episodic: the journal, what happened and why, read only at review. Bottom layer Procedural: reusable skills and checklists, loaded on demand."
|
||
data-de-aria="Ein dreischichtiger Gedächtnis-Stapel. Obere Schicht Semantisch: Fakten, die jetzt stimmen, beim Start gelesen. Mittlere Schicht Episodisch: das Journal, was passiert ist und warum, nur beim Review gelesen. Untere Schicht Prozedural: wiederverwendbare Skills und Checklisten, bei Bedarf geladen."
|
||
aria-label="A three-layer memory stack. Top layer Semantic: facts that are true now, read at startup. Middle layer Episodic: the journal, what happened and why, read only at review. Bottom layer Procedural: reusable skills and checklists, loaded on demand.">
|
||
<div class="stratum" data-l="sem">
|
||
<div class="shead">
|
||
<span class="stype" data-i18n data-en="Semantic" data-de="Semantisch">Semantic</span>
|
||
<h3 data-i18n data-en="Facts that are true now" data-de="Fakten, die jetzt stimmen">Facts that are true now</h3>
|
||
<span class="when" data-i18n data-en="read at startup" data-de="beim Start gelesen">read at startup</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="Your current reality — hosts, conventions, the lay of the land. The fast-loading top layer the agents lean on every session."
|
||
data-de="Deine aktuelle Realität — Hosts, Konventionen, wie das Land liegt. Die schnell ladende oberste Schicht, auf die sich die Agenten in jeder Session stützen.">Your current reality — hosts, conventions, the lay of the land. The fast-loading
|
||
top layer the agents lean on every session.</p>
|
||
<div class="ex" aria-hidden="true"><span class="fk" data-i18n data-en="fact:" data-de="Fakt:">fact:</span> <span data-i18n data-en="deploys go through the staging branch first" data-de="Deploys laufen erst über den Staging-Branch">deploys go through the staging branch first</span></div>
|
||
</div>
|
||
<div class="stratum" data-l="epi">
|
||
<div class="shead">
|
||
<span class="stype" data-i18n data-en="Episodic" data-de="Episodisch">Episodic</span>
|
||
<h3 data-i18n data-en="What happened — the journal" data-de="Was passiert ist — das Journal">What happened — the journal</h3>
|
||
<span class="when" data-i18n data-en="read at review only" data-de="nur beim Review gelesen">read at review only</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="The decision & activity log. <b>Read only at review</b>, so it can grow rich without ever bloating startup."
|
||
data-de="Das Entscheidungs- & Aktivitätsprotokoll. <b>Nur beim Review gelesen</b>, damit es reichhaltig wachsen kann, ohne je den Start aufzublähen.">The decision & activity log. <b>Read only at review</b>, so it can grow rich
|
||
without ever bloating startup.</p>
|
||
<div class="ex" aria-hidden="true"><span class="fk" data-i18n data-en="entry:" data-de="Eintrag:">entry:</span> <span data-i18n data-en="chose Caddy over nginx — simpler TLS for this box" data-de="Caddy statt nginx gewählt — einfacheres TLS für diese Kiste">chose Caddy over nginx — simpler TLS for this box</span></div>
|
||
</div>
|
||
<div class="stratum" data-l="proc">
|
||
<div class="shead">
|
||
<span class="stype" data-i18n data-en="Procedural" data-de="Prozedural">Procedural</span>
|
||
<h3 data-i18n data-en="Reusable skills & checklists" data-de="Wiederverwendbare Skills & Checklisten">Reusable skills & checklists</h3>
|
||
<span class="when" data-i18n data-en="loaded on demand" data-de="bei Bedarf geladen">loaded on demand</span>
|
||
</div>
|
||
<p data-i18n
|
||
data-en="The "how we do X here" layer — distilled playbooks the agents reach for when a familiar task comes around again."
|
||
data-de="Die "So machen wir X hier"-Schicht — eingedampfte Playbooks, zu denen die Agenten greifen, wenn eine vertraute Aufgabe wiederkommt.">The "how we do X here" layer — distilled playbooks the agents reach for when a
|
||
familiar task comes around again.</p>
|
||
<div class="ex" aria-hidden="true"><span class="fk" data-i18n data-en="skill:" data-de="Skill:">skill:</span> <span data-i18n data-en="secrets-handoff — the safe cross-repo move" data-de="secrets-handoff — der sichere Weg über Repos hinweg">secrets-handoff — the safe cross-repo move</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mem-note">
|
||
<p class="big" data-i18n
|
||
data-en="It stores the <span class="accent">non-derivable</span> — not what's already in your code."
|
||
data-de="Es speichert das <span class="accent">nicht Ableitbare</span> — nicht das, was ohnehin in deinem Code steht.">It stores the <span class="accent">non-derivable</span> — not what's already in your code.</p>
|
||
<p data-i18n
|
||
data-en="Memory captures <b>gotchas and decisions</b>: the things you'd otherwise re-explain every time. It deliberately doesn't duplicate what an agent can just read from your repo."
|
||
data-de="Das Gedächtnis hält <b>Stolperfallen und Entscheidungen</b> fest: die Dinge, die du sonst jedes Mal neu erklären müsstest. Es dupliziert bewusst nicht das, was ein Agent ohnehin aus deinem Repo lesen kann.">Memory captures <b>gotchas and decisions</b>: the things you'd otherwise re-explain
|
||
every time. It deliberately doesn't duplicate what an agent can just read from your repo.</p>
|
||
<div class="timecard">
|
||
<span class="tk" data-i18n data-en="⏱ Time-aware on purpose" data-de="⏱ Bewusst zeitbewusst">⏱ Time-aware on purpose</span>
|
||
<p data-i18n
|
||
data-en="Each layer knows roughly how fresh it is — because <b>staleness is silent</b>. Old facts get flagged and pruned at review, so the system never quietly lies to you."
|
||
data-de="Jede Schicht weiß ungefähr, wie frisch sie ist — denn <b>Veralten passiert lautlos</b>. Alte Fakten werden beim Review markiert und aussortiert, damit das System dich nie heimlich anlügt.">Each layer knows roughly how fresh it is — because <b>staleness is silent</b>.
|
||
Old facts get flagged and pruned at review, so the system never quietly lies to you.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 6 ============================ -->
|
||
<section id="setup" aria-labelledby="s6-h">
|
||
<div class="sec-head">
|
||
<span class="tag">6</span>
|
||
<h2 id="s6-h" data-i18n data-en="How setup works" data-de="Wie das Setup abläuft">How setup works</h2>
|
||
<p class="note" data-i18n
|
||
data-en="You don't build it all at once. You grow it as real friction tells you to."
|
||
data-de="Du baust nicht alles auf einmal. Du lässt es wachsen, wenn echte Reibung es dir sagt.">You don't build it all at once. You grow it as real friction tells you to.</p>
|
||
</div>
|
||
|
||
<ol class="setup" style="list-style:none;margin:0;padding:0">
|
||
<span class="sline" aria-hidden="true"></span>
|
||
|
||
<li class="sstep reveal">
|
||
<span class="dot num" aria-hidden="true">1</span>
|
||
<div class="scard">
|
||
<span class="phasetag" data-i18n data-en="Interview" data-de="Interview">Interview</span>
|
||
<h3 data-i18n data-en="Your AI interviews you" data-de="Deine KI befragt dich">Your AI interviews you</h3>
|
||
<p data-i18n
|
||
data-en="It asks about your <b>domains, stack, conventions, guardrails, and risk posture</b> — so everything that follows fits <em>you</em>, not a template."
|
||
data-de="Sie fragt nach deinen <b>Domänen, deinem Stack, deinen Konventionen, Leitplanken und deiner Risikohaltung</b> — damit alles Weitere zu <em>dir</em> passt, nicht zu einer Vorlage.">It asks about your <b>domains, stack, conventions, guardrails, and risk posture</b>
|
||
— so everything that follows fits <em>you</em>, not a template.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="sstep reveal">
|
||
<span class="dot num" aria-hidden="true">2</span>
|
||
<div class="scard">
|
||
<span class="phasetag" data-i18n data-en="Scaffold" data-de="Gerüst">Scaffold</span>
|
||
<h3 data-i18n data-en="It scaffolds a clean git repo" data-de="Sie legt ein sauberes git-Repo an">It scaffolds a clean git repo</h3>
|
||
<p data-i18n
|
||
data-en="A tidy structure, <b>committed and backed up from day one</b> — so your knowledge is never sitting in a single fragile local folder."
|
||
data-de="Eine aufgeräumte Struktur, <b>vom ersten Tag an committet und gesichert</b> — damit dein Wissen nie in einem einzigen, fragilen lokalen Ordner liegt.">A tidy structure, <b>committed and backed up from day one</b> — so your knowledge is
|
||
never sitting in a single fragile local folder.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="sstep reveal">
|
||
<span class="dot num" aria-hidden="true">3</span>
|
||
<div class="scard">
|
||
<span class="phasetag" data-i18n data-en="Start small" data-de="Klein anfangen">Start small</span>
|
||
<h3 data-i18n data-en="Begin with 2–3 agents you'll actually use" data-de="Beginne mit 2–3 Agenten, die du wirklich nutzt">Begin with 2–3 agents you'll actually use</h3>
|
||
<p data-i18n
|
||
data-en="Not the whole roster. The two or three roles that match what you do <b>today</b>, so the thing is useful in week one."
|
||
data-de="Nicht das ganze Team. Die zwei oder drei Rollen, die zu dem passen, was du <b>heute</b> tust — damit das Ganze schon in Woche eins nützlich ist.">Not the whole roster. The two or three roles that match what you do <b>today</b>,
|
||
so the thing is useful in week one.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="sstep reveal">
|
||
<span class="dot num" aria-hidden="true">4</span>
|
||
<div class="scard">
|
||
<span class="phasetag" data-i18n data-en="Add the loop" data-de="Kreislauf einbauen">Add the loop</span>
|
||
<h3 data-i18n data-en="Add the self-improving loop" data-de="Den selbstverbessernden Kreislauf einbauen">Add the self-improving loop</h3>
|
||
<p data-i18n
|
||
data-en="Once you have agents worth coaching, wire up the journal and <code>/eng-review</code>. Now the system starts <b>getting sharper on its own cadence</b>."
|
||
data-de="Sobald du Agenten hast, die das Coaching lohnen, verdrahtest du das Journal und <code>/eng-review</code>. Jetzt fängt das System an, <b>in seinem eigenen Takt schärfer zu werden</b>.">Once you have agents worth coaching, wire up the journal and <code>/eng-review</code>.
|
||
Now the system starts <b>getting sharper on its own cadence</b>.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="sstep reveal">
|
||
<span class="dot num" aria-hidden="true">5</span>
|
||
<div class="scard">
|
||
<span class="phasetag" data-i18n data-en="Expand" data-de="Erweitern">Expand</span>
|
||
<h3 data-i18n data-en="Grow as real friction tells you to" data-de="Wachse, wenn echte Reibung es dir sagt">Grow as real friction tells you to</h3>
|
||
<p data-i18n
|
||
data-en="Add domains and agents when you actually hit a wall — never speculatively. The journal will <b>show you where the friction is</b>."
|
||
data-de="Füge Domänen und Agenten hinzu, wenn du tatsächlich an eine Wand stößt — nie auf Verdacht. Das Journal <b>zeigt dir, wo die Reibung sitzt</b>.">Add domains and agents when you actually hit a wall — never speculatively. The
|
||
journal will <b>show you where the friction is</b>.</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<p class="motto" data-i18n
|
||
data-en="Build the <em>smallest useful thing</em>, use it, and let <em>friction guide</em> what's next."
|
||
data-de="Bau das <em>kleinste nützliche Ding</em>, nutze es, und lass die <em>Reibung leiten</em>, was als Nächstes kommt.">Build the <em>smallest useful thing</em>, use it, and let
|
||
<em>friction guide</em> what's next.</p>
|
||
|
||
<!-- ----- concrete next step: get the setup doc + the command ----- -->
|
||
<div class="getstarted reveal" id="get-started" aria-labelledby="gs-h">
|
||
<span class="gsk">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||
<span data-i18n data-en="Start here" data-de="Hier starten">Start here</span>
|
||
</span>
|
||
<h3 id="gs-h" data-i18n data-en="Get started" data-de="Loslegen">Get started</h3>
|
||
<p class="gslede" data-i18n
|
||
data-en="This page is the <b>what & why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents."
|
||
data-de="Diese Seite ist das <b>Was & Warum</b>. Der eigentliche Aufbau wird von der <b>Setup-Anleitung</b> gesteuert — einer einzelnen Datei, die deine Claude Code <b>liest und ausführt</b>, um das Repo anzulegen, dich zu befragen und deine ersten Agenten aufzustellen.">This page is the <b>what & why</b>. The actual build is driven by the <b>setup doc</b> — a single file your Claude Code <b>reads and executes</b> to scaffold the repo, interview you, and stand up your first agents.</p>
|
||
|
||
<ol class="gssteps">
|
||
<li>
|
||
<span data-i18n
|
||
data-en="<b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide."
|
||
data-de="<b>Hol dir die Setup-Anleitung.</b> Es ist eine einzelne Markdown-Datei, die neben diesem Leitfaden liegt."><b>Get the setup doc.</b> It's one Markdown file that lives alongside this guide.<br>
|
||
<a class="dl" href="agentic-setup-bootstrap.md"
|
||
data-en-aria="Get the setup doc — agentic-setup-bootstrap.md"
|
||
data-de-aria="Setup-Anleitung holen — agentic-setup-bootstrap.md"
|
||
aria-label="Get the setup doc — agentic-setup-bootstrap.md">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
|
||
<span data-i18n data-en="Get the setup doc — agentic-setup-bootstrap.md" data-de="Setup-Anleitung holen — agentic-setup-bootstrap.md">Get the setup doc — agentic-setup-bootstrap.md</span>
|
||
</a>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span data-i18n
|
||
data-en="<b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>)."
|
||
data-de="<b>Speichere sie dort, wo deine Claude Code sie lesen kann</b> — in deinem Projektordner oder in deinem Home-Verzeichnis (<code>~/</code>)."><b>Save it where your Claude Code can read it</b> — inside your project folder, or in your home directory (<code>~/</code>).</span>
|
||
</li>
|
||
<li>
|
||
<span data-i18n
|
||
data-en="<b>Give Claude Code this instruction</b> and let it take it from there:"
|
||
data-de="<b>Gib Claude Code diese Anweisung</b> und lass sie ab da übernehmen:"><b>Give Claude Code this instruction</b> and let it take it from there:</span>
|
||
<code class="cmd"><span class="cprompt" aria-hidden="true">></span>Read agentic-setup-bootstrap.md and set up my agentic environment.</code>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================ SECTION 7 ============================ -->
|
||
<section id="principles" aria-labelledby="s7-h">
|
||
<div class="sec-head">
|
||
<span class="tag">7</span>
|
||
<h2 id="s7-h" data-i18n data-en="Principles & anti-patterns" data-de="Prinzipien & Anti-Muster">Principles & anti-patterns</h2>
|
||
<p class="note" data-i18n
|
||
data-en="Keep these on the left. Watch for the ones on the right."
|
||
data-de="Halte dich an die links. Pass auf die rechts auf.">Keep these on the left. Watch for the ones on the right.</p>
|
||
</div>
|
||
|
||
<div class="dodont">
|
||
|
||
<div class="col-card do reveal">
|
||
<div class="ch">
|
||
<span class="chk" data-i18n data-en="✓ Do" data-de="✓ Tun">✓ Do</span>
|
||
<h3 data-i18n data-en="The habits that compound" data-de="Die Gewohnheiten, die sich aufsummieren">The habits that compound</h3>
|
||
</div>
|
||
<ul>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Commit + back up from day one</b> — the repo is your source of truth." data-de="<b>Vom ersten Tag an committen + sichern</b> — das Repo ist deine Quelle der Wahrheit."><b>Commit + back up from day one</b> — the repo is your source of truth.</span></li>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Generate your self-description</b> from the live tree, so it never lies about itself." data-de="<b>Erzeuge deine Selbstbeschreibung</b> aus dem lebenden Verzeichnisbaum, damit sie nie über sich selbst lügt."><b>Generate your self-description</b> from the live tree, so it never lies about itself.</span></li>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Read-only by default</b> — grant write deliberately, role by role." data-de="<b>Standardmäßig nur lesen</b> — vergib Schreibrechte bewusst, Rolle für Rolle."><b>Read-only by default</b> — grant write deliberately, role by role.</span></li>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Capture the human's corrections</b> — your fixes are the highest-signal memory there is." data-de="<b>Halte die Korrekturen des Menschen fest</b> — deine Fixes sind das aussagekräftigste Gedächtnis überhaupt."><b>Capture the human's corrections</b> — your fixes are the highest-signal memory there is.</span></li>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Prune stale memory</b> at review, so old facts don't quietly mislead." data-de="<b>Sortiere veraltetes Gedächtnis</b> beim Review aus, damit alte Fakten nicht heimlich in die Irre führen."><b>Prune stale memory</b> at review, so old facts don't quietly mislead.</span></li>
|
||
<li><span class="m">✓</span><span data-i18n data-en="<b>Human approves every change</b> — the gate is the point, not a speed bump." data-de="<b>Der Mensch gibt jede Änderung frei</b> — das Tor ist der Sinn der Sache, kein Bremsschwelle."><b>Human approves every change</b> — the gate is the point, not a speed bump.</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-card dont reveal">
|
||
<div class="ch">
|
||
<span class="chk" data-i18n data-en="✗ Avoid" data-de="✗ Meiden">✗ Avoid</span>
|
||
<h3 data-i18n data-en="The traps that rot the system" data-de="Die Fallen, die das System verrotten lassen">The traps that rot the system</h3>
|
||
</div>
|
||
<ul>
|
||
<li><span class="m">✗</span><span data-i18n data-en="A <span class="rj">source-of-truth repo with no backup</span> — one disk failure from gone." data-de="Ein <span class="rj">Quelle-der-Wahrheit-Repo ohne Backup</span> — einen Plattenausfall vom Verschwinden entfernt.">A <span class="rj">source-of-truth repo with no backup</span> — one disk failure from gone.</span></li>
|
||
<li><span class="m">✗</span><span data-i18n data-en="<span class="rj">Hand-maintained docs that rot</span> — they drift out of sync and start lying." data-de="<span class="rj">Von Hand gepflegte Doku, die verrottet</span> — sie läuft aus dem Takt und fängt an zu lügen."><span class="rj">Hand-maintained docs that rot</span> — they drift out of sync and start lying.</span></li>
|
||
<li><span class="m">✗</span><span data-i18n data-en="<span class="rj">Dead / unused agents</span> cluttering the roster with config that never fires." data-de="<span class="rj">Tote / ungenutzte Agenten</span>, die das Team mit Konfiguration zumüllen, die nie greift."><span class="rj">Dead / unused agents</span> cluttering the roster with config that never fires.</span></li>
|
||
<li><span class="m">✗</span><span data-i18n data-en="<span class="rj">Capture with no review</span> — a journal nobody reads is just noise." data-de="<span class="rj">Festhalten ohne Review</span> — ein Journal, das niemand liest, ist nur Rauschen."><span class="rj">Capture with no review</span> — a journal nobody reads is just noise.</span></li>
|
||
<li><span class="m">✗</span><span data-i18n data-en="<span class="rj">Agents grading their own work</span> — "all went great" is noise, not signal." data-de="<span class="rj">Agenten, die ihre eigene Arbeit benoten</span> — "lief alles super" ist Rauschen, kein Signal."><span class="rj">Agents grading their own work</span> — "all went great" is noise, not signal.</span></li>
|
||
<li><span class="m">✗</span><span data-i18n data-en="<span class="rj">Always-on agents with broad access</span> — the largest blast radius for the least gain." data-de="<span class="rj">Dauerhaft laufende Agenten mit weiten Rechten</span> — die größte Reichweite für den geringsten Nutzen."><span class="rj">Always-on agents with broad access</span> — the largest blast radius for the least gain.</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ============================ FOOTER ============================ -->
|
||
<footer class="wrap">
|
||
<p class="fnote" data-i18n
|
||
data-en="Designed to run on <b>Claude Code</b> — <span class="prims">subagents · slash commands · hooks · layered memory · MCP grounding</span>.<br><br><b>Human-triggered, privacy-respecting, and yours to version.</b> Your AI will tailor every specific to your setup — nothing here is prescribed."
|
||
data-de="Gebaut für den Betrieb auf <b>Claude Code</b> — <span class="prims">Subagenten · Slash-Befehle · Hooks · geschichtetes Gedächtnis · MCP-Grounding</span>.<br><br><b>Von dir ausgelöst, deine Privatsphäre achtend und dir zum Versionieren.</b> Deine KI schneidert jedes Detail auf dein Setup zu — nichts davon ist vorgeschrieben.">
|
||
Designed to run on <b>Claude Code</b> —
|
||
<span class="prims">subagents · slash commands · hooks · layered memory · MCP grounding</span>.
|
||
<br><br>
|
||
<b>Human-triggered, privacy-respecting, and yours to version.</b>
|
||
Your AI will tailor every specific to your setup — nothing here is prescribed.
|
||
</p>
|
||
<div class="sig">
|
||
<span class="dot" aria-hidden="true"></span>
|
||
<span data-i18n data-en="Your Agentic Environment — A Field Guide" data-de="Deine agentische Umgebung — ein Feldführer">Your Agentic Environment — A Field Guide</span>
|
||
<span class="num">ORIENT·01</span>
|
||
<span data-i18n data-en="The what & why · a companion to the setup doc" data-de="Das Was & Warum · ein Begleiter zur Setup-Anleitung">The what & why · a companion to the setup doc</span>
|
||
<a href="https://git.pouya.duckdns.org/public/tutorials" target="_blank" rel="noopener"
|
||
data-i18n data-en="View the source repository →" data-de="Quell-Repository ansehen →">View the source repository →</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
/* =========================================================================
|
||
i18n — bilingual EN/DE, self-contained, offline.
|
||
- Each text node carries data-en / data-de (HTML strings, since some hold
|
||
<b>/<code>/<em>/<br>/<span>). We swap innerHTML on switch.
|
||
- aria carried via data-en-aria / data-de-aria; swapped as the attribute.
|
||
- Default: localStorage choice -> else navigator.language (de* => de)
|
||
-> else en. Persisted across reloads. With JS off, English (the markup)
|
||
stays visible, so nothing renders empty.
|
||
========================================================================= */
|
||
(function(){
|
||
var STORE = 'agentic-fieldguide-lang';
|
||
var nodes = document.querySelectorAll('[data-i18n]');
|
||
var ariaNodes = document.querySelectorAll('[data-en-aria],[data-de-aria]');
|
||
var buttons = document.querySelectorAll('.langseg button[data-lang]');
|
||
|
||
function decideInitial(){
|
||
try{
|
||
var saved = localStorage.getItem(STORE);
|
||
if(saved === 'en' || saved === 'de') return saved;
|
||
}catch(e){}
|
||
var nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase();
|
||
return nav.indexOf('de') === 0 ? 'de' : 'en';
|
||
}
|
||
|
||
function apply(lang){
|
||
var key = (lang === 'de') ? 'de' : 'en';
|
||
document.documentElement.lang = key;
|
||
|
||
nodes.forEach(function(el){
|
||
var v = el.getAttribute('data-' + key);
|
||
if(v != null) el.innerHTML = v;
|
||
});
|
||
ariaNodes.forEach(function(el){
|
||
var v = el.getAttribute('data-' + key + '-aria');
|
||
if(v != null) el.setAttribute('aria-label', v);
|
||
});
|
||
buttons.forEach(function(b){
|
||
var on = b.getAttribute('data-lang') === key;
|
||
b.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||
});
|
||
try{ localStorage.setItem(STORE, key); }catch(e){}
|
||
}
|
||
|
||
buttons.forEach(function(b){
|
||
b.addEventListener('click', function(){ apply(b.getAttribute('data-lang')); });
|
||
});
|
||
|
||
apply(decideInitial());
|
||
})();
|
||
|
||
/* Single calm reveal-on-scroll. Respects reduced-motion (CSS gate above). */
|
||
(function(){
|
||
var els = document.querySelectorAll('.reveal');
|
||
if(!('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches){
|
||
els.forEach(function(e){e.classList.add('in')});
|
||
return;
|
||
}
|
||
var io = new IntersectionObserver(function(entries){
|
||
entries.forEach(function(en){
|
||
if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }
|
||
});
|
||
}, {rootMargin:'0px 0px -8% 0px', threshold:.08});
|
||
els.forEach(function(e){io.observe(e)});
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|