@astrosheep/square 0.3.71 → 0.3.73

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

@@ -1,7 +1,7 @@
 import type { PluginTimelineItemProps } from "@getpaseo/plugin/client";
 import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
 import { useMemo, useState } from "react";
-import { Platform, Pressable, Text, View } from "react-native";
+import { Platform, Pressable, ScrollView, Text, View } from "react-native";
 import { squareHeadline, type SquareMessageData } from "../shared/message";
 
 function withOpacity(color: string, opacity: number): string {
@@ -16,18 +16,19 @@ export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<S
   const [expanded, setExpanded] = useState(false);
   const toast = useToast();
   const { text, items } = item.data;
-  const first = items?.[0];
+  const latest = items?.[items.length - 1];
+  const preview = latest?.preview?.replace(/\s+/g, " ").trim();
   const muted = theme.colors.foregroundMuted;
   const foreground = theme.colors.foreground;
-  const padding = layout.compact ? 10 : 14;
   const styles = useMemo(() => ({
     marker: { color: theme.colors.accent, fontSize: 10, marginTop: 2 },
     headline: { color: foreground, fontSize: 13, lineHeight: 19, flexShrink: 1 },
     meta: { color: muted, fontSize: 11, lineHeight: 16, flexShrink: 1 },
+    preview: { color: foreground, fontSize: 12, lineHeight: 18, flexShrink: 1 },
     bodyPanel: {
       backgroundColor: theme.colors.surface1,
       borderRadius: 12,
-      marginTop: 7,
+      marginTop: 5,
       marginLeft: 17,
       overflow: "hidden" as const,
     },
@@ -36,53 +37,53 @@ export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<S
       fontSize: 12,
       lineHeight: 21,
       fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
-      paddingHorizontal: layout.compact ? 12 : 14,
-      paddingTop: 12,
+      paddingHorizontal: layout.compact ? 10 : 12,
+      paddingTop: 8,
     },
-  }), [expanded, foreground, layout.compact, muted, theme.colors.accent, theme.colors.surface1]);
+  }), [foreground, layout.compact, muted, theme.colors.accent, theme.colors.surface1]);
 
   return (
     <View>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={first !== undefined ? squareHeadline(first) : "Square context"}
-        aria-expanded={expanded}
-        onPress={() => setExpanded(value => !value)}
-        style={({ pressed }) => ({
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: 7,
-          paddingVertical: 2,
-          opacity: pressed ? 0.6 : 1,
-        })}
-      >
-        <Text style={styles.marker}>■</Text>
-        <View style={{
-          flex: 1,
-          minWidth: 0,
-          flexDirection: layout.compact ? "column" : "row",
-          alignItems: layout.compact ? "flex-start" : "center",
-          gap: layout.compact ? 2 : 8,
-        }}>
-          <Text numberOfLines={layout.compact ? 2 : 1} style={styles.headline}>
-            {first !== undefined ? squareHeadline(first) : "Square context"}
+      <View>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 7, paddingVertical: 2 }}>
+          <Text style={styles.marker}>■</Text>
+          <Text numberOfLines={1} style={styles.headline}>
+            {latest?.square ?? "Square context"}
           </Text>
-          {first && <Text numberOfLines={1} style={styles.meta}>
-            {first.square}{items && items.length > 1 ? ` · +${items.length - 1} more` : ""}
-          </Text>}
+          {items && items.length > 1 && <Text style={styles.meta}>· {items.length} landed</Text>}
+          <View style={{ flex: 1 }} />
+          {!expanded && <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`展开 ${latest !== undefined ? squareHeadline(latest) : "Square context"}`}
+            aria-expanded={false}
+            onPress={() => setExpanded(true)}
+            hitSlop={6}
+            style={({ pressed }) => ({ padding: 5, opacity: pressed ? 0.6 : 1 })}
+          >
+            <Icon name="ChevronDown" size={18} color={muted} />
+          </Pressable>}
         </View>
-        <View style={{ marginTop: 3 }}><Icon name={expanded ? "ChevronDown" : "ChevronRight"} size={14} color={muted} /></View>
-      </Pressable>
+        {(latest?.actor !== undefined || preview) && <View style={{ marginLeft: 17, marginTop: 2 }}>
+          <Text numberOfLines={1} style={styles.preview}>
+            <Text style={{ color: theme.colors.accent, fontSize: 10 }}>● </Text>
+            {latest?.actor !== undefined && <Text style={styles.meta}>{latest.actor} </Text>}
+            {preview}
+          </Text>
+        </View>}
+      </View>
       {expanded && <View style={styles.bodyPanel}>
-        <Text selectable style={styles.bodyText}>{text}</Text>
+        <ScrollView style={{ maxHeight: layout.compact ? 280 : 400 }} nestedScrollEnabled>
+          <Text selectable style={styles.bodyText}>{text}</Text>
+        </ScrollView>
         <View style={{
-          marginHorizontal: layout.compact ? 12 : 14,
-          marginTop: 12,
+          marginHorizontal: layout.compact ? 10 : 12,
+          marginTop: 5,
           borderTopWidth: 1,
           borderTopColor: withOpacity(theme.colors.border, 0.55),
-          paddingVertical: 7,
+          paddingVertical: 3,
           flexDirection: "row",
-          justifyContent: "flex-end",
+          alignItems: "center",
+          justifyContent: "space-between",
         }}>
           <Pressable
             accessibilityRole="button"
@@ -99,6 +100,16 @@ export function SquareMessage({ item, theme, layout }: PluginTimelineItemProps<S
             <Icon name="Copy" size={12} color={muted} />
             <Text style={{ color: muted, fontSize: 11 }}>Copy content</Text>
           </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="收起 Square context"
+            aria-expanded={true}
+            onPress={() => setExpanded(false)}
+            hitSlop={6}
+            style={({ pressed }) => ({ paddingHorizontal: 5, paddingVertical: 1, opacity: pressed ? 0.6 : 1 })}
+          >
+            <Icon name="ChevronUp" size={18} color={muted} />
+          </Pressable>
         </View>
       </View>}
     </View>

package/plugins/paseo/shared/message.ts

@@ -6,6 +6,7 @@ export const squareCardDetailsSchema = z.object({
     actor: z.string().optional(),
     recipient: z.string().optional(),
     route: z.enum(["mention", "reply", "attention", "bell"]).optional(),
+    preview: z.string().optional(),
     description: z.string(),
   })).min(1),
 });

package/plugins/pi/square-pi.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { presentPendingAtBoundary, renderPendingAtBoundary } from '../../dist/boundary-presentation.js';
 import { automaticSessionEnd, automaticSessionStart } from '../../dist/automatic-session.js';
 import { sessionInbox, observeSessionPending } from '../../dist/inbox.js';
-import { renderAttentionDescription } from '../../dist/attention-presentation.js';
+import { previewAttentionBody, renderAttentionDescription } from '../../dist/attention-presentation.js';
 import { createPiReceiver, sendPiMessage } from '../../dist/packages/agent-delivery/src/pi.js';
 
 class PiDeliveryDroppedError extends Error {
@@ -38,6 +38,7 @@ export function pendingCardDetails(pending) {
     actor: note.actor,
     recipient: membership.name,
     route: note.route,
+    preview: previewAttentionBody(note.body),
     description: renderAttentionDescription({ actor: note.actor, recipient: membership.name, route: note.route }),
   })));
   return items.length === 0 ? undefined : { items };