From 811035ba4f9ebb9f1543451bf64630aeb9b5fcd2 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 29 Aug 2026 19:26:45 +0200
Subject: [PATCH] fix(ui): chat keeps the bottom pinned while async markdown
 lands

---
 ui/src/lib/panel/chat-view.svelte | 134 +++++++++++++++++-------------
 1 file changed, 78 insertions(+), 56 deletions(-)

diff --git a/ui/src/lib/panel/chat-view.svelte b/ui/src/lib/panel/chat-view.svelte
index cc0252e..50e33a2 100644
--- a/ui/src/lib/panel/chat-view.svelte
+++ b/ui/src/lib/panel/chat-view.svelte
@@ -35,6 +35,7 @@
   let showResults = $state(false);
   let loadedAt = $state(new Date(0).toISOString());
   let scroller = $state<HTMLDivElement | null>(null);
+  let body = $state<HTMLDivElement | null>(null);
   let now = $state(Date.now());
   let pinned = true;
 
@@ -90,6 +91,21 @@
     }
   });
 
+  // Markdown lands asynchronously (Obsidian renders after the DOM exists),
+  // so follow the content's height, not just the message count.
+  $effect(() => {
+    if (!(scroller && body)) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      if (pinned && scroller) {
+        scroller.scrollTop = scroller.scrollHeight;
+      }
+    });
+    observer.observe(body);
+    return () => observer.disconnect();
+  });
+
   $effect(() => {
     const timer = setInterval(() => {
       if (model.running) {
@@ -124,77 +140,83 @@
 </script>
 
 <div
-  class="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3 @md:px-6"
+  class="min-h-0 flex-1 overflow-y-auto px-3 py-3 @md:px-6"
   onscroll={() => {
     pinned = nearBottom();
   }}
   bind:this={scroller}
 >
-  <span class="flex items-center gap-2 self-end text-muted-foreground text-xs">
-    <Switch aria-label="Show tool results" bind:checked={showResults} />
-    show tool results
-  </span>
-  {#if failure}
-    <ErrorNote message={failure} retry={load} />
-  {:else if messages === null}
-    <div class="flex flex-col gap-2">
-      <Skeleton class="h-10 w-2/3" />
-      <Skeleton class="h-16 w-full" />
-      <Skeleton class="h-10 w-1/2" />
-    </div>
-  {:else if messages.length === 0 && tail.length === 0}
-    <EmptyState
-      hint="Nothing has been said here yet. Write below, or wait for the first inject."
-      title="Empty conversation"
-    />
-  {:else}
-    {#each messages as message, index (index)}
-      {@const parts = blocks(message)}
-      {@const isResultOnly = parts.every((b) => b.type === "tool_result")}
-      {#if !(isResultOnly && !showResults)}
-        <div
-          class={cn(
+  <div class="flex flex-col gap-3" bind:this={body}>
+    <span
+      class="flex items-center gap-2 self-end text-muted-foreground text-xs"
+    >
+      <Switch aria-label="Show tool results" bind:checked={showResults} />
+      show tool results
+    </span>
+    {#if failure}
+      <ErrorNote message={failure} retry={load} />
+    {:else if messages === null}
+      <div class="flex flex-col gap-2">
+        <Skeleton class="h-10 w-2/3" />
+        <Skeleton class="h-16 w-full" />
+        <Skeleton class="h-10 w-1/2" />
+      </div>
+    {:else if messages.length === 0 && tail.length === 0}
+      <EmptyState
+        hint="Nothing has been said here yet. Write below, or wait for the first inject."
+        title="Empty conversation"
+      />
+    {:else}
+      {#each messages as message, index (index)}
+        {@const parts = blocks(message)}
+        {@const isResultOnly = parts.every((b) => b.type === "tool_result")}
+        {#if !(isResultOnly && !showResults)}
+          <div
+            class={cn(
             "flex flex-col gap-1.5",
             message.role === "user" && !isResultOnly && "items-end"
           )}
-        >
-          {#each parts as block, blockIndex (blockIndex)}
-            {#if block.type === "text" && block.text}
-              <Markdown
-                class={cn(
+          >
+            {#each parts as block, blockIndex (blockIndex)}
+              {#if block.type === "text" && block.text}
+                <Markdown
+                  class={cn(
                   "max-w-[75ch] rounded-lg px-3 py-2",
                   message.role === "user" ? "bg-primary/10" : "bg-muted/50"
                 )}
-                text={block.text}
-              />
-            {:else if block.type === "tool_use"}
-              <p class="flex items-baseline gap-2 px-1 text-xs">
-                <span class="font-medium">{toolLabel(block.name ?? "?")}</span>
-                <span class="truncate text-muted-foreground">
-                  {clip(summarizeInput(block.name ?? "", block.input), 160)}
-                </span>
-              </p>
-            {:else if block.type === "tool_result" && showResults}
-              <pre
-                class={cn(
+                  text={block.text}
+                />
+              {:else if block.type === "tool_use"}
+                <p class="flex items-baseline gap-2 px-1 text-xs">
+                  <span class="font-medium"
+                    >{toolLabel(block.name ?? "?")}</span
+                  >
+                  <span class="truncate text-muted-foreground">
+                    {clip(summarizeInput(block.name ?? "", block.input), 160)}
+                  </span>
+                </p>
+              {:else if block.type === "tool_result" && showResults}
+                <pre
+                  class={cn(
                   "max-h-48 max-w-full overflow-auto whitespace-pre-wrap break-all rounded-md p-2 text-xs",
                   block.is_error
                     ? "bg-destructive/8 text-destructive"
                     : "bg-muted/40"
                 )}
-              >{clip(resultText(block), RESULT_CLIP)}</pre>
-            {:else if block.type === "thinking"}
-              <p class="px-1 text-kind-deep text-xs">thinking</p>
-            {/if}
-          {/each}
-        </div>
-      {/if}
+                >{clip(resultText(block), RESULT_CLIP)}</pre>
+              {:else if block.type === "thinking"}
+                <p class="px-1 text-kind-deep text-xs">thinking</p>
+              {/if}
+            {/each}
+          </div>
+        {/if}
+      {/each}
+    {/if}
+    {#if model.question}
+      <QuestionCard {client} {conversationId} question={model.question} />
+    {/if}
+    {#each tail as turn (turn.id)}
+      <TurnCard {now} {turn} />
     {/each}
-  {/if}
-  {#if model.question}
-    <QuestionCard {client} {conversationId} question={model.question} />
-  {/if}
-  {#each tail as turn (turn.id)}
-    <TurnCard {now} {turn} />
-  {/each}
+  </div>
 </div>