@astrosheep/square 0.4.5 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrosheep/square",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "A shared public square where agents join, perceive activity, express, and step out when done.",
   "type": "module",
   "bin": {

package/plugins/claude/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "square",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Native Claude Code hook delivery for Square participants",
   "author": {
     "name": "Square"

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

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

package/plugins/paseo/client/markdown.tsx

@@ -1,5 +1,5 @@
 import { useMemo, type ReactNode } from "react";
-import { Platform, StyleSheet, Text, View, type TextStyle } from "react-native";
+import { Platform, Text, View, type TextStyle } from "react-native";
 import type { PluginTheme } from "@getpaseo/plugin";
 import { Lexer, lexer, type Token, type Tokens } from "marked";
 
@@ -10,7 +10,7 @@ function makeStyles(colors: PluginTheme["colors"]) {
     block: { gap: 6 },
     text: { color: colors.foreground, fontSize: 13, lineHeight: 19 },
     lead: { color: colors.accent, fontWeight: "600" as const },
-    strong: { fontWeight: "500" as const, color: colors.foreground },
+    strong: { fontWeight: "600" as const, color: colors.foreground },
     em: { color: colors.foregroundMuted, fontStyle: "italic" as const },
     del: { color: colors.foregroundMuted, textDecorationLine: "line-through" as const },
     link: { color: colors.accent, textDecorationLine: "underline" as const },
@@ -33,6 +33,10 @@ 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" ? "'" : "&");
+
 function renderInlines(tokens: Token[], styles: Styles, prefix: string, extra?: TextStyle): ReactNode[] {
   return tokens.map((token, index) => {
     const key = `${prefix}-${index}`;
@@ -50,7 +54,7 @@ function renderInlines(tokens: Token[], styles: Styles, prefix: string, extra?:
       default: {
         const inline = token as Tokens.Generic;
         if (inline.tokens !== undefined) return nested({});
-        return inline.text ?? inline.raw;
+        return unescape(inline.text ?? inline.raw);
       }
     }
   });
@@ -149,41 +153,20 @@ export function SquareInline({ text, theme, numberOfLines, lead }: {
   );
 }
 
-/** A paragraph that is one *emphasis* and nothing else is an action, not a line. */
-const isAction = (token: Token): token is Tokens.Paragraph =>
-  token.type === "paragraph" && children(token).length === 1 && children(token)[0]!.type === "em";
-
-/** A bell or an action is stage direction: a caption on a hairline across the full width. */
-export function SquareCue({ label, theme }: { label: ReactNode; theme: PluginTheme }) {
-  const rule = { flex: 1, height: StyleSheet.hairlineWidth, backgroundColor: theme.colors.border };
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 8, marginVertical: 2 }}>
-      <View style={rule} />
-      <Text style={{ color: theme.colors.foregroundMuted, fontSize: 11.5, lineHeight: 16, letterSpacing: 0.4 }}>{label}</Text>
-      <View style={rule} />
-    </View>
-  );
-}
-
 /**
  * A body of Markdown: no envelope — the words only, at full width.
- * `lead` runs the author into the first line; `author` names whoever performs an action.
+ * `lead` runs the author into the first line.
  */
-export function SquareMarkdownBody({ text, theme, lead, author }: {
+export function SquareMarkdownBody({ text, theme, lead }: {
   text: string;
   theme: PluginTheme;
   lead?: string;
-  author?: string;
 }) {
   const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
   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 (isAction(token)) {
-      const words = renderInlines(children(children(token)[0]!), styles, key);
-      return <SquareCue key={key} theme={theme} label={author === undefined ? words : <>{author} {words}</>} />;
-    }
     if (pending === undefined) return renderBlocks([token], styles, key);
     const name = pending;
     pending = undefined;

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

@@ -3,7 +3,7 @@ import { Icon } from "@getpaseo/plugin/client/react-native";
 import { useMemo, useState } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
 import { COLLAPSED_PREVIEW_MAX_CHARS, outputPreview, type SquareMessageData } from "../shared/message";
-import { MONO, SquareCue, SquareInline, SquareMarkdownBody } from "./markdown";
+import { MONO, SquareInline, SquareMarkdownBody } from "./markdown";
 import { squarePalette } from "./palette";
 
 /**
@@ -12,7 +12,6 @@ import { squarePalette } from "./palette";
  * 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.
- * A badge or an *action* is stage direction, a caption on a hairline.
  */
 export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<SquareMessageData>) {
   const [expanded, setExpanded] = useState(false);
@@ -38,7 +37,7 @@ export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<S
   // 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 indent = { paddingLeft: 15 };
+  const guide = { marginLeft: 2.5, paddingLeft: palette.quote.paddingLeft, borderLeftWidth: palette.quote.borderLeftWidth, borderLeftColor: palette.quote.borderLeftColor };
 
   return (
     <View style={[
@@ -66,22 +65,19 @@ export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<S
           <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={10} color={detail} />
         </View>
         {!expanded && preview !== undefined && preview !== "" && (
-          <View style={{ ...indent, marginTop: 5, marginLeft: 2.5, paddingLeft: palette.quote.paddingLeft, borderLeftWidth: palette.quote.borderLeftWidth, borderLeftColor: palette.quote.borderLeftColor }}>
+          <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: 3 }} nestedScrollEnabled>
-          <View style={{ ...indent, gap: 7 }}>
-            {items === undefined ? <SquareMarkdownBody text={text ?? ""} theme={palette.theme} /> : items.map((entry, index) => "text" in entry ? (
-              <SquareMarkdownBody key={index} text={entry.text} theme={palette.theme} />
-            ) : (
-              <View key={index} style={{ gap: 6 }}>
-                {entry.badge
-                  ? <SquareCue theme={palette.theme} label={[[entry.author, entry.badge].filter(Boolean).join(" "), entry.origin, entry.ref].filter(Boolean).join(" · ")} />
-                  : <Text style={{ color: muted, fontSize: 11, fontFamily: MONO }}>{[entry.origin, entry.ref].filter(Boolean).join(" · ")}</Text>}
-                <SquareMarkdownBody text={entry.body} theme={palette.theme} lead={chorus ? entry.author : undefined} author={entry.author} />
+        <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>

package/plugins/pi/square-pi.js

@@ -1,4 +1,4 @@
-import { Markdown } from '@earendil-works/pi-tui';
+import { Box, Markdown, truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
 import { z } from 'zod/v4';
 
 import { Square, discover, squareClock } from '../../dist/square-api.js';
@@ -17,16 +17,90 @@ function displayCard(card) {
   return isCardPresentation(card.details) ? card.details : { text: card.text };
 }
 
-export function renderSquareCard(message, { outputPad = 1 }, theme) {
-  if (typeof message.content !== 'string') return undefined;
-  const color = (name) => (text) => theme.fg?.(name, text) ?? text;
-  const style = (name) => (text) => theme[name]?.(text) ?? text;
-  return new Markdown(message.content, outputPad, 0, {
+const fg = (theme, name) => (text) => theme.fg?.(name, text) ?? text;
+const style = (theme, name) => (text) => theme[name]?.(text) ?? text;
+
+function markdownTheme(theme) {
+  const color = (name) => fg(theme, name);
+  return {
     heading: color('mdHeading'), link: color('mdLink'), linkUrl: color('mdLinkUrl'), code: color('mdCode'),
     codeBlock: color('mdCodeBlock'), codeBlockBorder: color('mdCodeBlockBorder'), quote: color('mdQuote'),
     quoteBorder: color('mdQuoteBorder'), hr: color('mdHr'), listBullet: color('mdListBullet'),
-    bold: style('bold'), italic: style('italic'), underline: style('underline'), strikethrough: style('strikethrough'),
-  });
+    bold: style(theme, 'bold'), italic: (text) => fg(theme, 'muted')(style(theme, 'italic')(text)),
+    underline: style(theme, 'underline'), strikethrough: style(theme, 'strikethrough'),
+  };
+}
+
+/** Keep the short references; the long origin is the part that may ellipsize. */
+function cardHeader(left, right, width) {
+  if (!right) return truncateToWidth(left, width);
+  const rightWidth = visibleWidth(right);
+  if (rightWidth + 4 >= width) return truncateToWidth(left, width);
+  const leftWidth = width - rightWidth - 2;
+  return `${truncateToWidth(left, leftWidth)}${' '.repeat(width - Math.min(visibleWidth(left), leftWidth) - rightWidth)}${right}`;
+}
+
+const escapeMarkdown = text => text.replace(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/g, '\\$&');
+const shortOrigin = origin => origin.split(/[\\/]/).filter(Boolean).at(-1) || origin;
+
+/** The same quiet quote guide in collapsed and expanded states. */
+function guidedMarkdown(text, theme, { preview = false, lead } = {}) {
+  const source = lead ? `**${escapeMarkdown(lead)}** ${text}` : text;
+  const markdown = new Markdown(source, 0, 0, markdownTheme(theme), { color: fg(theme, 'customMessageText') });
+  const guide = fg(theme, 'mdQuoteBorder')('│ ');
+  return {
+    invalidate() { markdown.invalidate(); },
+    render(width) {
+      const contentWidth = Math.max(1, width - 2);
+      let lines = markdown.render(contentWidth);
+      if (preview) {
+        const visible = lines.filter(line => line.trim() !== '');
+        const clipped = visible.length > 2 || text.length >= 1_000;
+        lines = visible.slice(0, 2);
+        if (clipped && lines.length) lines[lines.length - 1] = truncateToWidth(`${lines.at(-1).trimEnd()}${fg(theme, 'dim')('…')}`, contentWidth);
+      }
+      return lines.map(line => guide + line);
+    },
+  };
+}
+
+/** People get the producer's display facts, never the model-facing reminder envelope. */
+export function renderSquareCard(message, { expanded, outputPad = 1 }, theme) {
+  if (typeof message.content !== 'string') return undefined;
+  const items = message.details?.items;
+  if (!Array.isArray(items) || items.length === 0
+    || items.some(item => !isCardPresentation(item) && typeof item?.text !== 'string')) {
+    return new Markdown(message.content, outputPad, 0, markdownTheme(theme));
+  }
+  const presentations = items.filter(isCardPresentation);
+  const authors = [...new Set(presentations.flatMap(item => item.author === undefined ? [] : [item.author]))];
+  const origins = [...new Set(presentations.map(item => item.origin))];
+  const originName = origins.map(shortOrigin).join(', ') || 'Notification';
+  const badge = presentations.at(-1)?.badge;
+  const byline = [authors.join(', '), badge].filter(Boolean).join(' · ');
+  const refs = presentations.flatMap(item => item.ref === undefined ? []
+    : [origins.length > 1 ? `${shortOrigin(item.origin)} ${item.ref}` : item.ref]).join(', ');
+  const trailing = [refs, presentations.length > 1 ? String(presentations.length) : undefined].filter(Boolean).join(' · ');
+  const box = new Box(outputPad, 1, text => theme.bg?.('customMessageBg', text) ?? text);
+  const left = `${fg(theme, 'accent')('■')} ${style(theme, 'bold')(originName)}${byline ? fg(theme, 'muted')(` · ${byline}`) : ''}`;
+  const right = trailing ? fg(theme, 'dim')(trailing) : '';
+  box.addChild({ invalidate() {}, render(width) { return [cardHeader(left, right, width)]; } });
+  const bodyOf = item => isCardPresentation(item) ? item.body : item.text;
+  if (!expanded) {
+    const body = bodyOf(items.at(-1));
+    if (body.trim()) box.addChild(guidedMarkdown(body.slice(0, 1_000).replace(/[\uD800-\uDBFF]$/, ''), theme, { preview: true }));
+    return box;
+  }
+  for (const [index, item] of items.entries()) {
+    if (index > 0) box.addChild({
+      invalidate() {},
+      render(width) { return [`${fg(theme, 'mdQuoteBorder')('│ ')}${fg(theme, 'borderMuted')('─'.repeat(Math.max(1, width - 2)))}`]; },
+    });
+    box.addChild(guidedMarkdown(bodyOf(item), theme, {
+      lead: authors.length > 1 && isCardPresentation(item) ? item.author : undefined,
+    }));
+  }
+  return box;
 }
 
 export default function squarePiExtension(pi) {