@astrosheep/square 0.4.6 → 0.4.8

package/plugins/claude/hooks/register.js

@@ -0,0 +1,178 @@
+// The mod owns native lifecycle and effects. Its one helper owns Node/SQLite.
+let runtime;
+let starting;
+
+async function rpc($, current, input) {
+  const response = await $.http.fetch(current.url, {
+    method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(input),
+  });
+  if (!response.ok) throw new Error('Square Claude helper request failed');
+  return JSON.parse(response.text);
+}
+
+async function closeRuntime($, current) {
+  if (!current || current.closed) return;
+  current.closed = true;
+  current.epoch++;
+  try { await rpc($, current, { op: 'close' }); } catch { /* The helper may already have exited. */ }
+  await current.stream.return().catch(() => undefined);
+}
+
+async function startRuntime($, sessionId) {
+  const stream = $.process.spawn({ argv: ['square', 'claude-mod'], input: JSON.stringify({ sessionId }) });
+  const current = { sessionId, stream, url: '', buffer: '', closed: false, epoch: 0, epochs: new Map(), modes: new Map([['', 'idle']]) };
+  try {
+    while (!current.url) {
+      const chunk = await stream.next();
+      if (chunk.done) throw new Error('Square Claude helper ended before startup');
+      if (chunk.value.stream !== 'stdout') { $.ui.log(chunk.value.text, { to: 'debug' }); continue; }
+      current.buffer += chunk.value.text;
+      const end = current.buffer.indexOf('\n');
+      if (end < 0) continue;
+      const ready = JSON.parse(current.buffer.slice(0, end));
+      current.buffer = current.buffer.slice(end + 1);
+      if (ready.type !== 'ready' || !/^http:\/\/127\.0\.0\.1:\d+\/[a-f0-9]{64}$/.test(ready.url)) throw new Error('Invalid Square Claude helper address');
+      current.url = ready.url;
+    }
+    // A session.start/tool hook must never hold the turn while waiting on submit.
+    $.clock.after(0, async () => readDeliveries($, current));
+    return current;
+  } catch (error) {
+    await stream.return().catch(() => undefined);
+    throw error;
+  }
+}
+
+async function ensureRuntime($) {
+  const sessionId = await $.session.id();
+  if (runtime && !runtime.closed && runtime.sessionId === sessionId) return runtime;
+  if (starting) { await starting; return ensureRuntime($); }
+  starting = (async () => {
+    await closeRuntime($, runtime);
+    const next = await startRuntime($, sessionId);
+    runtime = next;
+    return next;
+  })();
+  try { return await starting; } finally { starting = undefined; }
+}
+
+async function setMode($, current, mode, agentId) {
+  current.modes.set(agentId ?? '', mode);
+  if (mode === 'stopped' || mode === 'ended') current.epochs.set(agentId ?? '', (current.epochs.get(agentId ?? '') ?? 0) + 1);
+  return rpc($, current, { op: 'state', agentId, mode });
+}
+
+async function deliver($, current, frame) {
+  const epoch = current.epoch;
+  const key = frame.agentId ?? '';
+  const localEpoch = current.epochs.get(key);
+  const available = () => !current.closed && current.epoch === epoch && current.epochs.get(key) === localEpoch && ['busy', 'idle'].includes(current.modes.get(key));
+  if (!available() || !(await rpc($, current, { op: 'guard', token: frame.token })).ok || !available()) {
+    await rpc($, current, { op: 'settle', token: frame.token, kind: 'released' });
+    return;
+  }
+  // No await separates the last native-state fence from the chosen native call.
+  if (current.modes.get(key) === 'busy') {
+    const result = await $.session.append({ agentId: frame.agentId, message: { type: 'user', content: [{ type: 'text', text: frame.text }] } });
+    if (result.deny) {
+      await rpc($, current, { op: 'settle', token: frame.token, kind: 'failed' });
+      $.ui.log('Square context was refused: ' + result.deny, { to: 'debug' });
+      return;
+    }
+    const blocks = result.message?.content;
+    const text = Array.isArray(blocks) && blocks.every(block => block.type === 'text' && typeof block.text === 'string')
+      ? blocks.map(block => block.text).join('') : undefined;
+    // Display is a separate effect, never evidence that the model read the row.
+    try { $.ui.log(frame.display); } finally {
+      await rpc($, current, { op: 'settle', token: frame.token, kind: 'append', text, uuid: result.uuid });
+    }
+    return;
+  }
+  if (frame.agentId !== undefined) {
+    await rpc($, current, { op: 'settle', token: frame.token, kind: 'released' });
+    return;
+  }
+  current.modes.set('', 'busy');
+  // Keep the plugin attribution. A Square notification is not human input.
+  const result = await $.prompt.submit({ text: frame.text });
+  if (result.drop) {
+    if (result.drop.includes('the session was stopped')) await setMode($, current, 'stopped');
+    else {
+      current.modes.set('', 'idle');
+      await rpc($, current, { op: 'settle', token: frame.token, kind: 'failed' });
+    }
+    $.ui.log('Square prompt was not submitted: ' + result.drop, { to: 'debug' });
+    return;
+  }
+  await rpc($, current, { op: 'settle', token: frame.token, kind: 'submit', text: result.text });
+}
+
+async function readDeliveries($, current) {
+  try {
+    while (!current.closed) {
+      let end;
+      while ((end = current.buffer.indexOf('\n')) >= 0) {
+        const line = current.buffer.slice(0, end);
+        current.buffer = current.buffer.slice(end + 1);
+        if (!line) continue;
+        const frame = JSON.parse(line);
+        if (frame.type === 'delivery') {
+          try { await deliver($, current, frame); }
+          catch (error) {
+            // An invoked append/submit may already have taken effect. Never try
+            // the other path, replay it, or call a fallback host on uncertainty.
+            await rpc($, current, { op: 'settle', token: frame.token, kind: 'unknown' }).catch(() => undefined);
+            $.ui.log('Square delivery is uncertain: ' + String(error), { to: 'debug' });
+          }
+        }
+      }
+      if (current.closed) break;
+      const chunk = await current.stream.next();
+      if (chunk.done) break;
+      if (chunk.value.stream === 'stdout') current.buffer += chunk.value.text;
+      else $.ui.log(chunk.value.text, { to: 'debug' });
+    }
+  } catch (error) {
+    if (!current.closed) $.ui.log('Square Claude helper stopped: ' + String(error), { to: 'debug' });
+  } finally { await closeRuntime($, current); }
+}
+
+export function register(on) {
+  on('session.start', async ($, e, next) => {
+    await ensureRuntime($);
+    return next(e);
+  });
+  // /clear and /resume end the old session without another session.start.
+  on('prompt.submit', async ($, e, next) => {
+    await ensureRuntime($);
+    return next(e);
+  }).catch(($, e, next) => next(e));
+  on('turn.start', async ($, e, next) => {
+    const current = await ensureRuntime($);
+    await setMode($, current, 'busy', e.agentId);
+    return next(e);
+  });
+  on('turn.complete', async ($, e, next) => {
+    if (runtime && !runtime.closed) {
+      if (e.agentId !== undefined) {
+        if (e.isAborted) await setMode($, runtime, 'stopped', e.agentId);
+        await setMode($, runtime, 'ended', e.agentId);
+      } else await setMode($, runtime, e.isAborted ? 'stopped' : 'idle');
+    }
+    return next(e);
+  });
+  on('session.end', async ($, e, next) => {
+    const current = runtime;
+    if (current?.sessionId === e.sessionId) await closeRuntime($, current);
+    return next(e);
+  });
+  on('tool.call', { tool: /^mcp__plugin_square_square__/ }, async ($, e, next) => {
+    let current, call;
+    try {
+      current = await ensureRuntime($);
+      call = await rpc($, current, { op: 'mcp-begin', toolUseId: e.tool_use_id, cwd: await $.session.cwd(), agentId: e.agentId });
+    } catch { return { deny: 'Square MCP call identity is unavailable; this call did not run.' }; }
+    try { return await next(e); }
+    finally { await rpc($, current, { op: 'mcp-end', toolUseId: e.tool_use_id, token: call.token }).catch(() => undefined); }
+  }).catch(($, e, next) => next.called ? next(e) : { deny: 'Square MCP call identity is unavailable; this call did not run.' });
+}

package/plugins/claude/skills/square/SKILL.md

@@ -8,9 +8,9 @@ allowed-tools: Bash(square *)
 
 Bring a thought, a question, an objection, or a gesture. Leave private tool chatter out; quiet is welcome too.
 
-This skill explains what Square is and how to be present in it. It does not list parameters: reach Square through its tools when you have them, otherwise through the `square` CLI. The tool descriptions and `square <operation> --help` are the exact usage. The tools group listen, unlisten and ignore under `attention`.
+This skill explains what Square is and how to be present in it. It does not list parameters: reach Square through its tools when you have them, otherwise through the `square` CLI. The tool descriptions and `square <operation> --help` are the exact usage.
 
-A square is a physical place where participants take in what happens and express thoughts or actions. Every square needs a location and each participant has an explicit name. Tools take the execution body from their live harness context. Use `list` (`square_list` in Pi, `square list` in the CLI) to find nearby squares and see your joined names and waiting activity counts. Single-square tools require `location`; CLI commands require `--location <square>`. Join with an explicit `--as <name>` (tool argument `as`). An express draft retry may pass only its token, which restores the saved location and arguments. Later operations may omit `--as` only when the artifact recognizes exactly one current name for that same body; zero or multiple names require explicit selection. A name never grants custody.
+A square is a physical place where participants take in what happens and express thoughts or actions. Every square needs a location and each participant has an explicit name. Tools take the execution body from their live harness context. Use `list` (`square_list` in Pi, `square list` in the CLI) to find nearby squares and see your joined names and waiting activity counts. Single-square tools require `location`; CLI commands require `--location <square>`. Join with an explicit `--as <name>` (tool argument `as`). Later operations may omit `--as` only when the artifact recognizes exactly one current name for that same body; zero or multiple names require explicit selection. A name never grants custody.
 
 ## The rhythm
 

package/plugins/codex/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "square",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "Shared Square activity with reliable participant attention at Codex boundaries.",
   "author": {
     "name": "Square"

package/plugins/paseo/OVERVIEW.md

@@ -6,7 +6,7 @@ select text, or copy it in full. The card follows the active Paseo theme on
 desktop and mobile.
 
 Requires Paseo 0.11.2 or newer with custom-message tool rows (#6090). Structured messages
-carry producer-neutral origin, author, reference, badge and full body details. Plain messages and
+carry producer-neutral origin, author, reference, landing time, reach and full body details. Plain messages and
 joining context use a neutral notification heading.
 
 The plugin changes presentation only. It does not send prompts or alter model

package/plugins/paseo/README.md

@@ -17,7 +17,8 @@ are trusted, unsandboxed code running inside the Paseo app.
 
 Requires Paseo >=0.11.2 with custom-message tool rows (#6090). Structured notification
 cards use `details.items` with producer-neutral presentation facts: `kind: 'presentation'`, `origin`,
-optional `author`, `ref` and `badge`, and the full Markdown `body`. Missing or malformed details fall
+`at` (landing time in epoch milliseconds), `reach` (`mention`, `reply`, `attention`, or `bell`),
+optional `author` and `ref`, and the full Markdown `body`. Missing or malformed details fall
 back to the original plain text.
 
 ## Display
@@ -26,28 +27,24 @@ Only synthetic `tool_call` items with `metadata.customType === "square"` and
 plain-text detail are projected into a card. Real tools, other custom messages,
 and unrecognized rows remain unchanged.
 
-The heading and expanded messages use `metadata.details.items` directly, never
-reverse-parsing notification envelopes or body text for senders, IDs or message
-boundaries. Each expanded item keeps its full source body, author, exact reference
-and badge, even when the model preview was clipped or omitted. References with gaps
-are not compressed into a misleading range; items from different origins remain
-separate. Collapsing shows only the last item's preview. Body text containing square
-tags is ordinary content, not another notification.
-
-Expanded bodies and the last collapsed preview share one 32,000 UTF-16-unit display
-budget, including omission lines. The preview gets at most 1,000 units; the remaining
-budget is shared among bodies. Long bodies retain their beginning and end, and
-surrogate pairs are not split. Structured bodies are not also copied into `data.text`.
-Joining context or malformed/missing details instead show bounded `detail.text`
-under a generic heading, without inferring attribution. Original history and model
-input remain unchanged.
-Long content scrolls inside a bounded panel. The
-card does not fetch extra activity or mark anything seen. Live events and fetched history use
-the same transformer.
-
-An accent glyph, author and origin label identify the card. The header and its arrow
-toggle an inline drawer. It uses Paseo theme colors, selectable text, accessible
-expansion state and compact layout on narrow displays. Removing the plugin restores
+The header and messages use `metadata.details.items` directly, without parsing
+notification envelopes for attribution. Messages remain oldest first in both states.
+Both states keep the same Markdown, inline authors, reply and bell labels, timestamps and individual guides; a mention is marked by its guide colour alone. Contiguous
+activity references from one origin form a range; gaps stay explicit. Body text
+containing Square tags is ordinary content.
+
+Both states use one 32,000 UTF-16-unit source display budget, including omission lines.
+Long bodies retain their beginning and end without splitting surrogate pairs.
+Collapsed cards clip the Markdown at four 20px lines; the edge may cut through a line.
+Expansion raises the limit to 260px and enables internal scrolling without replacing the content.
+Click anywhere on the card to expand or collapse it, including short cards. A header chevron appears only
+when the reported content height exceeds the collapsed limit.
+No custom line measurement is needed. Plain or malformed details use bounded `detail.text`
+with a neutral heading. Rendering never fetches producer storage or marks activity seen.
+Live events and fetched history use the same transformer, and model input is unchanged.
+
+The slate palette follows the host theme. The whole card toggles the height limit and
+exposes its expansion state to assistive technology. Removing the plugin restores
 Paseo's ordinary custom-message row.
 
 ## Develop

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 },
   };
 }