@comergehq/studio 0.1.1 → 0.1.3

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Comerge studio",
-  "main": "dist/index.js",
+  "main": "src/index.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "react-native": "dist/index.js",
+  "react-native": "src/index.ts",
   "sideEffects": false,
   "files": [
     "dist",
+    "src",
     "README.md",
     "LICENSE"
   ],
@@ -28,17 +29,18 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
-    "build": "tsup && node scripts/copy-assets.mjs",
+    "build": "tsup",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@comergehq/runtime": "^0.1.1",
     "axios": "^1.13.1",
     "react-native-markdown-display": "^7.0.2",
     "react-native-logs": "^5.5.0"
@@ -52,6 +54,7 @@
     "@callstack/liquid-glass": "*",
     "@supabase/supabase-js": "*",
     "@gorhom/bottom-sheet": "*",
+    "@comergehq/runtime": "^0.1.1",
     "expo": "*",
     "expo-file-system": "*",
     "expo-haptics": "*",

package/src/components/chat/ChatComposer.tsx

@@ -0,0 +1,277 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Dimensions,
+  Image,
+  Pressable,
+  ScrollView,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { Plus } from 'lucide-react-native';
+
+import { useTheme } from '../../theme';
+import { MultilineTextInput } from './MultilineTextInput';
+import { IconChevronRight, IconClose } from '../icons/StudioIcons';
+
+export type ChatComposerProps = {
+  value?: string;
+  onChangeValue?: (text: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  sending?: boolean;
+  autoFocus?: boolean;
+  onSend: (text: string, attachments?: string[]) => void | Promise<void>;
+  attachments?: string[];
+  onRemoveAttachment?: (index: number) => void;
+  onAddAttachment?: () => void;
+  renderAddAttachment?: () => React.ReactNode;
+  renderRemoveIcon?: () => React.ReactNode;
+  renderSendIcon?: () => React.ReactNode;
+  useBottomSheetTextInput?: boolean;
+  onLayout?: (e: { height: number }) => void;
+  style?: ViewStyle;
+};
+
+const THUMBNAIL_HEIGHT = 90;
+
+function AspectRatioThumbnail({
+  uri,
+  onRemove,
+  renderRemoveIcon,
+}: {
+  uri: string;
+  onRemove?: () => void;
+  renderRemoveIcon?: () => React.ReactNode;
+}) {
+  const [aspectRatio, setAspectRatio] = React.useState(1);
+
+  return (
+    <View style={{ height: THUMBNAIL_HEIGHT, aspectRatio, position: 'relative' }}>
+      <View style={{ flex: 1, borderRadius: 8, overflow: 'hidden' }}>
+        <Image
+          source={{ uri }}
+          style={{ width: '100%', height: '100%' }}
+          resizeMode="contain"
+          onLoad={(e) => {
+            const { width, height } = (e as any).nativeEvent?.source ?? {};
+            if (width && height) setAspectRatio(width / height);
+          }}
+        />
+      </View>
+      {onRemove ? (
+        <Pressable
+          style={{
+            position: 'absolute',
+            top: -4,
+            right: -4,
+            width: 24,
+            height: 24,
+            borderRadius: 12,
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 10,
+          }}
+          onPress={onRemove}
+          hitSlop={10}
+        >
+          {renderRemoveIcon ? renderRemoveIcon() : <IconClose size={12} colorToken="onPrimary" />}
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+export function ChatComposer({
+  value,
+  onChangeValue,
+  placeholder = 'Describe the idea you want to build',
+  disabled = false,
+  sending = false,
+  autoFocus = false,
+  onSend,
+  attachments = [],
+  onRemoveAttachment,
+  onAddAttachment,
+  renderAddAttachment,
+  renderRemoveIcon,
+  renderSendIcon,
+  useBottomSheetTextInput,
+  onLayout,
+  style,
+}: ChatComposerProps) {
+  const theme = useTheme();
+  const [internal, setInternal] = React.useState('');
+  const text = value ?? internal;
+  const setText = onChangeValue ?? setInternal;
+  const hasAttachments = attachments.length > 0;
+  const hasText = text.trim().length > 0;
+  const composerMinHeight = hasAttachments ? THUMBNAIL_HEIGHT + 44 + 24 : 44;
+
+  const isButtonDisabled = sending || disabled;
+  const maxInputHeight = React.useMemo(() => Dimensions.get('window').height * 0.5, []);
+  const shakeAnim = React.useRef(new Animated.Value(0)).current;
+  const [sendPressed, setSendPressed] = React.useState(false);
+  const inputRef = React.useRef<import('react-native').TextInput | null>(null);
+  const prevAutoFocusRef = React.useRef(false);
+
+  React.useEffect(() => {
+    const shouldFocus = autoFocus && !prevAutoFocusRef.current && !disabled && !sending;
+    prevAutoFocusRef.current = autoFocus;
+    if (!shouldFocus) return;
+
+    // Temporary workaround: Bottom sheets can take a moment to open
+    const t = setTimeout(() => {
+      inputRef.current?.focus();
+    }, 75);
+    return () => clearTimeout(t);
+  }, [autoFocus, disabled, sending]);
+
+  const triggerShake = React.useCallback(() => {
+    shakeAnim.setValue(0);
+    Animated.sequence([
+      Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true }),
+    ]).start();
+  }, [shakeAnim]);
+
+  const handleSend = React.useCallback(async () => {
+    if (isButtonDisabled) return;
+    // Require at least one character of text (attachments alone not enough)
+    if (!hasText) {
+      triggerShake();
+      return;
+    }
+    const trimmed = text.trim();
+    await onSend(trimmed, attachments.length > 0 ? attachments : undefined);
+    setText('');
+  }, [attachments, hasText, isButtonDisabled, onSend, setText, text, triggerShake]);
+
+  const textareaBgColor = theme.scheme === 'dark' ? '#18181B' : '#F6F6F6';
+  const placeholderTextColor = theme.scheme === 'dark' ? '#A1A1AA' : '#71717A';
+
+  return (
+    <View
+      style={[{ paddingHorizontal: 16, paddingBottom: 12, paddingTop: 8 }, style]}
+      onLayout={(e) => onLayout?.({ height: e.nativeEvent.layout.height })}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 8 }}>
+        <Animated.View style={{ flex: 1, transform: [{ translateX: shakeAnim }] }}>
+          <LiquidGlassView
+            style={[
+              // LiquidGlassView doesn't reliably auto-size to children; ensure enough height for the
+              // thumbnail strip when attachments are present.
+              { borderRadius: 24, flex: 1, minHeight: composerMinHeight },
+              !isLiquidGlassSupported && { backgroundColor: textareaBgColor },
+            ]}
+            interactive
+            effect="clear"
+          >
+            {hasAttachments ? (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                keyboardShouldPersistTaps="handled"
+                contentContainerStyle={{ gap: 8, paddingHorizontal: 12, paddingTop: 12 }}
+              >
+                {attachments.map((uri, index) => (
+                  <AspectRatioThumbnail
+                    key={`attachment-${index}`}
+                    uri={uri}
+                    onRemove={onRemoveAttachment ? () => onRemoveAttachment(index) : undefined}
+                    renderRemoveIcon={renderRemoveIcon}
+                  />
+                ))}
+                {onAddAttachment ? (
+                  renderAddAttachment ? (
+                    renderAddAttachment()
+                  ) : (
+                    <Pressable
+                      style={{
+                        height: THUMBNAIL_HEIGHT,
+                        aspectRatio: 0.6,
+                        borderRadius: 8,
+                        borderWidth: 2,
+                        borderColor: 'rgba(255, 255, 255, 0.3)',
+                        borderStyle: 'dashed',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                      }}
+                      onPress={onAddAttachment}
+                    >
+                      <Plus size={24} color="rgba(255, 255, 255, 0.5)" />
+                    </Pressable>
+                  )
+                ) : null}
+              </ScrollView>
+            ) : null}
+
+            <MultilineTextInput
+              ref={inputRef}
+              value={text}
+              onChangeText={setText}
+              placeholder={placeholder}
+              editable={!disabled && !sending}
+              useBottomSheetTextInput={useBottomSheetTextInput}
+              autoFocus={autoFocus}
+              placeholderTextColor={placeholderTextColor}
+              scrollEnabled
+              style={{
+                maxHeight: maxInputHeight,
+                minHeight: 44,
+                color: theme.scheme === 'dark' ? '#FAFAFA' : '#09090B',
+                paddingHorizontal: 16,
+                paddingVertical: 12,
+                lineHeight: 20,
+              }}
+            />
+          </LiquidGlassView>
+        </Animated.View>
+
+        <LiquidGlassView
+          style={[{ borderRadius: 100 }, !isLiquidGlassSupported && { backgroundColor: textareaBgColor }]}
+          interactive
+          effect="clear"
+        >
+          <View
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 22,
+              overflow: 'hidden',
+              backgroundColor: theme.colors.primary,
+              opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1,
+            }}
+          >
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Send"
+              disabled={isButtonDisabled}
+              onPress={handleSend}
+              onPressIn={() => setSendPressed(true)}
+              onPressOut={() => setSendPressed(false)}
+              style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
+            >
+              {sending ? (
+                <ActivityIndicator />
+              ) : renderSendIcon ? (
+                renderSendIcon()
+              ) : (
+                <IconChevronRight size={20} colorToken="onPrimary" />
+              )}
+            </Pressable>
+          </View>
+        </LiquidGlassView>
+      </View>
+    </View>
+  );
+}
+
+

package/src/components/chat/ChatHeader.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+
+import { StudioSheetHeader } from '../studio-sheet/StudioSheetHeader';
+
+export type ChatHeaderProps = {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  center?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function ChatHeader({ left, right, center, style }: ChatHeaderProps) {
+  const flattenedStyle = StyleSheet.flatten([
+    {
+      paddingTop: 0,
+    } satisfies ViewStyle,
+    style,
+  ]);
+
+  return (
+    <StudioSheetHeader
+      left={left}
+      right={right}
+      center={center}
+      style={flattenedStyle}
+    />
+  );
+}
+
+

package/src/components/chat/ChatMessageBubble.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { CheckCheck, GitMerge } from 'lucide-react-native';
+
+import type { ChatMessage } from '../models/types';
+import { useTheme } from '../../theme';
+import { MarkdownText } from '../primitives/MarkdownText';
+import { Surface } from '../primitives/Surface';
+
+export type ChatMessageBubbleProps = {
+  message: ChatMessage;
+  /**
+   * Optional custom renderer for message content (e.g. markdown).
+   */
+  renderContent?: (message: ChatMessage) => React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function ChatMessageBubble({ message, renderContent, style }: ChatMessageBubbleProps) {
+  const theme = useTheme();
+  const metaEvent = message.meta?.event ?? null;
+  const metaStatus = message.meta?.status ?? null;
+
+  const isMergeApproved = metaEvent === 'merge_request.approved';
+  const isMergeRejected = metaEvent === 'merge_request.rejected';
+  const isMergeCompleted = metaEvent === 'merge.completed';
+
+  const isHuman = message.author === 'human' || isMergeApproved || isMergeRejected;
+
+  const align: ViewStyle = { alignSelf: isHuman ? 'flex-end' : 'flex-start' };
+  const bubbleVariant = isHuman ? 'surface' : 'surfaceRaised';
+  const cornerStyle: ViewStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
+
+  const bodyColor =
+    metaStatus === 'success' ? theme.colors.success : metaStatus === 'error' ? theme.colors.danger : undefined;
+
+  return (
+    <View style={[align, style]}>
+      <Surface
+        variant={bubbleVariant}
+        style={[
+          {
+            maxWidth: '85%',
+            borderRadius: theme.radii.lg,
+            paddingHorizontal: theme.spacing.lg,
+            paddingVertical: theme.spacing.md,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+          },
+          cornerStyle,
+        ]}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {isMergeCompleted ? (
+            <CheckCheck size={16} color={theme.colors.success} style={{ marginRight: theme.spacing.sm }} />
+          ) : null}
+          {isMergeApproved ? (
+            <GitMerge size={16} color={theme.colors.text} style={{ marginRight: theme.spacing.sm }} />
+          ) : null}
+          <View style={{ flexShrink: 1, minWidth: 0 }}>
+            {renderContent ? renderContent(message) : <MarkdownText markdown={message.content} variant="chat" bodyColor={bodyColor} />}
+          </View>
+        </View>
+      </Surface>
+    </View>
+  );
+}
+
+

package/src/components/chat/ChatMessageList.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { View, type NativeScrollEvent, type NativeSyntheticEvent, type ViewStyle } from 'react-native';
+import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
+
+import type { ChatMessage } from '../models/types';
+import { useTheme } from '../../theme';
+import { ChatMessageBubble, type ChatMessageBubbleProps } from './ChatMessageBubble';
+import { TypingIndicator } from './TypingIndicator';
+
+export type ChatMessageListRef = {
+  scrollToBottom: (options?: { animated?: boolean }) => void;
+};
+
+export type ChatMessageListProps = {
+  messages: ChatMessage[];
+  showTypingIndicator?: boolean;
+  renderMessageContent?: ChatMessageBubbleProps['renderContent'];
+  contentStyle?: ViewStyle;
+  /**
+   * Called when the user is near the bottom of the list.
+   */
+  onNearBottomChange?: (nearBottom: boolean) => void;
+  /**
+   * Distance threshold from bottom (in dp) that counts as "near bottom".
+   */
+  nearBottomThreshold?: number;
+};
+
+export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageListProps>(
+  (
+    {
+      messages,
+      showTypingIndicator = false,
+      renderMessageContent,
+      contentStyle,
+      onNearBottomChange,
+      nearBottomThreshold = 200,
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const listRef = React.useRef<React.ElementRef<typeof BottomSheetFlatList<ChatMessage>>>(null);
+    const nearBottomRef = React.useRef(true);
+    const initialScrollDoneRef = React.useRef(false);
+    const lastMessageIdRef = React.useRef<string | null>(null);
+
+    const scrollToBottom = React.useCallback((options?: { animated?: boolean }) => {
+      const animated = options?.animated ?? true;
+      // Scroll to visual bottom (latest messages) in a normal (non-inverted) list.
+      listRef.current?.scrollToEnd({ animated });
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+
+    const handleScroll = React.useCallback(
+      (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+        const distanceFromBottom = Math.max(contentSize.height - (contentOffset.y + layoutMeasurement.height), 0);
+        const isNear = distanceFromBottom <= nearBottomThreshold;
+
+        if (nearBottomRef.current !== isNear) {
+          nearBottomRef.current = isNear;
+          onNearBottomChange?.(isNear);
+        }
+      },
+      [nearBottomThreshold, onNearBottomChange]
+    );
+
+    // On first load, start at the bottom
+    React.useEffect(() => {
+      if (initialScrollDoneRef.current) return;
+      if (messages.length === 0) return;
+
+      initialScrollDoneRef.current = true;
+      lastMessageIdRef.current = messages[messages.length - 1]?.id ?? null;
+      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
+      return () => cancelAnimationFrame(id);
+    }, [messages, scrollToBottom]);
+
+    // When new messages arrive, keep the user pinned to the bottom only if they already were near it.
+    React.useEffect(() => {
+      if (!initialScrollDoneRef.current) return;
+      const lastId = messages.length > 0 ? messages[messages.length - 1]!.id : null;
+      const prevLastId = lastMessageIdRef.current;
+      lastMessageIdRef.current = lastId;
+      if (!lastId || lastId === prevLastId) return;
+      if (!nearBottomRef.current) return;
+
+      const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
+      return () => cancelAnimationFrame(id);
+    }, [messages, scrollToBottom]);
+
+    // When typing indicator appears, keep the user at bottom if they already were.
+    React.useEffect(() => {
+      if (showTypingIndicator && nearBottomRef.current) {
+        const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
+        return () => cancelAnimationFrame(id);
+      }
+      return undefined;
+    }, [showTypingIndicator, scrollToBottom]);
+
+    return (
+      <BottomSheetFlatList
+        ref={listRef}
+        data={messages}
+        keyExtractor={(m: ChatMessage) => m.id}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={[
+          {
+            paddingHorizontal: theme.spacing.lg,
+            paddingTop: theme.spacing.sm,
+            paddingBottom: theme.spacing.xl,
+          },
+          contentStyle,
+        ]}
+        renderItem={({ item, index }: { item: ChatMessage; index: number }) => (
+          <View style={{ marginTop: index === 0 ? 0 : theme.spacing.sm }}>
+            <ChatMessageBubble message={item} renderContent={renderMessageContent} />
+          </View>
+        )}
+        ListFooterComponent={
+          showTypingIndicator ? (
+            <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>
+              <TypingIndicator />
+            </View>
+          ) : null
+        }
+        maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: nearBottomThreshold }}
+      />
+    );
+  }
+);
+ChatMessageList.displayName = 'ChatMessageList';
+
+

package/src/components/chat/ChatPage.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import type { ChatMessage } from '../models/types';
+import { useTheme } from '../../theme';
+import { ChatMessageList, type ChatMessageListProps, type ChatMessageListRef } from './ChatMessageList';
+import { ChatComposer, type ChatComposerProps } from './ChatComposer';
+
+export type ChatPageProps = {
+  header?: React.ReactNode;
+  messages: ChatMessage[];
+  showTypingIndicator?: boolean;
+  renderMessageContent?: ChatMessageListProps['renderMessageContent'];
+  topBanner?: React.ReactNode;
+  composer: Omit<ChatComposerProps, 'attachments'> & {
+    attachments?: ChatComposerProps['attachments'];
+  };
+  /**
+   * Optional overlay (e.g. ScrollToBottomButton).
+   */
+  overlay?: React.ReactNode;
+  style?: ViewStyle;
+  onNearBottomChange?: ChatMessageListProps['onNearBottomChange'];
+  listRef?: React.RefObject<ChatMessageListRef | null>;
+};
+
+export function ChatPage({
+  header,
+  messages,
+  showTypingIndicator,
+  renderMessageContent,
+  topBanner,
+  composer,
+  overlay,
+  style,
+  onNearBottomChange,
+  listRef,
+}: ChatPageProps) {
+  const theme = useTheme();
+  const [composerHeight, setComposerHeight] = React.useState(0);
+  return (
+    <View style={[{ flex: 1 }, style]}>
+      {header ? <View>{header}</View> : null}
+      {topBanner ? (
+        <View style={{ paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }}>
+          {topBanner}
+        </View>
+      ) : null}
+      <View style={{ flex: 1 }}>
+        <ChatMessageList
+          ref={listRef}
+          messages={messages}
+          showTypingIndicator={showTypingIndicator}
+          renderMessageContent={renderMessageContent}
+          onNearBottomChange={onNearBottomChange}
+          contentStyle={{ paddingBottom: theme.spacing.xl + composerHeight }}
+        />
+        {overlay}
+      </View>
+      <ChatComposer
+        {...composer}
+        attachments={composer.attachments ?? []}
+        onLayout={({ height }) => setComposerHeight(height)}
+      />
+    </View>
+  );
+}
+
+

package/src/components/chat/ForkNoticeBanner.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Card } from '../primitives/Card';
+import { Text } from '../primitives/Text';
+
+export type ForkNoticeBannerProps = {
+  isOwner?: boolean;
+  title?: string;
+  description?: string | null;
+  style?: ViewStyle;
+};
+
+export function ForkNoticeBanner({ isOwner = true, title, description, style }: ForkNoticeBannerProps) {
+  const theme = useTheme();
+  const resolvedTitle = title ?? (isOwner ? 'Remixed app' : 'Remix app');
+  const resolvedDescription =
+    description ??
+    (isOwner
+      ? 'Any changes you make will be a remix of the original app. You can view the edited version in the Remix tab in your apps page.'
+      : 'Once you make edits, this remixed version will appear on your Remixed apps page.');
+
+  return (
+    <Card
+      variant="surfaceRaised"
+      padded={false}
+      border
+      style={[
+        {
+          width: '100%',
+          paddingHorizontal: theme.spacing.lg,
+          paddingTop: 14,
+          paddingBottom: 8,
+        },
+        style,
+      ]}
+    >
+      <View style={{ minWidth: 0 }}>
+        <Text
+          style={{
+            color: '#22C55E', // green-500
+            fontSize: 14,
+            lineHeight: 18,
+            fontWeight: theme.typography.fontWeight.medium,
+            marginBottom: 4,
+          }}
+        >
+          {resolvedTitle}
+        </Text>
+        <Text
+          style={{
+            color: theme.colors.textMuted,
+            fontSize: 14,
+            lineHeight: 20,
+            paddingBottom: 6,
+          }}
+        >
+          {resolvedDescription}
+        </Text>
+      </View>
+    </Card>
+  );
+}
+
+