@lapismd/design-core 0.2.0 → 0.3.1

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Layout from "../layout/Layout.svelte";
+  import MessageList from "./MessageList.svelte";
+
+  const items = Array.from({ length: 200 }, (_, index) => ({
+    id: `estimate-${index}`,
+    label: `Estimated row ${index}`,
+  }));
+  let firstDetail = $state(false);
+  const estimate = $derived.by(() => {
+    const detail = firstDetail;
+    return (_item: (typeof items)[number], index: number) =>
+      detail && index === 0 ? 864 : 64;
+  });
+</script>
+
+<Button onclick={() => (firstDetail = true)}>Load first message detail</Button>
+<div
+  style="height: 420px; max-width: 40rem; display: flex; flex-direction: column;"
+>
+  <Layout scrollMode="history" conversationKey="estimate-updates">
+    {#snippet composer()}<span>Conversation composer</span>{/snippet}
+    <MessageList
+      {items}
+      estimateSize={estimate}
+      retainRowIds={[]}
+      virtualize
+      conversationKey="estimate-updates"
+    >
+      {#snippet row(item, index)}<div
+          data-story="estimated-row"
+          style:height={firstDetail && index === 0 ? "864px" : "64px"}
+        >
+          {item.label}
+          {#if firstDetail && index === 0}<span
+              >Loaded first message detail</span
+            >{/if}
+        </div>{/snippet}
+    </MessageList>
+  </Layout>
+</div>

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

@@ -5,7 +5,13 @@
   import Message from "../message/Message.svelte";
   import MessageBubble from "../message-bubble/MessageBubble.svelte";
   import type { MessageListPosition } from "./position.js";
-  let items = $state(
+
+  interface HistoryMessage {
+    id: string;
+    text: string;
+  }
+
+  let items = $state<HistoryMessage[]>(
     Array.from({ length: 1000 }, (_, index) => ({
       id: `message-${index}`,
       text: `Message ${index}: ${"Variable-height cached conversation content. ".repeat((index % 7) + 1)}`,
@@ -22,6 +28,10 @@
   let delay = $state(false);
   let statusUpdates = $state(0);
   let positionReports = $state(0);
+  function estimateHistoryRow(item: HistoryMessage) {
+    return 88 + Math.min(144, Math.ceil(item.text.length / 44) * 22);
+  }
+
   function append(incoming: boolean) {
     items = [
       ...items,
@@ -63,14 +73,12 @@
   >
     {#snippet composer()}<span>Conversation composer</span>{/snippet}
     <MessageList
-      {...{
-        items,
-        overscan: 6,
-        estimateSize: 112,
-        retainRowIds: [],
-        "data-status": statusUpdates,
-        "data-position-reports": positionReports,
-      }}
+      {items}
+      overscan={6}
+      estimateSize={estimateHistoryRow}
+      retainRowIds={[]}
+      data-status={statusUpdates}
+      data-position-reports={positionReports}
       virtualize
       conversationKey={presentation.key === key ? presentation.key : key}
       onPositionChange={(next) => {
@@ -95,7 +103,7 @@
         ];
       }}
     >
-      {#snippet row(item)}
+      {#snippet row(item: HistoryMessage)}
         <Message sender="user"
           ><MessageBubble>
             <p>{item.text}</p>

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

@@ -7,6 +7,8 @@
   import { onDestroy, tick, untrack, type Snippet } from "svelte";
   import { useLayoutContext } from "../context.svelte.js";
   import type { MessageListPosition } from "./position.js";
+  import { resolveMessageListEstimateSize } from "./estimate-size.js";
+  import type { MessageListEstimateSize } from "./estimate-size.js";
 
   let {
     items,
@@ -24,7 +26,7 @@
     items: readonly T[];
     row: Snippet<[T, number]>;
     overscan: number;
-    estimateSize: number;
+    estimateSize: MessageListEstimateSize<T>;
     conversationKey: string;
     initialPosition?: MessageListPosition | undefined;
     onPositionChange?: ((position: MessageListPosition) => void) | undefined;
@@ -45,23 +47,27 @@
   let paginationArmed = false;
   let lastTop = 0;
   let alive = true;
+  let positionReportPending = false;
+  let positionReportTimer: ReturnType<typeof setTimeout> | undefined;
   let priorConfiguration:
     | {
         key: string;
         items: readonly T[];
         margin: number;
-        size: number;
+        estimate: MessageListEstimateSize<T>;
         overscan: number;
         retained: string;
       }
     | undefined;
   onDestroy(() => {
+    flushPositionReport();
     alive = false;
   });
   const virtualizer = createVirtualizer<HTMLElement, HTMLDivElement>({
     count: 0,
     getScrollElement: () => layout?.getScrollContainer() ?? null,
-    estimateSize: () => estimateSize,
+    estimateSize: (index) =>
+      resolveMessageListEstimateSize(estimateSize, items[index], index),
     enabled: false,
     useAnimationFrameWithResizeObserver: true,
     scrollToFn: (offset, options) =>
@@ -103,6 +109,22 @@
     if (position) untrack(() => onPositionChange?.(position));
   }
 
+  function flushPositionReport(force = false) {
+    if (positionReportTimer !== undefined) {
+      clearTimeout(positionReportTimer);
+      positionReportTimer = undefined;
+    }
+    if (!positionReportPending && !force) return;
+    positionReportPending = false;
+    reportPosition();
+  }
+
+  function schedulePositionReport() {
+    positionReportPending = true;
+    if (positionReportTimer !== undefined) clearTimeout(positionReportTimer);
+    positionReportTimer = setTimeout(flushPositionReport, 100);
+  }
+
   function measure(node: HTMLDivElement) {
     untrack(() => get(virtualizer).measureElement(node));
     return {
@@ -122,15 +144,18 @@
     const extra = keep
       .map((id) => nextItems.findIndex((item) => item.id === id))
       .filter((index) => index >= 0);
-    const size = estimateSize,
+    const estimate = estimateSize,
       scan = overscan;
     untrack(() => {
       const retained = JSON.stringify(extra);
+      const estimateChanged =
+        priorConfiguration?.key === key &&
+        priorConfiguration.estimate !== estimate;
       if (
         priorConfiguration?.key === key &&
         priorConfiguration.items === nextItems &&
         priorConfiguration.margin === scrollMargin &&
-        priorConfiguration.size === size &&
+        priorConfiguration.estimate === estimate &&
         priorConfiguration.overscan === scan &&
         priorConfiguration.retained === retained
       )
@@ -139,7 +164,7 @@
         key,
         items: nextItems,
         margin: scrollMargin,
-        size,
+        estimate,
         overscan: scan,
         retained,
       };
@@ -155,7 +180,7 @@
       const restore = restoredKey !== key ? initialPosition : undefined;
       const preserve =
         sameKey &&
-        nextItems !== priorItems &&
+        (nextItems !== priorItems || estimateChanged) &&
         !layout?.streamScroll.isLocked &&
         oldItem;
       priorKey = key;
@@ -171,13 +196,29 @@
         scrollMargin,
         getScrollElement: () => layout?.getScrollContainer() ?? null,
         getItemKey: (index) => nextItems[index]!.id,
-        estimateSize: () => size,
+        estimateSize: (index) =>
+          resolveMessageListEstimateSize(estimate, nextItems[index], index),
         overscan: scan,
         rangeExtractor: (range) =>
           [...new Set([...defaultRangeExtractor(range), ...extra])].sort(
             (a, b) => a - b,
           ),
       });
+      if (estimateChanged) {
+        const mounted = [
+          ...(virtualRef?.querySelectorAll<HTMLDivElement>(
+            ':scope > [data-ui-part="virtual-row"]',
+          ) ?? []),
+        ].map((node) => ({
+          index: Number(node.dataset.index),
+          size: node.getBoundingClientRect().height,
+        }));
+        instance.measure();
+        // Rebuild the cleared range from the new estimator before restoring
+        // measurements for rows whose current DOM is still authoritative.
+        instance.getTotalSize();
+        mounted.forEach(({ index, size }) => instance.resizeItem(index, size));
+      }
       void tick().then(() => {
         if (!alive) return;
         if (
@@ -218,7 +259,7 @@
         }
         if (nextItems.length) {
           restoredKey = key;
-          reportPosition();
+          flushPositionReport(true);
         }
       });
     });
@@ -256,7 +297,7 @@
         void onLoadOlder?.();
       }
       lastTop = top;
-      reportPosition();
+      schedulePositionReport();
     };
     const rememberInteraction = (event: Event) => {
       const target = event.target;
@@ -264,13 +305,17 @@
         activeRowId =
           target.closest<HTMLElement>("[data-message-id]")?.dataset.messageId;
     };
+    const onScrollEnd = () => flushPositionReport();
     viewport.addEventListener("scroll", onScroll, { passive: true });
+    viewport.addEventListener("scrollend", onScrollEnd);
     viewport.addEventListener("focusin", rememberInteraction);
     viewport.addEventListener("pointerdown", rememberInteraction, {
       passive: true,
     });
     return () => {
+      flushPositionReport();
       viewport.removeEventListener("scroll", onScroll);
+      viewport.removeEventListener("scrollend", onScrollEnd);
       viewport.removeEventListener("focusin", rememberInteraction);
       viewport.removeEventListener("pointerdown", rememberInteraction);
     };

package/src/shared/ai/message-list/estimate-size.ts

@@ -0,0 +1,18 @@
+export type MessageListEstimateSize<T> =
+  | number
+  | ((item: T, index: number) => number);
+
+export function resolveMessageListEstimateSize<T>(
+  estimateSize: MessageListEstimateSize<T>,
+  item: T | undefined,
+  index: number,
+  fallback = 112,
+): number {
+  const candidate =
+    typeof estimateSize === "function" && item !== undefined
+      ? estimateSize(item, index)
+      : typeof estimateSize === "number"
+        ? estimateSize
+        : fallback;
+  return Number.isFinite(candidate) && candidate > 0 ? candidate : fallback;
+}

package/src/shared/ai/tool-calls/ToolCalls.svelte

@@ -2,10 +2,12 @@
   import CheckIcon from "@lucide/svelte/icons/check";
   import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
   import CircleAlertIcon from "@lucide/svelte/icons/circle-alert";
+  import CircleHelpIcon from "@lucide/svelte/icons/circle-help";
   import WrenchIcon from "@lucide/svelte/icons/wrench";
   import * as Collapsible from "@lapismd/design-core/shadcn/collapsible";
   import { Badge } from "@lapismd/design-core/shadcn/badge";
   import { Spinner } from "@lapismd/design-core/shadcn/spinner";
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import type { ToolCallItem, ToolCallStatus } from "../types.js";
   import "../chat.css";
@@ -17,10 +19,13 @@
     defaultExpanded = false,
     expanded = $bindable(defaultExpanded),
     onExpandedChange = () => {},
+    callWrapper,
     ...restProps
   }: HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     calls: ToolCallItem[];
+    /** Surround each call without replacing its presentation or disclosure. */
+    callWrapper?: Snippet<[ToolCallItem, Snippet]>;
     label?: string;
     defaultExpanded?: boolean;
     expanded?: boolean;
@@ -39,13 +44,15 @@
   }
 
   function statusLabel(status: ToolCallStatus = "pending"): string {
-    return status === "pending"
-      ? "Pending"
-      : status === "running"
-        ? "Running"
-        : status === "complete"
-          ? "Complete"
-          : "Error";
+    return status === "unknown"
+      ? "Status unavailable"
+      : status === "pending"
+        ? "Pending"
+        : status === "running"
+          ? "Running"
+          : status === "complete"
+            ? "Complete"
+            : "Error";
   }
 
   function setExpanded(open: boolean): void {
@@ -56,7 +63,9 @@
 
 {#snippet callStatus(status: ToolCallStatus)}
   <span data-ui-part="call-status" data-status={status}>
-    {#if status === "running" || status === "pending"}
+    {#if status === "unknown"}
+      <CircleHelpIcon aria-hidden="true" />
+    {:else if status === "running" || status === "pending"}
       <Spinner />
     {:else if status === "complete"}
       <span data-ui-part="status-circle" aria-hidden="true"></span>
@@ -72,7 +81,7 @@
 {#snippet callRow(call: ToolCallItem, index: number)}
   {@const id = callId(call, index)}
   {@const status = call.status ?? "pending"}
-  <li data-ui-part="call" data-status={status}>
+  {#snippet presentation()}
     <Collapsible.Root
       open={detailOpen[id] ?? false}
       onOpenChange={(open) => {
@@ -128,6 +137,13 @@
         </Collapsible.Content>
       {/if}
     </Collapsible.Root>
+  {/snippet}
+  <li data-ui-part="call" data-status={status}>
+    {#if callWrapper}
+      {@render callWrapper(call, presentation)}
+    {:else}
+      {@render presentation()}
+    {/if}
   </li>
 {/snippet}
 

package/src/shared/ai/types.ts

@@ -56,7 +56,13 @@ export type ComposerInputHandle = {
   expandToken: (id: string) => void;
 };
 
-export type ToolCallStatus = "pending" | "running" | "complete" | "error";
+/** `unknown` preserves observed activity when current execution status is unavailable. */
+export type ToolCallStatus =
+  | "pending"
+  | "running"
+  | "complete"
+  | "error"
+  | "unknown";
 
 export type ToolCallItem = {
   id?: string;

package/src/shared/diff/core/file-tree.ts

@@ -5,6 +5,11 @@ export interface FileTreeNode {
   children: FileTreeNode[];
 }
 
+export interface FileTreeEntry {
+  path: string;
+  type: "file" | "directory";
+}
+
 export function getFilePathName(path: string): string {
   return path.split("/").filter(Boolean).at(-1) ?? path;
 }
@@ -14,10 +19,16 @@ export function getFileDirectory(path: string): string {
 }
 
 export function buildFileTree(paths: string[]): FileTreeNode[] {
+  return buildFileEntryTree(paths.map((path) => ({ path, type: "file" })));
+}
+
+export function buildFileEntryTree(
+  entries: readonly FileTreeEntry[],
+): FileTreeNode[] {
   const root: FileTreeNode[] = [];
 
-  for (const rawPath of paths) {
-    const parts = rawPath.split("/").filter(Boolean);
+  for (const entry of entries) {
+    const parts = entry.path.split("/").filter(Boolean);
     let currentLevel = root;
     let currentPath = "";
 
@@ -25,15 +36,18 @@ export function buildFileTree(paths: string[]): FileTreeNode[] {
       currentPath = currentPath ? `${currentPath}/${part}` : part;
       const isLeaf = index === parts.length - 1;
 
+      const type = isLeaf ? entry.type : "directory";
       let node = currentLevel.find((candidate) => candidate.name === part);
       if (!node) {
         node = {
           name: part,
           path: currentPath,
-          type: isLeaf ? "file" : "directory",
+          type,
           children: [],
         };
         currentLevel.push(node);
+      } else if (type === "directory" || node.children.length > 0) {
+        node.type = "directory";
       }
 
       if (!isLeaf) {
@@ -57,6 +71,14 @@ export function buildFileTree(paths: string[]): FileTreeNode[] {
 }
 
 export function buildPackageFileTree(paths: string[]): FileTreeNode[] {
+  return buildPackageFileEntryTree(
+    paths.map((path) => ({ path, type: "file" })),
+  );
+}
+
+export function buildPackageFileEntryTree(
+  entries: readonly FileTreeEntry[],
+): FileTreeNode[] {
   function compactNode(node: FileTreeNode): FileTreeNode {
     let current: FileTreeNode = {
       ...node,
@@ -79,5 +101,5 @@ export function buildPackageFileTree(paths: string[]): FileTreeNode[] {
     return current;
   }
 
-  return buildFileTree(paths).map(compactNode);
+  return buildFileEntryTree(entries).map(compactNode);
 }

package/src/shared/diff/diff.tokens.css

@@ -45,6 +45,7 @@
   --ui-diff-surface: var(--ui-workspace-view-background, var(--background));
   --ui-diff-gutter-wash: color-mix(in srgb, var(--muted) 76%, transparent);
   --ui-diff-mono: var(--font-mono, ui-monospace, monospace);
+  --ui-diff-file-listing-row-gap: 2px;
   --ui-diff-row-hover: color-mix(in srgb, var(--muted) 40%, transparent);
   --ui-diff-selected: var(
     --ui-workspace-selection,
@@ -57,3 +58,9 @@
   --ui-diff-stat-added: oklch(0.42 0.12 145);
   --ui-diff-stat-removed: oklch(0.48 0.19 25);
 }
+
+.dark,
+.dark .ui-diff {
+  --ui-diff-stat-added: oklch(0.8 0.14 145);
+  --ui-diff-stat-removed: oklch(0.76 0.16 25);
+}

package/src/shared/diff/file-diff/FileDiff.css

@@ -299,3 +299,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Syntax palette colors intended for the plain surface cannot guarantee
+   readable contrast on changed rows or their stacked intraline washes. */
+.ui-diff-file-diff__row:is([data-variant="added"], [data-variant="removed"])
+  .ui-diff-file-diff__text
+  [class^="ui-code-token-"],
+.ui-diff-file-diff__text [data-tone] [class^="ui-code-token-"] {
+  color: var(--ui-diff-changed-syntax-foreground, var(--foreground));
+}

package/src/shared/diff/file-diff/FileDiff.svelte

@@ -32,6 +32,8 @@
 
   let {
     path,
+    label,
+    scrollStrategy = "auto",
     oldText = null,
     newText = null,
     patch,
@@ -43,6 +45,10 @@
     lineAnnotation,
   }: {
     path: string;
+    /** Optional context that distinguishes split panes in multi-diff layouts. */
+    label?: string;
+    /** Overrides the host default for both unified and split pane scrollbars. */
+    scrollStrategy?: ScrollArea.ScrollAreaStrategy;
     oldText?: string | null;
     newText?: string | null;
     /** Unified patch used when old/new texts are omitted. */
@@ -347,11 +353,10 @@
           class="ui-diff-file-diff__pane"
           data-ui-part="file-diff-pane"
           data-side={paneSide}
-          aria-label={paneSide === "left"
-            ? "Previous revision"
-            : "Later revision"}
+          aria-label={`${label ? `${label} · ` : ""}${paneSide === "left" ? "Previous revision" : "Later revision"}`}
         >
           <ScrollArea.Root
+            {scrollStrategy}
             class="ui-diff-file-diff__pane-scroll"
             type="auto"
             orientation={wrap ? "vertical" : "both"}
@@ -371,6 +376,7 @@
     </div>
   {:else}
     <ScrollArea.Root
+      {scrollStrategy}
       class="ui-diff-file-diff__scroll"
       type="auto"
       orientation={wrap ? "vertical" : "both"}

package/src/shared/diff/file-listing/FileListing.css

@@ -8,6 +8,11 @@
   font-size: 0.8125rem;
 }
 
+/* Split spacing around eager rows; measured wrappers own virtual spacing. */
+.ui-diff-file-listing > .ui-diff-file-listing__row {
+  margin-block: calc(var(--ui-diff-file-listing-row-gap) / 2);
+}
+
 .ui-diff-file-listing__empty {
   margin: 0;
   padding: 1.5rem 0.5rem;