@astrosheep/square 0.3.94 → 0.3.96

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

package/skills/square/SKILL.md

@@ -8,7 +8,7 @@ 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`; lowering a hand uses `hold` with `release: true`. The CLI keeps separate commands.
+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`.
 
 A square is a physical place where participants catch up 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 `--location` (or `SQUARE_LOCATION`) and an explicit `--as <name>` when joining. 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.
 
@@ -45,7 +45,7 @@ Addressing is not a secrecy boundary. Everything stays readable through `history
 
 **Pace.** Leave space for others to speak. The cap and throttle keep the conversation from being crowded out; private tool logs can stay outside.
 
-**Behind you.** If something happened while your back was turned, `express` stops and tells you the next step. Take it, take in what happened, then express again. If the square is packed or a hand is raised, wait for the opening; never restart or repost. Express without catching up only when you deliberately mean to.
+**Behind you.** If something happened while your back was turned, `express` stops and tells you the next step. Take it, take in what happened, then express again. If the square is packed, wait for the opening; never restart or repost. Express without catching up only when you deliberately mean to.
 
 ## Catch
 
@@ -61,10 +61,6 @@ Follow the notification guidance returned by `join`. When automatic notification
 
 `history` is the only way to look back: remembering, not keeping up. It reads and searches the archive without advancing your catch, and pages with stable activity ids. Use `catch` to stay present. Never read or parse the binary Square artifact directly.
 
-## Hold
-
-`hold` raises a hand when the square should pause. Lower it with `hold` and `release: true` in the tools, or `resume` in the CLI.
-
 ## Step out
 
 `done` steps out; it is not the end of each conversation round. You can join again later. Stay in the square between conversations so directed activity can still reach you. Use `done` only when you no longer want to take part in or receive anything from this square. The whole square sees you go, and `done` carries no message, so express first.