From f511334fcfbf691227ae4e0d723b5c6d99c6ab75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:17:54 +0200
Subject: [PATCH 1/7] fix(mobile): add size='touch' variant and IconButton
 wrapper

- Add size='touch' (44dp) to the Button primitive for entry points
  that need a comfortable tap target.
- Add an IconButton typed wrapper that requires accessibilityLabel at
  the type level so icon-only buttons always have a screen-reader name.
---
 apps/mobile/src/components/ui/button.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/components/ui/button.tsx b/apps/mobile/src/components/ui/button.tsx
index 05f3730c2d..fc9aa45daf 100644
--- a/apps/mobile/src/components/ui/button.tsx
+++ b/apps/mobile/src/components/ui/button.tsx
@@ -22,6 +22,7 @@ const buttonVariants = cva(
         sm: 'h-9 gap-1.5 rounded-md px-3',
         lg: 'h-11 rounded-md px-6',
         icon: 'h-10 w-10',
+        touch: 'h-11 min-w-11 px-4 py-2',
       },
     },
     defaultVariants: {
@@ -47,6 +48,7 @@ const buttonTextVariants = cva('text-foreground text-sm font-semibold', {
       sm: '',
       lg: '',
       icon: '',
+      touch: '',
     },
   },
   defaultVariants: {
@@ -71,5 +73,21 @@ function Button({ className, variant, size, ...props }: ButtonProps) {
   );
 }
 
-export { Button, buttonTextVariants, buttonVariants };
-export type { ButtonProps };
+type IconButtonProps = Omit<ButtonProps, 'accessibilityLabel' | 'children' | 'role'> & {
+  /** Required — icon-only buttons must announce their action. */
+  accessibilityLabel: string;
+  children: React.ReactNode;
+};
+
+/**
+ * Icon-only `Button`. Requires `accessibilityLabel` at the type level so
+ * VoiceOver / TalkBack always has a name. Use for dense toolbars; consider
+ * adding `hitSlop` to reach a 44dp effective target where the visual is
+ * smaller than 44dp.
+ */
+function IconButton({ className, variant = 'outline', size = 'icon', ...props }: IconButtonProps) {
+  return <Button variant={variant} size={size} className={className} role="button" {...props} />;
+}
+
+export { Button, buttonTextVariants, buttonVariants, IconButton };
+export type { ButtonProps, IconButtonProps };

From fad6cde8ff386cdb15cb5e73c3e971085429b14a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:17:55 +0200
Subject: [PATCH 2/7] fix(mobile): 44dp hit targets and a11y on header controls

- profile-avatar-button: wrap the 22dp icon in a 44dp container with
  pressed feedback and hitSlop.
- screen-header title dropdown: bump hitSlop so the effective target
  reaches 44dp; add accessibilityRole and accessibilityLabel derived
  from the title.
- session-list-screen plus/filter: bump hitSlop to 44dp, add
  accessibilityRole and pressed feedback.
---
 apps/mobile/src/components/agents/session-list-screen.tsx | 8 ++++++--
 apps/mobile/src/components/profile-avatar-button.tsx      | 2 ++
 apps/mobile/src/components/screen-header.tsx              | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/mobile/src/components/agents/session-list-screen.tsx b/apps/mobile/src/components/agents/session-list-screen.tsx
index 626fb720f0..b64a9a6999 100644
--- a/apps/mobile/src/components/agents/session-list-screen.tsx
+++ b/apps/mobile/src/components/agents/session-list-screen.tsx
@@ -234,8 +234,10 @@ export function AgentSessionListScreen() {
               onPress={() => {
                 router.push(getNewAgentSessionPath(organizationId) as Href);
               }}
-              hitSlop={8}
+              hitSlop={11}
+              accessibilityRole="button"
               accessibilityLabel="New session"
+              className="active:opacity-70"
             >
               <Plus size={22} color={colors.foreground} />
             </Pressable>
@@ -243,8 +245,10 @@ export function AgentSessionListScreen() {
               onPress={() => {
                 setShowFilterModal(true);
               }}
-              hitSlop={8}
+              hitSlop={12}
+              accessibilityRole="button"
               accessibilityLabel="Filter sessions"
+              className="active:opacity-70"
             >
               <SlidersHorizontal
                 size={20}
diff --git a/apps/mobile/src/components/profile-avatar-button.tsx b/apps/mobile/src/components/profile-avatar-button.tsx
index ae5287da31..591fc4e495 100644
--- a/apps/mobile/src/components/profile-avatar-button.tsx
+++ b/apps/mobile/src/components/profile-avatar-button.tsx
@@ -17,6 +17,8 @@ export function ProfileAvatarButton() {
       }}
       accessibilityRole="button"
       accessibilityLabel="Open profile"
+      className="h-11 w-11 items-center justify-center rounded-full active:opacity-70"
+      hitSlop={6}
     >
       <CircleUserRound size={22} color={colors.foreground} />
     </Pressable>
diff --git a/apps/mobile/src/components/screen-header.tsx b/apps/mobile/src/components/screen-header.tsx
index 7f3a6ee14c..f0a5f6c0eb 100644
--- a/apps/mobile/src/components/screen-header.tsx
+++ b/apps/mobile/src/components/screen-header.tsx
@@ -64,7 +64,9 @@ export function ScreenHeader({
     titleNode = onTitlePress ? (
       <Pressable
         onPress={onTitlePress}
-        hitSlop={8}
+        hitSlop={13}
+        accessibilityRole="button"
+        accessibilityLabel={title ? `Open menu for ${title}` : 'Open menu'}
         className="flex-row items-center gap-1 active:opacity-70"
       >
         {titleText}

From 6350e197bc1b57b257a4f14a963714c0e97228dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:18:01 +0200
Subject: [PATCH 3/7] fix(mobile): accessible, larger-tap send/stop controls

Add hitSlop so the 32dp send/stop Pressables reach a 44dp effective
target. Add accessibilityRole, accessibilityLabel ('Send message' /
'Stop generating'), and accessibilityState to match the back-button
pattern in ScreenHeader.
---
 apps/mobile/src/components/agents/chat-composer.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/mobile/src/components/agents/chat-composer.tsx b/apps/mobile/src/components/agents/chat-composer.tsx
index 09b5228811..767535a25e 100644
--- a/apps/mobile/src/components/agents/chat-composer.tsx
+++ b/apps/mobile/src/components/agents/chat-composer.tsx
@@ -166,6 +166,10 @@ export function ChatComposer({
           <Pressable
             onPress={handleStop}
             disabled={disabled}
+            hitSlop={6}
+            accessibilityRole="button"
+            accessibilityLabel="Stop generating"
+            accessibilityState={{ disabled }}
             className="h-8 w-8 items-center justify-center rounded-full bg-neutral-400 active:opacity-70 dark:bg-neutral-500"
           >
             <Square size={14} color="white" fill="white" />
@@ -174,6 +178,10 @@ export function ChatComposer({
           <Pressable
             onPress={handleSend}
             disabled={!canSend}
+            hitSlop={6}
+            accessibilityRole="button"
+            accessibilityLabel="Send message"
+            accessibilityState={{ disabled: !canSend }}
             className={`h-8 w-8 items-center justify-center rounded-full active:opacity-70 ${
               canSend ? 'bg-accent-soft' : 'bg-muted'
             }`}

From 02a6297eb712a8c2ca79ddd069fb5b0d2e432856 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:18:02 +0200
Subject: [PATCH 4/7] fix(mobile): normalize tiny row text sizes

Replace arbitrary text-[10.5px] / text-[11.5px] / text-[14.5px] in
SessionRow and ConfigureRow with the nearest sanctioned size utilities
(text-xs / text-sm) so row titles and subtitles read at the floor of
comfortable legibility.
---
 apps/mobile/src/components/ui/configure-row.tsx | 6 ++----
 apps/mobile/src/components/ui/session-row.tsx   | 9 +++------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/mobile/src/components/ui/configure-row.tsx b/apps/mobile/src/components/ui/configure-row.tsx
index 3a32875d1b..2e85d947f6 100644
--- a/apps/mobile/src/components/ui/configure-row.tsx
+++ b/apps/mobile/src/components/ui/configure-row.tsx
@@ -57,10 +57,8 @@ export function ConfigureRow({
         <Icon size={16} color={iconColor} />
       </View>
       <View className="flex-1">
-        <Text className="text-[14px] font-medium text-foreground">{title}</Text>
-        {subtitle ? (
-          <Text className="mt-0.5 text-[11.5px] text-muted-foreground">{subtitle}</Text>
-        ) : null}
+        <Text className="text-sm font-medium text-foreground">{title}</Text>
+        {subtitle ? <Text className="mt-0.5 text-xs text-muted-foreground">{subtitle}</Text> : null}
       </View>
       {trailing ?? <ChevronRight size={14} color={colors.mutedForeground} />}
     </View>
diff --git a/apps/mobile/src/components/ui/session-row.tsx b/apps/mobile/src/components/ui/session-row.tsx
index c9d6ee035f..b806cf4981 100644
--- a/apps/mobile/src/components/ui/session-row.tsx
+++ b/apps/mobile/src/components/ui/session-row.tsx
@@ -79,21 +79,18 @@ export function SessionRow({
           <Eyebrow className={color.hueTextClass}>{agentLabel}</Eyebrow>
           {live && <StatusDot tone="good" glow />}
           {!live && meta && (
-            <Text variant="mono" className="text-[10.5px] text-ink2">
+            <Text variant="mono" className="text-xs text-ink2">
               {meta}
             </Text>
           )}
         </View>
-        <Text
-          className="text-[14.5px] font-medium tracking-tight leading-[19px] text-foreground"
-          numberOfLines={1}
-        >
+        <Text className="text-sm font-medium tracking-tight text-foreground" numberOfLines={1}>
           {title}
         </Text>
         {subtitle ? (
           <Text
             variant="mono"
-            className="mt-1 text-[10.5px] tracking-[0.3px] text-muted-soft"
+            className="mt-1 text-xs tracking-[0.3px] text-muted-soft"
             numberOfLines={1}
           >
             {subtitle}

From 1b702760c45e3f2555f46e78ef13bd934f16c880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:18:10 +0200
Subject: [PATCH 5/7] fix(mobile): tokenize model-picker and remove hardcoded
 blue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KiloClaw model-picker: replace hardcoded blue selected state
  (border-blue-500, bg-blue-500/5, #3b82f6) with the brand primary
  token (border-primary, bg-accent-soft, colors.primary) so the
  selected indicator matches the rest of the product. Tokenize the
  decorative 'Balanced' / 'Frontier' icon tints to the existing
  agent-sky / agent-yuki tile-bg tokens. Enlarge the 'or select from
  500+ models' link to a 44dp target with accessibilityRole='link'
  and a label.
- KiloClaw settings model-list: selected check color → colors.primary.
- agents child-session-section: replace '#3b82f6' / text-blue-500 with
  agent-sky tokens so the running-tool indicator matches the brand
  palette and uses theme-aware dark variants.
---
 .../[instance-id]/settings/model-list.tsx     | 10 +++++--
 .../agents/child-session-section.tsx          | 18 ++++++++-----
 .../src/components/kiloclaw/model-picker.tsx  | 27 ++++++++++++-------
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx b/apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx
index e02d3cd024..213c05dd4c 100644
--- a/apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx
+++ b/apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx
@@ -83,11 +83,17 @@ export default function ModelListScreen() {
             <Text className="text-xs text-muted-foreground">{item.id}</Text>
           </View>
           {item.supportsVision && <Eye size={14} color={colors.mutedForeground} />}
-          {selected && <Check size={16} color="#3b82f6" />}
+          {selected && <Check size={16} color={colors.primary} />}
         </Pressable>
       );
     },
-    [currentModel, handleSelect, mutations.updateModel.isPending, colors.mutedForeground]
+    [
+      currentModel,
+      handleSelect,
+      mutations.updateModel.isPending,
+      colors.mutedForeground,
+      colors.primary,
+    ]
   );
 
   const sections = [
diff --git a/apps/mobile/src/components/agents/child-session-section.tsx b/apps/mobile/src/components/agents/child-session-section.tsx
index 7bd449d14c..366d2adf4a 100644
--- a/apps/mobile/src/components/agents/child-session-section.tsx
+++ b/apps/mobile/src/components/agents/child-session-section.tsx
@@ -116,7 +116,7 @@ export function ChildSessionSection({
 
   const currentTool = isRunning ? getCurrentRunningTool(childMessages) : undefined;
 
-  const borderColor = getStatusBorderColor(status, colors.destructive);
+  const borderColor = getStatusBorderColor(status, colors);
 
   const handlePress = useCallback(() => {
     setIsExpanded(prev => !prev);
@@ -142,7 +142,11 @@ export function ChildSessionSection({
           style={{ transform: [{ rotate: isExpanded ? '90deg' : '0deg' }] }}
         />
 
-        {isRunning ? <Loader2 size={16} color="#3b82f6" /> : <Bot size={16} color="#3b82f6" />}
+        {isRunning ? (
+          <Loader2 size={16} color={colors.agentSky} />
+        ) : (
+          <Bot size={16} color={colors.agentSky} />
+        )}
 
         <View className="flex-1">
           <Text className="text-sm text-foreground" numberOfLines={1}>
@@ -150,7 +154,7 @@ export function ChildSessionSection({
           </Text>
           {currentTool ? (
             <Text className="text-xs text-muted-foreground" numberOfLines={1}>
-              <Text className="text-xs text-blue-500">{currentTool.tool}</Text>
+              <Text className="text-xs text-agent-sky">{currentTool.tool}</Text>
               {currentTool.context ? ` ${currentTool.context}` : ''}
             </Text>
           ) : null}
@@ -261,14 +265,14 @@ function ChildSessionMessage({
   );
 }
 
-function getStatusBorderColor(status: string, destructiveColor: string): string {
+function getStatusBorderColor(status: string, colors: ReturnType<typeof useThemeColors>): string {
   if (status === 'error') {
-    return destructiveColor;
+    return colors.destructive;
   }
   if (status === 'completed') {
-    return '#22c55e';
+    return colors.good;
   }
-  return '#3b82f6';
+  return colors.agentSky;
 }
 
 function StatusBadge({ status }: Readonly<{ status: string }>) {
diff --git a/apps/mobile/src/components/kiloclaw/model-picker.tsx b/apps/mobile/src/components/kiloclaw/model-picker.tsx
index 1016dffb3e..3dd706dfe8 100644
--- a/apps/mobile/src/components/kiloclaw/model-picker.tsx
+++ b/apps/mobile/src/components/kiloclaw/model-picker.tsx
@@ -6,6 +6,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Text } from '@/components/ui/text';
 import { useInstanceContext } from '@/lib/hooks/use-instance-context';
 import { useKiloClawConfig, useKiloClawMutations } from '@/lib/hooks/use-kiloclaw-queries';
+import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import { addModelPrefix, stripModelPrefix } from '@/lib/model-id';
 
 type AutoModelCard = {
@@ -14,7 +15,7 @@ type AutoModelCard = {
   description: string;
   icon: LucideIcon;
   iconBg: string;
-  iconColor: string;
+  iconColorKey: 'agentSky' | 'agentYuki';
   cost: number;
   performance: number;
   performanceDotColor: string;
@@ -26,8 +27,8 @@ const AUTO_MODEL_CARDS: AutoModelCard[] = [
     label: 'Frontier',
     description: 'Highest performance. Routes to frontier models with reasoning.',
     icon: Zap,
-    iconBg: 'bg-purple-500/20',
-    iconColor: '#a855f7',
+    iconBg: 'bg-agent-yuki-tile-bg',
+    iconColorKey: 'agentYuki',
     cost: 3,
     performance: 3,
     performanceDotColor: 'bg-purple-400',
@@ -37,8 +38,8 @@ const AUTO_MODEL_CARDS: AutoModelCard[] = [
     label: 'Balanced',
     description: 'Smart balance of speed and capability at lower cost.',
     icon: Scale,
-    iconBg: 'bg-blue-500/20',
-    iconColor: '#3b82f6',
+    iconBg: 'bg-agent-sky-tile-bg',
+    iconColorKey: 'agentSky',
     cost: 2,
     performance: 2,
     performanceDotColor: 'bg-blue-400',
@@ -87,6 +88,7 @@ export function ModelPicker() {
   const { organizationId } = useInstanceContext(instanceId);
   const { data: config, isLoading } = useKiloClawConfig(organizationId);
   const mutations = useKiloClawMutations(organizationId);
+  const colors = useThemeColors();
 
   const currentModel = stripModelPrefix(config?.kilocodeDefaultModel);
   const isAutoModel = AUTO_MODEL_IDS.has(currentModel);
@@ -119,19 +121,24 @@ export function ModelPicker() {
           return (
             <Pressable
               key={card.id}
-              className={`relative gap-3 rounded-lg border p-4 ${selected ? 'border-blue-500 bg-blue-500/5' : 'border-border bg-secondary'}`}
+              className={`relative gap-3 rounded-lg border p-4 active:opacity-80 ${
+                selected ? 'border-primary bg-accent-soft' : 'border-border bg-secondary'
+              }`}
               disabled={mutations.updateModel.isPending}
               onPress={() => {
                 handleSelectAutoModel(card.id);
               }}
+              accessibilityRole="button"
+              accessibilityState={{ selected, disabled: mutations.updateModel.isPending }}
+              accessibilityLabel={`${card.label} auto model${selected ? ', selected' : ''}`}
             >
               {selected && (
                 <View className="absolute right-3 top-3">
-                  <CheckCircle2 size={20} color="#3b82f6" />
+                  <CheckCircle2 size={20} color={colors.primary} />
                 </View>
               )}
               <View className={`h-9 w-9 items-center justify-center rounded-lg ${card.iconBg}`}>
-                <Icon size={20} color={card.iconColor} />
+                <Icon size={20} color={colors[card.iconColorKey]} />
               </View>
               <View className="gap-1">
                 <Text className="font-semibold">{card.label}</Text>
@@ -161,10 +168,12 @@ export function ModelPicker() {
 
       {/* Navigate to full model list */}
       <Pressable
-        className="items-center py-2 active:opacity-70"
+        className="min-h-11 items-center justify-center py-2 active:opacity-70"
         onPress={() => {
           router.push(`/(app)/kiloclaw/${instanceId}/settings/model-list` as Href);
         }}
+        accessibilityRole="link"
+        accessibilityLabel="Browse all 500+ models"
       >
         <Text className="text-sm text-muted-foreground">or select from 500+ models</Text>
       </Pressable>

From bedd5b1e4a5041d461d8673a607e3068a96c8f70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 16:18:12 +0200
Subject: [PATCH 6/7] fix(mobile): bump tab label size for legibility

Raise the tab-bar label fontSize from 10px to 11px (with a small
letter-spacing) so functional navigation identifiers read at the
floor of legibility. Keeps JetBrains Mono to match the eyebrow
pattern used elsewhere in the app.
---
 apps/mobile/src/app/(app)/(tabs)/_layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/app/(app)/(tabs)/_layout.tsx b/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
index 6013e1a069..1703e7dff3 100644
--- a/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/src/app/(app)/(tabs)/_layout.tsx
@@ -16,8 +16,8 @@ const TAB_BAR_ICON_STYLE = {
 } satisfies ViewStyle;
 const TAB_BAR_LABEL_STYLE = {
   fontFamily: 'JetBrainsMono_500Medium',
-  fontSize: 10,
-  letterSpacing: 0,
+  fontSize: 11,
+  letterSpacing: 0.2,
   marginTop: 2,
   minWidth: TAB_BAR_ITEM_CONTENT_WIDTH,
   textAlign: 'center',

From 14048d07274308806cde1c969c11ec1972aa84ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20=C5=A0=C4=87eki=C4=87?= <iscekic@protonmail.com>
Date: Fri, 3 Jul 2026 17:54:12 +0200
Subject: [PATCH 7/7] =?UTF-8?q?fix(mobile):=20review=20fixes=20=E2=80=94?=
 =?UTF-8?q?=20dark-mode=20selected=20card,=20hitSlop=20overlap,=20drop=20u?=
 =?UTF-8?q?nused=20IconButton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- model-picker: selected card used opaque bg-accent-soft (#E8F27A in both
  themes), leaving near-white text and a primary-colored checkmark invisible
  in dark mode; switch to the established border-primary bg-neutral-100
  dark:bg-neutral-800 selected pattern (exec-policy.tsx)
- model-picker: drop ', selected' from accessibilityLabel — the
  accessibilityState already announces selection (was announced twice)
- session-list header: Plus (hitSlop 11) and Filter (hitSlop 12) expanded
  rects overlapped by 7px inside the 16px gap, so the later sibling stole
  taps; cap the facing slops at 8
- profile avatar: remove redundant hitSlop on an already 44dp box (also
  overlapped the filter button's slop)
- screen-header: add accessibilityRole to the back button
- button.tsx: drop the unused IconButton wrapper and touch size variant
  (no consumers; knip ignores ui/**, so it would ship as unchecked dead code)
- child-session-section: use the exported ThemeColors type
---
 .../agents/child-session-section.tsx          |  4 ++--
 .../components/agents/session-list-screen.tsx |  5 +++--
 .../src/components/kiloclaw/model-picker.tsx  |  6 +++--
 .../src/components/profile-avatar-button.tsx  |  1 -
 apps/mobile/src/components/screen-header.tsx  |  1 +
 apps/mobile/src/components/ui/button.tsx      | 22 ++-----------------
 6 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/apps/mobile/src/components/agents/child-session-section.tsx b/apps/mobile/src/components/agents/child-session-section.tsx
index 366d2adf4a..2c3695299a 100644
--- a/apps/mobile/src/components/agents/child-session-section.tsx
+++ b/apps/mobile/src/components/agents/child-session-section.tsx
@@ -5,7 +5,7 @@ import Animated, { FadeIn, LinearTransition } from 'react-native-reanimated';
 import { type Part, type StoredMessage, type ToolPart } from 'cloud-agent-sdk';
 
 import { Text } from '@/components/ui/text';
-import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+import { type ThemeColors, useThemeColors } from '@/lib/hooks/use-theme-colors';
 
 import { MessageErrorBoundary } from './message-error-boundary';
 import { isToolPart } from './part-types';
@@ -265,7 +265,7 @@ function ChildSessionMessage({
   );
 }
 
-function getStatusBorderColor(status: string, colors: ReturnType<typeof useThemeColors>): string {
+function getStatusBorderColor(status: string, colors: ThemeColors): string {
   if (status === 'error') {
     return colors.destructive;
   }
diff --git a/apps/mobile/src/components/agents/session-list-screen.tsx b/apps/mobile/src/components/agents/session-list-screen.tsx
index b64a9a6999..698188c75d 100644
--- a/apps/mobile/src/components/agents/session-list-screen.tsx
+++ b/apps/mobile/src/components/agents/session-list-screen.tsx
@@ -234,7 +234,8 @@ export function AgentSessionListScreen() {
               onPress={() => {
                 router.push(getNewAgentSessionPath(organizationId) as Href);
               }}
-              hitSlop={11}
+              // right slop capped so the expanded targets don't overlap inside the 16px gap
+              hitSlop={{ top: 11, bottom: 11, left: 11, right: 8 }}
               accessibilityRole="button"
               accessibilityLabel="New session"
               className="active:opacity-70"
@@ -245,7 +246,7 @@ export function AgentSessionListScreen() {
               onPress={() => {
                 setShowFilterModal(true);
               }}
-              hitSlop={12}
+              hitSlop={{ top: 12, bottom: 12, left: 8, right: 12 }}
               accessibilityRole="button"
               accessibilityLabel="Filter sessions"
               className="active:opacity-70"
diff --git a/apps/mobile/src/components/kiloclaw/model-picker.tsx b/apps/mobile/src/components/kiloclaw/model-picker.tsx
index 3dd706dfe8..2d0fd41813 100644
--- a/apps/mobile/src/components/kiloclaw/model-picker.tsx
+++ b/apps/mobile/src/components/kiloclaw/model-picker.tsx
@@ -122,7 +122,9 @@ export function ModelPicker() {
             <Pressable
               key={card.id}
               className={`relative gap-3 rounded-lg border p-4 active:opacity-80 ${
-                selected ? 'border-primary bg-accent-soft' : 'border-border bg-secondary'
+                selected
+                  ? 'border-primary bg-neutral-100 dark:bg-neutral-800'
+                  : 'border-border bg-secondary'
               }`}
               disabled={mutations.updateModel.isPending}
               onPress={() => {
@@ -130,7 +132,7 @@ export function ModelPicker() {
               }}
               accessibilityRole="button"
               accessibilityState={{ selected, disabled: mutations.updateModel.isPending }}
-              accessibilityLabel={`${card.label} auto model${selected ? ', selected' : ''}`}
+              accessibilityLabel={`${card.label} auto model`}
             >
               {selected && (
                 <View className="absolute right-3 top-3">
diff --git a/apps/mobile/src/components/profile-avatar-button.tsx b/apps/mobile/src/components/profile-avatar-button.tsx
index 591fc4e495..a15e026552 100644
--- a/apps/mobile/src/components/profile-avatar-button.tsx
+++ b/apps/mobile/src/components/profile-avatar-button.tsx
@@ -18,7 +18,6 @@ export function ProfileAvatarButton() {
       accessibilityRole="button"
       accessibilityLabel="Open profile"
       className="h-11 w-11 items-center justify-center rounded-full active:opacity-70"
-      hitSlop={6}
     >
       <CircleUserRound size={22} color={colors.foreground} />
     </Pressable>
diff --git a/apps/mobile/src/components/screen-header.tsx b/apps/mobile/src/components/screen-header.tsx
index f0a5f6c0eb..798da347aa 100644
--- a/apps/mobile/src/components/screen-header.tsx
+++ b/apps/mobile/src/components/screen-header.tsx
@@ -91,6 +91,7 @@ export function ScreenHeader({
                 }
               }}
               hitSlop={12}
+              accessibilityRole="button"
               accessibilityLabel="Go back"
               className="-ml-1 mr-1 active:opacity-70"
             >
diff --git a/apps/mobile/src/components/ui/button.tsx b/apps/mobile/src/components/ui/button.tsx
index fc9aa45daf..05f3730c2d 100644
--- a/apps/mobile/src/components/ui/button.tsx
+++ b/apps/mobile/src/components/ui/button.tsx
@@ -22,7 +22,6 @@ const buttonVariants = cva(
         sm: 'h-9 gap-1.5 rounded-md px-3',
         lg: 'h-11 rounded-md px-6',
         icon: 'h-10 w-10',
-        touch: 'h-11 min-w-11 px-4 py-2',
       },
     },
     defaultVariants: {
@@ -48,7 +47,6 @@ const buttonTextVariants = cva('text-foreground text-sm font-semibold', {
       sm: '',
       lg: '',
       icon: '',
-      touch: '',
     },
   },
   defaultVariants: {
@@ -73,21 +71,5 @@ function Button({ className, variant, size, ...props }: ButtonProps) {
   );
 }
 
-type IconButtonProps = Omit<ButtonProps, 'accessibilityLabel' | 'children' | 'role'> & {
-  /** Required — icon-only buttons must announce their action. */
-  accessibilityLabel: string;
-  children: React.ReactNode;
-};
-
-/**
- * Icon-only `Button`. Requires `accessibilityLabel` at the type level so
- * VoiceOver / TalkBack always has a name. Use for dense toolbars; consider
- * adding `hitSlop` to reach a 44dp effective target where the visual is
- * smaller than 44dp.
- */
-function IconButton({ className, variant = 'outline', size = 'icon', ...props }: IconButtonProps) {
-  return <Button variant={variant} size={size} className={className} role="button" {...props} />;
-}
-
-export { Button, buttonTextVariants, buttonVariants, IconButton };
-export type { ButtonProps, IconButtonProps };
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };