feat(agents-mobile): Add agent signal controls

.changeset/mobile-agent-signal-controls.md

@@ -0,0 +1,6 @@
+---
+'@electric-ax/agents-mobile': patch
+'@electric-ax/agents-server-ui': patch
+---
+
+Add mobile agent signal controls. The mobile chat composer now shows a stop control while a run is active, the session menu exposes all entity signal types in a child menu, and the embedded chat timeline accounts for the native composer/drawer inset with aligned message widths and bottom fade masking.

packages/agents-mobile/app/session.tsx

@@ -33,6 +33,7 @@ type SessionDomEmbedProps = {
   theme: `light` | `dark`
   scrollToBottomSignal?: number
   inlineQueuedMessages?: Array<OptimisticInboxMessage>
+  bottomInset?: number
   onRequestOpenEntity: (entityUrl: string) => Promise<void>
   style?: StyleProp<ViewStyle>
   matchContents?: boolean
@@ -83,9 +84,9 @@ export default function SessionRoute(): React.ReactElement {
     () => ({
       top: embedTop,
       width: windowDimensions.width,
-      height: Math.max(0, windowDimensions.height - embedTop - composerInset),
+      height: Math.max(0, windowDimensions.height - embedTop),
     }),
-    [composerInset, embedTop, windowDimensions.height, windowDimensions.width]
+    [embedTop, windowDimensions.height, windowDimensions.width]
   )
   const embedSize = useMemo(
     () => ({
@@ -130,6 +131,7 @@ export default function SessionRoute(): React.ReactElement {
             theme={scheme}
             scrollToBottomSignal={chatLogScrollSignal}
             inlineQueuedMessages={inlineQueuedMessages}
+            bottomInset={composerInset}
             serverHeaders={serverHeaders}
             onRequestOpenEntity={async (target) => openSession(target)}
             dom={domOptions(styles, embedSize, tokens.bg)}

packages/agents-mobile/src/components/Icon.tsx

@@ -31,7 +31,9 @@ export type IconName =
   | `swap`
   | `chat`
   | `database`
+  | `radio`
   | `arrow-up`
+  | `square`
 
 const PATHS: Record<IconName, string> = {
   back: `M15 18l-6-6 6-6`,
@@ -52,7 +54,9 @@ const PATHS: Record<IconName, string> = {
   swap: `M7 4l-3 3 3 3M4 7h13M17 14l3 3-3 3M20 17H7`,
   chat: `M4 4h16v12H8l-4 4Z`,
   database: `M5 5c0-1.1 3.1-2 7-2s7 .9 7 2v14c0 1.1-3.1 2-7 2s-7-.9-7-2V5ZM5 12c0 1.1 3.1 2 7 2s7-.9 7-2`,
+  radio: `M4.9 19.1a10 10 0 0 1 0-14.2M7.8 16.2a6 6 0 0 1 0-8.4M10.6 13.4a2 2 0 0 1 0-2.8M14 12h.01M16.2 7.8a6 6 0 0 1 0 8.4M19.1 4.9a10 10 0 0 1 0 14.2`,
   'arrow-up': `M12 19V5M5 12l7-7 7 7`,
+  square: `M7 7h10v10H7z`,
 }
 
 export function Icon({
@@ -76,6 +80,14 @@ export function Icon({
     )
   }
 
+  if (name === `square`) {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 24 24">
+        <Path d={PATHS[name]} fill={color} />
+      </Svg>
+    )
+  }
+
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24">
       <Path