smlflg/My-Agentic-Timeline
0
1<!doctype html>2<html lang="de" data-app-state="initializing">3<head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1">6 <meta name="color-scheme" content="dark">7 <meta name="description" content="Eine lokale, evidenzbasierte Timeline von Samuels agentischer Arbeitsweise zwischen Januar und Juli 2026.">8 <title>Samuel × Agents — Agentic Timeline</title>9 <link rel="stylesheet" href="styles.css">10 <script src="timeline-data.js" defer></script>11 <script src="app.js" defer></script>12</head>13<body>14 <a class="skip-link" href="#main-content">Zum Inhalt springen</a>15 16 <div class="archive-frame" id="app-shell">17 <header class="site-header" aria-label="Archivkopf">18 <a class="wordmark" href="#main-content" aria-label="Samuel mal Agents, zum Anfang">19 <span class="wordmark__index">S × A</span>20 <span class="wordmark__name">Samuel × Agents</span>21 </a>22 <div class="archive-status" data-state="read-only" aria-label="Lokale Nur-Lese-Ansicht">23 <span class="status-pulse" aria-hidden="true"></span>24 Local · Read only25 </div>26 </header>27 28 <main id="main-content" tabindex="-1">29 <section class="hero" aria-labelledby="page-title">30 <div class="hero__copy archive-reveal">31 <p class="eyebrow">Werkprotokoll 01—07 / 2026</p>32 <h1 id="page-title">Eine Arbeitsweise<br><em>wird sichtbar.</em></h1>33 <p class="hero__lede">34 Zehn belegte Entwicklungsbögen über Kontrolle, Portabilität und die35 Kunst, Agentenarbeit wiederaufnehmbar zu machen — inklusive der36 Reibung, die jede neue Fähigkeit mitgebracht hat.37 </p>38 </div>39 40 <div class="hero__instrument archive-reveal" aria-label="Perspektive wählen">41 <p class="instrument-label">Lesart</p>42 <div class="view-switch" role="group" aria-label="Ansicht">43 <button type="button" class="view-button is-active" data-view="STORY" aria-pressed="true" disabled>44 <span>01</span> Story45 </button>46 <button type="button" class="view-button" data-view="INSIGHTS" aria-pressed="false" disabled>47 <span>02</span> Insights48 </button>49 </div>50 <div class="hero-weave" aria-hidden="true">51 <span></span><span></span><span></span><span></span>52 </div>53 <p class="hero__range">Jan <span aria-hidden="true">→</span> Jul 2026</p>54 </div>55 </section>56 57 <div id="invalid-hash-notice" class="notice notice--warning" data-state="invalid-hash" role="status" hidden>58 <span class="notice__mark" aria-hidden="true">!</span>59 <div>60 <strong>Unbekannter Linkzustand.</strong>61 Sichere Standardansicht geladen; der lokale Hash wurde normalisiert.62 </div>63 </div>64 65 <div id="stale-notice" class="snapshot-strip" data-state="stale-snapshot" role="note">66 <span>Snapshot-Grenze</span>67 <strong>Aktivität und Story bis 11.07.</strong>68 <span>Keine Live-Synchronisation</span>69 </div>70 71 <section class="controls" aria-labelledby="filter-title">72 <div class="controls__heading">73 <div>74 <p class="section-index">Filter / Pfade</p>75 <h2 id="filter-title">Welche Entwicklungslinie?</h2>76 </div>77 <p class="union-note"><span aria-hidden="true">∪</span> Mehrfachwahl = ODER / Union</p>78 </div>79 80 <fieldset id="filter-fieldset" disabled>81 <legend class="sr-only">Timeline filtern</legend>82 <div class="harness-filter" role="group" aria-label="Harness-Pfade">83 <button type="button" class="filter-chip is-active" data-harness="Alle" aria-pressed="true">Alle</button>84 <button type="button" class="filter-chip" data-harness="Claude Code" aria-pressed="false"><span class="chip-mark chip-mark--claude"></span>Claude Code</button>85 <button type="button" class="filter-chip" data-harness="Codex" aria-pressed="false"><span class="chip-mark chip-mark--codex"></span>Codex</button>86 <button type="button" class="filter-chip" data-harness="OpenCode" aria-pressed="false"><span class="chip-mark chip-mark--opencode"></span>OpenCode</button>87 <button type="button" class="filter-chip" data-harness="Hermes / HAI" aria-pressed="false"><span class="chip-mark chip-mark--hermes"></span>Hermes / HAI</button>88 <button type="button" class="filter-chip" data-harness="Harness-agnostisch" aria-pressed="false"><span class="chip-mark chip-mark--agnostic"></span>Harness-agnostisch</button>89 </div>90 91 <div class="secondary-filters">92 <label class="select-field">93 <span>Konzept</span>94 <select id="concept-filter" name="concept" aria-label="Nach Konzept filtern">95 <option value="all">Alle Konzepte</option>96 </select>97 </label>98 <label class="select-field">99 <span>Entwicklungsstufe</span>100 <select id="stage-filter" name="stage" aria-label="Nach Entwicklungsstufe filtern">101 <option value="all">Alle Stufen</option>102 </select>103 </label>104 <label class="select-field">105 <span>Evidenzsicherheit</span>106 <select id="confidence-filter" name="confidence" aria-label="Nach Evidenzsicherheit filtern">107 <option value="all">Alle Sicherheiten</option>108 </select>109 </label>110 <button type="button" class="reset-button" data-action="reset-filters" disabled>111 Filter zurücksetzen112 </button>113 </div>114 </fieldset>115 116 <div class="filter-readout" aria-live="polite">117 <strong id="visible-arc-count" data-testid="visible-arc-count">0 Arcs sichtbar</strong>118 <span id="hash-status">Lokaler Zustand wird vorbereitet</span>119 </div>120 </section>121 122 <section class="context-panel" aria-labelledby="context-title">123 <div class="context-panel__intro">124 <p class="section-index">Maßstab, nicht Maßstab der Fähigkeit</p>125 <h2 id="context-title">Ein halbes Jahr,<br>in Zahlen gerahmt.</h2>126 <p>Diese Werte zeigen Aktivität und Korpusgröße. Sie beweisen weder Kompetenz noch einen Lernzeitpunkt.</p>127 </div>128 <div id="metrics-grid" class="metrics-grid" aria-label="Kontextmetriken"></div>129 </section>130 131 <section class="density-section" aria-labelledby="density-title">132 <div class="density-heading">133 <div>134 <p class="section-index">Aktivitätsdichte</p>135 <h2 id="density-title">Der Rhythmus hinter der Story</h2>136 </div>137 <p>Monatliche Gesamtdichte · <strong>Klasse D / Kontext</strong></p>138 </div>139 <div id="activity-density" class="density-chart" aria-label="Monatliche Session-Dichte"></div>140 <div id="harness-totals" class="harness-totals" aria-label="Session-Summen nach Harness"></div>141 </section>142 143 <div id="initializing-state" class="state-panel state-panel--loading" data-state="initializing" role="status">144 <span class="loading-rule" aria-hidden="true"></span>145 <p>Lokales Archiv wird zusammengesetzt …</p>146 </div>147 148 <div id="data-error-state" class="state-panel state-panel--error" data-state="data-error" role="alert" hidden>149 <p class="state-panel__code">DATA / ERROR</p>150 <h2>Lokale Timeline-Daten konnten nicht geladen werden.</h2>151 <p id="data-error-message">Die eingefrorene Datenkopie ist nicht verfügbar oder verletzt ihren Vertrag.</p>152 <div class="state-panel__actions">153 <button type="button" id="reload-button">Seite neu laden</button>154 <a href="README.md">README öffnen</a>155 </div>156 </div>157 158 <div id="empty-state" class="state-panel state-panel--empty" data-state="empty" role="status" hidden>159 <p class="state-panel__code">0 / 10</p>160 <h2>Keine Arcs passen zu dieser Kombination.</h2>161 <p>Die Filter sind korrekt aktiv; entferne eine Einschränkung oder kehre zum Gesamtbild zurück.</p>162 <button type="button" data-action="reset-filters">Alle Arcs zeigen</button>163 </div>164 165 <section id="story-view" class="view-section archive-reveal" data-view="STORY" aria-labelledby="story-title">166 <div class="view-heading">167 <div>168 <p class="section-index">Lesart 01 / Story</p>169 <h2 id="story-title">Vom Einzelsystem<br>zur Governance.</h2>170 </div>171 <p>Jeder Bogen zeigt Ausgangslage, Wirkung, Kosten und die Adaption danach.</p>172 </div>173 174 <article id="prologue-card" class="prologue-card" aria-labelledby="prologue-title"></article>175 176 <div class="story-layout">177 <aside class="lane-legend" aria-label="Harness-Legende">178 <p class="lane-legend__title">Threadlines</p>179 <ul>180 <li><span class="lane-dot lane-dot--claude"></span>Claude Code</li>181 <li><span class="lane-dot lane-dot--codex"></span>Codex</li>182 <li><span class="lane-dot lane-dot--opencode"></span>OpenCode</li>183 <li><span class="lane-dot lane-dot--hermes"></span>Hermes / HAI</li>184 <li><span class="lane-dot lane-dot--agnostic"></span>Agnostisch</li>185 </ul>186 </aside>187 <div class="story-stream-wrap">188 <div id="lane-map" class="lane-map" aria-label="Geflochtene Harness-Pfade"></div>189 <div id="story-list" class="story-stream"></div>190 </div>191 </div>192 </section>193 194 <section id="insights-view" class="view-section archive-reveal" data-view="INSIGHTS" aria-labelledby="insights-title" hidden>195 <div class="view-heading">196 <div>197 <p class="section-index">Lesart 02 / Insights</p>198 <h2 id="insights-title">Was sich wirklich<br>verändert hat.</h2>199 </div>200 <p>Verdichtete Muster aus den aktuell sichtbaren Arcs — ohne Aktivität in Kompetenz umzudeuten.</p>201 </div>202 203 <div id="insights-grid" class="insights-grid"></div>204 205 <nav class="insights-chapter-nav" aria-label="Insights-Kapitel">206 <a href="#hai-retrospective">Monate</a>207 <a href="#hai-zooms">Wendepunkte</a>208 <a href="#hai-rulebook">HAI-Regeln</a>209 <a href="#transfer-title">Transfers</a>210 <a href="#principles-title">Prinzipien</a>211 <a href="#methodology">Grenzen</a>212 </nav>213 214 <section id="hai-retrospective" class="hai-retrospective" aria-labelledby="hai-retrospective-title">215 <div class="section-rule-heading hai-retrospective__heading">216 <div>217 <p class="section-index">HAI blickt zurück · Jan—Jul 2026</p>218 <h3 id="hai-retrospective-title">Nicht mehr Agentenoutput.<br>Kontrollierbare Kopplung.</h3>219 </div>220 <p>Was Samuel versuchte → was funktionierte → was es kostete → welche heutige Regel daraus verständlich wird.</p>221 </div>222 223 <div id="hai-owner-thesis" class="hai-owner-thesis"></div>224 <div id="hai-evidence-legend" class="hai-evidence-legend" aria-label="Zeit- und Evidenzlegende"></div>225 226 <div class="hai-month-browser">227 <div id="hai-month-rail" class="hai-month-rail" role="tablist" aria-label="Monat auswählen"></div>228 <article id="hai-month-detail" class="hai-month-detail" role="tabpanel" tabindex="0"></article>229 </div>230 231 <section id="hai-zooms" class="hai-zooms" aria-labelledby="hai-zooms-title">232 <div class="subsection-heading">233 <div>234 <p class="section-index">Fünf belegte Wendepunkte</p>235 <h4 id="hai-zooms-title">Wo eine Phase wirklich kippte.</h4>236 </div>237 <p>Tag, Mehrtagesphase oder Woche folgt der Auflösung des qualitativen Belegs — nie nur der Aktivitätsdichte.</p>238 </div>239 <div id="hai-zoom-list" class="hai-zoom-list"></div>240 </section>241 242 <section id="hai-rulebook" class="hai-rulebook" aria-labelledby="hai-rulebook-title">243 <div class="subsection-heading">244 <div>245 <p class="section-index">11 heutige Linsen</p>246 <h4 id="hai-rulebook-title">Regeln als Biografie, nicht als Benotung.</h4>247 </div>248 <p>Die Regeln beschreiben, welche Reibung sie heute begrenzen würden. Sie behaupten nicht, die Vergangenheit sicher verbessert zu haben.</p>249 </div>250 <div id="hai-rule-list" class="hai-rule-list"></div>251 </section>252 253 <section class="hai-synthesis" aria-labelledby="hai-synthesis-title">254 <div class="subsection-heading">255 <div>256 <p class="section-index">Herkunft → Richtung</p>257 <h4 id="hai-synthesis-title">Was sich unter den Tools verändert hat.</h4>258 </div>259 </div>260 <div id="hai-synthesis-grid" class="hai-synthesis-grid"></div>261 <blockquote id="hai-core-statement" class="hai-core-statement"></blockquote>262 </section>263 </section>264 265 <section class="transfer-section" aria-labelledby="transfer-title">266 <div class="section-rule-heading">267 <p class="section-index">Drei belegte Übergänge</p>268 <h3 id="transfer-title">Transfer ist Übersetzung, nicht Kopie.</h3>269 </div>270 <div id="transfers-list" class="transfer-list"></div>271 </section>272 273 <section class="principles-section" aria-labelledby="principles-title">274 <div class="section-rule-heading">275 <p class="section-index">Was blieb</p>276 <h3 id="principles-title">Prinzipien, die den Harness überleben.</h3>277 </div>278 <ol id="principles-list" class="principles-list"></ol>279 </section>280 281 <section id="methodology" class="methodology" aria-labelledby="methodology-title">282 <div>283 <p class="section-index">Methodik & Grenzen</p>284 <h3 id="methodology-title">Was diese Timeline beweist — und was nicht.</h3>285 </div>286 <div id="methodology-content" class="methodology__content"></div>287 </section>288 </section>289 </main>290 291 <footer class="site-footer">292 <p>Samuel × Agents · lokale Reflexion · eingefrorener Stand 11.07.2026</p>293 <p><a href="README.md">Provenienz & Bedienung</a> <span aria-hidden="true">/</span> keine externen Requests</p>294 </footer>295 </div>296 297 <dialog id="arc-dialog" class="arc-dialog" aria-labelledby="detail-title" aria-describedby="detail-claim">298 <div class="arc-dialog__rail" aria-hidden="true"></div>299 <article class="arc-dialog__inner">300 <header class="arc-dialog__header">301 <div>302 <p id="detail-kicker" class="detail-kicker">Evolution Arc</p>303 <h2 id="detail-title">Arc-Detail</h2>304 </div>305 <button type="button" class="dialog-close" data-action="close-detail" aria-label="Detail schließen">306 <span aria-hidden="true">×</span><span>Schließen</span>307 </button>308 </header>309 <p id="detail-claim" class="detail-claim"></p>310 <div id="detail-content" class="detail-content"></div>311 </article>312 </dialog>313 314 <div id="live-region" class="sr-only" aria-live="polite" aria-atomic="true"></div>315 316 <noscript>317 <div class="noscript-panel">318 Diese lokale Timeline benötigt JavaScript für Filter, Ansichten und Arc-Details.319 Die Provenienz bleibt in der README lesbar.320 </div>321 </noscript>322</body>323</html>324