@oxy.so/bloom 7.0.1 → 7.1.0

package/src/multi-agent-chat/ChatAgentProfile.tsx

@@ -0,0 +1,116 @@
+import { useState, type Ref } from 'react';
+import { Platform, StyleSheet, type View } from 'react-native';
+import { useReducedMotion } from 'react-native-reanimated';
+import { AgentAvatar } from '../agent-avatar';
+import { useMessages } from '../locale/messages';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { Agent } from './data';
+import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from './messages';
+
+/** One profile target: animated artwork above an intrinsically sized name pill. */
+export function ChatAgentProfile({
+  agents,
+  avatarRef,
+  expanded,
+  onPress,
+}: {
+  agents: Agent[];
+  avatarRef?: Ref<View>;
+  expanded: boolean;
+  onPress: () => void;
+}) {
+  const { messages } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
+  const { colors } = useTheme();
+  const reduced = useReducedMotion();
+  const [pressed, setPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const name =
+    agents.length === 1
+      ? agents[0]!.name
+      : agents
+          .slice(0, 3)
+          .map((agent) => agent.label || agent.name)
+          .join(' + ');
+  const label = name || messages.chooseYourTeammates;
+  return (
+    <StyledPressable
+      accessibilityRole="button"
+      accessibilityLabel={
+        agents.length === 1
+          ? formatChatMessage(messages.editAgent, agents[0]!.name)
+          : messages.editConversationAgents
+      }
+      aria-expanded={expanded}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      className={`group/chat-profile relative min-w-0 max-w-full select-none items-center outline-none ${Platform.OS === 'web' ? 'motion-safe:active:scale-95' : ''}`}
+      style={
+        Platform.OS === 'web'
+          ? undefined
+          : { transform: [{ scale: pressed && !reduced ? 0.95 : 1 }] }
+      }
+      testID="chat-agent-profile"
+    >
+      <StyledView
+        ref={avatarRef}
+        collapsable={false}
+        pointerEvents="none"
+        aria-hidden
+        className="relative z-10 -mb-0.5 size-14"
+        style={{ width: 56, height: 56, marginBottom: -2 }}
+      >
+        {agents.slice(0, 3).map((agent, index) => {
+          const single = agents.length === 1;
+          const size = single ? 56 : 36;
+          return (
+            <StyledView
+              key={agent.id}
+              style={{
+                position: 'absolute',
+                width: size,
+                height: size,
+                insetInlineStart: single
+                  ? 0
+                  : index === 1
+                    ? 20
+                    : index === 2
+                      ? 10
+                      : 0,
+                top: index === 2 ? 20 : 0,
+              }}
+            >
+              <AgentAvatar config={agent.avatar} size={size} />
+            </StyledView>
+          );
+        })}
+      </StyledView>
+      <StyledView
+        pointerEvents="none"
+        className="relative min-w-0 max-w-full items-center justify-center rounded-[14px] px-2.5 py-1"
+      >
+        <StyledView
+          className="absolute inset-0 rounded-[14px] group-focus-visible/chat-profile:ring-2 group-focus-visible/chat-profile:ring-border-focus-ring"
+          style={{
+            backgroundColor: hovered
+              ? colors.backgroundTertiary
+              : colors.backgroundSecondary,
+            borderWidth: StyleSheet.hairlineWidth,
+            borderColor: colors.border,
+          }}
+        />
+        <Text
+          numberOfLines={1}
+          className="max-w-full truncate text-[16px] leading-5 font-medium text-text-primary"
+        >
+          {label}
+          {agents.length > 3 ? ` +${agents.length - 3}` : ''}
+        </Text>
+      </StyledView>
+    </StyledPressable>
+  );
+}

package/src/multi-agent-chat/EditorRail.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Platform } from 'react-native';
 import Animated, {
   Easing,
   runOnJS,
@@ -47,6 +48,7 @@ export function EditorRail({
   );
   return (
     <AnimatedView
+      {...(Platform.OS === 'web' && !active ? { inert: true } : {})}
       pointerEvents={active ? 'auto' : 'none'}
       aria-hidden={!active}
       accessibilityElementsHidden={!active}

package/src/multi-agent-chat/MultiAgentChatBase.tsx

@@ -24,6 +24,7 @@ import { Text } from '../typography';
 import { AvatarHandoff } from './AvatarHandoff';
 import { ChatDialogFrame, SupportCopy } from './ChatDialogFrame';
 import { ChatSidebar } from './ChatSidebar';
+import { ChatAgentProfile } from './ChatAgentProfile';
 import { useChatComponents } from './context';
 import {
   conversationFor,
@@ -70,55 +71,6 @@ type Panel =
   | 'support'
   | null;
 
-function AgentStack({
-  agents,
-  size = 40,
-  nodes,
-}: {
-  agents: Agent[];
-  size?: number;
-  nodes?: AvatarNodes;
-}) {
-  return (
-    <StyledView
-      style={{ width: size, height: size }}
-      accessibilityLabel={agents.map((a) => a.name).join(', ')}
-    >
-      {agents.slice(0, 3).map((agent, i) => (
-        <StyledView
-          key={agent.id}
-          ref={(node: View | null) => {
-            if (nodes) {
-              if (node) nodes.set(agent.id, node);
-              else nodes.delete(agent.id);
-            }
-          }}
-          collapsable={false}
-          style={{
-            width: agents.length === 1 ? size : size * 0.65,
-            height: agents.length === 1 ? size : size * 0.65,
-            position: 'absolute',
-            left:
-              agents.length === 1
-                ? 0
-                : i === 1
-                  ? size * 0.4
-                  : i === 2
-                    ? size * 0.2
-                    : 0,
-            top: i === 2 ? size * 0.4 : 0,
-          }}
-        >
-          <AgentAvatar
-            config={agent.avatar}
-            size={agents.length === 1 ? size : size * 0.65}
-            label={agent.name}
-          />
-        </StyledView>
-      ))}
-    </StyledView>
-  );
-}
 /** Shared workspace implementation. Platform bindings select Bloom's existing surfaces only. */
 export function MultiAgentChatBase(props: MultiAgentChatProps) {
   const { messages } = useMessages(MULTI_AGENT_CHAT_MESSAGES);
@@ -136,7 +88,6 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
     Dialog,
     ComposerPanel,
     AgentCreator,
-    Surface,
     Dropdown: D,
   } = useChatComponents();
   const { colors } = useTheme();
@@ -145,7 +96,7 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
   const root = useRef<View>(null),
     pickerAvatars = useRef<AvatarNodes>(new Map()),
     emptyAvatars = useRef<AvatarNodes>(new Map()),
-    badgeRef = useRef<View>(null),
+    profileAvatarRef = useRef<View>(null),
     replyAvatars = useRef<AvatarNodes>(new Map());
   const [handoff, setHandoff] = useState<AvatarHandoffState | null>(null),
     [flightOrigin, setFlightOrigin] = useState<AvatarRect | null>(null);
@@ -170,7 +121,7 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
         ? emptyAvatars.current.get(id)
         : id === handoff?.responderId
           ? replyAvatars.current.get(id)
-          : (badgeRef.current ?? undefined),
+          : (profileAvatarRef.current ?? undefined),
     [handoff?.kind, handoff?.responderId],
   );
   const { width } = useWindowDimensions();
@@ -247,25 +198,28 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
     setEditor({ ...agent, avatar: { ...agent.avatar } });
     if (compact) open('editor');
   };
-  const saveAgent = (agent: Agent) => {
-    setEditor(agent);
-    update((s) => {
-      const previous = s.agents.find((a) => a.id === agent.id);
-      return {
-        ...s,
-        agents: previous
-          ? s.agents.map((a) => (a.id === agent.id ? agent : a))
-          : [...s.agents, agent],
-        chats: s.chats.map((c) =>
-          c.agentIds.length === 1 &&
-          c.agentIds[0] === agent.id &&
-          (c.title === previous?.name || c.title === previous?.label)
-            ? { ...c, title: agent.name }
-            : c,
-        ),
-      };
-    });
-  };
+  const saveAgent = useCallback(
+    (agent: Agent) => {
+      setEditor(agent);
+      update((s) => {
+        const previous = s.agents.find((a) => a.id === agent.id);
+        return {
+          ...s,
+          agents: previous
+            ? s.agents.map((a) => (a.id === agent.id ? agent : a))
+            : [...s.agents, agent],
+          chats: s.chats.map((c) =>
+            c.agentIds.length === 1 &&
+            c.agentIds[0] === agent.id &&
+            (c.title === previous?.name || c.title === previous?.label)
+              ? { ...c, title: agent.name }
+              : c,
+          ),
+        };
+      });
+    },
+    [update],
+  );
   const createAgent = () => {
     const agent = {
       id: chatId('agent'),
@@ -416,18 +370,22 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
     follow.current = true;
     void replies.send(text, id, avatars.length ? 800 : 0, chat);
   };
-  const editPanel = editor && (
-    <AgentCreator
-      agent={editor}
-      onChange={saveAgent}
-      voices={voices}
-      onPreviewVoice={onPreviewVoice}
-      onClose={() => {
-        setEditor(null);
-        if (panel === 'editor') close();
-      }}
-      style={{ flex: 1 }}
-    />
+  const editPanel = useMemo(
+    () =>
+      editor && (
+        <AgentCreator
+          agent={editor}
+          onChange={saveAgent}
+          voices={voices}
+          onPreviewVoice={onPreviewVoice}
+          onClose={() => {
+            setEditor(null);
+            if (panel === 'editor') surface.close();
+          }}
+          style={{ flex: 1 }}
+        />
+      ),
+    [AgentCreator, editor, saveAgent, voices, onPreviewVoice, panel, surface],
   );
   const sortedChats = useMemo(
     () =>
@@ -441,7 +399,7 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
             .includes(query.toLocaleLowerCase()),
         )
         .sort((a, b) => Number(!!b.pinned) - Number(!!a.pinned)),
-    [workspace.chats, query],
+    [workspace.chats, workspace.agents, query],
   );
   const sidebar = (
     <ChatSidebar
@@ -580,114 +538,104 @@ export function MultiAgentChatBase(props: MultiAgentChatProps) {
         accessibilityLabel={messages.agentConversation}
         className="flex min-h-0 min-w-0 flex-1 flex-col rounded-3xl bg-background-secondary-default"
       >
-        <StyledView className="flex h-[55px] shrink-0 items-start gap-2 px-3 pt-3 flex-row">
-          {phone && (
-            <IconButton
-              icon={RiMenuLine}
-              accessibilityLabel={messages.openConversations}
-              size="sm"
-              onPress={() => open('navigation')}
-            />
-          )}
-          <StyledView className="flex min-w-0 flex-1 flex-row">
+        <StyledView className="relative h-[100px] shrink-0">
+          <StyledView
+            pointerEvents="box-none"
+            className="absolute inset-0 flex-row justify-center px-16 pt-1.5"
+          >
             <StyledView
-              ref={badgeRef}
-              collapsable={false}
-              className="relative z-40 min-w-0 max-w-full rounded-full"
+              pointerEvents="box-none"
+              className="min-w-0 max-w-full items-center self-start"
             >
-              <Surface
-                fill={colors.backgroundSecondary}
-                radius={999}
-                style={{ position: 'absolute', inset: 0 }}
-                pointerEvents="none"
-              />
-              <StyledPressable
-                accessibilityRole="button"
-                accessibilityLabel={
+              <ChatAgentProfile
+                agents={participants}
+                avatarRef={profileAvatarRef}
+                expanded={
                   participants.length === 1
-                    ? formatChatMessage(
-                        messages.editAgent,
-                        participants[0]!.name,
-                      )
-                    : messages.editConversationAgents
+                    ? editor?.id === participants[0]!.id
+                    : panel === 'picker'
                 }
                 onPress={() =>
                   participants.length === 1
                     ? edit(participants[0]!)
                     : chooseAgents(chat?.agentIds)
                 }
-                className="flex h-[31px] min-w-0 max-w-full items-center gap-2 rounded-full px-2 pe-3 text-body-2-medium text-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring flex-row"
-              >
-                <AgentStack agents={participants} size={20} />
-                <Text
-                  numberOfLines={1}
-                  className="truncate text-body-2-medium text-text-secondary"
-                >
-                  {participants.length === 1
-                    ? participants[0]!.name
-                    : participants
-                        .slice(0, 3)
-                        .map((a) => a.label || a.name)
-                        .join(' + ')}
-                </Text>
-                {participants.length > 3 && (
-                  <Text className="shrink-0">+{participants.length - 3}</Text>
-                )}
-              </StyledPressable>
+              />
             </StyledView>
           </StyledView>
-          <StyledPressable
-            accessibilityRole="button"
-            accessibilityLabel={messages.copyConversation}
-            onPress={() =>
-              chat && void copy(transcript(chat), messages.conversationCopied)
-            }
-            className="rounded p-1 text-foreground-icon-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring"
+          {phone && (
+            <StyledView
+              style={{ position: 'absolute', top: 12, insetInlineStart: 12 }}
+            >
+              <IconButton
+                icon={RiMenuLine}
+                accessibilityLabel={messages.openConversations}
+                size="sm"
+                onPress={() => open('navigation')}
+              />
+            </StyledView>
+          )}
+          <StyledView
+            className="flex-row items-center gap-2"
+            style={{ position: 'absolute', top: 12, insetInlineEnd: 12 }}
           >
-            <RiShare2Line width={16} height={16} fill={colors.textSecondary} />
-          </StyledPressable>
-          <D.DropdownMenu>
-            <D.DropdownMenuTrigger asChild>
-              <StyledPressable
-                accessibilityRole="button"
-                accessibilityLabel={messages.conversationOptions}
-                className="rounded p-1 text-foreground-icon-secondary"
-              >
-                <RiMoreFill
-                  width={16}
-                  height={16}
-                  fill={colors.textSecondary}
-                />
-              </StyledPressable>
-            </D.DropdownMenuTrigger>
-            <D.DropdownMenuContent
-              label={messages.conversationOptions}
-              align="end"
-              className="rounded-[14px] p-1"
-              style={{ borderRadius: 14, padding: 4 }}
+            <StyledPressable
+              accessibilityRole="button"
+              accessibilityLabel={messages.copyConversation}
+              onPress={() =>
+                chat && void copy(transcript(chat), messages.conversationCopied)
+              }
+              className="rounded p-1 text-foreground-icon-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring"
             >
-              <D.DropdownMenuLabel>
-                {messages.inThisConversation}
-              </D.DropdownMenuLabel>
-              {participants.map((agent) => (
+              <RiShare2Line
+                width={16}
+                height={16}
+                fill={colors.textSecondary}
+              />
+            </StyledPressable>
+            <D.DropdownMenu>
+              <D.DropdownMenuTrigger asChild>
+                <StyledPressable
+                  accessibilityRole="button"
+                  accessibilityLabel={messages.conversationOptions}
+                  className="rounded p-1 text-foreground-icon-secondary"
+                >
+                  <RiMoreFill
+                    width={16}
+                    height={16}
+                    fill={colors.textSecondary}
+                  />
+                </StyledPressable>
+              </D.DropdownMenuTrigger>
+              <D.DropdownMenuContent
+                label={messages.conversationOptions}
+                align="end"
+                className="rounded-[14px] p-1"
+                style={{ borderRadius: 14, padding: 4 }}
+              >
+                <D.DropdownMenuLabel>
+                  {messages.inThisConversation}
+                </D.DropdownMenuLabel>
+                {participants.map((agent) => (
+                  <D.DropdownMenuItem
+                    key={agent.id}
+                    onPress={() => edit(agent)}
+                    leading={<AgentAvatar config={agent.avatar} size={20} />}
+                    className="px-2 py-1.5 text-body-medium"
+                  >
+                    {formatChatMessage(messages.editAgent, agent.name)}
+                  </D.DropdownMenuItem>
+                ))}
                 <D.DropdownMenuItem
-                  key={agent.id}
-                  onPress={() => edit(agent)}
-                  leading={<AgentAvatar config={agent.avatar} size={20} />}
+                  onPress={() => chooseAgents(chat?.agentIds)}
+                  leading={<RiGroupLine width={16} height={16} />}
                   className="px-2 py-1.5 text-body-medium"
                 >
-                  {formatChatMessage(messages.editAgent, agent.name)}
+                  {messages.startAGroupChat}
                 </D.DropdownMenuItem>
-              ))}
-              <D.DropdownMenuItem
-                onPress={() => chooseAgents(chat?.agentIds)}
-                leading={<RiGroupLine width={16} height={16} />}
-                className="px-2 py-1.5 text-body-medium"
-              >
-                {messages.startAGroupChat}
-              </D.DropdownMenuItem>
-            </D.DropdownMenuContent>
-          </D.DropdownMenu>
+              </D.DropdownMenuContent>
+            </D.DropdownMenu>
+          </StyledView>
         </StyledView>
         <ScrollSurface
           scrollRef={scroll}

package/src/multi-agent-chat/ReplyRow.tsx

@@ -8,12 +8,13 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { AgentAvatar } from '../agent-avatar';
+import { ThinkingLabel } from '../agent-thinking/ThinkingLabel';
 import { useTrackEvents } from '../agent-creator/use-track-events';
 import { useIsRtl } from '../hooks/use-is-rtl';
 import { useMessages } from '../locale/messages';
 import { StyledPressable, StyledView } from '../styles/styled-primitives';
 import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
+import { Text, TYPE_SCALE } from '../typography';
 import type { Agent } from './data';
 import type { AvatarNodes } from './handoff';
 import { MULTI_AGENT_CHAT_MESSAGES, formatChatMessage } from './messages';
@@ -83,7 +84,7 @@ export function ReplyHeader({
           : formatChatMessage(messages.editAgent, agent.name)
       }
       onPress={onEdit}
-      className="my-1 min-w-0 flex-row items-center gap-1 rounded-lg"
+      className="my-1 min-w-0 flex-row items-center gap-1 rounded-lg text-start text-body-2-medium text-text-secondary outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring"
     >
       <AnimatedView
         ref={(node: View | null) => {
@@ -121,16 +122,16 @@ export function ReplyHeader({
         <AnimatedView
           aria-hidden={!thinking}
           role={thinking ? 'status' : undefined}
-          style={[
-            { position: 'absolute', insetInlineStart: 0, top: 0 },
-            status,
-          ]}
+          style={status}
         >
-          <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
+          <ThinkingLabel variant="body-2-medium" color={colors.textSecondary}>
             {messages.thinking}
-          </Text>
+          </ThinkingLabel>
         </AnimatedView>
-        <AnimatedView aria-hidden={thinking} style={name}>
+        <AnimatedView
+          aria-hidden={thinking}
+          style={[{ marginTop: -TYPE_SCALE['body-2-medium'].lineHeight }, name]}
+        >
           <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
             {agent.name}
           </Text>

package/src/multi-agent-chat/handoff.ts

@@ -139,11 +139,11 @@ export function avatarFlightPoint(
   };
 }
 
-/** Non-answering agents merge into the badge at one 14px landing point. */
-export function badgeFlightTarget(badge: AvatarRect, rtl = false): AvatarRect {
+/** Waiting agents merge into the center of the measured header artwork. */
+export function profileFlightTarget(avatar: AvatarRect): AvatarRect {
   return {
-    x: rtl ? badge.x + badge.width - 26 : badge.x + 12,
-    y: badge.y + (badge.height - 14) / 2,
+    x: avatar.x + (avatar.width - 14) / 2,
+    y: avatar.y + (avatar.height - 14) / 2,
     width: 14,
     height: 14,
   };

package/src/project-board/CreateTicketDialog.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState } from 'react';
-import type { TextInput } from 'react-native';
+import { useRef, useState, type ComponentType, type ReactNode } from 'react';
+import { Platform, ScrollView, useWindowDimensions, type ScrollViewProps, type TextInput } from 'react-native';
+import { styled } from 'react-native-css';
 import { useDialogControl } from '../dialog/context';
 import { useMessages } from '../locale/messages';
 import { Switch } from '../switch';
@@ -34,6 +35,29 @@ const PRIORITY_STYLES = {
   High: 'bg-status-orange-background text-status-orange-text',
   Urgent: 'bg-status-rose-background text-status-rose-text',
 };
+const ScrollBodyBase: ComponentType<Pick<ScrollViewProps, 'style' | 'contentContainerStyle'>> = ScrollView;
+const StyledScrollView: ComponentType<ScrollViewProps> = styled(ScrollBodyBase, { className: 'style' });
+
+function TicketFormBody({ children }: { children: ReactNode }) {
+  const { height } = useWindowDimensions();
+  if (Platform.OS === 'web') return (
+    <View className="max-h-[calc(100dvh-56px)] overflow-y-auto rounded-3xl bg-background-primary-default p-4 outline-none">
+      {children}
+    </View>
+  );
+  return (
+    <StyledScrollView
+      className="rounded-3xl bg-background-primary-default"
+      testID="project-board-create-scroll"
+      style={{ maxHeight: height - 56, flexGrow: 0, flexShrink: 1 }}
+      contentContainerStyle={{ padding: 16 }}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+    >
+      {children}
+    </StyledScrollView>
+  );
+}
 export function CreateTicketDialog({
   title: boardTitle,
   initialColumnId,
@@ -140,7 +164,7 @@ export function CreateTicketDialog({
         style={{ width: '100%' }}
       >
         <TicketGenieSurface>
-          <View className="max-h-[calc(100dvh-56px)] overflow-y-auto rounded-3xl bg-background-primary-default p-4 outline-none">
+          <TicketFormBody>
             <View className="flex flex-col gap-12">
               <View className="flex flex-col gap-2.5">
                 <View className="flex items-start justify-between gap-3">
@@ -365,7 +389,7 @@ export function CreateTicketDialog({
                 </View>
               </View>
             </View>
-          </View>
+          </TicketFormBody>
         </TicketGenieSurface>
       </View>
     </Dialog>