Resgrid · ucswift · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
diff --git a/global.css b/global.css
diff --git a/global.web.css b/global.web.css
@@ -0,0 +1,12 @@
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+@import 'nativewind/theme';
+
+@import './theme-tokens.css';
+
+/* Web dark mode: the .dark class GluestackUIProvider puts on <html> (see index.web.tsx). It is
+   always present — explicit modes set .dark/.light directly, and system mode sets one from the
+   media query — so the class alone is authoritative. Matching prefers-color-scheme here as well
+   would make an explicit Light choice render dark utilities on a dark-themed OS. */
+@custom-variant dark (&:where(.dark, .dark *));
diff --git a/gluestack-ui.config.json b/gluestack-ui.config.json
@@ -1,6 +1,5 @@
 {
   "tailwind": {
-    "config": "tailwind.config.js",
     "css": "global.css"
   },
   "app": {

diff --git a/src/app/(app)/chat.tsx b/src/app/(app)/chat.tsx
@@ -35,7 +35,12 @@ function ChannelRow({ channel, onPress }: { channel: ChatChannelResultData; onPr
         </Avatar>
       );
     }
-    const isIncident = channel.ChannelType === ChatChannelType.Incident || channel.ChannelType === ChatChannelType.IncidentLane || channel.ChannelType === ChatChannelType.IncidentCommand;
+    const isIncident =
+      channel.ChannelType === ChatChannelType.Incident ||
+      channel.ChannelType === ChatChannelType.IncidentLane ||
+      channel.ChannelType === ChatChannelType.IncidentCommand ||
+      channel.ChannelType === ChatChannelType.IncidentLeads ||
+      channel.ChannelType === ChatChannelType.IncidentDispatch;
     const Icon = channel.ChannelType === ChatChannelType.Chatbot ? Sparkles : isIncident ? Network : Users;
     return (
       <Box className="size-10 items-center justify-center rounded-full bg-primary-100">

diff --git a/src/app/(app)/command.tsx b/src/app/(app)/command.tsx
@@ -680,11 +680,11 @@ export default function CommandBoard() {
               </Button>
               <Button onPress={handleOpenCommandDetails} variant="outline" size={controlSize} className={iconButtonClass} accessibilityLabel={t('command.command_details')} testID="command-edit-details">
                 <ButtonIcon as={Pencil} className="text-gray-700 dark:text-gray-200" />
-                {showLabels ? <ButtonText>{t('command.command_details')}</ButtonText> : null}
+                {showLabels ? <ButtonText>{t('command.details_short')}</ButtonText> : null}
               </Button>
               <Button onPress={handleOpenTransfer} variant="outline" size={controlSize} className={iconButtonClass} accessibilityLabel={t('command.transfer_command')} testID="command-transfer">
                 <ButtonIcon as={UserCog} className="text-gray-700 dark:text-gray-200" />
-                {showLabels ? <ButtonText>{t('command.transfer_command')}</ButtonText> : null}
+                {showLabels ? <ButtonText>{t('command.transfer_short')}</ButtonText> : null}
               </Button>
               <Button onPress={handleRefresh} variant="outline" size={controlSize} className={iconButtonClass} isDisabled={isRefreshing} accessibilityLabel={t('common.refresh')} testID="command-refresh">
                 <ButtonIcon as={RefreshCw} className="text-gray-700 dark:text-gray-200" />
@@ -705,7 +705,7 @@ export default function CommandBoard() {
               </Button>
               <Button onPress={handleOpenCommandChat} variant="outline" size={controlSize} className={iconButtonClass} accessibilityLabel={t('command.command_chat')} testID="command-open-chat">
                 <ButtonIcon as={MessagesSquare} className="text-gray-700 dark:text-gray-200" />
-                {showLabels ? <ButtonText>{t('command.command_chat')}</ButtonText> : null}
+                {showLabels ? <ButtonText>{t('command.command_chat_short')}</ButtonText> : null}
               </Button>
               <Button onPress={handleOpenLeadsChat} variant="outline" size={controlSize} className={iconButtonClass} accessibilityLabel={t('command.leads_chat')} testID="command-open-leads-chat">
                 <ButtonIcon as={Users} className="text-gray-700 dark:text-gray-200" />

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,5 +1,5 @@
-// Import  global CSS file
-import '../../global.css';
+// Import global CSS (platform-specific entry: global.css on native, global.web.css on web)
+import '../lib/theme-styles';
 import '../lib/i18n';
 
 import { Env } from '@env';
@@ -223,7 +223,7 @@ function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <SafeAreaProvider>
-      <GestureHandlerRootView>
+      <GestureHandlerRootView style={{ flex: 1 }}>
         <KeyboardProvider>
           {Env.COUNTLY_APP_KEY ? (
             <CountlyProvider appKey={Env.COUNTLY_APP_KEY} serverURL={Env.COUNTLY_SERVER_URL}>

diff --git a/src/app/chat/[channelId].tsx b/src/app/chat/[channelId].tsx
@@ -32,10 +32,16 @@ import { useChatSystemStatus } from '@/stores/feature-flags/store';
 import { securityStore } from '@/stores/security/store';
 import { useToastStore } from '@/stores/toast/store';
 
-/** Command-type channels (Incident / IncidentLane / IncidentCommand) where the user
- * posts as the Incident Commander rather than as themselves. */
+/** Command-type channels (Incident / IncidentLane / IncidentCommand / IncidentLeads /
+ * IncidentDispatch) where the user posts as the Incident Commander rather than as themselves. */
 function isCommandChannelType(channelType?: number): boolean {
-  return channelType === ChatChannelType.Incident || channelType === ChatChannelType.IncidentLane || channelType === ChatChannelType.IncidentCommand;
+  return (
+    channelType === ChatChannelType.Incident ||
+    channelType === ChatChannelType.IncidentLane ||
+    channelType === ChatChannelType.IncidentCommand ||
+    channelType === ChatChannelType.IncidentLeads ||
+    channelType === ChatChannelType.IncidentDispatch
+  );
 }
 
 export default function ChannelConversationScreen() {

diff --git a/src/app/chat/thread/[messageId].tsx b/src/app/chat/thread/[messageId].tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList, Platform } from 'react-native';
 
-import { getThread } from '@/api/chat/chat';
+import { getChannel, getThread } from '@/api/chat/chat';
 import { buildLocationMetadata } from '@/components/chat/chat-utils';
 import { MessageBubble } from '@/components/chat/message-bubble';
 import { MessageComposer } from '@/components/chat/message-composer';
@@ -14,7 +14,7 @@ import { Spinner } from '@/components/ui/spinner';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { logger } from '@/lib/logging';
-import { ChatChannelType, ChatMessagePriority, type ChatMessageResultData, ChatMessageType } from '@/models/v4/chat';
+import { type ChatChannelResultData, ChatChannelType, ChatMessagePriority, type ChatMessageResultData, ChatMessageType } from '@/models/v4/chat';
 import useAuthStore from '@/stores/auth/store';
 import { useChatStore } from '@/stores/chat/store';
 import { useChatSystemStatus } from '@/stores/feature-flags/store';
@@ -26,14 +26,57 @@ export default function ThreadScreen() {
   const channelId = Array.isArray(params.channelId) ? params.channelId[0] : params.channelId;
 
   const currentUserId = useAuthStore((s) => s.userId);
-  const channel = useChatStore((s) => s.channels.find((c) => c.ChatChannelId === channelId));
+  const listedChannel = useChatStore((s) => s.channels.find((c) => c.ChatChannelId === channelId));
+  // Incident channels are held per-call rather than in the main list, so a thread opened from a
+  // command board has to be looked up there too.
+  const incidentChannel = useChatStore((s) => {
+    if (!channelId) return undefined;
+    for (const forCall of Object.values(s.incidentChannelsByCallId)) {
+      const match = forCall.find((c) => c.ChatChannelId === channelId);
+      if (match) return match;
+    }
+    return undefined;
+  });
+  const [apiChannel, setApiChannel] = useState<ChatChannelResultData | null>(null);
   const channelMessages = useChatStore((s) => (channelId ? s.messagesByChannel[channelId] : undefined));
   const [fetchedReplies, setFetchedReplies] = useState<ChatMessageResultData[]>([]);
   const chatStatus = useChatSystemStatus();
   const isChatEnabled = chatStatus === 'enabled';
 
+  const channel = listedChannel ?? incidentChannel ?? apiChannel ?? null;
+
+  /**
+   * A thread reached by deep link (a push notification) can arrive before any channel list has
+   * loaded, and the channel may not be in that list at all. Without resolving it the screen cannot
+   * tell an incident channel from an ordinary one, and the reply would post under the sender's own
+   * name instead of the Incident Commander's — so fetch it directly and keep the composer shut
+   * until it lands.
+   */
+  useEffect(() => {
+    if (!isChatEnabled || !channelId || listedChannel || incidentChannel) return;
+    let cancelled = false;
+    getChannel(channelId)
+      .then((response) => {
+        if (!cancelled) {
+          setApiChannel(response.Data ?? null);
+        }
+      })
+      .catch((error) => logger.error({ message: 'chat: failed to resolve thread channel', context: { error, channelId } }));
+    return () => {
+      cancelled = true;
+    };
+  }, [channelId, isChatEnabled, listedChannel, incidentChannel]);
+
   // IC delta: thread replies in command-type channels also post as the Incident Commander.
-  const isCommandChannel = channel?.ChannelType === ChatChannelType.Incident || channel?.ChannelType === ChatChannelType.IncidentLane || channel?.ChannelType === ChatChannelType.IncidentCommand;
+  const isCommandChannel =
+    channel?.ChannelType === ChatChannelType.Incident ||
+    channel?.ChannelType === ChatChannelType.IncidentLane ||
+    channel?.ChannelType === ChatChannelType.IncidentCommand ||
+    channel?.ChannelType === ChatChannelType.IncidentLeads ||
+    channel?.ChannelType === ChatChannelType.IncidentDispatch;
+
+  // An archived channel is a point-in-time record: the server rejects new posts, so do not offer them.
+  const isFrozen = !!channel?.IsArchived;
 
   const root = useMemo(() => (channelMessages ?? []).find((m) => m.ChatMessageId === messageId), [channelMessages, messageId]);
 
@@ -135,7 +178,7 @@ export default function ThreadScreen() {
 
         {/* Threads carry text and location only; omitting the image/GIF callbacks keeps
             those actions out of the composer instead of showing dead buttons. */}
-        <MessageComposer onSendText={handleSendText} onSendLocation={handleSendLocation} onTyping={() => undefined} placeholder={t('chat.reply_placeholder')} allowUrgent={false} />
+        <MessageComposer onSendText={handleSendText} onSendLocation={handleSendLocation} onTyping={() => undefined} placeholder={t('chat.reply_placeholder')} allowUrgent={false} disabled={!channel || isFrozen} />
       </KeyboardAvoidingView>
     </Box>
   );

diff --git a/src/components/chat/__tests__/chat-utils.test.ts b/src/components/chat/__tests__/chat-utils.test.ts
@@ -3,7 +3,7 @@ import { type TFunction } from 'i18next';
 
 import { ChatChannelType, type ChatChannelResultData } from '@/models/v4/chat';
 
-import { copyToClipboard, getChannelDisplayName, getImageMimeType, hasLink, linkifySegments } from '../chat-utils';
+import { copyToClipboard, getChannelDisplayName, getImageMimeType, groupChannels, hasLink, linkifySegments } from '../chat-utils';
-import { copyToClipboard, getChannelDisplayName, getImageMimeType, groupChannels, hasLink, linkifySegments } from '../chat-utils';
+import { copyToClipboard, getChannelDisplayName, getImageMimeType, groupChannels, hasLink, linkifySegments } from '@/components/chat/chat-utils';
-import { copyToClipboard, getChannelDisplayName, getImageMimeType, groupChannels, hasLink, linkifySegments } from '../chat-utils';
+import { copyToClipboard, getChannelDisplayName, getImageMimeType, groupChannels, hasLink, linkifySegments } from '@/components/chat/chat-utils';
 
 jest.mock('expo-clipboard', () => ({ setStringAsync: jest.fn() }));
 
@@ -34,6 +34,31 @@ describe('chat-utils', () => {
     });
   });
 
+  describe('groupChannels', () => {
+    it('buckets every incident-scoped channel type into the incidents section', () => {
+      const grouped = groupChannels([
+        buildChannel({ ChatChannelId: 'a', ChannelType: ChatChannelType.Incident }),
+        buildChannel({ ChatChannelId: 'b', ChannelType: ChatChannelType.IncidentLane }),
+        buildChannel({ ChatChannelId: 'c', ChannelType: ChatChannelType.IncidentCommand }),
+        buildChannel({ ChatChannelId: 'd', ChannelType: ChatChannelType.IncidentLeads }),
+        buildChannel({ ChatChannelId: 'e', ChannelType: ChatChannelType.IncidentDispatch }),
+      ]);
+      expect(grouped.incidents.map((c) => c.ChatChannelId).sort()).toEqual(['a', 'b', 'c', 'd', 'e']);
+      expect(grouped.channels).toHaveLength(0);
+    });
+
+    it('buckets the unit dispatch line into the channels section', () => {
+      const grouped = groupChannels([buildChannel({ ChatChannelId: 'ud', ChannelType: ChatChannelType.UnitDispatch })]);
+      expect(grouped.channels.map((c) => c.ChatChannelId)).toEqual(['ud']);
+      expect(grouped.incidents).toHaveLength(0);
+    });
+
+    it('skips archived channels', () => {
+      const grouped = groupChannels([buildChannel({ ChatChannelId: 'x', ChannelType: ChatChannelType.Incident, IsArchived: true })]);
+      expect(grouped.incidents).toHaveLength(0);
+    });
+  });
+
   describe('getImageMimeType', () => {
     it('prefers the picker asset mimeType when available', () => {
       expect(getImageMimeType('file:///photos/photo.jpg', 'image/png')).toBe('image/png');

diff --git a/src/components/chat/chat-utils.ts b/src/components/chat/chat-utils.ts
@@ -23,6 +23,8 @@ export function groupChannels(channels: ChatChannelResultData[]): GroupedChannel
       case ChatChannelType.Incident:
       case ChatChannelType.IncidentLane:
       case ChatChannelType.IncidentCommand:
+      case ChatChannelType.IncidentLeads:
+      case ChatChannelType.IncidentDispatch:
         grouped.incidents.push(channel);
         break;
       case ChatChannelType.Chatbot:

diff --git a/src/components/ui/gluestack-ui-provider/index.tsx b/src/components/ui/gluestack-ui-provider/index.tsx
@@ -1,24 +1,24 @@
 'use client';
 import { OverlayProvider } from '@gluestack-ui/core/overlay/creator';
 import { ToastProvider } from '@gluestack-ui/core/toast/creator';
-import React, { useEffect } from 'react';
-import { Appearance, useColorScheme, View, type ViewProps } from 'react-native';
+import React, { useLayoutEffect } from 'react';
+import { Appearance, View, type ViewProps } from 'react-native';
 
 export type ModeType = 'light' | 'dark' | 'system';
 
 export function GluestackUIProvider({ mode = 'light', ...props }: { mode?: ModeType; children?: React.ReactNode; style?: ViewProps['style'] }) {
-  // Tokens (--color-*) flip through the prefers-color-scheme media query,
-  // which react-native-css drives from Appearance. The className wrapper
-  // drives the class-based `dark:` variant (see @custom-variant in global.css).
-  const osScheme = useColorScheme();
-  const resolvedScheme: 'light' | 'dark' = mode === 'system' ? (osScheme === 'dark' ? 'dark' : 'light') : mode;
-
-  useEffect(() => {
+  // Both the tokens (--color-*) and the `dark:` variant flip through the prefers-color-scheme media
+  // query, which react-native-css drives from Appearance — hence the override below.
+  useLayoutEffect(() => {
     Appearance.setColorScheme(mode === 'system' ? 'unspecified' : mode);
   }, [mode]);
 
+  // This View deliberately carries NO className. It wraps the entire app, and react-native-css wraps
+  // any classed component in an element of its own; with a class here every native ScrollView beneath
+  // it stopped responding to a plain drag app-wide — only a Pressable taking the JS responder could
+  // scroll anything. Style it inline if it ever needs styling, and see the dark variant in global.css.
   return (
-    <View className={resolvedScheme} style={[{ flex: 1, height: '100%', width: '100%' }, props.style]}>
+    <View style={[{ flex: 1, height: '100%', width: '100%' }, props.style]}>
       <OverlayProvider>
         <ToastProvider>{props.children}</ToastProvider>
       </OverlayProvider>

diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
@@ -6,6 +6,8 @@ import { styled } from 'nativewind';
 import React from 'react';
 import { Pressable, TextInput, View } from 'react-native';
 
+import { useTextFieldVerticalFix } from '../text-field-metrics';
+
 const SCOPE = 'INPUT';
 
 const StyledUIIcon = styled(UIIcon, { className: 'style' });
@@ -60,7 +62,7 @@ const inputSlotStyle = tva({
 });
 
 const inputFieldStyle = tva({
-  base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
 
   parentVariants: {
     variant: {
@@ -136,8 +138,9 @@ const InputSlot = React.forwardRef<React.ComponentRef<typeof UIInput.Slot>, IInp
 
 type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> & VariantProps<typeof inputFieldStyle> & { className?: string };
 
-const InputField = React.forwardRef<React.ComponentRef<typeof UIInput.Input>, IInputFieldProps>(function InputField({ className, ...props }, ref) {
+const InputField = React.forwardRef<React.ComponentRef<typeof UIInput.Input>, IInputFieldProps>(function InputField({ className, style, ...props }, ref) {
   const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
+  const verticalFix = useTextFieldVerticalFix(parentSize);
 
   return (
     <UIInput.Input
@@ -150,6 +153,7 @@ const InputField = React.forwardRef<React.ComponentRef<typeof UIInput.Input>, II
         },
         class: className,
       })}
+      style={[verticalFix, style]}
     />
   );
 });

diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
@@ -9,6 +9,8 @@ import { styled } from 'nativewind';
 import React from 'react';
 import { Pressable, TextInput, View } from 'react-native';
 
+// Mirrors the Input component: the trigger's fixed height clips `h-full` text on Android the same way.
+import { useTextFieldVerticalFix } from '../text-field-metrics';
 import {
   Actionsheet,
   ActionsheetBackdrop,
@@ -67,7 +69,7 @@ const selectTriggerStyle = tva({
 });
 
 const selectInputStyle = tva({
-  base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]',
+  base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none',
   parentVariants: {
     size: {
       xl: 'text-xl',
@@ -146,8 +148,9 @@ const SelectTrigger = React.forwardRef<React.ComponentRef<typeof UISelect.Trigge
 
 type ISelectInputProps = VariantProps<typeof selectInputStyle> & React.ComponentProps<typeof UISelect.Input> & { className?: string };
 
-const SelectInput = React.forwardRef<React.ComponentRef<typeof UISelect.Input>, ISelectInputProps>(function SelectInput({ className, ...props }, ref) {
+const SelectInput = React.forwardRef<React.ComponentRef<typeof UISelect.Input>, ISelectInputProps>(function SelectInput({ className, style, ...props }, ref) {
   const { size: parentSize, variant: parentVariant } = useStyleContext();
+  const verticalFix = useTextFieldVerticalFix(parentSize);
   return (
     <UISelect.Input
       className={selectInputStyle({
@@ -159,6 +162,7 @@ const SelectInput = React.forwardRef<React.ComponentRef<typeof UISelect.Input>,
       })}
       ref={ref}
       {...props}
+      style={[verticalFix, style]}
     />
   );
 });

diff --git a/src/components/ui/text-field-metrics.ts b/src/components/ui/text-field-metrics.ts
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Platform } from 'react-native';
+
+/**
+ * Android field metrics, applied from JS because the class layer cannot express them correctly.
+ *
+ * Measured on device, each case a real Input/InputField:
+ *   - the class `h-full` (height: 100%) resolves taller than the fixed-height parent on Android, and
+ *     the parent's overflow-hidden then clips the top of the glyphs;
+ *   - an explicit pixel height matching the parent renders correctly;
+ *   - overriding only the lineHeight, at either the class or the style layer, does not help;
+ *   - lineHeight 0 (what iOS uses) hides Android text completely, and a later `undefined` does not
+ *     clear the value the size class sets.
+ *
+ * So Android gets a concrete height plus a lineHeight near the font size, and drops the extra font
+ * padding. iOS keeps the zero lineHeight that upstream applied through `ios:leading-[0px]`; that class
+ * is gone from the base style so the value can be chosen per platform here.
+ */
+const ANDROID_FIELD_METRICS: Record<string, { height: number; lineHeight: number }> = {
+  sm: { height: 36, lineHeight: 18 },
+  md: { height: 40, lineHeight: 20 },
+  lg: { height: 44, lineHeight: 22 },
+  xl: { height: 48, lineHeight: 25 },
+};
+
+export const useTextFieldVerticalFix = (size: string | undefined) =>
+  React.useMemo(() => {
+    if (Platform.OS === 'ios') {
+      return { lineHeight: 0 } as const;
+    }
+    if (Platform.OS === 'android') {
+      const metrics = ANDROID_FIELD_METRICS[size ?? 'md'] ?? ANDROID_FIELD_METRICS.md;
+      return { height: metrics.height, lineHeight: metrics.lineHeight, includeFontPadding: false, textAlignVertical: 'center' } as const;
+    }
+    return undefined;
+  }, [size]);