@astrosheep/square 0.3.95 → 0.3.97

package/plugins/paseo/client/markdown.tsx

@@ -1,5 +1,5 @@
 import { useMemo, type ReactNode } from "react";
-import { Platform, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { Platform, StyleSheet, Text, View, type TextStyle } from "react-native";
 import type { PluginTheme } from "@getpaseo/plugin";
 import { Lexer, lexer, type Token, type Tokens } from "marked";
 
@@ -9,6 +9,7 @@ function makeStyles(colors: PluginTheme["colors"]) {
   return {
     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 },
     em: { color: colors.foregroundMuted, fontStyle: "italic" as const },
     del: { color: colors.foregroundMuted, textDecorationLine: "line-through" as const },
@@ -117,7 +118,7 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
       default: {
         const block = token as Tokens.Generic;
         return (
-          <Text key={key} style={[styles.text, textStyle]}>
+          <Text key={key} selectable={Platform.OS === "web"} style={[styles.text, textStyle]}>
             {renderInlines(block.tokens ?? Lexer.lexInline(block.text ?? block.raw), styles, key)}
           </Text>
         );
@@ -126,24 +127,79 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
   });
 }
 
+/** The speaker run into the start of a line: the seal's blue, then the words. */
+function Lead({ name, styles }: { name: string; styles: Styles }) {
+  return <Text style={styles.lead}>{name}{"  "}</Text>;
+}
+
 /** One line (or a few) of Markdown, inline only: the collapsed preview on a notification card. */
-export function SquareInline({ text, theme, numberOfLines, style }: {
+export function SquareInline({ text, theme, numberOfLines, lead }: {
   text: string;
   theme: PluginTheme;
   numberOfLines?: number;
-  style?: TextStyle;
+  lead?: string;
 }) {
   const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
   return (
-    <Text numberOfLines={numberOfLines} style={[styles.text, style]}>
+    <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, no route line — the words only, indented by the card. */
-export function SquareMarkdownBody({ text, theme, style }: { text: string; theme: PluginTheme; style?: ViewStyle }) {
+/** 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, no route line — the words only, at full width.
+ * `lead` runs the speaker into the first line; `actor` names whoever performs an action.
+ */
+export function SquareMarkdownBody({ text, theme, lead, actor }: {
+  text: string;
+  theme: PluginTheme;
+  lead?: string;
+  actor?: string;
+}) {
   const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
-  const tokens = useMemo(() => lexer(text), [text]);
-  return <View style={[styles.block, style]}>{renderBlocks(tokens, styles, "body")}</View>;
+  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={actor === undefined ? words : <>{actor} {words}</>} />;
+    }
+    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>
+  );
 }

package/plugins/paseo/client/palette.ts

@@ -1,40 +1,50 @@
 import type { PluginTheme } from "@getpaseo/plugin";
+import { MARBLE_DARK, MARBLE_LIGHT } from "./marble";
 
 /**
- * Square's own courtyard palette: Carrara marble (grey-white stone with a
- * slate-blue vein), deliberately no relative of notesoup's warm parchment or
+ * Square's own courtyard palette: veinless honed stone (muted grey light, charcoal dark) and a
+ * slate seal ■ — everything half a step down, the quiet card on the timeline, deliberately no relative of notesoup's warm parchment or
  * pi-meantime's neutral carbon. Every token here is opaque and self-contained — the card and
  * Markdown never borrow the host's surface ramp or accent, only its appearance
  * (read from the host ink) and its accentForeground, which paints text on top
  * of an accent fill.
  */
 const DARK = {
-  surface0: "#14171b", // inset / code
-  surface1: "#1c2126", // card
-  surface2: "#14171b", // inset / code
-  border: "#2e353d",
-  foreground: "#e8edf3",
-  foregroundMuted: "#8b96a3",
-  accent: "#8ea8c3", // plaza ■ / links
+  surface0: "#15171a", // inset / code
+  surface1: "#1a1d20", // card (charcoal stone)
+  surface2: "#15171a", // inset / code
+  border: "#2b2f34",
+  foreground: "#dde1e6",
+  foregroundMuted: "#858b94",
+  accent: "#8298ad", // plaza ■ / links
 } as const;
 
 const LIGHT = {
-  surface0: "#e7ecf1",
-  surface1: "#f2f5f9", // cool marble white
-  surface2: "#e7ecf1",
-  border: "#d2dae3",
-  foreground: "#181d24",
-  foregroundMuted: "#67737f",
-  accent: "#4b6582",
+  surface0: "#e9ebee",
+  surface1: "#f4f5f6", // card (grey stone)
+  surface2: "#e9ebee",
+  border: "#e0e2e5",
+  foreground: "#2b2e33",
+  foregroundMuted: "#90959c",
+  accent: "#56687e",
 } as const;
 
-const VOICE = { dark: "#8b96a3", light: "#67737f" } as const; // grey: only the ■ carries colour
+const TILE = 512;
+
+/** Web-only surface: react-native-web passes these through as inline CSS. */
+const STONE = {
+  // A slab resting on the page: one darker cut along the bottom edge, a tight contact shadow, no sheen.
+  dark: { image: `url(${MARBLE_DARK})`, edge: "#34393f", boxShadow: "0 1px 0 rgba(0,0,0,0.3), 0 4px 10px -6px rgba(0,0,0,0.55)", inlay: "inset 0 0 0 0.5px rgba(0,0,0,0.4)" },
+  light: { image: `url(${MARBLE_LIGHT})`, edge: "#c9ccd1", boxShadow: "0 1px 0 rgba(24,26,30,0.04), 0 4px 10px -6px rgba(24,26,30,0.18)", inlay: "inset 0 0 0 0.5px rgba(0,0,0,0.26)" },
+} as const;
 
 export interface SquarePalette {
   /** Complete theme for the card and its Markdown surfaces. */
   theme: PluginTheme;
-  /** The filled ● speaker dot; the hollow ○ keeps the muted ink instead. */
-  voice: string;
+  /** Marble card surface for the web host, cut from the tile at `seed`; native keeps the flat surface1. */
+  stone(seed: string): { backgroundImage: string; backgroundSize: string; backgroundPosition: string; borderBottomColor: string; boxShadow: string };
+  /** Web-only: the ■ set into the stone. */
+  inlay: { boxShadow: string };
 }
 
 /** Paseo theme colors are hex (#RGB or #RRGGBB). */
@@ -57,6 +67,19 @@ export function squarePalette(theme: PluginTheme): SquarePalette {
       statusWarning: theme.colors.statusWarning,
       statusDanger: theme.colors.statusDanger,
     } },
-    voice: dark ? VOICE.dark : VOICE.light,
+    stone: seed => {
+      // Each card shows its own patch of the slab, so neighbours never repeat a vein.
+      let hash = 2166136261;
+      for (const char of seed) hash = Math.imul(hash ^ char.charCodeAt(0), 16777619);
+      const { image, edge, boxShadow } = dark ? STONE.dark : STONE.light;
+      return {
+        backgroundImage: image,
+        backgroundSize: `${TILE}px ${TILE}px`,
+        backgroundPosition: `${-((hash >>> 0) % TILE)}px ${-((hash >>> 9) % TILE)}px`,
+        borderBottomColor: edge,
+        boxShadow,
+      };
+    },
+    inlay: { boxShadow: (dark ? STONE.dark : STONE.light).inlay },
   };
 }

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

@@ -1,95 +1,104 @@
 import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import { useMemo, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Pressable, ScrollView, StyleSheet, Text, View, type ViewStyle } from "react-native";
 import { parseSquareBlocks, parseSquareVoice, type SquareMessageData } from "../shared/message";
-import { MONO, SquareInline, SquareMarkdownBody } from "./markdown";
+import { MONO, SquareCue, SquareInline, SquareMarkdownBody } from "./markdown";
 import { squarePalette } from "./palette";
 
 /**
  * The accent ■ marks the square itself, not a route.
- * Collapsed: ■ who spoke · where · how many, then two preview lines.
- * Expanded: the same header, then the bodies indented under it. Several voices
- * become a stage script: each speaker holds a fixed left column, their words
- * run down a single ruled dialogue column. No narration.
+ * Header (both states): ■ square · who spoke … act ids · how many.
+ * Collapsed: two preview lines. Expanded: the whole scene, at full width.
+ * One attribution style for one voice or many — each speaker's name runs into
+ * their first line in the seal's color (not repeated while they keep talking);
+ * a bell or an *action* is stage direction, a caption on a hairline.
  */
 export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<SquareMessageData>) {
   const [expanded, setExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const palette = useMemo(() => squarePalette(theme), [theme]);
   const { text, items } = item.data;
   const latest = items?.[items.length - 1];
   const preview = latest?.preview?.replace(/\s+/g, " ").trim();
   const blocks = useMemo(() => parseSquareBlocks(text), [text]);
-  const multi = blocks.length > 1;
-  const single = multi ? undefined : parseSquareVoice(blocks[0].actor, blocks[0].meta);
+  const voices = useMemo(() => blocks.map(block => parseSquareVoice(block.actor, block.meta)), [blocks]);
   const names = items !== undefined
     ? items.map(entry => entry.actor)
-    : blocks.map(block => parseSquareVoice(block.actor, block.meta).speaker);
+    : voices.map(voice => voice.speaker);
   const speakers = [...new Set(names.filter((name): name is string => name !== undefined))];
   const squareName = latest?.square ?? blocks[0].meta?.split("·")[1]?.trim() ?? "Square";
-  const bell = latest?.route === "bell" || single?.bell === true;
+  const bell = latest?.route === "bell" || (voices.length === 1 && voices[0].bell);
   // Header is the same in both states; act id is always shown when we know it.
-  const actIds = [...new Set(blocks.flatMap(block => {
-    const id = parseSquareVoice(block.actor, block.meta).actId;
-    return id ? [id] : [];
-  }))];
-  const trailing = `· ${squareName}${actIds.length ? ` · ${actIds.join(", ")}` : ""}${items && items.length > 1 ? ` · ${items.length}` : ""}`;
+  const actIds = [...new Set(voices.flatMap(voice => voice.actId ? [voice.actId] : []))];
+  const trailing = [actSpan(actIds), items && items.length > 1 ? String(items.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 indent = { paddingLeft: 15 };
 
   return (
-    <View style={{ backgroundColor: surface1, borderWidth: StyleSheet.hairlineWidth, borderColor: border, borderRadius: 4, paddingHorizontal: 12, paddingVertical: 9 }}>
+    <View style={[
+      { backgroundColor: surface1, borderWidth: StyleSheet.hairlineWidth, borderColor: border, borderRadius: 4, paddingHorizontal: 12, paddingVertical: 9 },
+      layout.platform === "web" && palette.stone(`${squareName} ${actIds[0] ?? ""}`) as ViewStyle,
+    ]}>
       <Pressable
         accessibilityRole="button"
         accessibilityLabel={`${expanded ? "收起" : "展开"} ${squareName}: ${speakers.join(", ") || "Square"}`}
         aria-expanded={expanded}
         onPress={() => setExpanded(value => !value)}
-        style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        style={({ pressed }) => ({ opacity: pressed ? 0.85 : 1 })}
       >
         <View style={row}>
-          <Text style={{ color: accent, fontSize: 9 }}>■</Text>
-          <Text numberOfLines={1} style={{ color: foreground, fontSize: 13, fontWeight: "500", flex: 1 }}>
-            {speakers.join(", ") || "Square"}
-            {bell && <Text style={{ color: muted, fontWeight: "400" }}> · rang the bell</Text>}
+          <View style={[{ width: 9, height: 9, borderRadius: 1.5, backgroundColor: accent }, layout.platform === "web" && palette.inlay as ViewStyle]} />
+          <Text numberOfLines={1} style={{ color: foreground, fontSize: 13, fontWeight: "600", flex: 1 }}>
+            {squareName}
+            {(speakers.length > 0 || bell) && (
+              <Text style={{ color: muted, fontWeight: "400" }}> · {[speakers.join(", "), bell ? "🔔" : ""].filter(Boolean).join(" · ")}</Text>
+            )}
           </Text>
-          <Text style={{ color: muted, fontSize: 12 }}>{trailing}</Text>
-          <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={15} color={muted} />
+          {trailing !== "" && <Text style={{ color: detail, fontSize: 11, fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{trailing}</Text>}
+          <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={15} color={detail} />
         </View>
         {!expanded && preview !== undefined && preview !== "" && (
           <View style={{ ...indent, marginTop: 3 }}>
-            <SquareInline text={preview} theme={palette.theme} numberOfLines={2} />
+            <SquareInline text={preview} theme={palette.theme} numberOfLines={2} lead={latest?.actor} />
           </View>
         )}
       </Pressable>
       {expanded && (
         <ScrollView style={{ maxHeight: layout.compact ? 280 : 400, marginTop: 3 }} nestedScrollEnabled>
-          {multi ? (
-            <View style={{ gap: 10 }}>
-              {blocks.map((block, index) => {
-                const voice = parseSquareVoice(block.actor, block.meta);
-                const detail = [voice.bell ? "bell" : undefined, voice.actId].filter(Boolean).join(" · ");
-                return (
-                  <View key={voice.actId ?? index} style={{ flexDirection: "row", alignItems: "flex-start", gap: 10 }}>
-                    <View style={{ width: 62, paddingTop: 1, gap: 1 }}>
-                      <View style={{ flexDirection: "row", alignItems: "center", gap: 5 }}>
-                        <Text style={{ fontSize: 8.5, color: voice.glyph === "○" ? muted : palette.voice }}>{voice.glyph}</Text>
-                        {voice.speaker && <Text numberOfLines={1} style={{ color: foreground, fontSize: 12.5, fontWeight: "500", flexShrink: 1 }}>{voice.speaker}</Text>}
-                      </View>
-                      {(voice.bell || voice.actId) && <Text numberOfLines={1} style={{ color: muted, fontSize: 10.5, fontFamily: MONO, paddingLeft: 13 }}>{detail}</Text>}
-                    </View>
-                    <View style={{ flex: 1, borderLeftWidth: StyleSheet.hairlineWidth, borderLeftColor: border, paddingLeft: 10 }}>
-                      <SquareMarkdownBody text={block.body} theme={palette.theme} />
-                    </View>
-                  </View>
-                );
-              })}
-            </View>
-          ) : (
-            <SquareMarkdownBody text={blocks[0].body} theme={palette.theme} style={indent} />
-          )}
+          <View style={{ ...indent, gap: 7 }}>
+            {blocks.map((block, index) => {
+              const voice = voices[index];
+              if (block.body === "" && !voice.bell) return null;
+              const repeat = index > 0 && voices[index - 1].speaker === voice.speaker;
+              return (
+                <View key={voice.actId ?? index} style={{ gap: 6 }}>
+                  {voice.bell && <SquareCue theme={palette.theme} label={`${voice.speaker ?? ""} 🔔`} />}
+                  <SquareMarkdownBody
+                    text={block.body}
+                    theme={palette.theme}
+                    lead={repeat ? undefined : voice.speaker}
+                    actor={voice.speaker}
+                  />
+                </View>
+              );
+            })}
+          </View>
         </ScrollView>
       )}
     </View>
   );
 }
+
+/** act/18, act/19 → act/18–19; anything else is listed as is. */
+function actSpan(ids: string[]): string | undefined {
+  if (ids.length < 2) return ids[0];
+  const numbers = ids.map(id => /^act\/(\d+)$/.exec(id)?.[1]).map(Number);
+  return numbers.every(Number.isInteger) ? `act/${Math.min(...numbers)}–${Math.max(...numbers)}` : ids.join(", ");
+}

package/plugins/paseo/shared/message.ts

@@ -50,7 +50,7 @@ export function parseSquareBlocks(text: string): SquareBlock[] {
   return blocks;
 }
 
-export interface SquareVoice { glyph: string; speaker?: string; bell: boolean; actId?: string }
+export interface SquareVoice { speaker?: string; bell: boolean; actId?: string }
 
 // A voice line is chrome for the card: `● rei rang the bell` names who, how, and which
 // activity. Route prose is parsed into those marks, never rendered as narration.
@@ -58,7 +58,6 @@ export function parseSquareVoice(actorLine?: string, metaLine?: string): SquareV
   const line = actorLine?.trim() ?? "";
   const cleaned = line.replace(/^[●○◎◆■·]\s*/, "").trim();
   return {
-    glyph: /^[●○◎·]/.exec(line)?.[0] ?? "●",
     speaker: /\S+/.exec(cleaned)?.[0],
     bell: /rang the bell/i.test(cleaned),
     actId: /act\/\d+/.exec(metaLine ?? "")?.[0],

package/plugins/pi/square-pi.js

@@ -3,7 +3,7 @@ import { Container, Markdown, Spacer, Text } from '@earendil-works/pi-tui';
 import { z } from 'zod/v4';
 
 import { Square, harnessOwner } from '../../dist/square-api.js';
-import { SQUARE_TOOLS, SQUARE_TOOL_INSTRUCTIONS, squareToolFailure, squareToolFailureText } from '../../dist/square-tools.js';
+import { SQUARE_TOOLS, SQUARE_TOOL_INSTRUCTIONS, squareToolsEnabled, squareToolFailure, squareToolFailureText } from '../../dist/square-tools.js';
 
 import { presentPendingAtBoundary, renderPendingAtBoundary } from '../../dist/boundary-presentation.js';
 import { operationEnv } from '../../dist/participant-identity.js';
@@ -46,8 +46,10 @@ export function pendingCardDetails(pending) {
     recipient: membership.seat.participant,
     route: note.route,
     act: formatActivityId(note.actIndex),
-    preview: previewAttentionBody(note.body),
-    description: renderAttentionDescription({ actor: note.actor, route: note.route }),
+    preview: previewAttentionBody(note.body, note.delivery),
+    description: note.delivery?.mode === 'direct'
+      ? `${note.actor} → ${membership.seat.participant}`
+      : renderAttentionDescription({ actor: note.actor, route: note.route }),
     body: note.body,
   })));
   if (items.length === 0) return undefined;
@@ -141,7 +143,7 @@ export function renderSquareCard(message, { expanded, outputPad = 1 }, theme) {
 }
 
 export default function squarePiExtension(pi) {
-  for (const tool of SQUARE_TOOLS) {
+  if (squareToolsEnabled(process.env)) for (const tool of SQUARE_TOOLS) {
     pi.registerTool({
       name: `square_${tool.name}`,
       label: `Square ${tool.name}`,