@astrosheep/square 0.3.90 → 0.3.92

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

@@ -1,6 +1,6 @@
 {
   "name": "square",
-  "version": "0.3.90",
+  "version": "0.3.92",
   "description": "Native Claude Code inbox delivery for Square participants",
   "types": "./types.d.ts",
   "author": {

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

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

package/plugins/codex/hooks/hooks.json

@@ -9,6 +9,9 @@
     "SessionEnd": [
       { "hooks": [{ "type": "command", "command": "square codex-hook", "timeout": 3 }] }
     ],
+    "UserPromptSubmit": [
+      { "hooks": [{ "type": "command", "command": "square codex-hook", "timeout": 5 }] }
+    ],
     "PostToolUse": [
       {
         "hooks": [

package/plugins/paseo/client/markdown.tsx

@@ -1,10 +1,7 @@
 import { useMemo, type ReactNode } from "react";
-import { Platform, Text, View, type TextStyle } from "react-native";
+import { Platform, Text, View, type TextStyle, type ViewStyle } from "react-native";
 import type { PluginTheme } from "@getpaseo/plugin";
 import { Lexer, lexer, type Token, type Tokens } from "marked";
-import { parseSquareBlocks } from "../shared/message.ts";
-
-export { parseSquareBlocks };
 
 export const MONO = Platform.select({ ios: "Menlo", android: "monospace", default: "ui-monospace, Menlo, monospace" });
 
@@ -12,30 +9,21 @@ function makeStyles(colors: PluginTheme["colors"]) {
   return {
     block: { gap: 6 },
     text: { color: colors.foreground, fontSize: 13, lineHeight: 19 },
-    strong: { fontWeight: "700" as const },
-    em: { fontStyle: "italic" as const },
-    del: { textDecorationLine: "line-through" 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 },
     link: { color: colors.accent, textDecorationLine: "underline" as const },
-    inlineCode: { fontFamily: MONO, fontSize: 12, backgroundColor: colors.surface2, color: colors.foreground },
-    codeBlock: {
-      backgroundColor: colors.surface0,
-      borderRadius: 8,
-      borderWidth: 1,
-      borderColor: colors.border,
-      paddingHorizontal: 9,
-      paddingVertical: 7,
-    },
-    codeText: { fontFamily: MONO, fontSize: 11.5, lineHeight: 17, color: colors.foreground },
+    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 },
-    meta: { color: colors.foregroundMuted, fontSize: 11, lineHeight: 15, fontFamily: MONO },
-    actor: { color: colors.accent, fontSize: 12, lineHeight: 17 },
     separator: { height: 1, backgroundColor: colors.border, marginVertical: 4 },
     listRow: { flexDirection: "row" as const, gap: 6 },
     listItem: { flexShrink: 1, gap: 2 },
-    bullet: { color: colors.accent, fontSize: 13, lineHeight: 19 },
+    bullet: { color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 },
     tableRow: { flexDirection: "row" as const, gap: 8 },
-    tableCell: { flex: 1, fontSize: 12 },
+    tableCell: { flex: 1 },
   };
 }
 
@@ -55,7 +43,7 @@ function renderInlines(tokens: Token[], styles: Styles, prefix: string, extra?:
       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.text, extra, styles.inlineCode]}>{token.text}</Text>;
       case "br": return "\n";
       case "image": return token.text;
       default: {
@@ -86,7 +74,7 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
         );
       case "heading":
         return (
-          <Text key={key} style={[styles.text, textStyle, styles.strong, { fontSize: Math.max(13, 18 - token.depth) }]}>
+          <Text key={key} style={[styles.text, textStyle, styles.strong]}>
             {renderInlines(children(token), styles, key)}
           </Text>
         );
@@ -100,7 +88,7 @@ function renderBlocks(tokens: Token[], styles: Styles, prefix: string, textStyle
             {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>
@@ -153,19 +141,9 @@ export function SquareInline({ text, theme, numberOfLines, style }: {
   );
 }
 
-export function SquareMarkdown({ text, theme }: { text: string; theme: PluginTheme }) {
+/** 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 }) {
   const styles = useMemo(() => makeStyles(theme.colors), [theme.colors]);
-  const blocks = useMemo(() => parseSquareBlocks(text), [text]);
-  return (
-    <View style={styles.block}>
-      {blocks.map((block, index) => (
-        <View key={index} style={styles.block}>
-          {index > 0 && <View style={styles.separator} />}
-          {block.meta !== undefined && <Text style={styles.meta}>{block.meta}</Text>}
-          {block.actor !== undefined && <Text style={styles.actor}>{block.actor}</Text>}
-          {renderBlocks(lexer(block.body), styles, `${index}`)}
-        </View>
-      ))}
-    </View>
-  );
+  const tokens = useMemo(() => lexer(text), [text]);
+  return <View style={[styles.block, style]}>{renderBlocks(tokens, styles, "body")}</View>;
 }

package/plugins/paseo/client/palette.ts

@@ -0,0 +1,62 @@
+import type { PluginTheme } from "@getpaseo/plugin";
+
+/**
+ * Square's own courtyard palette: cool pewter slate and a cold blue voice,
+ * 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: "#121519", // inset / code
+  surface1: "#171b20", // card
+  surface2: "#121519", // inset / code
+  border: "#262d36",
+  foreground: "#e6ebf2",
+  foregroundMuted: "#7d8999",
+  accent: "#60a5fa", // plaza ■ / links
+} as const;
+
+const LIGHT = {
+  surface0: "#e8edf3",
+  surface1: "#f3f6fa", // pewter slate, not notesoup's warm parchment
+  surface2: "#e8edf3",
+  border: "#d5dee8",
+  foreground: "#141b24",
+  foregroundMuted: "#64748b",
+  accent: "#2563eb",
+} as const;
+
+const VOICE = { dark: "#93c5fd", light: "#3b82f6" } 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;
+}
+
+/** Paseo theme colors are hex (#RGB or #RRGGBB). */
+function brightness(hex: string): number {
+  const rgb = hex.length === 4 ? hex.slice(1).replace(/./g, digit => digit + digit) : hex.slice(1, 7);
+  return 0.299 * parseInt(rgb.slice(0, 2), 16)
+    + 0.587 * parseInt(rgb.slice(2, 4), 16)
+    + 0.114 * parseInt(rgb.slice(4, 6), 16);
+}
+
+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);
+  const palette = dark ? DARK : LIGHT;
+  return {
+    theme: { colors: {
+      ...palette,
+      accentForeground: theme.colors.accentForeground,
+      statusSuccess: theme.colors.statusSuccess,
+      statusWarning: theme.colors.statusWarning,
+      statusDanger: theme.colors.statusDanger,
+    } },
+    voice: dark ? VOICE.dark : VOICE.light,
+  };
+}

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

@@ -1,69 +1,99 @@
 import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import { useMemo, useState } from "react";
-import { Pressable, ScrollView, Text, View } from "react-native";
-import { outputPreview, squareHeadline, type SquareMessageData } from "../shared/message";
-import { SquareInline, SquareMarkdown } from "./markdown";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { parseSquareBlocks, parseSquareVoice, type SquareMessageData } from "../shared/message";
+import { MONO, SquareInline, SquareMarkdownBody } from "./markdown";
+import { squarePalette } from "./palette";
 
-/** A plain card: who, what they did, where, then what they said. No badge, no chrome — the words carry the place. */
+/**
+ * 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.
+ */
 export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<SquareMessageData>) {
   const [expanded, setExpanded] = useState(false);
+  const palette = useMemo(() => squarePalette(theme), [theme]);
   const { text, items } = item.data;
   const latest = items?.[items.length - 1];
-  // Transform already bounded the collapsed preview; only normalise whitespace for the single line.
   const preview = latest?.preview?.replace(/\s+/g, " ").trim();
-  const muted = theme.colors.foregroundMuted;
-  const foreground = theme.colors.foreground;
-
-  const styles = useMemo(() => ({
-    card: {
-      marginVertical: 3,
-      marginRight: layout.compact ? 0 : 8,
-      backgroundColor: theme.colors.surface1,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: 6,
-      paddingHorizontal: 12,
-      paddingVertical: 8,
-      gap: 4,
-    },
-    whoRow: { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 },
-    glyph: { color: theme.colors.accent, fontSize: 9 },
-    actor: { color: foreground, fontSize: 12.5, fontWeight: "600" as const },
-    route: { color: muted, fontSize: 12.5, flex: 1 },
-    count: { color: muted, fontSize: 11 },
-  }), [foreground, layout.compact, muted, theme.colors.accent, theme.colors.border, theme.colors.surface1]);
-
-  const headline = latest !== undefined ? squareHeadline(latest) : "Square context";
-  const routeText = latest?.actor !== undefined && headline.startsWith(latest.actor)
-    ? headline.slice(latest.actor.length).trim()
-    : headline;
+  const blocks = useMemo(() => parseSquareBlocks(text), [text]);
+  const multi = blocks.length > 1;
+  const single = multi ? undefined : parseSquareVoice(blocks[0].actor, blocks[0].meta);
+  const names = items !== undefined
+    ? items.map(entry => entry.actor)
+    : blocks.map(block => parseSquareVoice(block.actor, block.meta).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 trailing = `· ${squareName}${expanded && single?.actId ? ` · ${single.actId}` : !expanded && items && items.length > 1 ? ` · ${items.length}` : ""}`;
+  const { accent, border, foreground, foregroundMuted: muted, surface1 } = palette.theme.colors;
+  const row = { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 };
+  const indent = { paddingLeft: 15 };
 
   return (
-    <View style={styles.card}>
+    <View style={{ backgroundColor: surface1, borderWidth: StyleSheet.hairlineWidth, borderColor: border, borderRadius: 8, paddingHorizontal: 12, paddingVertical: 9, gap: expanded ? 8 : 3 }}>
       <Pressable
         accessibilityRole="button"
-        accessibilityLabel={`${expanded ? "收起" : "展开"} ${latest?.square ?? "square"}: ${headline}`}
+        accessibilityLabel={`${expanded ? "收起" : "展开"} ${squareName}: ${speakers.join(", ") || "Square"}`}
         aria-expanded={expanded}
         onPress={() => setExpanded(value => !value)}
-        style={({ pressed }) => ({ gap: 4, opacity: pressed ? 0.7 : 1 })}
+        style={({ pressed }) => ({ gap: 3, opacity: pressed ? 0.7 : 1 })}
       >
-        <View style={styles.whoRow}>
-          <Text style={styles.glyph}>■</Text>
-          {latest?.actor !== undefined && <Text style={styles.actor}>{latest.actor}</Text>}
-          <Text numberOfLines={1} style={styles.route}>
-            {routeText}{latest?.square !== undefined && ` · ${latest.square}`}
-          </Text>
-          {items !== undefined && items.length > 1 && <Text style={styles.count}>{items.length}</Text>}
-          <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={16} color={muted} />
+        <View style={expanded && multi
+          ? { ...row, paddingBottom: 7, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: border }
+          : row}>
+          <Text style={{ color: accent, fontSize: 9 }}>■</Text>
+          {expanded && multi ? (
+            <>
+              <Text numberOfLines={1} style={{ color: foreground, fontSize: 12.5, fontWeight: "500", flex: 1 }}>{squareName}</Text>
+              <Icon name="ChevronUp" size={15} color={muted} />
+            </>
+          ) : (
+            <>
+              <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>}
+              </Text>
+              <Text style={{ color: muted, fontSize: 12 }}>{trailing}</Text>
+              <Icon name={expanded ? "ChevronUp" : "ChevronDown"} size={15} color={muted} />
+            </>
+          )}
         </View>
         {!expanded && preview !== undefined && preview !== "" && (
-          <SquareInline text={preview} theme={theme} numberOfLines={2} />
+          <View style={indent}>
+            <SquareInline text={preview} theme={palette.theme} numberOfLines={2} />
+          </View>
         )}
       </Pressable>
       {expanded && (
-        <ScrollView style={{ maxHeight: layout.compact ? 280 : 400, marginTop: 2, borderTopWidth: 1, borderTopColor: theme.colors.border }} contentContainerStyle={{ paddingTop: 8 }} nestedScrollEnabled>
-          <SquareMarkdown text={outputPreview(text)} theme={theme} />
+        <ScrollView style={{ maxHeight: layout.compact ? 280 : 400 }} 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} />
+          )}
         </ScrollView>
       )}
     </View>

package/plugins/paseo/shared/message.ts

@@ -50,6 +50,21 @@ export function parseSquareBlocks(text: string): SquareBlock[] {
   return blocks;
 }
 
+export interface SquareVoice { glyph: string; 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.
+export function parseSquareVoice(actorLine?: string, metaLine?: string): SquareVoice {
+  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],
+  };
+}
+
 export const squareCardDetailsSchema = z.object({
   fullText: z.string().optional(),
   items: z.array(z.object({
@@ -62,7 +77,7 @@ export const squareCardDetailsSchema = z.object({
   })).min(1),
 });
 
-/** Human-facing summary; the stored description is Square's agent voice, and the human is not the recipient. */
+/** Human-facing summary of a route; the card itself leads with people, not this prose. */
 export function squareHeadline(item: z.output<typeof squareCardDetailsSchema>["items"][number]): string {
   if (item.actor === undefined || item.route === undefined) return item.description;
   const to = item.recipient;