@lapismd/design-core 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lapismd/design-core
 
+## 0.2.0
+
+### Minor Changes
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`737c657`](https://github.com/lapismd/design-core/commit/737c65727a6beaeb6955a652aba67c42b882b222) Thanks [@stevejuma](https://github.com/stevejuma)! - Add composable same-side App Shell panels, responsive main-surface replacement, transparent rails, external controller toggles, and structural surface layers.
+
+### Patch Changes
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Relicense the published Design Core package to Apache 2.0.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Tighten shared Tooltip padding and type so compact overlays no longer inherit oversized content chrome.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Expose controlled multi-file review state, host-owned line annotations, leading file headers, and gutter line actions. Diff helpers stay compatible with strict TypeScript consumers.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Keep mobile App Shell panels visible while focus moves between the trigger and the opened surface.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Add opt-in `MessageList` virtualization while keeping the default unvirtualized chat layout. History scrolling now preserves user intent across measurements, state saves, and parent updates.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Add shared dialog frames, inset large frames, and retryable confirmations. Portal updates keep dialog controls mounted, and dialog headings stay out of document landmarks.
+
+- [#7](https://github.com/lapismd/design-core/pull/7) [`80937e0`](https://github.com/lapismd/design-core/commit/80937e0f01e8dda50cbbed45da4948736ec3035b) Thanks [@stevejuma](https://github.com/stevejuma)! - Export shared `ToolCallDetail` presentation so hosts can render tool payloads, summaries, and expandable detail without forking chat markup.
+
 ## 0.1.2
 
 ### Patch Changes

package/LICENSE.md

@@ -1,4 +1,4 @@
-AGPL-3.0-or-later
+Apache-2.0
 
-This project is licensed under the GNU Affero General Public License v3.0 or later.
-See <https://www.gnu.org/licenses/agpl-3.0.en.html>.
+This project is licensed under the Apache License 2.0.
+See <https://www.apache.org/licenses/LICENSE-2.0>.

package/README.md

@@ -224,6 +224,26 @@ pnpm spec:search -- "tokens"
 pnpm spec:check
 ```
 
+### CI and local parity
+
+`pnpm checks` runs the nonvisual governance, quality, unit, Storybook, pointer,
+and AI browser lanes through Turbo. Governance, quality, and unit work executes
+concurrently with half the available processors, capped at four. Resource-heavy
+Storybook and browser suites run one at a time locally so catalog startup and
+interaction readiness remain deterministic; set `TURBO_CONCURRENCY` to a
+positive number or percentage to override the general task bound.
+
+Local task output is cached under `.turbo/`. The same tasks use the signed
+organization cache in CI and fail open to normal execution when it is
+unavailable. To use the remote cache locally, copy `.env.example` to the ignored
+root `.env` and provide `TURBO_TOKEN` and
+`TURBO_REMOTE_CACHE_SIGNATURE_KEY`. Never commit those credentials.
+
+CI fans the nine nonvisual lanes out in parallel, including separate Workspace,
+Shell, Shadcn, and AI browser runners. It runs full and production dependency
+audits after they pass and reports one stable `Validate` result. Visual
+comparison remains an explicit, separate command.
+
 ## Release and validation
 
 Common validation commands:

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lapismd/design-core",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Shared Lapis design system, forms, shell, and workspace primitives",
-  "license": "AGPL-3.0-or-later",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lapismd/design-core.git"
@@ -58,6 +58,7 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.2",
     "@lucide/svelte": "^1.21.0",
+    "@tanstack/svelte-virtual": "^3.13.39",
     "@types/luxon": "^3.4.2",
     "bits-ui": "^2.18.1",
     "chrono-node": "^2.10.1",
@@ -100,8 +101,8 @@
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "aria-query": "5.3.2",
     "execa": "^10.0.0",
     "highlight.js": "^11.11.1",
@@ -124,9 +125,10 @@
     "svelte-check": "^4.6.0",
     "tailwindcss": "^4.3.0",
     "tsx": "^4.23.1",
+    "turbo": "^2.5.4",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "zod": "^4.4.3"
   },
   "exports": {
@@ -226,7 +228,8 @@
     "./workspace/view-header": "./src/shared/workspace/view-header/index.ts",
     "./workspace/tokens": "./src/shared/workspace/workspace.tokens.ts",
     "./workspace/view-host": "./src/shared/workspace/view-host/index.ts",
-    "./workspace/workspace.tokens.css": "./src/shared/workspace/workspace.tokens.css"
+    "./workspace/workspace.tokens.css": "./src/shared/workspace/workspace.tokens.css",
+    "./forms/dialog": "./src/shared/forms/dialog.ts"
   },
   "scripts": {
     "storybook": "WATCHPACK_POLLING=250 node scripts/with-storybook-env.mjs node scripts/storybook-run.mjs",
@@ -234,9 +237,11 @@
     "storybook:stop": "node scripts/with-storybook-env.mjs bash scripts/storybook-stop.sh",
     "storybook:restart": "node scripts/with-storybook-env.mjs bash scripts/storybook-restart.sh",
     "storybook:check": "pnpm test:storybook && pnpm test:workspace:pointer && pnpm test:shell:pointer && pnpm test:shadcn:pointer && pnpm build-storybook && pnpm workspace:visual:audit",
-    "build-storybook": "node -e \"require('node:fs').mkdirSync('.visual-delta/cache',{recursive:true})\" && node --max-old-space-size=6144 ./node_modules/storybook/dist/bin/dispatcher.js build --stats-json .visual-delta/cache",
+    "build-storybook": "node --env-file-if-exists=.env scripts/run-turbo.mjs build:storybook",
+    "build:storybook": "node -e \"require('node:fs').mkdirSync('.visual-delta/cache',{recursive:true})\" && node --max-old-space-size=6144 ./node_modules/storybook/dist/bin/dispatcher.js build --stats-json .visual-delta/cache",
     "changeset": "changeset",
     "test:unit": "vitest run --project unit",
+    "test:turbo": "node --test scripts/concurrency.test.mjs scripts/turbo-cache-report.test.mjs",
     "test:storybook": "vitest run --project storybook",
     "test:storybook:watch": "vitest --project storybook",
     "spec:build": "spec-validator build",
@@ -278,14 +283,24 @@
     "ui:visual:tag": "tsx scripts/ui-generator/cli.ts visual:tag",
     "test-unit": "pnpm test:unit",
     "test-storybook": "pnpm test:storybook",
-    "check": "pnpm spec:validate && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && pnpm check:shell-consumer && pnpm check:filter-consumer && pnpm check:source-consumer",
+    "check": "pnpm spec:validate && pnpm check:types",
+    "check:types": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings && pnpm check:shell-consumer && pnpm check:filter-consumer && pnpm check:source-consumer",
     "check:filter-consumer": "svelte-check --tsconfig ./tsconfig.filter-consumer.json --fail-on-warnings",
     "check:shell-consumer": "svelte-check --tsconfig ./tsconfig.shell-consumer.json --fail-on-warnings",
     "check:source-consumer": "svelte-check --tsconfig ./tsconfig.source-consumer.json --fail-on-warnings",
     "fmt": "prettier . --write",
     "fmt:check": "prettier . --check",
     "check:no-tailwind": "tsx scripts/check-no-tailwind-utilities.ts",
-    "checks:nonvisual": "pnpm fmt:check && pnpm spec:check && pnpm check && pnpm check:no-tailwind && pnpm test:unit && pnpm test:storybook && pnpm test:workspace:pointer && pnpm test:shell:pointer && pnpm test:shadcn:pointer && pnpm build-storybook && pnpm workspace:visual:audit && pnpm test:ai-chat-browser",
+    "ci:governance": "pnpm spec:check",
+    "ci:quality": "pnpm fmt:check && pnpm check:types && pnpm check:no-tailwind",
+    "ci:unit": "pnpm test:unit && pnpm test:turbo",
+    "ci:storybook-static": "pnpm workspace:visual:audit -- --index=storybook-static/index.json",
+    "ci:storybook-interaction": "pnpm test:storybook",
+    "ci:browser-workspace": "pnpm test:workspace:pointer",
+    "ci:browser-shell": "pnpm test:shell:pointer",
+    "ci:browser-shadcn": "pnpm test:shadcn:pointer",
+    "ci:browser-ai": "pnpm test:ai-chat-browser",
+    "checks:nonvisual": "node --env-file-if-exists=.env scripts/run-turbo.mjs ci:governance ci:quality ci:unit --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:storybook-static --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:storybook-interaction --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-workspace --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-shell --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-ai --summarize && node --env-file-if-exists=.env scripts/run-turbo.mjs ci:browser-shadcn --summarize",
     "checks:release": "pnpm spec:check && pnpm check && pnpm check:no-tailwind && pnpm test:unit && pnpm build-storybook && pnpm workspace:visual:audit",
     "checks": "pnpm checks:nonvisual",
     "checks:visual": "pnpm checks:nonvisual && pnpm test:visual",

package/spec/src/styling-and-themes.md

@@ -186,3 +186,5 @@ refuses leftover utilities after native-CSS conversion.
 4. Stamp `data-ui-component` and `data-ui-part`.
 5. Document the tokens the component reads.
 6. Run `pnpm check:no-tailwind`, focused story checks, and the repository gate.
+
+Dialog recipes consume runtime container and text tokens explicitly defined in the theme so packaged consumers retain geometry without generating Tailwind utilities.

package/src/shared/ai/chat.css

@@ -1550,3 +1550,26 @@
     animation: none;
   }
 }
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-content"] {
+  position: relative;
+  flex: 0 0 auto;
+  width: 100%;
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-row"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: var(--ui-ai-chat-balanced-gap);
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"][data-density="compact"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-compact-gap);
+}
+[data-ui-component="ai-chat-message-list"][data-density="spacious"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-spacious-gap);
+}

package/src/shared/ai/chat.ts

@@ -12,6 +12,15 @@ export { default as SendButton } from "./send-button/SendButton.svelte";
 export { default as ComposerToken } from "./composer-token/ComposerToken.svelte";
 export { default as TokenizedText } from "./tokenized-text/TokenizedText.svelte";
 export { default as ToolCalls } from "./tool-calls/ToolCalls.svelte";
+export { default as ToolCallDetail } from "./tool-call-detail/ToolCallDetail.svelte";
+export {
+  isOneLineToolAlert,
+  presentToolPayload,
+  toolCallTarget,
+  type PresentedToolPayload,
+  type ToolPayloadHint,
+  type ToolPayloadLanguage,
+} from "./tool-call-detail/tool-call-detail.js";
 export { default as DictationButton } from "./dictation-button/DictationButton.svelte";
 
 export {
@@ -19,6 +28,7 @@ export {
   type ScrollBehavior,
   type ScrollToBottomOptions,
   type StreamScrollController,
+  type PositionedStreamScrollController,
   type StreamScrollOptions,
 } from "./stream-scroll.svelte.js";
 export {
@@ -68,3 +78,5 @@ export type {
   ToolCallStatus,
 } from "./types.js";
 export type { ComposerToken as ComposerTokenValue } from "./types.js";
+
+export type { MessageListPosition } from "./message-list/position.js";

package/src/shared/ai/context.svelte.ts

@@ -12,6 +12,8 @@ export type LayoutContextValue = {
   getScrollContainer: () => HTMLElement | null;
   setScrollContainer: (element: HTMLElement | null) => void;
   setContent: (element: HTMLElement | null) => void;
+  /** A virtual list owns row resize anchoring; the layout still owns scroll writes. */
+  setVirtualized?: (active: boolean) => void;
   streamScroll: StreamScrollController;
   newMessages: NewMessagesController;
 };

package/src/shared/ai/layout/Layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SparklesIcon from "@lucide/svelte/icons/sparkles";
-  import type { Snippet } from "svelte";
+  import { untrack, type Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import * as Empty from "@lapismd/design-core/shadcn/empty";
   import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
@@ -16,6 +16,12 @@
     scrollRef = $bindable(null),
     density = "balanced",
     isEmpty = false,
+    scrollMode = "stream",
+    conversationKey,
+    hasNewMessages: controlledNewMessages,
+    hasNewer = false,
+    onLoadLatest,
+    onViewportChange,
     emptyState,
     scrollButton,
     composer,
@@ -27,6 +33,13 @@
     scrollRef?: HTMLElement | null;
     density?: Density;
     isEmpty?: boolean;
+    /** Keep streaming scroll behavior by default; opt in to anchored cached-history navigation. */
+    scrollMode?: "stream" | "history";
+    conversationKey?: string;
+    hasNewMessages?: boolean;
+    hasNewer?: boolean;
+    onLoadLatest?: () => Promise<void>;
+    onViewportChange?: (state: { atLatest: boolean; active: boolean }) => void;
     emptyState?: Snippet;
     scrollButton?: Snippet<
       [
@@ -43,12 +56,20 @@
 
   let messageAreaRef = $state<HTMLElement | null>(null);
   let contentRef = $state<HTMLElement | null>(null);
-  const streamScroll = createStreamScroll();
+  let virtualized = false;
+  const streamScroll = createStreamScroll({
+    anchorOnResize: () => scrollMode === "history",
+  });
   const newMessages = createNewMessages({
+    deferResize: () => scrollMode === "history",
     isLocked: () => streamScroll.isLocked,
     onResize: () => {
-      streamScroll.scrollIfLocked();
-      streamScroll.update();
+      if (scrollMode === "history")
+        streamScroll.contentResized({ restoreAnchor: !virtualized });
+      else {
+        streamScroll.scrollIfLocked();
+        streamScroll.update();
+      }
     },
   });
 
@@ -57,10 +78,89 @@
     newMessages.attach(element);
   }
 
+  let pendingJump = false;
+  let jumpVersion = 0;
+  let priorConversationKey: string | undefined;
+  let conversationInitialized = false;
+  let jumpError = $state<string | undefined>();
+  let documentActive = $state(true);
+  const unread = $derived(controlledNewMessages ?? newMessages.hasNewMessages);
+  const showNewMessages = $derived(
+    unread && (!streamScroll.isLocked || hasNewer || !documentActive),
+  );
+  const showScrollButton = $derived(
+    streamScroll.isScrolledUp || showNewMessages || hasNewer,
+  );
   function scrollToBottom(): void {
-    streamScroll.scrollToBottom();
-    newMessages.dismiss();
+    if (pendingJump) return;
+    if (scrollMode === "stream" && !onLoadLatest) {
+      newMessages.dismiss();
+      streamScroll.scrollToBottom();
+      return;
+    }
+    const key = conversationKey;
+    const version = ++jumpVersion;
+    const revision = streamScroll.positionRevision;
+    pendingJump = true;
+    jumpError = undefined;
+    void (async () => {
+      try {
+        await onLoadLatest?.();
+        if (
+          key === conversationKey &&
+          version === jumpVersion &&
+          revision === streamScroll.positionRevision
+        )
+          streamScroll.scrollToBottom({
+            behavior: scrollMode === "history" ? "instant" : "spring",
+          });
+      } catch (cause) {
+        if (key === conversationKey && version === jumpVersion)
+          jumpError =
+            cause instanceof Error
+              ? cause.message
+              : "Could not load latest messages";
+      } finally {
+        if (version === jumpVersion) pendingJump = false;
+      }
+    })();
   }
+  $effect(() => {
+    const key = conversationKey;
+    untrack(() => {
+      if (conversationInitialized && key === priorConversationKey) return;
+      conversationInitialized = true;
+      priorConversationKey = key;
+      jumpVersion++;
+      pendingJump = false;
+      if (key === undefined) return;
+      newMessages.attach(contentRef ?? messageAreaRef);
+      streamScroll.attach(null);
+      streamScroll.attach(scrollRef);
+      jumpError = undefined;
+    });
+    return () => {
+      void key;
+    };
+  });
+  $effect(() => {
+    if (streamScroll.isLocked && !hasNewer && documentActive)
+      newMessages.dismiss();
+    const observation = {
+      atLatest: streamScroll.isLocked && !hasNewer,
+      active: documentActive,
+    };
+    const notify = onViewportChange;
+    untrack(() => notify?.(observation));
+  });
+  $effect(() => {
+    const update = () => {
+      documentActive = document.visibilityState !== "hidden";
+    };
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  });
 
   setLayoutContext({
     getScrollContainer: () => scrollRef,
@@ -69,6 +169,9 @@
       streamScroll.attach(element);
     },
     setContent,
+    setVirtualized(active) {
+      virtualized = active;
+    },
     streamScroll,
     newMessages,
   });
@@ -118,16 +221,19 @@
         {/if}
       </div>
     </ScrollArea>
+    {#if jumpError}<p role="alert" data-ui-part="history-error">
+        {jumpError}
+      </p>{/if}
     {#if scrollButton}
       {@render scrollButton({
-        isVisible: streamScroll.isScrolledUp || newMessages.hasNewMessages,
-        hasNewMessages: newMessages.hasNewMessages,
+        isVisible: showScrollButton,
+        hasNewMessages: showNewMessages,
         scrollToBottom,
       })}
     {:else}
       <LayoutScrollButton
-        isVisible={streamScroll.isScrolledUp || newMessages.hasNewMessages}
-        hasNewMessages={newMessages.hasNewMessages}
+        isVisible={showScrollButton}
+        hasNewMessages={showNewMessages}
         onClick={scrollToBottom}
       />
     {/if}

package/src/shared/ai/message-list/MessageList.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">
+<script lang="ts" generics="T extends { id: string }">
   import SparklesIcon from "@lucide/svelte/icons/sparkles";
   import { Spinner } from "@lapismd/design-core/shadcn/spinner";
   import { Button } from "@lapismd/design-core/shadcn/button";
   import * as Empty from "@lapismd/design-core/shadcn/empty";
-  import { tick, type Snippet } from "svelte";
+  import VirtualizedMessageRows from "./VirtualizedMessageRows.svelte";
+  import { tick, untrack, type Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import { setListContext, useLayoutContext } from "../context.svelte.js";
   import type { Density } from "../types.js";
+  import type { MessageListPosition } from "./position.js";
   import "../chat.css";
 
   let {
@@ -19,6 +21,19 @@
     scrollToTopAction,
     latestMessageId,
     children,
+    header,
+    footer,
+    items = [],
+    row,
+    virtualize = false,
+    overscan = 6,
+    estimateSize = 112,
+    conversationKey,
+    initialPosition,
+    onPositionChange,
+    retainRowIds = [],
+    hasOlder = true,
+    loading = false,
     "aria-label": ariaLabel = "Messages",
     ...restProps
   }: HTMLAttributes<HTMLDivElement> & {
@@ -30,13 +45,36 @@
     emptyState?: Snippet;
     scrollToTopAction?: () => Promise<void>;
     latestMessageId?: string;
-    children: Snippet;
+    children?: Snippet;
+    /** Content before and after the rows, including in a virtualized list. */
+    header?: Snippet;
+    footer?: Snippet;
+    items?: readonly T[];
+    row?: Snippet<[T, number]>;
+    /** Opt in to bounded row rendering and automatic older-page loading; defaults to false. */
+    virtualize?: boolean;
+    overscan?: number;
+    estimateSize?: number;
+    /** Scope restoration and arrivals to a conversation; existing unkeyed lists retain explicit arrival handling. */
+    conversationKey?: string;
+    initialPosition?: MessageListPosition;
+    onPositionChange?: (position: MessageListPosition) => void;
+    retainRowIds?: readonly string[];
+    hasOlder?: boolean;
+    loading?: boolean;
   } = $props();
 
   const layout = useLayoutContext();
+  const componentId = $props.id();
+  const errorId = `${componentId}-older-error`;
   let innerRef = $state<HTMLDivElement | null>(null);
   let loadingOlder = $state(false);
+  let loadVersion = 0;
   let loadError = $state<string | null>(null);
+  let arrivalKey: string | undefined;
+  let previousMessageId: string | undefined;
+  let historyKey: string | undefined;
+  let historyInitialized = false;
 
   setListContext({ getDensity: () => density });
 
@@ -44,28 +82,64 @@
     layout?.setContent(innerRef);
     return () => layout?.setContent(null);
   });
+  $effect(() => {
+    const key = conversationKey,
+      latest = latestMessageId;
+    if (
+      latest &&
+      (key === undefined ||
+        (arrivalKey === key && latest !== previousMessageId))
+    )
+      untrack(() => layout?.newMessages.notify(latest));
+    arrivalKey = key;
+    previousMessageId = latest;
+  });
 
   $effect(() => {
-    if (latestMessageId) layout?.newMessages.notify(latestMessageId);
+    const key = conversationKey;
+    if (historyInitialized && key === historyKey) return;
+    historyInitialized = true;
+    historyKey = key;
+    loadVersion++;
+    loadingOlder = false;
+    loadError = null;
   });
 
   async function loadOlder(): Promise<void> {
-    if (!scrollToTopAction || loadingOlder) return;
+    if (!scrollToTopAction || loadingOlder || loading || !hasOlder) return;
+    const key = conversationKey;
+    const version = loadVersion;
     loadingOlder = true;
     loadError = null;
-    const viewport = layout?.getScrollContainer() ?? null;
+    const viewport = layout?.getScrollContainer();
     const previousHeight = viewport?.scrollHeight ?? 0;
+    const revision = layout?.streamScroll.positionRevision;
+    const restore =
+      !virtualize && conversationKey !== undefined
+        ? layout?.streamScroll.captureAnchor?.()
+        : undefined;
     try {
       await scrollToTopAction();
       await tick();
-      if (viewport) {
-        viewport.scrollTop += viewport.scrollHeight - previousHeight;
+      if (key === conversationKey && version === loadVersion) {
+        if (restore) restore();
+        else if (
+          !virtualize &&
+          viewport &&
+          revision === layout?.streamScroll.positionRevision
+        )
+          layout?.streamScroll.scrollToOffset?.(
+            viewport.scrollTop + viewport.scrollHeight - previousHeight,
+            true,
+          );
       }
     } catch (error) {
-      loadError =
-        error instanceof Error ? error.message : "Could not load messages";
+      if (key === conversationKey && version === loadVersion)
+        loadError =
+          error instanceof Error ? error.message : "Could not load messages";
     } finally {
-      loadingOlder = false;
+      if (key === conversationKey && version === loadVersion)
+        loadingOlder = false;
     }
   }
 </script>
@@ -80,54 +154,60 @@
   aria-label={ariaLabel}
   aria-live="polite"
   aria-relevant="additions text"
-  aria-busy={isStreaming || loadingOlder}
+  aria-busy={isStreaming || loadingOlder || loading}
 >
   <div bind:this={innerRef} data-ui-part="list-inner" style:gap>
-    {#if scrollToTopAction}
+    {#if scrollToTopAction && hasOlder}
       <div data-ui-part="top-sentinel">
         <Button
           type="button"
           size="xs"
           variant="ghost"
-          disabled={loadingOlder}
-          aria-describedby={loadError ? "ai-chat-load-older-error" : undefined}
+          disabled={loadingOlder || loading}
+          aria-describedby={loadError ? errorId : undefined}
           onclick={loadOlder}
         >
-          {#if loadingOlder}
-            <Spinner />
-            Loading older messages
-          {:else}
-            Load older messages
-          {/if}
+          {#if loadingOlder || loading}<Spinner /> Loading older messages{:else if loadError}Retry
+            older messages{:else}Load older messages{/if}
         </Button>
       </div>
-      {#if loadError}
-        <p id="ai-chat-load-older-error" role="alert">{loadError}</p>
-      {/if}
+      {#if loadError}<p id={errorId} role="alert">{loadError}</p>{/if}
     {/if}
-
     <div data-ui-part="list-spacer" aria-hidden="true"></div>
-
+    {#if header}{@render header()}{/if}
     {#if isEmpty}
       <div data-ui-part="empty">
-        {#if emptyState}
-          {@render emptyState()}
-        {:else}
-          <Empty.Root>
-            <Empty.Header>
-              <Empty.Media variant="icon">
-                <SparklesIcon aria-hidden="true" />
-              </Empty.Media>
-              <Empty.Title>No messages yet</Empty.Title>
-              <Empty.Description>
-                The conversation will appear here.
-              </Empty.Description>
-            </Empty.Header>
-          </Empty.Root>
+        {#if emptyState}{@render emptyState()}{:else}
+          <Empty.Root
+            ><Empty.Header
+              ><Empty.Media variant="icon"
+                ><SparklesIcon aria-hidden="true" /></Empty.Media
+              ><Empty.Title>No messages yet</Empty.Title><Empty.Description
+                >The conversation will appear here.</Empty.Description
+              ></Empty.Header
+            ></Empty.Root
+          >
         {/if}
       </div>
-    {:else}
-      {@render children()}
-    {/if}
+    {:else if virtualize && row}
+      <VirtualizedMessageRows
+        {items}
+        {row}
+        {overscan}
+        {estimateSize}
+        conversationKey={conversationKey ?? ""}
+        {initialPosition}
+        {onPositionChange}
+        {retainRowIds}
+        {hasOlder}
+        loading={loadingOlder || loading}
+        onLoadOlder={loadOlder}
+      />
+    {:else if row}
+      {#each items as item, index (item.id)}<div data-message-id={item.id}>
+          {@render row(item, index)}
+        </div>{/each}
+    {:else if children}{@render children()}{/if}
+    {#if footer}{@render footer()}{/if}
   </div>
 </div>