@sovereignfs/ui 0.54.0 → 0.83.1

package/src/components/Markdown/Markdown.tsx

@@ -1,20 +1,65 @@
-import type { ReactNode } from 'react';
+import { Fragment, type ReactNode } from 'react';
 import { Typography } from '../Typography/Typography';
 import styles from './Markdown.module.css';
 
 export interface MarkdownProps {
-  /** Raw markdown source. Supports the subset used by Sovereign's own
-   * long-form content pages: headings (#/##/###), paragraphs, **bold**,
-   * *italic*, `code`, [links](url), unordered lists (-), and blockquotes
-   * (>), including soft-wrapped continuation lines within a paragraph or
-   * list item. Not a general-purpose CommonMark parser — no tables,
-   * images, ordered lists, or nested blocks. */
+  /** Raw markdown source. Supports: headings (#/##/###), paragraphs,
+   * **bold**, *italic*, `code`, [links](url), unordered lists (-), ordered
+   * lists (1. / 1)), fenced code blocks (```), and blockquotes (>),
+   * including soft-wrapped continuation lines within a paragraph or list
+   * item. Not a general-purpose CommonMark parser — no tables, images, or
+   * nested blocks. */
   content: string;
+  /** Renders every line within a paragraph on its own visual line (a
+   * `<br>` between them) instead of the default CommonMark-style soft-wrap
+   * (consecutive lines joined with a single space, requiring a blank line
+   * for a new paragraph). Off by default — the soft-wrap behavior is
+   * correct for this component's primary use (long-form, first-party
+   * content authored *as* markdown, where a hard line break is a
+   * deliberate `\`  ` or blank-line choice). Turn this on when rendering
+   * plain, user-typed multi-line text that happens to be passed through
+   * this component (e.g. a card description or comment body edited in an
+   * ordinary `<textarea>`) — there, every Enter press is a real,
+   * intentional line break the user typed, and silently collapsing it
+   * into one run-on paragraph reads as broken, not as "markdown
+   * formatting applied." */
+  preserveLineBreaks?: boolean;
   className?: string;
 }
 
 let inlineKey = 0;
 
+/** Schemes allowed in a rendered `[text](url)` link's `href`. Anything else —
+ *  most importantly `javascript:` — is rejected: `content` here can be
+ *  LLM-generated (Warden's chat replies), so a prompt-injected document or a
+ *  compromised model is a realistic way for an attacker-chosen URL to end up
+ *  in this position. */
+const SAFE_HREF_SCHEMES = new Set(['http', 'https', 'mailto', 'tel']);
+
+function isSafeHref(href: string): boolean {
+  const scheme = /^([a-zA-Z][a-zA-Z\d+.-]*):/.exec(href)?.[1];
+  return scheme === undefined || SAFE_HREF_SCHEMES.has(scheme.toLowerCase());
+}
+
+/** Returns a link's `href` value ready to render, or `null` to reject it.
+ *  Rejecting is what keeps an unsafe URL out of the DOM; `encodeURI` on top
+ *  is the contextual output-encoding this class of finding calls for. The
+ *  sink below reads this function's *return value*, never the raw `href` —
+ *  a boolean guard around the original string still leaves the tainted
+ *  value itself flowing into `href`. Browsers ignore tabs/newlines when
+ *  parsing a URL's scheme, so those are stripped first to close a
+ *  `jav\tascript:`-style bypass; `encodeURI` throws on a lone unpaired
+ *  surrogate, hence the try/catch. */
+function sanitizeHref(href: string): string | null {
+  const normalized = href.replace(/[\t\n\r]/g, '').trim();
+  if (!normalized || !isSafeHref(normalized)) return null;
+  try {
+    return encodeURI(normalized);
+  } catch {
+    return null;
+  }
+}
+
 /** Parses **bold**, *italic*, `code`, and [text](url) within a line of text. */
 function parseInline(text: string): ReactNode[] {
   const nodes: ReactNode[] = [];
@@ -32,10 +77,15 @@ function parseInline(text: string): ReactNode[] {
     const [full, linkText, linkHref, boldText, italicText, codeText] = match;
     const key = `md-inline-${inlineKey++}`;
     if (linkHref !== undefined) {
+      const safeHref = sanitizeHref(linkHref);
       nodes.push(
-        <a key={key} href={linkHref}>
-          {linkText}
-        </a>,
+        safeHref !== null ? (
+          <a key={key} href={safeHref}>
+            {linkText}
+          </a>
+        ) : (
+          linkText
+        ),
       );
     } else if (boldText !== undefined) {
       nodes.push(<strong key={key}>{boldText}</strong>);
@@ -53,20 +103,31 @@ function parseInline(text: string): ReactNode[] {
 const isQuote = (l: string) => l.startsWith('> ') || l === '>';
 const isListItem = (l: string) => l.startsWith('- ');
 const isHeading = (l: string) => /^#{1,3}\s+/.test(l);
+/** ```` ```lang ```` — an opening (or closing) code fence. */
+const isFence = (l: string) => /^\s*`{3,}/.test(l);
+/** `1. item` or `1) item`. Bounded digit count so a long numeric line
+ *  can't be mistaken for a list marker. */
+const isOrderedItem = (l: string) => /^\d{1,9}[.)]\s+/.test(l);
 /** A line that ends the current *paragraph* run — a blank line, or the
- * start of a heading, quote, or list block. Anything else (including an
- * indented continuation line) is folded into the paragraph, matching how
+ * start of a heading, quote, list, or code block. Anything else (including
+ * an indented continuation line) is folded into the paragraph, matching how
  * the source markdown soft-wraps prose across lines. */
-const endsParagraph = (l: string) => l.trim() === '' || isHeading(l) || isQuote(l) || isListItem(l);
-/** A line that ends the current *list* run — a blank line, or the start of
- * a heading or quote. Deliberately does NOT include `isListItem`: a list
- * item's own opening line legitimately satisfies `isListItem`, so reusing
- * `endsParagraph` here (which does) would treat the first line of every
- * list as ending the list before it started — the list-collection loop
- * would then never advance, looping forever. */
-const endsList = (l: string) => l.trim() === '' || isHeading(l) || isQuote(l);
-
-function parseBlocks(content: string): ReactNode[] {
+const endsParagraph = (l: string) =>
+  l.trim() === '' || isHeading(l) || isQuote(l) || isListItem(l) || isOrderedItem(l) || isFence(l);
+/** A line that ends the current *unordered list* run — a blank line, or the
+ * start of a heading, quote, code block, or an *ordered* item. Deliberately
+ * does NOT include `isListItem`: a list item's own opening line legitimately
+ * satisfies `isListItem`, so reusing `endsParagraph` here (which does) would
+ * treat the first line of every list as ending the list before it started —
+ * the list-collection loop would then never advance, looping forever. */
+const endsList = (l: string) =>
+  l.trim() === '' || isHeading(l) || isQuote(l) || isFence(l) || isOrderedItem(l);
+/** The ordered-list mirror of `endsList` — excludes `isOrderedItem` for the
+ *  same reason, and treats an unordered item as the start of a new block. */
+const endsOrderedList = (l: string) =>
+  l.trim() === '' || isHeading(l) || isQuote(l) || isFence(l) || isListItem(l);
+
+function parseBlocks(content: string, preserveLineBreaks: boolean): ReactNode[] {
   const lines = content.replace(/\r\n/g, '\n').split('\n');
   const blocks: ReactNode[] = [];
   let i = 0;
@@ -80,6 +141,34 @@ function parseBlocks(content: string): ReactNode[] {
       continue;
     }
 
+    // Checked before every other block type: everything between the fences
+    // is verbatim, including blank lines and lines that would otherwise
+    // read as headings, quotes, or list items.
+    if (isFence(line)) {
+      const fenceMatch = /^\s*(`{3,})(.*)$/.exec(line);
+      const fence = fenceMatch?.[1] ?? '```';
+      const language = (fenceMatch?.[2] ?? '').trim();
+      const closing = new RegExp(`^\\s*${fence}\\s*$`);
+      i++;
+      const codeLines: string[] = [];
+      while (i < lines.length && !closing.test(lines[i] ?? '')) {
+        codeLines.push(lines[i] ?? '');
+        i++;
+      }
+      // Steps past the closing fence; a no-op at end of input, so an
+      // unterminated fence renders the remainder as code (as CommonMark
+      // does) rather than looping.
+      i++;
+      blocks.push(
+        <div key={blockKey++} className={styles.block}>
+          <pre className={styles.codeBlock}>
+            <code data-language={language || undefined}>{codeLines.join('\n')}</code>
+          </pre>
+        </div>,
+      );
+      continue;
+    }
+
     const heading = /^(#{1,3})\s+(.*)$/.exec(line);
     if (heading) {
       const level = (heading[1]?.length ?? 1) as 1 | 2 | 3;
@@ -112,6 +201,41 @@ function parseBlocks(content: string): ReactNode[] {
       continue;
     }
 
+    if (isOrderedItem(line)) {
+      const items: string[] = [];
+      let start: number | undefined;
+      while (i < lines.length && !endsOrderedList(lines[i] ?? '')) {
+        const current = lines[i] ?? '';
+        const match = /^(\d{1,9})[.)]\s+(.*)$/.exec(current);
+        if (match) {
+          // Honour the author's own starting number (a list resuming at 4),
+          // but let the browser number the rest — markdown's own numbers
+          // are conventionally ignored after the first.
+          if (start === undefined) start = Number(match[1]);
+          items.push(match[2] ?? '');
+        } else {
+          const lastIndex = items.length - 1;
+          items[lastIndex] = `${items[lastIndex] ?? ''} ${current.trim()}`;
+        }
+        i++;
+      }
+      blocks.push(
+        <div key={blockKey++} className={styles.block}>
+          <ol
+            className={styles.list}
+            start={start !== undefined && start !== 1 ? start : undefined}
+          >
+            {items.map((item, idx) => (
+              <Typography key={idx} variant="body" as="li">
+                {parseInline(item)}
+              </Typography>
+            ))}
+          </ol>
+        </div>,
+      );
+      continue;
+    }
+
     if (isListItem(line)) {
       const items: string[] = [];
       while (i < lines.length && !endsList(lines[i] ?? '')) {
@@ -147,7 +271,14 @@ function parseBlocks(content: string): ReactNode[] {
     blocks.push(
       <div key={blockKey++} className={styles.block}>
         <Typography variant="body" as="p">
-          {parseInline(paraLines.join(' '))}
+          {preserveLineBreaks
+            ? paraLines.map((paraLine, lineIdx) => (
+                <Fragment key={lineIdx}>
+                  {lineIdx > 0 && <br />}
+                  {parseInline(paraLine)}
+                </Fragment>
+              ))
+            : parseInline(paraLines.join(' '))}
         </Typography>
       </div>,
     );
@@ -157,12 +288,18 @@ function parseBlocks(content: string): ReactNode[] {
 }
 
 /** Renders a constrained markdown subset (see MarkdownProps) as styled React
- * elements built from Typography — no HTML string injection. Meant for
- * long-form, first-party content pages (privacy policy, terms of service)
- * sourced from a single markdown file, not for rendering arbitrary or
- * user-supplied markdown. */
-export function Markdown({ content, className }: MarkdownProps) {
+ * elements built from Typography — no HTML string injection. Primarily
+ * meant for long-form, first-party content pages (privacy policy, terms of
+ * service) sourced from a single markdown file — not a general-purpose
+ * CommonMark renderer for arbitrary markdown. Also fine for plain,
+ * user-typed multi-line text (a card description, a comment body) edited
+ * in an ordinary `<textarea>` and passed through unchanged, as long as
+ * `preserveLineBreaks` is set — see that prop's own doc comment for why it
+ * isn't the default. */
+export function Markdown({ content, preserveLineBreaks = false, className }: MarkdownProps) {
   return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>{parseBlocks(content)}</div>
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>
+      {parseBlocks(content, preserveLineBreaks)}
+    </div>
   );
 }

package/src/components/Markdown/__tests__/Markdown.test.tsx

@@ -0,0 +1,144 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { Markdown } from '../Markdown';
+
+afterEach(cleanup);
+
+describe('Markdown', () => {
+  it('joins consecutive lines into one paragraph by default (soft-wrap)', () => {
+    const { container } = render(<Markdown content={'Line one.\nLine two.'} />);
+    const p = container.querySelector('p');
+    expect(p?.textContent).toBe('Line one. Line two.');
+    expect(p?.querySelector('br')).toBeNull();
+  });
+
+  it('preserveLineBreaks keeps each line on its own line via <br>', () => {
+    const { container } = render(
+      <Markdown content={'Line one.\nLine two.\nLine three.'} preserveLineBreaks />,
+    );
+    const p = container.querySelector('p');
+    expect(p?.querySelectorAll('br')).toHaveLength(2);
+    expect(p?.textContent).toBe('Line one.Line two.Line three.');
+  });
+
+  it('preserveLineBreaks still starts a new paragraph on a blank line', () => {
+    const { container } = render(
+      <Markdown content={'First paragraph.\n\nSecond paragraph.'} preserveLineBreaks />,
+    );
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs).toHaveLength(2);
+    expect(paragraphs[0]?.textContent).toBe('First paragraph.');
+    expect(paragraphs[1]?.textContent).toBe('Second paragraph.');
+  });
+
+  it('preserveLineBreaks does not affect headings, quotes, or lists', () => {
+    const { container } = render(
+      <Markdown content={'# Heading\n\n- item one\n- item two'} preserveLineBreaks />,
+    );
+    expect(container.querySelector('h1')?.textContent).toBe('Heading');
+    expect(container.querySelectorAll('li')).toHaveLength(2);
+  });
+});
+
+describe('Markdown — ordered lists and fenced code', () => {
+  it('renders an ordered list, numbering from the browser', () => {
+    const { container } = render(<Markdown content={'1. first\n2. second\n3. third'} />);
+
+    const list = container.querySelector('ol');
+    expect(list).not.toBeNull();
+    expect([...(list?.querySelectorAll('li') ?? [])].map((li) => li.textContent)).toEqual([
+      'first',
+      'second',
+      'third',
+    ]);
+    expect(list?.getAttribute('start')).toBeNull();
+  });
+
+  it('honours a list that starts at a number other than 1', () => {
+    const { container } = render(<Markdown content={'4. fourth\n5. fifth'} />);
+    expect(container.querySelector('ol')?.getAttribute('start')).toBe('4');
+  });
+
+  it('accepts the 1) marker style and applies inline formatting inside items', () => {
+    const { container } = render(<Markdown content={'1) do **this**'} />);
+
+    expect(container.querySelector('ol')).not.toBeNull();
+    expect(container.querySelector('ol strong')?.textContent).toBe('this');
+  });
+
+  it('keeps ordered and unordered lists as separate blocks', () => {
+    const { container } = render(<Markdown content={'- bullet\n1. number'} />);
+
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(container.querySelectorAll('ol')).toHaveLength(1);
+  });
+
+  it('renders a fenced code block verbatim, without parsing its contents', () => {
+    const content = ['```ts', 'const a = 1; // **not bold**', '', '# not a heading', '```'].join(
+      '\n',
+    );
+    const { container } = render(<Markdown content={content} />);
+
+    const code = container.querySelector('pre code');
+    expect(code?.textContent).toBe('const a = 1; // **not bold**\n\n# not a heading');
+    expect(container.querySelector('strong')).toBeNull();
+    expect(container.querySelector('h1')).toBeNull();
+  });
+
+  it('exposes the fence language for styling hooks', () => {
+    const { container } = render(<Markdown content={'```python\nx = 1\n```'} />);
+    expect(container.querySelector('pre code')?.getAttribute('data-language')).toBe('python');
+  });
+
+  it('terminates on an unclosed fence instead of looping', () => {
+    const { container } = render(<Markdown content={'text\n\n```\nnever closed'} />);
+    expect(container.querySelector('pre code')?.textContent).toBe('never closed');
+  });
+
+  it('separates a code block from the paragraph before it', () => {
+    const { container } = render(<Markdown content={'Try this:\n```\nrun me\n```'} />);
+
+    expect(container.querySelector('p')?.textContent).toBe('Try this:');
+    expect(container.querySelector('pre code')?.textContent).toBe('run me');
+  });
+});
+
+describe('Markdown — link hrefs', () => {
+  it('renders an http(s) link as a real anchor', () => {
+    const { container } = render(<Markdown content={'[docs](https://example.com/docs)'} />);
+    const link = container.querySelector('a');
+    expect(link?.getAttribute('href')).toBe('https://example.com/docs');
+    expect(link?.textContent).toBe('docs');
+  });
+
+  it('renders a relative link as a real anchor', () => {
+    const { container } = render(<Markdown content={'[here](/warden/models)'} />);
+    expect(container.querySelector('a')?.getAttribute('href')).toBe('/warden/models');
+  });
+
+  it('renders a mailto: link as a real anchor', () => {
+    const { container } = render(<Markdown content={'[email](mailto:a@example.com)'} />);
+    expect(container.querySelector('a')?.getAttribute('href')).toBe('mailto:a@example.com');
+  });
+
+  it('neutralizes a javascript: URL instead of making it clickable', () => {
+    const { container } = render(
+      <Markdown content={'[click me](javascript:alert(document.cookie))'} />,
+    );
+    expect(container.querySelector('a')).toBeNull();
+    expect(container.textContent).toContain('click me');
+  });
+
+  it('neutralizes a javascript: URL disguised with an embedded tab', () => {
+    const { container } = render(<Markdown content={'[x](jav\tascript:alert(1))'} />);
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('neutralizes a data: URL', () => {
+    const { container } = render(
+      <Markdown content={'[x](data:text/html,<script>alert(1)</script>)'} />,
+    );
+    expect(container.querySelector('a')).toBeNull();
+  });
+});

package/src/components/Menu/Menu.module.css

@@ -33,6 +33,7 @@
   font: inherit;
   font-size: var(--sv-font-size-sm);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
 

package/src/components/Menu/Menu.tsx

@@ -10,7 +10,16 @@ import styles from './Menu.module.css';
 export interface MenuItem {
   type?: 'item';
   label: string;
-  onSelect: () => void;
+  /** Optional when `href` is provided (a pure navigation entry needs no
+   *  extra callback) — required otherwise. Called before the surface closes
+   *  is the caller's job to avoid; `Menu`'s own wiring always closes first,
+   *  then calls this. */
+  onSelect?: () => void;
+  /** Renders the entry as a link (`<a href>`, `role="menuitem"`) instead of
+   *  a `<button>` — same href-vs-onClick convention as `MobileAppsDrawer`'s
+   *  items. Framework-agnostic (a plain anchor, not `next/link`), matching
+   *  every other `packages/ui` href slot. */
+  href?: string;
   icon?: IconName;
   /** Styles the item as a destructive action (e.g. "Delete list"). */
   destructive?: boolean;
@@ -50,6 +59,15 @@ export interface MenuProps {
   /** Forwarded to `Popover` on desktop. Has no effect on mobile, where the
    *  menu is always a full-width `Drawer`. */
   align?: 'left' | 'right';
+  /** Forwarded to `Popover` on desktop (same default: 288). Has no effect
+   *  on mobile. Narrow this when the trigger lives inside a column
+   *  narrower than the default width — e.g. a per-row "⋯" menu in a
+   *  sidebar list — so the panel fits within that column's own bounds
+   *  instead of overflowing past its edge, where a scrollable ancestor's
+   *  `overflow-y: auto` (which the CSS Overflow spec computes the paired
+   *  `overflow-x` to `auto` as well, not `visible`, once either axis is
+   *  set) would clip it. */
+  width?: number | 'trigger';
 }
 
 /**
@@ -100,26 +118,43 @@ export function MenuEntries({
           );
         }
         const isCheckable = entry.checked !== undefined;
+        const className = [styles.item, entry.destructive ? styles.itemDestructive : '']
+          .filter(Boolean)
+          .join(' ');
+        const content = (
+          <>
+            {isCheckable && (
+              <span className={styles.check} aria-hidden>
+                {entry.checked && <Icon name="check" size="sm" aria-hidden />}
+              </span>
+            )}
+            {entry.icon && <Icon name={entry.icon} size="sm" aria-hidden />}
+            {entry.label}
+          </>
+        );
         return (
           <li key={index} role="none">
-            <button
-              role={isCheckable ? 'menuitemradio' : 'menuitem'}
-              aria-checked={isCheckable ? entry.checked : undefined}
-              type="button"
-              className={[styles.item, entry.destructive ? styles.itemDestructive : '']
-                .filter(Boolean)
-                .join(' ')}
-              disabled={entry.disabled}
-              onClick={() => onSelect(entry)}
-            >
-              {isCheckable && (
-                <span className={styles.check} aria-hidden>
-                  {entry.checked && <Icon name="check" size="sm" aria-hidden />}
-                </span>
-              )}
-              {entry.icon && <Icon name={entry.icon} size="sm" aria-hidden />}
-              {entry.label}
-            </button>
+            {entry.href ? (
+              <a
+                role="menuitem"
+                href={entry.href}
+                className={className}
+                onClick={() => onSelect(entry)}
+              >
+                {content}
+              </a>
+            ) : (
+              <button
+                role={isCheckable ? 'menuitemradio' : 'menuitem'}
+                aria-checked={isCheckable ? entry.checked : undefined}
+                type="button"
+                className={className}
+                disabled={entry.disabled}
+                onClick={() => onSelect(entry)}
+              >
+                {content}
+              </button>
+            )}
           </li>
         );
       })}
@@ -127,7 +162,15 @@ export function MenuEntries({
   );
 }
 
-export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps) {
+export function Menu({
+  trigger,
+  open,
+  onClose,
+  items,
+  'aria-label': ariaLabel,
+  align,
+  width,
+}: MenuProps) {
   const isMobile = useIsMobile();
 
   const list = (
@@ -135,7 +178,7 @@ export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, a
       items={items}
       onSelect={(entry) => {
         onClose();
-        entry.onSelect();
+        entry.onSelect?.();
       }}
     />
   );
@@ -152,7 +195,14 @@ export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, a
   }
 
   return (
-    <Popover trigger={trigger} open={open} onClose={onClose} aria-label={ariaLabel} align={align}>
+    <Popover
+      trigger={trigger}
+      open={open}
+      onClose={onClose}
+      aria-label={ariaLabel}
+      align={align}
+      width={width}
+    >
       {list}
     </Popover>
   );

package/src/components/Menu/__tests__/Menu.test.tsx

@@ -194,4 +194,34 @@ describe('Menu', () => {
     expect(onSelect).toHaveBeenCalledOnce();
     expect(onClose).toHaveBeenCalledOnce();
   });
+
+  it('renders an item with href as a link, not a button', () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={() => {}}
+        items={[{ label: 'Account', href: '/account' }]}
+        aria-label="List actions"
+      />,
+    );
+    const link = screen.getByRole('menuitem', { name: 'Account' });
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('/account');
+  });
+
+  it('closes on click of an href item even with no onSelect', () => {
+    const onClose = vi.fn();
+    render(
+      <Menu
+        trigger={<button type="button">Open menu</button>}
+        open
+        onClose={onClose}
+        items={[{ label: 'Account', href: '/account' }]}
+        aria-label="List actions"
+      />,
+    );
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Account' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
 });

package/src/components/Menubar/Menubar.tsx

@@ -32,7 +32,7 @@ export function Menubar({ menus, 'aria-label': ariaLabel = 'Menu bar' }: Menubar
             items={menu.items}
             onSelect={(entry) => {
               close();
-              entry.onSelect();
+              entry.onSelect?.();
             }}
           />
         ),

package/src/components/Message/Message.module.css

@@ -32,7 +32,7 @@
 
 .assistant .bubble {
   background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   color: var(--sv-color-text-primary);
   border-bottom-left-radius: var(--sv-radius-sm);
 }

package/src/components/MessageScroller/MessageScroller.module.css

@@ -25,13 +25,24 @@
   border-radius: var(--sv-radius-full);
 }
 
+/* Bottom-anchors a conversation that doesn't fill the container: this
+   leading item claims all leftover main-axis space, pushing the real
+   messages down to the bottom edge. Once messages overflow, it has no
+   free space left to grow into and collapses to 0 — normal top-to-bottom
+   scrolling is unaffected either way, since `justify-content` never
+   changes from its default `flex-start`. */
+.spacer {
+  flex: 1 0 0%;
+  min-height: 0;
+}
+
 .jumpButton {
   position: absolute;
   bottom: var(--sv-space-3);
   left: 50%;
   transform: translateX(-50%);
   padding: var(--sv-space-1) var(--sv-space-3);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-full);
   background: var(--sv-color-surface-raised);
   box-shadow: var(--sv-shadow-popover);

package/src/components/MessageScroller/MessageScroller.tsx

@@ -19,6 +19,17 @@ const NEAR_BOTTOM_THRESHOLD_PX = 80;
  * content does not yank them back down — a "New messages" button appears
  * instead, matching the pattern every chat product (Slack, Discord,
  * ChatGPT) already uses.
+ *
+ * A short conversation is bottom-anchored, not left floating at the top of
+ * the container with empty space below it — a leading flex-grow spacer
+ * absorbs the leftover space and collapses to nothing once messages
+ * overflow. Deliberately not `justify-content: flex-end` on the scroll
+ * container itself: Chromium miscomputes `scrollHeight` as equal to
+ * `clientHeight` for an overflowing flex-end-packed column, which makes the
+ * container look fully scrolled to the bottom and permanently hides the
+ * start of a long conversation (confirmed live before choosing this
+ * approach). The spacer keeps `justify-content` at its default, so overflow
+ * scrolling is unaffected.
  */
 export function MessageScroller({ children, className }: MessageScrollerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -60,6 +71,7 @@ export function MessageScroller({ children, className }: MessageScrollerProps) {
   return (
     <div className={[styles.root, className].filter(Boolean).join(' ')}>
       <div className={styles.scrollContainer} ref={containerRef} onScroll={handleScroll}>
+        <div className={styles.spacer} aria-hidden="true" />
         {children}
       </div>
       {hasNewMessages && (