Scroll Engineering

15 Prinzipien für Streaming-Chat-Scroll.

Grundregel: Nie gegen die Absicht des Lesers scrollen.

15 Prinzipien

Move only when the reader asked to move. Auto-scroll ist nie der Default.
Follow only while they’re following. Am Live-Edge mitfahren. Bei Scroll weg: dort bleiben.
Every interaction is intent. Scroll, Textauswahl, Tastatur, Links, Suche stoppen Auto-Bewegung.
Start a new turn near the top of the viewport. Neuer Turn von oben lesbar.
Then stream in the answer. Antwort wächst in den verfügbaren Raum.
Keep part of the previous conversation in context. Vorheriger Turn teilweise sichtbar.
Let new content arrive offscreen. Streaming ändert nicht automatisch die Ansicht.
Show what’s happening out of view. Hinweis bei laufendem Stream oder neuen Nachrichten.
Make it easy to return to the latest reply. „Jump to latest” setzt Follow zurück.
Let people jump anywhere in the conversation. Links, Suche, Unread-Marker.
Reopen where the reader left off. Gespeicherte Konversation bei letztem User-Turn öffnen.
Keep the reader’s place when layout changes. Bilder, Markdown, Code: Position erhalten.
Handle interruptions without stealing position. Stop, Retry, Regenerate: kein Sprung.
Stay responsive in long threads. Lange Historie bleibt flüssig.
Be accessible without the noise. Tastatur, Fokus, Screenreader in angemessenem Tempo.

Implementierung (@addxion/behavior)

Hook	Zweck
`useFollowStream`	Follow-at-bottom während Streaming
`useProxyWheelScroll`	Wheel außerhalb der Shell-Spalte → `.app-content` (Desktop-Ränder)
`useScrollIntent`	User-Intent erkennen (geplant)
`useJumpToLatest`	Zurück zum Live-Edge (über `useFollowStream.jumpToLatest`)

Framework-agnostic. Shell bindet Hooks an DOM.

Shell-Scroll-Proxy (Desktop)

Shell-Layout: zentrierte Spalte (.app-shell, max. 480px), Scroll in .app-content. Auf breiten Viewports scrollen Ränder links/rechts sonst nicht.

Regel: useProxyWheelScroll in der App-Shell aktivieren (z. B. AppChatShell). Standard-Selektoren: .app-shell / .app-content. Eigene Scrollbereiche (Command Palette, Chat-Listen) bleiben unberührt.

import { useProxyWheelScroll } from "@addxion/behavior/scroll";

useProxyWheelScroll(); // optional: containerSelector, shellSelector

Referenz

Ursprünglich dokumentiert in süper/docs/streaming-chat-scroll-engineering.md. SSOT ab jetzt hier in addxion-docs.

Checkliste für Chat-Shell

Kein Auto-Scroll gegen User-Intent
Follow nur am Bottom
Jump-to-latest sichtbar bei Away
Layout-Shifts kompensieren
useProxyWheelScroll in App-Shell für Desktop-Ränder

Truths

ID	Wahrheit
T-PKG-BEHAVIOR	Scroll-Entscheidungen in behavior, kein DOM
T-PKG-AI	LLM-SSOT in @addxion/ai
T-PKG-SHELL	Shell = UI-Schicht, nicht bash/zsh

Für Agents

Scope: Scroll Engineering — wann und warum gescrollt wird.

Framework-agnostic Hooks; Shell bindet behavior für Chat
Keine Scroll-Logik in Feature-Seiten oder @addxion/ai
Änderungen an Prinzipien: Shell-Chat-Anbindung in Architektur prüfen