electric-sql
diff --git a/‎.changeset/agents-mobile-spawn-args-attachments.md‎
Lines changed: 14 additions & 0 deletions b/‎.changeset/agents-mobile-spawn-args-attachments.md‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎packages/agents-mobile/app.config.ts‎
Lines changed: 10 additions & 0 deletions b/‎packages/agents-mobile/app.config.ts‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎packages/agents-mobile/package.json‎
Lines changed: 2 additions & 0 deletions b/‎packages/agents-mobile/package.json‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎packages/agents-mobile/src/components/Icon.tsx‎
Lines changed: 5 additions & 0 deletions b/‎packages/agents-mobile/src/components/Icon.tsx‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/agents-mobile/src/components/NativeComposer.tsx‎
Lines changed: 172 additions & 0 deletions b/‎packages/agents-mobile/src/components/NativeComposer.tsx‎
Lines changed: 172 additions & 0 deletions
@@ -0,0 +1,14 @@
+---
+"@electric-ax/agents-mobile": patch
+"@electric-ax/agents-server-ui": patch
+"@electric-ax/agents": patch
+---
+
+Bring the mobile new-session and chat composers to parity with desktop:
+
+- **Schema-driven spawn args + model/reasoning/speed controls.** The new-session screen now renders an agent type's `creation_schema` as native controls — enum properties become picker sheets (the model enum groups options by provider and remembers the last pick), booleans become switches, string/number become text fields, string-arrays a comma-separated field, and other objects a JSON field — so agents that need structured creation args can be configured and started from mobile (full parity with the desktop `SchemaForm`). Required fields gate the **Start session** button, which is now pinned to the bottom of the screen so it stays reachable as these extra sections grow (the scroll content is padded to clear it).
+- **Image attachments.** Both the in-session and new-session composers can attach images (photo library or camera) via `expo-image-picker`, gated on whether the session's model accepts image input. At spawn the first message is sent immediately after the entity is created so the upload can target it, mirroring the desktop flow. Attachments render in the chat log through the existing embedded timeline.
+
+The shared `agents-server-ui` send path (`uploadMessageAttachments`) accepts React Native file descriptors alongside browser `File`s, and the new-session schema-classification helpers (`inlineSchemaProperties`, model/reasoning/speed detection, model-settings grouping) move into a reusable `lib/schemaProperties` module shared by desktop and mobile. No server API changes — the title hardening below is the only server-side behavior change.
+
+Horton's session-title generation is also hardened for attachment messages: the title model could go conversational when the first message referenced images it couldn't see (e.g. apologizing that nothing was shared), and that sentence became the title. The system prompt now instructs it to infer a title from intent and never apologize, and a guard rejects sentence-like responses and falls back to the locally-derived title.
@@ -38,6 +38,16 @@ export default ({ config }: ConfigContext): ExpoConfig =>
         // expo-web-browser. See `plugins/with-android-on-new-intent.js`
         // for the underlying Expo issue.
         `./plugins/with-android-on-new-intent.js`,
+        // Image attachments in the composer. The plugin injects the iOS
+        // photo-library / camera usage strings; a dev build (not Expo Go) is
+        // required for the native module.
+        [
+          `expo-image-picker`,
+          {
+            photosPermission: `Allow Electric Agents to attach photos to messages.`,
+            cameraPermission: `Allow Electric Agents to take a photo to attach to a message.`,
+          },
+        ],
       ],
       ios: {
         ...config.ios,
 
@@ -28,6 +28,8 @@
     "expo": "54.0.35",
     "expo-build-properties": "~1.0.10",
     "expo-constants": "~18.0.13",
+    "expo-image-manipulator": "~14.0.8",
+    "expo-image-picker": "~17.0.11",
     "expo-linking": "~8.0.12",
     "expo-router": "~6.0.24",
     "expo-status-bar": "~3.0.9",
 
@@ -40,6 +40,8 @@ export type IconName =
   | `user`
   | `users`
   | `pin`
+  | `image`
+  | `camera`
 
 const PATHS: Record<IconName, string> = {
   back: `M15 18l-6-6 6-6`,
@@ -68,6 +70,9 @@ const PATHS: Record<IconName, string> = {
   // Lucide `pin` — matches the desktop sidebar's pin toggle glyph.
   pin: `M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z`,
   square: `M7 7h10v10H7z`,
+  // Lucide `image` / `camera` — image attachment affordances.
+  image: `M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2ZM8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM21 15l-5-5L5 21`,
+  camera: `M9 4 7.5 6H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2.5L15 4ZM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z`,
   github: `M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2`,
   // Official Google "G" mark, rendered in a single fill colour. Google's
   // brand guidelines permit monochrome use in CTA contexts where the
 
@@ -1,5 +1,9 @@
 import { useCallback, useMemo, useState } from 'react'
 import {
+  ActionSheetIOS,
+  Image,
+  Keyboard,
+  Platform,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -23,9 +27,12 @@ import {
   type ComposerInsertion,
   type Selection,
 } from '../lib/slashAutocomplete'
+import type { AttachmentDraft } from '../lib/attachments'
 import { useTokens } from '../lib/ThemeProvider'
 import { fontSize, lineHeight, radii, spacing } from '../lib/theme'
 import type { Tokens } from '../lib/theme'
+import { BottomSheet, BottomSheetItem } from './BottomSheet'
+import { Icon } from './Icon'
 
 export type SlashAutocomplete = {
   /** Whether the suggestion menu should be shown. */
@@ -217,6 +224,128 @@ export function SlashCommandMenu({
   )
 }
 
+/**
+ * Composer affordance for adding image attachments. Opens a native action
+ * sheet (photo library / camera); the keyboard is dismissed first so the sheet
+ * and keyboard don't fight for the bottom of the screen.
+ */
+export function AttachButton({
+  onAddFromLibrary,
+  onAddFromCamera,
+  disabled,
+}: {
+  onAddFromLibrary: () => void
+  onAddFromCamera: () => void
+  disabled?: boolean
+}): React.ReactElement {
+  const tokens = useTokens()
+  const styles = useMemo(() => createStyles(tokens), [tokens])
+  // Android uses the bottom-sheet menu; iOS uses a native action sheet because
+  // presenting the image picker over an RN `Modal` breaks it on iOS.
+  const [open, setOpen] = useState(false)
+  const onPress = (): void => {
+    Keyboard.dismiss()
+    if (Platform.OS === `ios`) {
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options: [`Cancel`, `Photo Library`, `Take Photo`],
+          cancelButtonIndex: 0,
+        },
+        (index) => {
+          if (index === 1) onAddFromLibrary()
+          else if (index === 2) onAddFromCamera()
+        }
+      )
+      return
+    }
+    setOpen(true)
+  }
+  return (
+    <>
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel="Attach image"
+        style={({ pressed }) => [
+          styles.attachButton,
+          pressed && !disabled ? styles.attachButtonPressed : null,
+        ]}
+      >
+        <Icon
+          name="image"
+          size={20}
+          color={disabled ? tokens.text4 : tokens.text2}
+          strokeWidth={2}
+        />
+      </Pressable>
+      <BottomSheet open={open} onClose={() => setOpen(false)} title="Add image">
+        <BottomSheetItem
+          label="Photo Library"
+          icon={<Icon name="image" size={18} color={tokens.text2} />}
+          onPress={() => {
+            setOpen(false)
+            onAddFromLibrary()
+          }}
+        />
+        <BottomSheetItem
+          label="Take Photo"
+          icon={<Icon name="camera" size={18} color={tokens.text2} />}
+          onPress={() => {
+            setOpen(false)
+            onAddFromCamera()
+          }}
+        />
+      </BottomSheet>
+    </>
+  )
+}
+
+/**
+ * Horizontal strip of image-attachment thumbnails with per-item remove
+ * buttons. Renders nothing when there are no drafts.
+ */
+export function AttachmentTray({
+  drafts,
+  onRemove,
+}: {
+  drafts: ReadonlyArray<AttachmentDraft>
+  onRemove: (index: number) => void
+}): React.ReactElement | null {
+  const tokens = useTokens()
+  const styles = useMemo(() => createStyles(tokens), [tokens])
+  if (drafts.length === 0) return null
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      contentContainerStyle={styles.tray}
+    >
+      {drafts.map((draft, index) => (
+        <View key={`${draft.uri}:${index}`} style={styles.thumbWrap}>
+          <Image source={{ uri: draft.uri }} style={styles.thumb} />
+          <Pressable
+            onPress={() => onRemove(index)}
+            hitSlop={6}
+            accessibilityRole="button"
+            accessibilityLabel={`Remove ${draft.name}`}
+            style={styles.thumbRemove}
+          >
+            <Icon
+              name="close"
+              size={12}
+              color={tokens.textOnAccent}
+              strokeWidth={2.6}
+            />
+          </Pressable>
+        </View>
+      ))}
+    </ScrollView>
+  )
+}
+
 function createStyles(tokens: Tokens) {
   return StyleSheet.create({
     menu: {
@@ -261,5 +390,48 @@ function createStyles(tokens: Tokens) {
       fontSize: fontSize.xs,
       lineHeight: lineHeight.xs,
     },
+    attachButton: {
+      width: 34,
+      height: 34,
+      borderRadius: radii.pill,
+      alignItems: `center`,
+      justifyContent: `center`,
+    },
+    attachButtonPressed: {
+      backgroundColor: tokens.bgHover,
+    },
+    tray: {
+      gap: spacing.sm,
+      // Leave room for the remove (×) buttons, which protrude 6px past the
+      // top-right of each thumbnail (incl. the last one when scrolled to end).
+      paddingTop: 8,
+      paddingBottom: 2,
+      paddingHorizontal: 8,
+    },
+    thumbWrap: {
+      width: 60,
+      height: 60,
+    },
+    thumb: {
+      width: 60,
+      height: 60,
+      borderRadius: radii.md,
+      borderWidth: 1,
+      borderColor: tokens.border1,
+      backgroundColor: tokens.bgSubtle,
+    },
+    thumbRemove: {
+      position: `absolute`,
+      top: -6,
+      right: -6,
+      width: 20,
+      height: 20,
+      borderRadius: radii.pill,
+      alignItems: `center`,
+      justifyContent: `center`,
+      backgroundColor: tokens.accent9,
+      borderWidth: 1,
+      borderColor: tokens.surface,
+    },
   })
 }