Keep new msg content in view; move intial state to prevent client

rerenders of it

app/browser/index.mjs

@@ -13,15 +13,28 @@ const api = API({ wssurl })
 
 enhance('ui-message-list', {
   api,
-  keys: [ 'messages' ],
-  render (args) {
+  keys: ['messages'],
+  connectedCallback() {
+    // Observe the scrollanchor element and keep it in view;
+    // this keeps incoming message content in view when overflowing the scroll area.
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      const [{ target: scrollAnchor }] = entries
+
+      if (!scrollanchor.isIntersecting) {
+        scrollanchor.scrollIntoView()
+      }
+    })
+
+    intersectionObserver.observe(document.getElementById('scrollanchor'))
+  },
+  render(args) {
     return UIMessageList(args)
   },
 })
 
 enhance('ui-input', {
   api,
-  connectedCallback () {
+  connectedCallback() {
     this.form = this.querySelector('form')
     this.input = this.form.querySelector('input')
     this.form.addEventListener('submit', e => {
@@ -30,29 +43,29 @@ enhance('ui-input', {
       this.input.value = ''
     })
   },
-  render (args) {
+  render(args) {
     return UIInput(args)
   },
 })
 
 class UIAssistantMessage extends CustomElement {
-  constructor () {
+  constructor() {
     super()
   }
 
-  render (args) {
+  render(args) {
     return UIAssistantMessageElement(args)
   }
 }
 
 customElements.define('ui-assistant-message', UIAssistantMessage)
 
 class UIUserMessage extends CustomElement {
-  constructor () {
+  constructor() {
     super()
   }
 
-  render (args) {
+  render(args) {
     return UIUserMessageElement(args)
   }
 }

app/elements/claude-interface.mjs

@@ -1,4 +1,7 @@
-export default function ClaudeInterface ({ html }) {
+export default function ClaudeInterface({ html, state }) {
+  const { store } = state
+  const { messages } = store
+
   return html`
     <style scope="global">
       body:has(#toggle:checked) {
@@ -76,6 +79,11 @@ export default function ClaudeInterface ({ html }) {
         }
       }
 
+      #scrollanchor {
+        overflow-anchor: auto;
+        block-size: 1px;
+      }
+
     </style>
 
     <claude-config></claude-config>
@@ -103,6 +111,7 @@ export default function ClaudeInterface ({ html }) {
 
         <main data-wssurl="${process.env.ARC_WSS_URL}" class="overflow-y-scroll-lg">
           <ui-message-list class="p0-lg"></ui-message-list>
+          <div id="scrollanchor"></div>
         </main>
       </section>
 
@@ -111,5 +120,9 @@ export default function ClaudeInterface ({ html }) {
     </div>
 
     <script type="module" src="/_public/browser/index.mjs"></script>
+
+    <script type="application/json" id="initialMessages">
+      ${JSON.stringify(messages)}
+    </script>
   `
 }

app/elements/ui-message-list.mjs

@@ -1,4 +1,4 @@
-export default function MessageList ({ html, state }) {
+export default function MessageList({ html, state }) {
   const { store, instanceID } = state
   const { messages = [] } = store
 
@@ -18,8 +18,5 @@ export default function MessageList ({ html, state }) {
     <ol class="list-none grid grid-col gap0" id="${instanceID}">
       ${messages.length ? messagesMarkup : ''}
     </ol>
-    <script type="application/json" id="initialMessages">
-      ${JSON.stringify(messages)}
-    </script>
   `
 }