diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7781ba0..c9f3ad57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,11 @@ This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 Packages without a separate changelog are covered by the cross-package notes below.
 
-## [Unreleased]
+## [Unreleased - Patch]
+
+### Fixed
+
+- Observer chat and activity now scroll independently within the viewport, display oldest to newest, and preserve reading position when new entries arrive.
 
 ## [8.13.0] - 2026-09-25
 
diff --git a/package-lock.json b/package-lock.json
index d0b4c2b6..df0d7917 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11652,9 +11652,11 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.0.0",
+        "@testing-library/react": "^16.3.3",
         "@types/node": "^22.0.0",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
+        "jsdom": "^25.0.1",
         "postcss": "^8.5.0",
         "tailwindcss": "^4.0.0",
         "typescript": "^5.7.0"
diff --git a/packages/observer-dashboard/package.json b/packages/observer-dashboard/package.json
index 57b97e71..ebc5b868 100644
--- a/packages/observer-dashboard/package.json
+++ b/packages/observer-dashboard/package.json
@@ -22,9 +22,11 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.5.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0"
diff --git a/packages/observer-dashboard/src/components/ActivityLog.tsx b/packages/observer-dashboard/src/components/ActivityLog.tsx
index 0cac0781..114c7d80 100644
--- a/packages/observer-dashboard/src/components/ActivityLog.tsx
+++ b/packages/observer-dashboard/src/components/ActivityLog.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import { Activity, MessageSquare, Radio, Trash2, UserRound, Wifi, Zap } from 'lucide-react';
-import type { ComponentType } from 'react';
+import { useMemo, useRef, type ComponentType } from 'react';
+import { useFollowLatest } from '../hooks/use-follow-latest';
 import { useWebSocketFeed } from '../hooks/use-websocket-feed';
 import type { WebSocketFeedCategory, WebSocketFeedEvent } from '../types/dashboard';
 import { cn } from '../lib/utils';
@@ -45,6 +46,10 @@ interface ActivityLogProps {
 export function ActivityLog({ className }: ActivityLogProps) {
   const { status, events: wsEvents, latestEventAt, clearEvents } = useWebSocketFeed();
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const chronologicalEvents = useMemo(() => [...wsEvents].reverse(), [wsEvents]);
+  useFollowLatest(scrollRef, chronologicalEvents[chronologicalEvents.length - 1]?.id);
+
   const statusClasses = {
     connected: 'bg-emerald-500/12 text-emerald-300 border-emerald-500/25',
     connecting: 'bg-amber-500/12 text-amber-300 border-amber-500/25',
@@ -53,8 +58,8 @@ export function ActivityLog({ className }: ActivityLogProps) {
   } as const;
 
   return (
-    <div className={cn('console-subtle flex h-full min-h-[420px] flex-col overflow-hidden', className)}>
-      <div className="space-y-2 border-b border-[color-mix(in_srgb,var(--console-accent)_14%,transparent)] px-4 py-3">
+    <div className={cn('console-subtle flex h-full min-h-0 flex-col overflow-hidden', className)}>
+      <div className="shrink-0 space-y-2 border-b border-[color-mix(in_srgb,var(--console-accent)_14%,transparent)] px-4 py-3">
         <div className="flex items-center justify-between gap-2">
           <h2 className="text-sm font-semibold text-[var(--console-fg)]">Activity</h2>
           <div className="flex items-center gap-2">
@@ -78,7 +83,7 @@ export function ActivityLog({ className }: ActivityLogProps) {
           {latestEventAt ? `Last WS event ${relativeTime(latestEventAt)}` : 'No WS events yet'}
         </div>
       </div>
-      <div className="flex-1 overflow-y-auto">{wsEvents.length === 0 ? <Empty /> : <WebSocketFeed events={wsEvents} />}</div>
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">{wsEvents.length === 0 ? <Empty /> : <WebSocketFeed events={chronologicalEvents} />}</div>
     </div>
   );
 }
diff --git a/packages/observer-dashboard/src/components/ChatFeed.tsx b/packages/observer-dashboard/src/components/ChatFeed.tsx
index 1318ef08..c0faf4ba 100644
--- a/packages/observer-dashboard/src/components/ChatFeed.tsx
+++ b/packages/observer-dashboard/src/components/ChatFeed.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react';
+import { useFollowLatest } from '../hooks/use-follow-latest';
 import { Hash, MessageSquare, UserRound } from 'lucide-react';
 import { useMessages, useRelay, sortMessagesChronologically } from '@relaycast/react';
 import { MessageCard } from './MessageCard';
@@ -45,8 +46,8 @@ export function ChatFeed({
   const showMemberBadge = !!channelName;
 
   return (
-    <section className={cn('brand-card flex min-w-0 flex-1 flex-col overflow-hidden', className)}>
-      <div className="border-b border-[var(--border-default)] px-5 py-4">
+    <section className={cn('brand-card flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden', className)}>
+      <div className="shrink-0 border-b border-[var(--border-default)] px-5 py-4">
         <div className="flex items-center gap-2">
           {selectedChannel && !isDm ? (
             <Hash className="h-4 w-4 text-[var(--brand-primary)]" />
@@ -68,7 +69,7 @@ export function ChatFeed({
         </div>
       </div>
 
-      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto bg-[color-mix(in_srgb,var(--surface-strong)_72%,transparent)]">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain bg-[color-mix(in_srgb,var(--surface-strong)_72%,transparent)]">
         {channelName ? (
           <ChannelMessages key={channelName} channel={channelName} scrollRef={scrollRef} onOpenThread={onOpenThread} mentionNames={mentionNames} onOpenAgent={onOpenAgent} />
         ) : dmId ? (
@@ -84,21 +85,19 @@ export function ChatFeed({
 /**
  * Pagination scaffolding shared by the channel and DM feeds: keeps the viewport
  * anchored while older messages are prepended, scrolls to the bottom only when
- * a new latest message arrives, and loads older pages when the top sentinel
- * becomes visible.
+ * a new latest message arrives while following the bottom, and loads older
+ * pages when the top sentinel becomes visible.
  */
 function usePaginatedFeed(
   scrollRef: RefObject<HTMLDivElement>,
   sorted: MessageWithMeta[],
   loadOlderPage: () => Promise<number | null>,
 ) {
-  const bottomRef = useRef<HTMLDivElement>(null);
   const topRef = useRef<HTMLDivElement>(null);
   const [hasMore, setHasMore] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
   const loadingMoreRef = useRef(false);
   const prependHeightRef = useRef<number | null>(null);
-  const didInitialScrollRef = useRef(false);
 
   const newestId = sorted[sorted.length - 1]?.id;
   const oldestId = sorted[0]?.id;
@@ -111,11 +110,7 @@ function usePaginatedFeed(
     prependHeightRef.current = null;
   }, [oldestId, scrollRef]);
 
-  useEffect(() => {
-    if (!newestId) return;
-    bottomRef.current?.scrollIntoView({ behavior: didInitialScrollRef.current ? 'smooth' : 'auto' });
-    didInitialScrollRef.current = true;
-  }, [newestId]);
+  useFollowLatest(scrollRef, newestId);
 
   const loadOlder = useCallback(async () => {
     if (loadingMoreRef.current) return;
@@ -156,7 +151,7 @@ function usePaginatedFeed(
     return () => observer.disconnect();
   }, [showSentinel, loadOlder, scrollRef]);
 
-  return { bottomRef, topRef, showSentinel, loadingMore };
+  return { topRef, showSentinel, loadingMore };
 }
 
 function FeedList({
@@ -185,7 +180,6 @@ function FeedList({
         const compact = prev !== null && prev.agentName === msg.agentName && new Date(msg.createdAt).getTime() - new Date(prev.createdAt).getTime() < 300000;
         return <MessageCard key={msg.id} message={msg} compact={compact} onOpenThread={onOpenThread} mentionNames={mentionNames} onOpenAgent={onOpenAgent} />;
       })}
-      <div ref={feed.bottomRef} />
     </div>
   );
 }
diff --git a/packages/observer-dashboard/src/components/ConsolePanel.tsx b/packages/observer-dashboard/src/components/ConsolePanel.tsx
index b61bf5a8..de69e466 100644
--- a/packages/observer-dashboard/src/components/ConsolePanel.tsx
+++ b/packages/observer-dashboard/src/components/ConsolePanel.tsx
@@ -5,7 +5,7 @@ import { cn } from '../lib/utils';
 
 export function ConsolePanel({ className }: { className?: string }) {
   return (
-    <aside className={cn('console-surface flex w-[440px] shrink-0 flex-col overflow-hidden', className)}>
+    <aside className={cn('console-surface flex min-h-0 w-[440px] shrink-0 flex-col overflow-hidden', className)}>
       <ActivityLog className="w-full border-l-0 border-none bg-transparent" />
     </aside>
   );
diff --git a/packages/observer-dashboard/src/components/DashboardLayout.tsx b/packages/observer-dashboard/src/components/DashboardLayout.tsx
index 8f48387f..825e3967 100644
--- a/packages/observer-dashboard/src/components/DashboardLayout.tsx
+++ b/packages/observer-dashboard/src/components/DashboardLayout.tsx
@@ -163,8 +163,8 @@ export function DashboardLayout() {
   const mobileDetailsLabel = selectedAgentData ? 'Agent' : threadMessageId ? 'Thread' : 'Console';
 
   return (
-    <div className="brand-grid min-h-screen">
-      <div className="hidden min-h-screen lg:flex lg:gap-3">
+    <div className="brand-grid h-dvh overflow-hidden">
+      <div className="hidden h-full min-h-0 overflow-hidden lg:flex lg:gap-3">
         <AgentSidebar
           channels={channels}
           agents={agents}
@@ -175,10 +175,10 @@ export function DashboardLayout() {
           wsStatus={wsStatus}
           onSelectChannel={handleSelectChannel}
           onSelectAgent={handleSelectAgent}
-          className="m-3 mr-0 lg:sticky lg:top-3 lg:self-start lg:h-[calc(100vh-1.5rem)]"
+          className="m-3 mr-0 min-h-0"
         />
 
-        <main className="flex min-w-0 flex-1 flex-col py-3 pr-3">
+        <main className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden py-3 pr-3">
           <div className="flex min-h-0 flex-1 gap-3">
             <ChatFeed
               selectedChannel={selectedChannel}
@@ -194,8 +194,8 @@ export function DashboardLayout() {
         </main>
       </div>
 
-      <div className="flex min-h-screen flex-col gap-3 p-3 lg:hidden">
-        <div className="brand-glass flex items-center gap-2 p-2">
+      <div className="flex h-full min-h-0 flex-col gap-3 overflow-hidden p-3 lg:hidden">
+        <div className="brand-glass flex shrink-0 items-center gap-2 p-2">
           <MobilePaneButton
             label="Browse"
             icon={<PanelLeft className="h-4 w-4" />}
diff --git a/packages/observer-dashboard/src/hooks/use-follow-latest.test.tsx b/packages/observer-dashboard/src/hooks/use-follow-latest.test.tsx
new file mode 100644
index 00000000..eb4fbe06
--- /dev/null
+++ b/packages/observer-dashboard/src/hooks/use-follow-latest.test.tsx
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFollowLatest } from './use-follow-latest';
+
+let resized: () => void;
+const disconnect = vi.fn();
+
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', class {
+    constructor(callback: () => void) { resized = callback; }
+    observe() {}
+    disconnect = disconnect;
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+  disconnect.mockClear();
+});
+
+function makePane() {
+  const pane = document.createElement('div');
+  Object.defineProperties(pane, {
+    clientHeight: { value: 200, configurable: true },
+    scrollHeight: { value: 1000, configurable: true },
+  });
+  return pane;
+}
+
+function scroll(pane: HTMLDivElement, top: number) {
+  act(() => {
+    pane.scrollTop = top;
+    pane.dispatchEvent(new Event('scroll'));
+  });
+}
+
+describe('useFollowLatest', () => {
+  it('follows the initial and latest entries within its own pane', () => {
+    const pane = makePane();
+    const other = makePane();
+    other.scrollTop = 123;
+    const pageScroll = vi.spyOn(window, 'scrollTo');
+    const ref = { current: pane };
+    const { rerender } = renderHook(({ id }) => useFollowLatest(ref, id), { initialProps: { id: 'first' } });
+    expect(pane.scrollTop).toBe(1000);
+    Object.defineProperty(pane, 'scrollHeight', { value: 1200 });
+    rerender({ id: 'second' });
+    expect(pane.scrollTop).toBe(1200);
+    expect(other.scrollTop).toBe(123);
+    expect(pageScroll).not.toHaveBeenCalled();
+  });
+
+  it('preserves the reading position and resumes when the reader returns near the bottom', () => {
+    const pane = makePane();
+    const ref = { current: pane };
+    const { rerender } = renderHook(({ id }) => useFollowLatest(ref, id), { initialProps: { id: 'first' } });
+    scroll(pane, 300);
+    Object.defineProperty(pane, 'scrollHeight', { value: 1200 });
+    rerender({ id: 'second' });
+    expect(pane.scrollTop).toBe(300);
+    scroll(pane, 950);
+    Object.defineProperty(pane, 'scrollHeight', { value: 1400 });
+    rerender({ id: 'third' });
+    expect(pane.scrollTop).toBe(1400);
+  });
+
+  it('does not jump when older entries are prepended without changing the latest id', () => {
+    const pane = makePane();
+    const ref = { current: pane };
+    const { rerender } = renderHook(() => useFollowLatest(ref, 'latest'));
+    scroll(pane, 200);
+    Object.defineProperty(pane, 'scrollHeight', { value: 1500 });
+    // The pagination caller restores its anchor after prepending an older page.
+    pane.scrollTop += 500;
+    rerender();
+    expect(pane.scrollTop).toBe(700);
+  });
+
+  it('follows a pane becoming visible but preserves a reader position on resize', () => {
+    const pane = makePane();
+    const ref = { current: pane };
+    renderHook(() => useFollowLatest(ref, 'latest'));
+    Object.defineProperty(pane, 'clientHeight', { value: 0 });
+    scroll(pane, 0);
+    Object.defineProperty(pane, 'clientHeight', { value: 200 });
+    act(() => resized());
+    expect(pane.scrollTop).toBe(1000);
+    scroll(pane, 200);
+    act(() => resized());
+    expect(pane.scrollTop).toBe(200);
+  });
+
+  it('waits for the first entry and cleans up the observer and listener', () => {
+    const pane = makePane();
+    const removeListener = vi.spyOn(pane, 'removeEventListener');
+    const ref = { current: pane };
+    const { rerender, unmount } = renderHook(({ id }: { id?: string }) => useFollowLatest(ref, id), { initialProps: {} });
+    expect(pane.scrollTop).toBe(0);
+    rerender({ id: 'first' });
+    expect(pane.scrollTop).toBe(1000);
+    unmount();
+    expect(disconnect).toHaveBeenCalledOnce();
+    expect(removeListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+});
diff --git a/packages/observer-dashboard/src/hooks/use-follow-latest.ts b/packages/observer-dashboard/src/hooks/use-follow-latest.ts
new file mode 100644
index 00000000..a0409204
--- /dev/null
+++ b/packages/observer-dashboard/src/hooks/use-follow-latest.ts
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, type RefObject } from 'react';
+
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+/** Follow incoming entries within this pane until the reader scrolls away. */
+export function useFollowLatest(scrollRef: RefObject<HTMLDivElement>, latestId?: string) {
+  const following = useRef(true);
+
+  useClientLayoutEffect(() => {
+    const pane = scrollRef.current;
+    if (pane && latestId && following.current) pane.scrollTop = pane.scrollHeight;
+  }, [latestId, scrollRef]);
+
+  useEffect(() => {
+    const pane = scrollRef.current;
+    if (!pane) return;
+    const onScroll = () => {
+      // Hidden responsive panes must not change the reader's follow preference.
+      if (pane.clientHeight > 0) {
+        following.current = pane.scrollHeight - pane.clientHeight - pane.scrollTop < 80;
+      }
+    };
+    const resize = new ResizeObserver(() => {
+      if (following.current && pane.clientHeight > 0) pane.scrollTop = pane.scrollHeight;
+    });
+    pane.addEventListener('scroll', onScroll, { passive: true });
+    resize.observe(pane);
+    return () => {
+      pane.removeEventListener('scroll', onScroll);
+      resize.disconnect();
+    };
+  }, [scrollRef]);
+}