@astrosheep/square 0.3.95 → 0.3.96

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