@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/ai/message-list/position.ts

@@ -0,0 +1,7 @@
+/** A consumer-owned reading position, relative to a stable message row. */
+export interface MessageListPosition {
+  messageId: string;
+  index?: number;
+  offset: number;
+  atLatest: boolean;
+}

package/src/shared/ai/new-messages.svelte.ts

@@ -1,6 +1,10 @@
 export type NewMessagesOptions = {
   isLocked: () => boolean;
   onResize?: () => void;
+  /** Opt in to coalescing geometry work outside the ResizeObserver delivery. */
+  deferResize?: boolean | (() => boolean);
+  requestAnimationFrame?: typeof globalThis.requestAnimationFrame;
+  cancelAnimationFrame?: typeof globalThis.cancelAnimationFrame;
   createResizeObserver?: (
     callback: ResizeObserverCallback,
   ) => Pick<ResizeObserver, "observe" | "disconnect">;
@@ -19,8 +23,8 @@ export function createNewMessages(
 ): NewMessagesController {
   let element: HTMLElement | null = null;
   let observer: Pick<ResizeObserver, "observe" | "disconnect"> | null = null;
-  let initialized = false;
   let hasNewMessages = $state(false);
+  let resizeFrame = 0;
   const seenMessageIds = new Set<string>();
 
   const makeObserver =
@@ -44,20 +48,35 @@ export function createNewMessages(
 
     observer = makeObserver((entries) => {
       if (!entries.some((entry) => entry.target === element)) return;
-      if (!initialized) {
-        initialized = true;
+      const deferred =
+        typeof options.deferResize === "function"
+          ? options.deferResize()
+          : options.deferResize;
+      if (!deferred) {
+        options.onResize?.();
         return;
       }
-      markNew();
+      if (resizeFrame) return;
+      const current = element;
+      resizeFrame = (options.requestAnimationFrame ?? requestAnimationFrame)(
+        () => {
+          resizeFrame = 0;
+          if (element === current) options.onResize?.();
+        },
+      );
     });
     observer?.observe(element);
   }
 
   function cleanup(): void {
+    if (resizeFrame)
+      (options.cancelAnimationFrame ?? cancelAnimationFrame)(resizeFrame);
+    resizeFrame = 0;
     observer?.disconnect();
     observer = null;
     element = null;
-    initialized = false;
+    hasNewMessages = false;
+    seenMessageIds.clear();
   }
 
   return {

package/src/shared/ai/stream-scroll.svelte.ts

@@ -2,6 +2,8 @@ export type ScrollBehavior = "instant" | "spring";
 
 export type StreamScrollOptions = {
   enabled?: boolean;
+  /** Opt in to preserving a visible row during content resizing. */
+  anchorOnResize?: boolean | (() => boolean);
   lockThreshold?: number;
   buttonThreshold?: number;
   damping?: number;
@@ -17,6 +19,11 @@ export type ScrollToBottomOptions = {
 };
 
 export type StreamScrollController = {
+  /** Optional positioning extensions keep existing custom controllers assignable. */
+  readonly positionRevision?: number;
+  scrollToOffset?: (offset: number, preserveIntent?: boolean) => void;
+  captureAnchor?: () => () => void;
+  contentResized?: (options?: { restoreAnchor?: boolean }) => void;
   readonly isScrolledUp: boolean;
   readonly isLocked: boolean;
   attach: (element: HTMLElement | null) => void;
@@ -30,6 +37,14 @@ export type StreamScrollController = {
   unlock: () => void;
 };
 
+export type PositionedStreamScrollController = StreamScrollController &
+  Required<
+    Pick<
+      StreamScrollController,
+      "positionRevision" | "scrollToOffset" | "captureAnchor" | "contentResized"
+    >
+  >;
+
 function reducedMotionDefault(): boolean {
   return (
     typeof window !== "undefined" &&
@@ -55,9 +70,10 @@ function defaultCaf(id: number): void {
 
 export function createStreamScroll(
   options: StreamScrollOptions = {},
-): StreamScrollController {
+): PositionedStreamScrollController {
   const {
     enabled = true,
+    anchorOnResize = false,
     lockThreshold = 24,
     buttonThreshold = 80,
     damping = 26,
@@ -72,6 +88,12 @@ export function createStreamScroll(
   let frame = 0;
   let lastTime = 0;
   let velocity = 0;
+  let positionRevision = 0;
+  let restoreAnchor: (() => void) | undefined;
+  let pendingUserScroll = false;
+  let adjustedScrollTop: number | undefined;
+  const anchorsEnabled = () =>
+    typeof anchorOnResize === "function" ? anchorOnResize() : anchorOnResize;
   let isLocked = $state(true);
   let isScrolledUp = $state(false);
 
@@ -90,7 +112,7 @@ export function createStreamScroll(
     }
     const distance = distanceFromBottom();
     isScrolledUp = distance > buttonThreshold;
-    isLocked = distance <= lockThreshold;
+    isLocked = !pendingUserScroll && distance <= lockThreshold;
   }
 
   function stopAnimation(): void {
@@ -109,6 +131,7 @@ export function createStreamScroll(
       0,
       element.scrollHeight - element.clientHeight,
     );
+    pendingUserScroll = false;
     isLocked = true;
     isScrolledUp = false;
   }
@@ -149,6 +172,8 @@ export function createStreamScroll(
     behavior = "spring",
   }: ScrollToBottomOptions = {}): void {
     if (!element || !enabled) return;
+    positionRevision++;
+    restoreAnchor = undefined;
     if (behavior === "instant" || prefersReducedMotion()) {
       jumpToBottom();
       return;
@@ -156,14 +181,83 @@ export function createStreamScroll(
     springToBottom();
   }
 
+  function captureAnchor(): () => void {
+    const viewport = element;
+    const revision = positionRevision;
+    const top = viewport?.getBoundingClientRect().top ?? 0;
+    const anchor = [
+      ...(viewport?.querySelectorAll<HTMLElement>(
+        "[data-message-id], [data-ui-component='ai-chat-message']",
+      ) ?? []),
+    ].find((row) => row.getBoundingClientRect().bottom > top);
+    const offset = anchor ? anchor.getBoundingClientRect().top - top : 0;
+    const height = viewport?.scrollHeight ?? 0;
+    const scrollTop = viewport?.scrollTop ?? 0;
+    return () => {
+      if (
+        !viewport ||
+        viewport !== element ||
+        revision !== positionRevision ||
+        isLocked
+      )
+        return;
+      if (anchor?.isConnected)
+        viewport.scrollTop +=
+          anchor.getBoundingClientRect().top -
+          viewport.getBoundingClientRect().top -
+          offset;
+      else viewport.scrollTop = scrollTop + viewport.scrollHeight - height;
+      update();
+    };
+  }
+
   function handleScroll(): void {
+    if (
+      adjustedScrollTop !== undefined &&
+      element?.scrollTop === adjustedScrollTop
+    ) {
+      adjustedScrollTop = undefined;
+      isScrolledUp = distanceFromBottom() > buttonThreshold;
+      return;
+    }
+    adjustedScrollTop = undefined;
+    pendingUserScroll = false;
     update();
+    restoreAnchor = !isLocked && anchorsEnabled() ? captureAnchor() : undefined;
   }
 
   function handleUserScrollIntent(): void {
+    adjustedScrollTop = undefined;
+    positionRevision++;
+    if (anchorsEnabled()) {
+      pendingUserScroll = true;
+      isLocked = false;
+    }
+    restoreAnchor = undefined;
+    if (frame) stopAnimation();
+  }
+
+  function handlePointerIntent(): void {
+    positionRevision++;
+    restoreAnchor = undefined;
     if (frame) stopAnimation();
   }
 
+  function handleKeydown(event: KeyboardEvent): void {
+    if (
+      [
+        "ArrowUp",
+        "ArrowDown",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End",
+        " ",
+      ].includes(event.key)
+    )
+      handleUserScrollIntent();
+  }
+
   function attach(next: HTMLElement | null): void {
     if (element === next) return;
     cleanup();
@@ -175,26 +269,60 @@ export function createStreamScroll(
     element?.addEventListener("touchstart", handleUserScrollIntent, {
       passive: true,
     });
-    element?.addEventListener("pointerdown", handleUserScrollIntent, {
+    element?.addEventListener("pointerdown", handlePointerIntent, {
       passive: true,
     });
+    element?.addEventListener("keydown", handleKeydown);
     if (element && enabled) {
+      const revision = positionRevision;
       raf(() => {
-        if (element === next) jumpToBottom();
+        if (element === next && revision === positionRevision) jumpToBottom();
       });
     }
   }
 
   function cleanup(): void {
     element?.removeEventListener("scroll", handleScroll);
+    element?.removeEventListener("keydown", handleKeydown);
     element?.removeEventListener("wheel", handleUserScrollIntent);
     element?.removeEventListener("touchstart", handleUserScrollIntent);
-    element?.removeEventListener("pointerdown", handleUserScrollIntent);
+    element?.removeEventListener("pointerdown", handlePointerIntent);
     stopAnimation();
+    positionRevision++;
+    pendingUserScroll = false;
+    adjustedScrollTop = undefined;
+    restoreAnchor = undefined;
     element = null;
   }
 
   return {
+    get positionRevision() {
+      return positionRevision;
+    },
+    captureAnchor,
+    contentResized({ restoreAnchor: shouldRestore = true } = {}) {
+      if (isLocked) {
+        jumpToBottom();
+        update();
+      } else {
+        if (shouldRestore && anchorsEnabled()) restoreAnchor?.();
+        // Geometry changes cannot acknowledge that the reader returned to latest.
+        isLocked = false;
+        isScrolledUp = distanceFromBottom() > buttonThreshold;
+      }
+    },
+    scrollToOffset(offset, preserveIntent = false) {
+      if (!element) return;
+      if (!preserveIntent) positionRevision++;
+      stopAnimation();
+      element.scrollTop = Math.max(0, offset);
+      if (preserveIntent) {
+        // A measurement correction can clamp against the previous DOM height.
+        // It must not relock following before the resized rows have rendered.
+        adjustedScrollTop = element.scrollTop;
+        isScrolledUp = distanceFromBottom() > buttonThreshold;
+      } else update();
+    },
     get isScrolledUp() {
       return isScrolledUp;
     },
@@ -208,6 +336,7 @@ export function createStreamScroll(
     scrollToMessage(message) {
       if (!element) return;
       stopAnimation();
+      positionRevision++;
       const offset =
         message.getBoundingClientRect().top -
         element.getBoundingClientRect().top +
@@ -226,7 +355,7 @@ export function createStreamScroll(
       if (last) this.scrollToMessage(last);
     },
     scrollIfLocked() {
-      if (isLocked) scrollToBottom({ behavior: "instant" });
+      if (isLocked) jumpToBottom();
     },
     lock() {
       isLocked = true;

package/src/shared/ai/tool-call-detail/ToolCallDetail.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { CodeBlock } from "@lapismd/design-core/shadcn/code-block";
+  import {
+    isOneLineToolAlert,
+    presentToolPayload,
+  } from "./tool-call-detail.js";
+
+  let {
+    input,
+    output,
+    error,
+    toolName,
+  }: {
+    input?: string;
+    output?: string;
+    error?: string;
+    toolName?: string;
+  } = $props();
+
+  const hint = $derived({
+    ...(toolName === undefined ? {} : { toolName }),
+    ...(input === undefined ? {} : { input }),
+  });
+  const inputPayload = $derived(presentToolPayload(input));
+  const outputPayload = $derived(presentToolPayload(output, hint));
+  const errorPayload = $derived(presentToolPayload(error, hint));
+</script>
+
+<div data-ui-component="ai-chat-tool-call-detail" data-ui-part="root">
+  {#if inputPayload}
+    <CodeBlock
+      code={inputPayload.code}
+      language={inputPayload.language}
+      title="Input"
+      size="sm"
+      width="full"
+      isWrapped
+      maxHeight="16rem"
+    />
+  {/if}
+  {#if outputPayload}
+    <CodeBlock
+      code={outputPayload.code}
+      language={outputPayload.language}
+      title="Output"
+      size="sm"
+      width="full"
+      isWrapped
+      maxHeight="16rem"
+    />
+  {/if}
+  {#if errorPayload && !isOneLineToolAlert(errorPayload)}
+    <CodeBlock
+      code={errorPayload.code}
+      language={errorPayload.language}
+      title="Error"
+      size="sm"
+      width="full"
+      isWrapped
+      maxHeight="16rem"
+    />
+  {/if}
+</div>
+
+<style>
+  [data-ui-component="ai-chat-tool-call-detail"] {
+    display: grid;
+    gap: 0.75rem;
+    min-width: 0;
+  }
+</style>

package/src/shared/ai/tool-call-detail/tool-call-detail.ts

@@ -0,0 +1,209 @@
+export type ToolPayloadLanguage = "json" | "bash" | "plaintext";
+
+export type PresentedToolPayload = {
+  code: string;
+  language: ToolPayloadLanguage;
+};
+
+export type ToolPayloadHint = {
+  toolName?: string;
+  input?: string;
+};
+
+const SUMMARY_KEYS = [
+  "command",
+  "path",
+  "file",
+  "query",
+  "url",
+  "pattern",
+  "target",
+] as const;
+const PRIMARY_KEYS = [
+  "output",
+  "content",
+  "text",
+  "result",
+  "stdout",
+  "aggregated",
+] as const;
+const METADATA_KEYS = new Set([
+  "ok",
+  "status",
+  "success",
+  "isError",
+  "server",
+  "tool",
+  "name",
+]);
+const STRUCTURAL_SIBLINGS = new Set([
+  "path",
+  "command",
+  "query",
+  "file",
+  "url",
+  "pattern",
+  "target",
+  "locations",
+]);
+const RUNNER_TOOL_NAMES = new Set([
+  "bash",
+  "sh",
+  "shell",
+  "exec",
+  "command",
+  "terminal",
+  "run",
+]);
+const MAX_PARSE_DEPTH = 3;
+
+export function presentToolPayload(
+  value?: string,
+  hint?: ToolPayloadHint,
+): PresentedToolPayload | undefined {
+  if (value == null || value === "") return undefined;
+  const extracted = extractDisplayValue(value, 0);
+  if (extracted == null || extracted === "") return undefined;
+  if (isRecord(extracted) || Array.isArray(extracted)) {
+    return { code: JSON.stringify(extracted, null, 2), language: "json" };
+  }
+  const text = String(extracted);
+  if (!text) return undefined;
+  return { code: text, language: detectTextLanguage(text, hint) };
+}
+
+export function isOneLineToolAlert(payload: PresentedToolPayload): boolean {
+  return payload.language === "plaintext" && !payload.code.includes("\n");
+}
+
+export function toolCallTarget(
+  input?: string,
+  server?: string,
+): string | undefined {
+  const summary = summarizeToolInput(input);
+  return summary || server || undefined;
+}
+
+function extractDisplayValue(value: unknown, depth: number): unknown {
+  const parsed = tryParseJson(value);
+  if (parsed === undefined) return value;
+  if (typeof parsed === "string") {
+    return depth + 1 >= MAX_PARSE_DEPTH
+      ? parsed
+      : extractDisplayValue(parsed, depth + 1);
+  }
+  if (Array.isArray(parsed) || !isRecord(parsed)) return parsed;
+  const mcpText = mcpContentText(parsed);
+  if (mcpText != null) return extractDisplayValue(mcpText, depth + 1);
+  const unwrapped = unwrapEnvelope(parsed);
+  return unwrapped === undefined
+    ? parsed
+    : extractDisplayValue(unwrapped, depth + 1);
+}
+
+function tryParseJson(value: unknown): unknown {
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+  if (
+    !trimmed.startsWith("{") &&
+    !trimmed.startsWith("[") &&
+    !trimmed.startsWith('"')
+  )
+    return undefined;
+  try {
+    return JSON.parse(trimmed);
+  } catch {
+    return undefined;
+  }
+}
+
+function unwrapEnvelope(record: Record<string, unknown>): unknown {
+  const primary = PRIMARY_KEYS.find(
+    (key) => record[key] != null && record[key] !== "",
+  );
+  if (!primary) return undefined;
+  if (
+    Object.keys(record).some(
+      (key) => key !== primary && !METADATA_KEYS.has(key),
+    )
+  )
+    return undefined;
+  return record[primary];
+}
+
+function mcpContentText(record: Record<string, unknown>): string | undefined {
+  if (!Array.isArray(record.content) || record.content.length === 0) return;
+  const rest = Object.keys(record).filter((key) => key !== "content");
+  if (
+    rest.some((key) => STRUCTURAL_SIBLINGS.has(key) || !METADATA_KEYS.has(key))
+  )
+    return;
+  const parts = record.content.flatMap((entry) => {
+    if (typeof entry === "string" && entry) return [entry];
+    if (isRecord(entry) && typeof entry.text === "string" && entry.text)
+      return [entry.text];
+    return [];
+  });
+  return parts.length ? parts.join("\n") : undefined;
+}
+
+function detectTextLanguage(
+  text: string,
+  hint?: ToolPayloadHint,
+): ToolPayloadLanguage {
+  if (isRunnerToolName(hint?.toolName) || hasCommandInput(hint?.input))
+    return "bash";
+  if (
+    text.includes("\n") ||
+    /^[$%] /u.test(text.trim()) ||
+    /\b(?:stderr|exit \d+)\b/iu.test(text)
+  )
+    return "bash";
+  return "plaintext";
+}
+
+function isRunnerToolName(name?: string): boolean {
+  if (!name) return false;
+  const normalized = name.trim().toLowerCase();
+  const leaf = normalized.split(/[:/]/u).at(-1);
+  return (
+    RUNNER_TOOL_NAMES.has(normalized) ||
+    (leaf != null && RUNNER_TOOL_NAMES.has(leaf))
+  );
+}
+
+function hasCommandInput(input?: string): boolean {
+  if (!input) return false;
+  try {
+    const parsed: unknown = JSON.parse(input);
+    return (
+      isRecord(parsed) &&
+      typeof parsed.command === "string" &&
+      !!parsed.command.trim()
+    );
+  } catch {
+    return false;
+  }
+}
+
+function summarizeToolInput(input?: string): string | undefined {
+  if (!input) return;
+  try {
+    const parsed: unknown = JSON.parse(input);
+    if (!isRecord(parsed)) return;
+    for (const key of SUMMARY_KEYS) {
+      if (typeof parsed[key] === "string" && parsed[key]) return parsed[key];
+    }
+    if (Array.isArray(parsed.locations)) {
+      const first = parsed.locations.find(isRecord);
+      if (first && typeof first.path === "string") return first.path;
+    }
+  } catch {
+    return;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value != null && typeof value === "object" && !Array.isArray(value);
+}

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

@@ -141,7 +141,7 @@
   >
     {#if !hasMultipleCalls}
       <ul data-ui-part="call-list" data-single-call>
-        {@render callRow(calls[0], 0)}
+        {@render callRow(calls[0]!, 0)}
       </ul>
     {:else}
       <Collapsible.Root open={expanded} onOpenChange={setExpanded}>

package/src/shared/ai/trigger-menu.ts

@@ -40,9 +40,8 @@ export function nearestClipBottom(
   let bottom = viewportHeight;
   let current = element?.parentElement ?? null;
   while (current) {
-    const overflowY = current.ownerDocument.defaultView
-      ?.getComputedStyle(current)
-      .overflowY;
+    const overflowY =
+      current.ownerDocument.defaultView?.getComputedStyle(current).overflowY;
     if (overflowY && CLIPPING_OVERFLOW.has(overflowY)) {
       bottom = Math.min(bottom, current.getBoundingClientRect().bottom);
     }

package/src/shared/diff/core/merge/actions.ts

@@ -32,7 +32,7 @@ function blockRangeForIndex(
   }
   for (let rangeIndex = ranges.length - 1; rangeIndex >= 0; rangeIndex -= 1) {
     const range = ranges[rangeIndex];
-    if (range.end <= index) {
+    if (range && range.end <= index) {
       return range;
     }
   }
@@ -59,6 +59,7 @@ function replaceCenterContent(model: MergeModel, content: string): MergeModel {
   let lineIndex = 0;
   for (let blockIndex = 0; blockIndex < model.blocks.length; blockIndex += 1) {
     const block = model.blocks[blockIndex];
+    if (!block) continue;
     const start = lineIndex;
     lineIndex += linesFromBlock(block, "base").length;
     ranges.push({ blockIndex, start, end: lineIndex });
@@ -69,7 +70,7 @@ function replaceCenterContent(model: MergeModel, content: string): MergeModel {
     if (op.kind === "same") {
       const range = blockRangeForIndex(ranges, currentIndex);
       if (range) {
-        linesByBlock[range.blockIndex].push(op.right);
+        linesByBlock[range.blockIndex]?.push(op.right);
       }
       currentIndex += 1;
     } else if (op.kind === "left") {
@@ -77,7 +78,7 @@ function replaceCenterContent(model: MergeModel, content: string): MergeModel {
     } else {
       const range = blockRangeForIndex(ranges, currentIndex);
       if (range) {
-        linesByBlock[range.blockIndex].push(op.value);
+        linesByBlock[range.blockIndex]?.push(op.value);
       }
     }
   }

package/src/shared/diff/core/merge/render-model.ts

@@ -67,7 +67,7 @@ function isPendingNavigationComponent(component: RenderComponent): boolean {
 function preferPendingComponent(
   candidates: readonly RenderComponent[],
 ): RenderComponent {
-  return (
+  const preferred =
     candidates.find(
       (component) =>
         component.side === "left" && component.action?.kind === "merge",
@@ -76,8 +76,11 @@ function preferPendingComponent(
       (component) =>
         component.side === "right" && component.action?.kind === "merge",
     ) ??
-    candidates[0]
-  );
+    candidates[0];
+  if (!preferred) {
+    throw new Error("Pending merge navigation requires a component");
+  }
+  return preferred;
 }
 
 export function pendingMergeNavigationTargets(
@@ -520,6 +523,13 @@ export function createMergeRenderModel(
         placeholder,
         workingCopyCenter,
       );
+      const action = actionFor(
+        block,
+        side,
+        visualKind,
+        model.mode,
+        workingCopyCenter,
+      );
       const component: RenderComponent = {
         id: `${block.id}:${side}`,
         blockId: block.id,
@@ -534,13 +544,7 @@ export function createMergeRenderModel(
           side === "base" &&
           block.kind === "modified" &&
           centerIncludesMergedChange(block, workingCopyCenter),
-        action: actionFor(
-          block,
-          side,
-          visualKind,
-          model.mode,
-          workingCopyCenter,
-        ),
+        ...(action === undefined ? {} : { action }),
       };
       renderSides[side].push(component);
       blockComponents.set(side, component);