@astrosheep/square 0.4.7 → 0.4.8

package/plugins/paseo/client/markdown.tsx

@@ -1,30 +1,41 @@
 import { useMemo, type ReactNode } from "react";
-import { Platform, Text, View, type TextStyle } from "react-native";
-import type { PluginTheme } from "@getpaseo/plugin";
+import { Platform, ScrollView, Text, View, type TextStyle } from "react-native";
+import { withAlpha, type SquarePalette } from "./palette";
 import { Lexer, lexer, type Token, type Tokens } from "marked";
 
 export const MONO = Platform.select({ ios: "Menlo", android: "monospace", default: "ui-monospace, Menlo, monospace" });
 
-function makeStyles(colors: PluginTheme["colors"]) {
+function makeStyles(palette: SquarePalette) {
+  const colors = palette.theme.colors;
+  const hairline = { borderColor: colors.border, borderWidth: 0.5 };
   return {
-    block: { gap: 6 },
-    text: { color: colors.foreground, fontSize: 13, lineHeight: 19 },
-    lead: { color: colors.accent, fontWeight: "600" as const },
+    block: { gap: 8 },
+    text: { color: palette.body, fontSize: 13.5, lineHeight: 20 },
+    // Size carries only the top two levels; deeper headings are weight alone, so a card never shouts.
+    heading: { fontWeight: "600" as const, color: colors.foreground, letterSpacing: -0.1 },
+    headingSizes: [{ fontSize: 15.5, lineHeight: 22 }, { fontSize: 14.5, lineHeight: 21 }] as TextStyle[],
+    lead: { color: palette.name, fontWeight: "600" as const },
     strong: { fontWeight: "600" as const, color: colors.foreground },
-    em: { color: colors.foregroundMuted, fontStyle: "italic" as const },
+    em: { fontStyle: "italic" as const },
     del: { color: colors.foregroundMuted, textDecorationLine: "line-through" as const },
-    link: { color: colors.accent, textDecorationLine: "underline" as const },
-    inlineCode: { fontFamily: MONO },
-    codeBlock: { backgroundColor: colors.surface0, borderRadius: 4, paddingHorizontal: 8, paddingVertical: 6 },
-    codeText: { fontFamily: MONO, fontSize: 13, lineHeight: 19, color: colors.foreground },
-    quote: { borderLeftWidth: 2, borderLeftColor: colors.border, paddingLeft: 8, gap: 2 },
-    quoteText: { color: colors.foregroundMuted, fontStyle: "italic" as const },
-    separator: { height: 1, backgroundColor: colors.border, marginVertical: 4 },
-    listRow: { flexDirection: "row" as const, gap: 6 },
-    listItem: { flexShrink: 1, gap: 2 },
-    bullet: { color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 },
-    tableRow: { flexDirection: "row" as const, gap: 8 },
-    tableCell: { flex: 1 },
+    link: { color: colors.accent, textDecorationLine: "underline" as const, textDecorationColor: withAlpha(colors.accent, 0.4) },
+    inlineCode: { fontFamily: MONO, fontSize: 12, color: colors.foreground, backgroundColor: palette.inlineCode, borderRadius: 3 },
+    codeBlock: { ...hairline, backgroundColor: colors.surface0, borderRadius: 4 },
+    codeContent: { paddingHorizontal: 10, paddingVertical: 8 },
+    codeText: { fontFamily: MONO, fontSize: 12, lineHeight: 18, color: colors.foreground },
+    quote: { borderLeftWidth: 2, borderLeftColor: colors.border, paddingLeft: 10, gap: 8 },
+    quoteText: { color: colors.foregroundMuted },
+    separator: { height: 0.5, backgroundColor: colors.border, marginVertical: 4 },
+    list: { gap: 4 },
+    listRow: { flexDirection: "row" as const },
+    // A fixed gutter gives wrapped lines a hanging indent; ordinals align on their right edge.
+    bullet: { color: colors.foregroundMuted, fontSize: 13.5, lineHeight: 20, minWidth: 18, paddingRight: 6,
+      textAlign: "right" as const, fontVariant: ["tabular-nums" as const] },
+    listItem: { flex: 1, gap: 4 },
+    table: { ...hairline, borderRadius: 4, overflow: "hidden" as const },
+    tableHead: { backgroundColor: colors.surface0 },
+    tableRow: { flexDirection: "row" as const, borderTopWidth: 0.5, borderTopColor: colors.border },
+    tableCell: { paddingVertical: 4, paddingHorizontal: 8 },
   };
 }
 
@@ -33,27 +44,27 @@ type Styles = ReturnType<typeof makeStyles>;
 /** Children of a token, if it has any: `Token` is a union, so the optional field needs one cast. */
 const children = (node: Token | { tokens?: Token[] }): Token[] => (node as { tokens?: Token[] }).tokens ?? [];
 
-const unescape = (text: string): string =>
-  text.replace(/&(lt|gt|quot|#39|amp);/g, (_, entity: string) =>
-    entity === "lt" ? "<" : entity === "gt" ? ">" : entity === "quot" ? '"' : entity === "#39" ? "'" : "&");
+const ENTITIES: Record<string, string> = { lt: "<", gt: ">", quot: '"', "#39": "'", amp: "&" };
+const unescape = (text: string): string => text.replace(/&(lt|gt|quot|#39|amp);/g, (_, entity: string) => ENTITIES[entity]!);
 
-function renderInlines(tokens: Token[], styles: Styles, prefix: string, extra?: TextStyle): ReactNode[] {
+/** Inline runs nest inside their block's Text, so they carry only what differs from it. */
+function renderInlines(tokens: Token[], styles: Styles, prefix: string): ReactNode[] {
   return tokens.map((token, index) => {
     const key = `${prefix}-${index}`;
-    const nested = (style: TextStyle): ReactNode => (
-      <Text key={key} style={[styles.text, extra, style]}>{renderInlines(children(token), styles, key)}</Text>
+    const nested = (style?: TextStyle): ReactNode => (
+      <Text key={key} style={style}>{renderInlines(children(token), styles, key)}</Text>
     );
     switch (token.type) {
       case "strong": return nested(styles.strong);
       case "em": return nested(styles.em);
       case "del": return nested(styles.del);
       case "link": return nested(styles.link);
-      case "codespan": return <Text key={key} style={[styles.text, extra, styles.inlineCode]}>{token.text}</Text>;
+      case "codespan": return <Text key={key} style={styles.inlineCode}>{` ${unescape(token.text)} `}</Text>;
       case "br": return "\n";
       case "image": return token.text;
       default: {
         const inline = token as Tokens.Generic;
-        if (inline.tokens !== undefined) return nested({});
+        if (inline.tokens !== undefined) return nested();
         return unescape(inline.text ?? inline.raw);
       }
     }
@@ -74,13 +85,13 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
         return <View key={key} style={styles.separator} />;
       case "code":
         return (
-          <View key={key} style={styles.codeBlock}>
+          <ScrollView key={key} horizontal style={styles.codeBlock} contentContainerStyle={styles.codeContent}>
             <Text selectable style={styles.codeText}>{token.text}</Text>
-          </View>
+          </ScrollView>
         );
       case "heading":
         return (
-          <Text key={key} style={[styles.text, textStyle, styles.strong]}>
+          <Text key={key} style={[styles.text, textStyle, styles.heading, styles.headingSizes[(token as Tokens.Heading).depth - 1]]}>
             {renderInlines(children(token), styles, key)}
           </Text>
         );
@@ -90,11 +101,11 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
         const list = token as Tokens.List;
         const start = typeof list.start === "number" ? list.start : 1;
         return (
-          <View key={key} style={{ gap: 2 }}>
+          <View key={key} style={styles.list}>
             {list.items.map((item, itemIndex) => (
               <View key={`${key}-${itemIndex}`} style={styles.listRow}>
                 <Text style={styles.bullet}>
-                  {item.task ? (item.checked === true ? "☑" : "☐") : list.ordered ? `${start + itemIndex}.` : "·"}
+                  {item.task ? (item.checked === true ? "☑" : "☐") : list.ordered ? `${start + itemIndex}.` : "•"}
                 </Text>
                 <View style={styles.listItem}>{renderBlocks(children(item), styles, `${key}-${itemIndex}`, textStyle)}</View>
               </View>
@@ -105,19 +116,26 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
       case "table": {
         const table = token as Tokens.Table;
         const rows = [table.header, ...table.rows];
+        // Columns size to their widest cell (within reason) and the table scrolls sideways
+        // on narrow screens instead of crushing every cell to a sliver.
+        const widths = table.header.map((_, column) => Math.min(240, Math.max(56,
+          ...rows.map(cells => (cells[column]?.text.length ?? 0) * 7.5 + 16))));
         return (
-          <View key={key} style={{ gap: 2 }}>
-            {rows.map((cells, rowIndex) => (
-              <View key={`${key}-${rowIndex}`} style={styles.tableRow}>
-                {cells.map((cell, cellIndex) => (
-                  <Text
-                    key={`${key}-${rowIndex}-${cellIndex}`}
-                    style={[styles.text, textStyle, styles.tableCell, rowIndex === 0 ? styles.strong : undefined]}
-                  >{renderInlines(children(cell), styles, `${key}-${rowIndex}-${cellIndex}`)}</Text>
-                ))}
-              </View>
-            ))}
-          </View>
+          <ScrollView key={key} horizontal>
+            <View style={styles.table}>
+              {rows.map((cells, rowIndex) => (
+                <View key={`${key}-${rowIndex}`} style={rowIndex === 0 ? [styles.tableRow, styles.tableHead, { borderTopWidth: 0 }] : styles.tableRow}>
+                  {cells.map((cell, cellIndex) => (
+                    <Text
+                      key={`${key}-${rowIndex}-${cellIndex}`}
+                      style={[styles.text, textStyle, styles.tableCell, { width: widths[cellIndex], textAlign: table.align[cellIndex] ?? "left" },
+                        rowIndex === 0 ? styles.strong : undefined]}
+                    >{renderInlines(children(cell), styles, `${key}-${rowIndex}-${cellIndex}`)}</Text>
+                  ))}
+                </View>
+              ))}
+            </View>
+          </ScrollView>
         );
       }
       default: {
@@ -132,58 +150,33 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
   });
 }
 
-/** A chorus speaker in seal blue, with a fixed half-em breath before the words. */
-function Lead({ name, styles }: { name: string; styles: Styles }) {
-  return <Text style={styles.lead}>{name}{"\u2002"}</Text>;
-}
-
-/** One line (or a few) of Markdown, inline only: the collapsed preview on a notification card. */
-export function SquareInline({ text, theme, numberOfLines, lead }: {
+/** Attribution stays inline; a separate timestamp column reserves space on the first render. */
+export function SquareMarkdownBody({ text, palette, author, reach, time }: {
   text: string;
-  theme: PluginTheme;
-  numberOfLines?: number;
-  lead?: string;
+  palette: SquarePalette;
+  author?: string;
+  reach?: string;
+  time?: string;
 }) {
-  const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
-  return (
-    <Text numberOfLines={numberOfLines} style={styles.text}>
-      {lead !== undefined && <Lead name={lead} styles={styles} />}
-      {renderInlines(Lexer.lexInline(text), styles, "inline")}
-    </Text>
-  );
-}
-
-/**
- * A body of Markdown: no envelope — the words only, at full width.
- * `lead` runs the author into the first line.
- */
-export function SquareMarkdownBody({ text, theme, lead }: {
-  text: string;
-  theme: PluginTheme;
-  lead?: string;
-}) {
-  const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
+  const styles = useMemo(() => makeStyles(palette), [palette]);
   const tokens = useMemo(() => lexer(text).filter(token => token.type !== "space"), [text]);
-  let pending = lead;
-  const nodes = tokens.map((token, index) => {
-    const key = `body-${index}`;
-    if (pending === undefined) return renderBlocks([token], styles, key);
-    const name = pending;
-    pending = undefined;
-    if (token.type === "paragraph") {
-      return (
-        <Text key={key} selectable={Platform.OS === "web"} style={styles.text}>
-          <Lead name={name} styles={styles} />
-          {renderInlines(children(token), styles, key)}
-        </Text>
-      );
-    }
-    return [<Text key={`${key}-lead`} style={styles.text}><Lead name={name} styles={styles} /></Text>, ...renderBlocks([token], styles, key)];
-  });
-  return (
-    <View style={styles.block}>
-      {nodes}
-      {pending !== undefined && <Text style={styles.text}><Lead name={pending} styles={styles} /></Text>}
-    </View>
-  );
+  const attribution = <>
+    {author !== undefined && <Text style={styles.lead}>{author}</Text>}
+    {reach !== undefined && <Text style={{ fontSize: 11, fontWeight: "500", color: palette.warm }}>{" "}{reach}</Text>}
+    {(author !== undefined || reach !== undefined) && "\u2002"}
+  </>;
+  const timeStyle: TextStyle = { color: palette.faint, fontSize: 11, lineHeight: 20, fontVariant: ["tabular-nums"] };
+  const first = tokens[0];
+  const runIn = first?.type === "paragraph" || first?.type === "heading";
+  const hasHeader = author !== undefined || reach !== undefined || time !== undefined;
+  const firstLine = <>{attribution}{runIn && renderInlines(children(first), styles, "first")}</>;
+  return <View style={styles.block}>
+    {hasHeader && <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
+      <Text selectable={Platform.OS === "web"} style={[styles.text, { flex: 1, minWidth: 0 }]}>
+        {firstLine}
+      </Text>
+      {time !== undefined && <Text style={[timeStyle, { flexShrink: 0 }]}>{time}</Text>}
+    </View>}
+    {renderBlocks(hasHeader && runIn ? tokens.slice(1) : tokens, styles, "body")}
+  </View>;
 }

package/plugins/paseo/client/palette.ts

@@ -7,22 +7,22 @@ import type { PluginTheme } from "@getpaseo/plugin";
  * the card earns its identity from colour and the seal, not decoration.
  */
 const DARK = {
-  surface0: "#14161a", // inset / code
+  surface0: "#1a1d21", // inset / code
   surface1: "#252a2e", // card (matte slate paper)
-  surface2: "#14161a", // inset / code
-  border: "#3a4249",
-  foreground: "#d9dce1",
+  surface2: "#1a1d21", // inset / code
+  border: "#363d44",
+  foreground: "#e4e6ea",
   foregroundMuted: "#858b94",
   accent: "#94a6b5", // plaza ■ / links
 } as const;
 
 const LIGHT = {
-  surface0: "#f4f5f7",
-  surface1: "#edf0f2", // card (matte slate paper)
-  surface2: "#f4f5f7",
-  border: "#ced5db",
-  foreground: "#2b2e33",
-  foregroundMuted: "#858b94",
+  surface0: "#e9edf0",
+  surface1: "#f6f7f9", // card (matte slate paper)
+  surface2: "#e9edf0",
+  border: "#dde2e7",
+  foreground: "#1f2226",
+  foregroundMuted: "#6b727b",
   accent: "#71869a",
 } as const;
 
@@ -33,7 +33,14 @@ export interface SquarePalette {
   card: { borderRadius: number; borderWidth: number; boxShadow: string };
   /** The square ■ seal, unrounded and flat. */
   seal: { borderRadius: number };
-  /** The thin quote guide under the header. */
+  /** Body and metadata tones derived from the slate theme. */
+  body: string;
+  faint: string;
+  name: string;
+  warm: string;
+  directGuide: string;
+  inlineCode: string;
+  /** The thin message guide under the header. */
   quote: { borderLeftWidth: number; borderLeftColor: string; paddingLeft: number };
 }
 
@@ -45,6 +52,18 @@ function brightness(hex: string): number {
     + 0.114 * parseInt(rgb.slice(4, 6), 16);
 }
 
+export function withAlpha(hex: string, opacity: number): string {
+  const rgb = hex.length === 4 ? "#" + hex.slice(1).replace(/./g, digit => digit + digit) : hex.slice(0, 7);
+  return `${rgb}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+}
+
+function mix(first: string, second: string, amount: number): string {
+  const rgb = (hex: string) => (hex.length === 4 ? hex.slice(1).replace(/./g, digit => digit + digit) : hex.slice(1, 7));
+  const a = rgb(first), b = rgb(second);
+  return "#" + [0, 2, 4].map(offset => Math.round(parseInt(a.slice(offset, offset + 2), 16) * amount
+    + parseInt(b.slice(offset, offset + 2), 16) * (1 - amount)).toString(16).padStart(2, "0")).join("");
+}
+
 export function squarePalette(theme: PluginTheme): SquarePalette {
   // The SDK exposes colors, not appearance. Use the host theme, never the OS color scheme.
   const dark = brightness(theme.colors.foreground) > brightness(theme.colors.surface0);
@@ -59,6 +78,12 @@ export function squarePalette(theme: PluginTheme): SquarePalette {
     } },
     card: { borderRadius: 4, borderWidth: 0.5, boxShadow: "none" },
     seal: { borderRadius: 0 },
-    quote: { borderLeftWidth: 1, borderLeftColor: dark ? "#45535e" : "#c2cdd5", paddingLeft: 9 },
+    body: mix(palette.foreground, palette.surface1, 0.9),
+    faint: mix(palette.foregroundMuted, palette.surface1, 0.7),
+    name: mix(palette.accent, palette.foreground, 0.8),
+    warm: theme.colors.statusDanger,
+    directGuide: withAlpha(theme.colors.statusDanger, 0.9),
+    inlineCode: withAlpha(palette.accent, 0.1),
+    quote: { borderLeftWidth: 1, borderLeftColor: withAlpha(theme.colors.statusWarning, 0.45), paddingLeft: 10 },
   };
 }

package/plugins/paseo/client/square-message.tsx

@@ -1,88 +1,64 @@
 import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
-import { COLLAPSED_PREVIEW_MAX_CHARS, outputPreview, type SquareMessageData } from "../shared/message";
-import { MONO, SquareInline, SquareMarkdownBody } from "./markdown";
+import { cardReferences, reachLabel, timeLabel } from "../shared/card-format";
+import type { SquareMessageData } from "../shared/message";
+import { SquareMarkdownBody } from "./markdown";
 import { squarePalette } from "./palette";
 
-/**
- * A matte slate slip in the timeline's shared 4px-corner family: square seal ■,
- * thin quote guide under the header.
- * Header (both states): ■ origin · authors … refs · how many.
- * Collapsed: two preview lines. Expanded: the whole scene, at full width.
- * Each structured message keeps its own author, reference and body.
- */
+/** The first guide reaches 4px above its text, toward the seal; the collapsed window still shows 4 lines. */
+const GUIDE_LEAD = 4;
+const COLLAPSED_HEIGHT = 4 * 20 + GUIDE_LEAD;
+
 export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<SquareMessageData>) {
   const [expanded, setExpanded] = useState(false);
   const [hovered, setHovered] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+  const scroll = useRef<ScrollView>(null);
   const palette = useMemo(() => squarePalette(theme), [theme]);
-  const items = "items" in item.data ? item.data.items : undefined;
-  const text = "text" in item.data ? item.data.text : undefined;
-  const presentations = items?.filter(entry => "origin" in entry);
-  const latest = items?.at(-1);
-  // Keep the source's own line breaks: collapsed and expanded text must wrap alike.
-  const preview = latest && "text" in latest ? outputPreview(latest.text, COLLAPSED_PREVIEW_MAX_CHARS)
-    : latest?.preview ?? text;
-  const authors = [...new Set(presentations?.flatMap(entry => entry.author === undefined ? [] : [entry.author]))];
-  const chorus = authors.length > 1;
-  const origins = [...new Set(presentations?.map(entry => entry.origin))];
-  const originName = origins.join(", ") || "Notification";
-  const badge = presentations?.at(-1)?.badge;
-  // Exact references never imply intervening messages; each origin keeps its own references.
-  const trailing = [presentations?.flatMap(entry => entry.ref === undefined ? []
-    : [origins.length > 1 ? `${entry.origin} ${entry.ref}` : entry.ref]).join(", "),
-    presentations && presentations.length > 1 ? String(presentations.length) : undefined].filter(Boolean).join(" · ");
-  const { accent, border, foreground, foregroundMuted: muted, surface1 } = palette.theme.colors;
-  // On web the header brightens its details under the cursor; touch keeps them quiet.
-  const detail = layout.platform === "web" && hovered ? foreground : muted;
-  const row = { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 };
-  const guide = { marginLeft: 2.5, paddingLeft: palette.quote.paddingLeft, borderLeftWidth: palette.quote.borderLeftWidth, borderLeftColor: palette.quote.borderLeftColor };
+  const entries = "items" in item.data ? item.data.items : [{ text: item.data.text }];
+  const presentations = entries.filter(entry => "origin" in entry);
+  const originName = [...new Set(presentations.map(entry => entry.origin))].join(", ") || "Notification";
+  const refs = cardReferences(presentations);
+  const { accent, border, foregroundMuted: muted, surface1 } = palette.theme.colors;
+  const detail = layout.platform === "web" && hovered ? muted : palette.faint;
 
-  return (
-    <View style={[
-      { backgroundColor: surface1, borderWidth: palette.card.borderWidth, borderColor: border, borderRadius: palette.card.borderRadius, paddingHorizontal: 10, paddingVertical: 7 },
-      layout.platform === "web" && { boxShadow: palette.card.boxShadow },
-    ]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`${expanded ? "收起" : "展开"} ${originName}: ${authors.join(", ") || "Notification"}`}
-        aria-expanded={expanded}
-        onPress={() => setExpanded(value => !value)}
-        onHoverIn={() => setHovered(true)}
-        onHoverOut={() => setHovered(false)}
-        style={({ pressed }) => ({ opacity: pressed ? 0.85 : 1 })}
-      >
-        <View style={row}>
-          <View style={{ width: 6, height: 6, borderRadius: palette.seal.borderRadius, backgroundColor: accent }} />
-          <Text numberOfLines={1} style={{ color: foreground, fontSize: 11.5, lineHeight: 17, fontWeight: "600", flex: 1 }}>
-            {originName}
-            {(authors.length > 0 || badge) && (
-              <Text style={{ color: muted, fontWeight: "400", fontSize: 10.5 }}> · {[authors.join(", "), badge].filter(Boolean).join(" · ")}</Text>
-            )}
-          </Text>
-          {trailing !== "" && <Text numberOfLines={1} style={{ color: detail, fontSize: 9.5, fontFamily: MONO, fontVariant: ["tabular-nums"], flexShrink: 1 }}>{trailing}</Text>}
-          <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={10} color={detail} />
-        </View>
-        {!expanded && preview !== undefined && preview !== "" && (
-          <View style={{ ...guide, marginTop: 5 }}>
-            <SquareInline text={preview} theme={palette.theme} numberOfLines={2} lead={chorus && latest && "author" in latest ? latest.author : undefined} />
-          </View>
-        )}
-      </Pressable>
-      {expanded && (
-        <ScrollView style={{ maxHeight: layout.compact ? 280 : 400, marginTop: 5 }} nestedScrollEnabled>
-          <View style={{ ...guide, gap: 7 }}>
-            {items === undefined ? <SquareMarkdownBody text={text ?? ""} theme={palette.theme} /> : items.map((entry, index) => (
-              <View key={index} style={index > 0 ? { paddingTop: 7, borderTopWidth: palette.card.borderWidth, borderTopColor: border } : undefined}>
-                {"text" in entry
-                  ? <SquareMarkdownBody text={entry.text} theme={palette.theme} />
-                  : <SquareMarkdownBody text={entry.body} theme={palette.theme} lead={chorus ? entry.author : undefined} />}
-              </View>
-            ))}
-          </View>
-        </ScrollView>
-      )}
+  return <Pressable onPress={() => {
+    scroll.current?.scrollTo({ y: 0, animated: false });
+    setExpanded(value => !value);
+  }} accessibilityRole="button"
+    accessibilityLabel={`${expanded ? "Collapse" : "Expand"} ${originName}`} aria-expanded={expanded}
+    onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+    style={{ backgroundColor: surface1, borderWidth: palette.card.borderWidth,
+      borderColor: border, borderRadius: palette.card.borderRadius, paddingVertical: 9, paddingHorizontal: 12 }}>
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 7, height: 16 }}>
+      <View style={{ width: 5, height: 5, backgroundColor: accent }} />
+      <Text numberOfLines={1} style={{ color: muted, fontSize: 11, fontWeight: "500", flexShrink: 1 }}>{originName}</Text>
+      {entries.length > 1 && <Text style={{ color: detail, fontSize: 11 }}>{entries.length} messages</Text>}
+      <View style={{ flex: 1 }} />
+      {!!refs && <Text numberOfLines={1} style={{ color: detail, fontSize: 11, fontVariant: ["tabular-nums"], flexShrink: 1 }}>{refs}</Text>}
+      <View style={{ width: 10, height: 10 }}>
+        {overflows && <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={10} color={detail} />}
+      </View>
+    </View>
+    <View style={{ marginTop: 8 - GUIDE_LEAD, marginLeft: 2 }}>
+      <ScrollView ref={scroll} style={{ maxHeight: expanded ? 260 : COLLAPSED_HEIGHT }} scrollEnabled={expanded} nestedScrollEnabled
+        onContentSizeChange={(_, height) => setOverflows(height > COLLAPSED_HEIGHT)}>
+        {entries.map((entry, index) => {
+          const structured = "origin" in entry;
+          // A mention speaks through the guide colour alone; reply and bell keep their word.
+          const direct = structured && reachLabel(entry.reach) !== undefined;
+          const reach = structured && entry.reach !== "mention" ? reachLabel(entry.reach) : undefined;
+          return <View key={index} style={{ borderLeftWidth: 1,
+            borderLeftColor: direct ? palette.directGuide : palette.quote.borderLeftColor,
+            paddingLeft: palette.quote.paddingLeft, marginTop: index > 0 ? 8 : 0, paddingTop: index > 0 ? 0 : GUIDE_LEAD }}>
+            <SquareMarkdownBody text={structured ? entry.body : entry.text} palette={palette}
+              author={structured ? entry.author : undefined} reach={reach}
+              time={structured && entry.at !== undefined ? timeLabel(entry.at) : undefined} />
+          </View>;
+        })}
+      </ScrollView>
     </View>
-  );
+  </Pressable>;
 }

package/plugins/paseo/client/transform.ts

@@ -1,5 +1,5 @@
 import type { PluginTimelineTransformerContribution } from "@getpaseo/plugin/client";
-import { COLLAPSED_PREVIEW_MAX_CHARS, OUTPUT_DISPLAY_MAX_CHARS, outputPreview, squareCardDetailsSchema, type SquareMessageData } from "../shared/message.ts";
+import { OUTPUT_DISPLAY_MAX_CHARS, outputPreview, squareCardDetailsSchema, type SquareMessageData } from "../shared/message.ts";
 
 // Recognition is metadata-based, not a guess from a tool name or body text.
 // The same projection applies to live events and fetched history.
@@ -12,17 +12,15 @@ export const transformSquareMessage: PluginTimelineTransformerContribution<"tool
   const details = squareCardDetailsSchema.safeParse(item.metadata.details);
   let data: SquareMessageData;
   if (details.success) {
-    const items = details.data.items, latest = items.at(-1)!;
-    const preview = outputPreview("text" in latest ? latest.text : latest.preview ?? latest.body, COLLAPSED_PREVIEW_MAX_CHARS);
-    let remaining = OUTPUT_DISPLAY_MAX_CHARS - preview.length;
+    const items = details.data.items;
+    let remaining = OUTPUT_DISPLAY_MAX_CHARS;
     const clipped = items.reduce((sum, entry) => sum + ("text" in entry ? entry.text : entry.body).length, 0) > remaining;
     data = { items: items.map((entry, index) => {
       const source = "text" in entry ? entry.text : entry.body;
       const body = clipped ? outputPreview(source, Math.floor(remaining / (items.length - index))) : source;
       remaining -= body.length;
       if ("text" in entry) return { text: body };
-      const { preview: _preview, ...presentation } = entry;
-      return { ...presentation, body, ...(index === items.length - 1 ? { preview } : {}) };
+      return { ...entry, body };
     }) };
   } else {
     data = { text: outputPreview(item.detail.text) };

package/plugins/paseo/shared/card-format.ts

@@ -0,0 +1,37 @@
+import type { CardPresentation } from "./card-presentation.ts";
+
+export function reachLabel(reach?: CardPresentation["reach"]): string | undefined {
+  return reach === "mention" ? "@you" : reach === "attention" ? undefined : reach;
+}
+
+/** Calendar days, rather than elapsed hours, keep yesterday correct across DST. */
+export function timeLabel(at: number, now = Date.now(), compact = false): string {
+  const date = new Date(at), today = new Date(now);
+  const day = (value: Date) => `${value.getFullYear()}-${value.getMonth()}-${value.getDate()}`;
+  const clock = `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+  if (day(date) === day(today)) return clock;
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  if (day(date) === day(yesterday)) return `${compact ? "yest" : "yesterday"} ${clock}`;
+  const shortDate = compact
+    ? `${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")}`
+    : date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  return `${shortDate} ${clock}`;
+}
+
+/** Only adjacent references from the same origin can form a range. */
+export function cardReferences(items: readonly CardPresentation[], originLabel: (origin: string) => string = origin => origin): string {
+  const multipleOrigins = new Set(items.map(item => item.origin)).size > 1;
+  const runs: { origin: string; ref: string; first?: number; last?: number }[] = [];
+  for (const item of items) {
+    if (item.ref === undefined) continue;
+    const match = /^act\/(\d+)$/.exec(item.ref);
+    const index = match ? Number(match[1]) : undefined;
+    const previous = runs.at(-1);
+    if (index !== undefined && previous?.origin === item.origin && previous.last !== undefined && previous.last + 1 === index) {
+      previous.last = index;
+    } else runs.push({ origin: item.origin, ref: item.ref, first: index, last: index });
+  }
+  return runs.map(run => `${multipleOrigins ? `${originLabel(run.origin)} ` : ""}${run.first !== run.last
+    ? `act/${run.first}–${run.last}` : run.ref}`).join(", ");
+}

package/plugins/paseo/shared/card-presentation.ts

@@ -4,7 +4,9 @@ export type CardPresentation = {
   readonly origin: string;
   readonly author?: string;
   readonly ref?: string;
-  readonly badge?: string;
+  /** Absent on cards produced before landing time and reach were recorded. */
+  readonly at?: number;
+  readonly reach?: 'mention' | 'reply' | 'attention' | 'bell';
   readonly body: string;
 };
 
@@ -12,5 +14,7 @@ export function isCardPresentation(value: unknown): value is CardPresentation {
   if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
   const item = value as Record<string, unknown>;
   return item.kind === 'presentation' && typeof item.origin === 'string' && typeof item.body === 'string'
-    && ['author', 'ref', 'badge'].every(key => item[key] === undefined || typeof item[key] === 'string');
+    && (item.at === undefined || (typeof item.at === 'number' && Number.isFinite(item.at)))
+    && (item.reach === undefined || ['mention', 'reply', 'attention', 'bell'].includes(item.reach as string))
+    && ['author', 'ref'].every(key => item[key] === undefined || typeof item[key] === 'string');
 }

package/plugins/paseo/shared/message.ts

@@ -3,12 +3,10 @@ import { isCardPresentation, type CardPresentation } from "./card-presentation.t
 
 /** Aggregate client display budget, including omission lines; source history stays unchanged. */
 export const OUTPUT_DISPLAY_MAX_CHARS = 32_000;
-export const COLLAPSED_PREVIEW_MAX_CHARS = 1_000;
 export function outputPreview(text: string, maxChars = OUTPUT_DISPLAY_MAX_CHARS): string {
   if (maxChars <= 0) return "";
   if (text.length <= maxChars) return text;
   const middle = "\n\n… Showing the beginning and end; the middle is hidden in this preview. …\n\n";
-  // Even a small share of a multi-message budget must fit, without splitting a surrogate pair.
   if (maxChars <= middle.length) return text.slice(0, maxChars - 1).replace(/[\uD800-\uDBFF]$/, "") + "…";
   const headChars = Math.floor((maxChars - middle.length) / 2);
   const head = text.slice(0, headChars).replace(/[\uD800-\uDBFF]$/, "");
@@ -16,13 +14,10 @@ export function outputPreview(text: string, maxChars = OUTPUT_DISPLAY_MAX_CHARS)
   return head + middle + tail;
 }
 
-/** Receiver display facts, with a bounded preview derived on the client. */
-const presentationItemSchema = z.custom<CardPresentation>(isCardPresentation)
-  .and(z.object({ preview: z.string().optional() }));
+const presentationItemSchema = z.custom<CardPresentation>(isCardPresentation);
 export const squareCardDetailsSchema = z.object({
   items: z.array(z.union([presentationItemSchema, z.object({ text: z.string() })])).min(1),
 });
-
 export const squareMessageSchema = z.union([
   squareCardDetailsSchema,
   z.object({ text: z.string() }),