Components

Chat

Conversation primitives: message scroller, messages, bubbles, attachments, and markers.

Conversation

Today

Arrow ligatures aren't rendering in the mrkdwn preview — -> shows as two glyphs.

Ligatures are off by default in the preview pane. Turn them on under Settings → Type → Ligatures.

The editor honors them either way — buena mono ships calt substitutions for arrows.

That did it. Preview and editor match now —
same glyphs on both sides. Thanks.

<div class="max-h-80 overflow-y-auto rounded-xl border border-separator bg-bg-surface p-4">
  {/* marker */}
  <div class="flex items-center gap-3">
    <span class="h-px flex-1 bg-separator" />
    <span class="rounded-full border border-separator px-2.5 py-0.5 text-xs text-text-tertiary">Today</span>
    <span class="h-px flex-1 bg-separator" />
  </div>

  {/* received */}
  <div class="mt-4 flex items-end gap-2">
    <span class="flex size-7 items-center justify-center rounded-full bg-bg-elevated font-mono text-[11px]">mk</span>
    <div class="max-w-[75%] rounded-lg rounded-bl-sm bg-bg-elevated px-3 py-2 text-sm">…</div>
  </div>

  {/* sent */}
  <div class="mt-3 flex justify-end">
    <div class="max-w-[75%] rounded-lg rounded-br-sm bg-primary px-3 py-2 text-sm text-white">…</div>
  </div>
</div>

Attachment

Full write-up, in case anyone else hits this.

ligatures-deep-dive.md 12 KB

Jump to latest

Does the dotted zero survive the mrkdwn export?

It does — code themes carry the full glyph set since 1.3.2.

Diff views too? We render a lot of those.

Thread states

Loading earlier messages

marta

Picking this thread back up — where did we land on the notes index?

andrés

We ship it as plain mrkdwn — one file per note, the index is generated.

Yesterday

marta

Generated index is live. Publishing really is just a save now.

Perfect — closing the note and shipping it.

Markers

Today

Published Saved generating… 3 unread View

Markers label a point in the thread. Variants (divider vs inline pill), status dot, with icon, shimmer while pending (animate-pulse), a bordered style, and links and buttons inside the marker.

Attachments

specimen.png uploading… failed

notes.md index.md +3 more

Image thumbnail and file chips, upload states (uploading, error), two sizes (row one default, row two small), a group with an overflow count, and the trigger button that opens the file picker.

Message anatomy

andrés · 2:14 PM

Shipped the box-drawing set — snapped every glyph to the 618-unit cell. Edited · seen

👍 2 🎉 1

Long changelog here — the hinting pass touched every weight on the variable axis, plus the Cyrillic extension and the tabular figures and the…

Messages carry a header and footer (name, time, "edited · seen"), hover actions, bubble reactions, and a show more control for long content. On hover the timestamp shows as a tooltip, and the action button opens a popover menu of more options.

In the real pattern the scroller anchors to the newest message and only shows the “Latest” pill once the reader has scrolled up; clicking it snaps back to the bottom.

The message scroller also handles anchoring turns (each user turn pins to the top as its reply streams in), keeping context visible (the prompt stays on screen while the answer grows), opening saved threads (restore scroll to the last-read message), animating new messages, jumping to messages by id, reading scroll state (at-bottom / has-unread) to drive the Latest pill, and virtualization so long histories render only the visible window.

Markdown for agents: /design/chat.md · spec: /design.md