@comergehq/studio 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -68,6 +68,7 @@
     "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
+    "mixpanel-react-native": "*",
     "react-native-zip-archive": "*",
     "react-native-view-shot": "*"
   },

package/src/components/chat/AgentProgressCard.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { AgentRunProgressView } from '../../studio/hooks/useAgentRunProgress';
+import { useTheme } from '../../theme';
+import { Text } from '../primitives/Text';
+import { withAlpha } from '../utils/color';
+
+export type AgentProgressCardProps = {
+  progress: AgentRunProgressView;
+};
+
+function titleForPhase(phase: AgentRunProgressView['phase']): string {
+  if (phase === 'planning') return 'Planning';
+  if (phase === 'reasoning') return 'Reasoning';
+  if (phase === 'analyzing') return 'Analyzing';
+  if (phase === 'editing') return 'Editing';
+  if (phase === 'executing') return 'Executing';
+  if (phase === 'validating') return 'Validating';
+  if (phase === 'finalizing') return 'Finalizing';
+  if (phase === 'working') return 'Working';
+  return 'Working';
+}
+
+function titleForStatus(status: AgentRunProgressView['status']): string {
+  if (status === 'succeeded') return 'Completed';
+  if (status === 'failed') return 'Failed';
+  if (status === 'cancelled') return 'Cancelled';
+  return 'In Progress';
+}
+
+export function AgentProgressCard({ progress }: AgentProgressCardProps) {
+  const theme = useTheme();
+  const statusLabel = titleForStatus(progress.status);
+  const phaseLabel = titleForPhase(progress.phase);
+  const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
+  const todo = progress.todoSummary;
+
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radii.lg,
+        marginHorizontal: theme.spacing.md,
+        padding: theme.spacing.md,
+        backgroundColor: withAlpha(theme.colors.surface, theme.scheme === 'dark' ? 0.84 : 0.94),
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+        <Text variant="caption">{statusLabel}</Text>
+        <Text variant="captionMuted">{phaseLabel}</Text>
+      </View>
+
+      <Text variant="bodyMuted">{subtitle}</Text>
+
+      {progress.changedFilesCount > 0 ? (
+        <Text variant="captionMuted" style={{ marginTop: 8 }}>
+          Updated files: {progress.changedFilesCount}
+        </Text>
+      ) : null}
+
+      {progress.recentFiles.length > 0 ? (
+        <View style={{ marginTop: 6 }}>
+          {progress.recentFiles.map((path) => (
+            <Text key={path} variant="captionMuted" numberOfLines={1}>
+              • {path}
+            </Text>
+          ))}
+        </View>
+      ) : null}
+
+      {todo ? (
+        <Text variant="captionMuted" style={{ marginTop: 8 }}>
+          Todos: {todo.completed}/{todo.total} complete
+          {todo.currentTask ? ` • ${todo.currentTask}` : ''}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+

package/src/components/chat/BundleProgressCard.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { AgentBundleProgressView } from '../../studio/hooks/useAgentRunProgress';
+import { useTheme } from '../../theme';
+import { Text } from '../primitives/Text';
+import { withAlpha } from '../utils/color';
+
+export type BundleProgressCardProps = {
+  progress: AgentBundleProgressView;
+};
+
+function titleForStatus(status: AgentBundleProgressView['status']): string {
+  if (status === 'succeeded') return 'Completed';
+  if (status === 'failed') return 'Failed';
+  return 'In Progress';
+}
+
+export function BundleProgressCard({ progress }: BundleProgressCardProps) {
+  const theme = useTheme();
+  const statusLabel = titleForStatus(progress.status);
+  const percent = Math.round(Math.max(0, Math.min(1, progress.progressValue)) * 100);
+  const fillColor =
+    progress.status === 'failed'
+      ? theme.colors.danger
+      : progress.status === 'succeeded'
+        ? theme.colors.success
+        : theme.colors.warning;
+  const detail = progress.errorMessage || progress.phaseLabel;
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`Bundle progress ${statusLabel}`}
+      accessibilityValue={{ min: 0, max: 100, now: percent, text: `${percent}%` }}
+      style={{
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radii.lg,
+        marginHorizontal: theme.spacing.md,
+        padding: theme.spacing.md,
+        backgroundColor: withAlpha(theme.colors.surface, theme.scheme === 'dark' ? 0.84 : 0.94),
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+        <Text variant="caption">{statusLabel}</Text>
+        <Text variant="captionMuted">{percent}%</Text>
+      </View>
+
+      <View
+        style={{
+          width: '100%',
+          height: 8,
+          borderRadius: 999,
+          backgroundColor: withAlpha(theme.colors.border, theme.scheme === 'dark' ? 0.5 : 0.6),
+          overflow: 'hidden',
+        }}
+      >
+        <View
+          style={{
+            width: `${percent}%`,
+            height: '100%',
+            backgroundColor: fillColor,
+          }}
+        />
+      </View>
+
+      <Text variant="captionMuted" numberOfLines={1} style={{ marginTop: 8, minHeight: 16 }}>
+        {detail}
+      </Text>
+    </View>
+  );
+}
+

package/src/components/chat/ChatMessageBubble.tsx

@@ -17,11 +17,33 @@ export type ChatMessageBubbleProps = {
   renderContent?: (message: ChatMessage) => React.ReactNode;
   isLast?: boolean;
   retrying?: boolean;
-  onRetry?: () => void;
+  onRetryMessage?: (messageId: string) => void;
   style?: ViewStyle;
 };
 
-export function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry, style }: ChatMessageBubbleProps) {
+function areMessageMetaEqual(a: ChatMessage['meta'], b: ChatMessage['meta']): boolean {
+  if (a === b) return true;
+  if (!a || !b) return a === b;
+  return (
+    a.kind === b.kind &&
+    a.event === b.event &&
+    a.status === b.status &&
+    a.mergeRequestId === b.mergeRequestId &&
+    a.sourceAppId === b.sourceAppId &&
+    a.targetAppId === b.targetAppId &&
+    a.appId === b.appId &&
+    a.threadId === b.threadId
+  );
+}
+
+function ChatMessageBubbleInner({
+  message,
+  renderContent,
+  isLast,
+  retrying,
+  onRetryMessage,
+  style,
+}: ChatMessageBubbleProps) {
   const theme = useTheme();
   const metaEvent = message.meta?.event ?? null;
   const metaStatus = message.meta?.status ?? null;
@@ -41,8 +63,11 @@ export function ChatMessageBubble({ message, renderContent, isLast, retrying, on
 
   const bodyColor =
     metaStatus === 'success' ? theme.colors.success : metaStatus === 'error' ? theme.colors.danger : undefined;
-  const showRetry = Boolean(onRetry) && isLast && metaStatus === 'error' && message.author === 'human';
+  const showRetry = Boolean(onRetryMessage) && isLast && metaStatus === 'error' && message.author === 'human';
   const retryLabel = retrying ? 'Retrying...' : 'Retry';
+  const handleRetryPress = React.useCallback(() => {
+    onRetryMessage?.(message.id);
+  }, [message.id, onRetryMessage]);
 
   return (
     <View style={[align, style]}>
@@ -77,7 +102,7 @@ export function ChatMessageBubble({ message, renderContent, isLast, retrying, on
           <Button
             variant="ghost"
             size="sm"
-            onPress={onRetry}
+            onPress={handleRetryPress}
             disabled={retrying}
             style={{ borderColor: theme.colors.danger }}
             accessibilityLabel="Retry send"
@@ -100,4 +125,23 @@ export function ChatMessageBubble({ message, renderContent, isLast, retrying, on
   );
 }
 
+function areEqual(prev: ChatMessageBubbleProps, next: ChatMessageBubbleProps): boolean {
+  return (
+    prev.message.id === next.message.id &&
+    prev.message.author === next.message.author &&
+    prev.message.content === next.message.content &&
+    prev.message.kind === next.message.kind &&
+    String(prev.message.createdAt) === String(next.message.createdAt) &&
+    areMessageMetaEqual(prev.message.meta, next.message.meta) &&
+    prev.renderContent === next.renderContent &&
+    prev.isLast === next.isLast &&
+    prev.retrying === next.retrying &&
+    prev.onRetryMessage === next.onRetryMessage &&
+    prev.style === next.style
+  );
+}
+
+export const ChatMessageBubble = React.memo(ChatMessageBubbleInner, areEqual);
+ChatMessageBubble.displayName = 'ChatMessageBubble';
+
 

package/src/components/chat/ChatMessageList.tsx

@@ -54,6 +54,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       return [...messages].reverse();
     }, [messages]);
     const lastMessageId = messages.length > 0 ? messages[messages.length - 1]!.id : null;
+    const keyExtractor = React.useCallback((m: ChatMessage) => m.id, []);
 
     const scrollToBottom = React.useCallback((options?: { animated?: boolean }) => {
       const animated = options?.animated ?? true;
@@ -99,51 +100,70 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       return undefined;
     }, [showTypingIndicator, scrollToBottom]);
 
+    const handleContentSizeChange = React.useCallback(() => {
+      if (initialScrollDoneRef.current) return;
+      initialScrollDoneRef.current = true;
+      lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1]!.id : null;
+      nearBottomRef.current = true;
+      onNearBottomChange?.(true);
+      requestAnimationFrame(() => scrollToBottom({ animated: false }));
+    }, [messages, onNearBottomChange, scrollToBottom]);
+
+    const contentContainerStyle = React.useMemo(
+      () => [
+        {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+        },
+        contentStyle,
+      ],
+      [contentStyle, theme.spacing.lg, theme.spacing.sm]
+    );
+
+    const renderSeparator = React.useCallback(() => <View style={{ height: theme.spacing.sm }} />, [theme.spacing.sm]);
+
+    const listHeader = React.useMemo(
+      () => (
+        <View>
+          {showTypingIndicator ? (
+            <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>
+              <TypingIndicator />
+            </View>
+          ) : null}
+          {bottomInset > 0 ? <View style={{ height: bottomInset }} /> : null}
+        </View>
+      ),
+      [bottomInset, showTypingIndicator, theme.spacing.lg, theme.spacing.sm]
+    );
+
+    const renderItem = React.useCallback(
+      ({ item }: { item: ChatMessage }) => (
+        <ChatMessageBubble
+          message={item}
+          renderContent={renderMessageContent}
+          isLast={Boolean(lastMessageId && item.id === lastMessageId)}
+          retrying={isRetryingMessage?.(item.id) ?? false}
+          onRetryMessage={onRetryMessage}
+        />
+      ),
+      [isRetryingMessage, lastMessageId, onRetryMessage, renderMessageContent]
+    );
+
     return (
       <BottomSheetFlatList
         ref={listRef}
         inverted
         data={data}
-        keyExtractor={(m: ChatMessage) => m.id}
+        keyExtractor={keyExtractor}
         keyboardShouldPersistTaps="handled"
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}
-        onContentSizeChange={() => {
-          if (initialScrollDoneRef.current) return;
-          initialScrollDoneRef.current = true;
-          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1]!.id : null;
-          nearBottomRef.current = true;
-          onNearBottomChange?.(true);
-          requestAnimationFrame(() => scrollToBottom({ animated: false }));
-        }}
-        contentContainerStyle={[
-          {
-            paddingHorizontal: theme.spacing.lg,
-            paddingVertical: theme.spacing.sm,
-          },
-          contentStyle,
-        ]}
-        ItemSeparatorComponent={() => <View style={{ height: theme.spacing.sm }} />}
-        renderItem={({ item }: { item: ChatMessage }) => (
-          <ChatMessageBubble
-            message={item}
-            renderContent={renderMessageContent}
-            isLast={Boolean(lastMessageId && item.id === lastMessageId)}
-            retrying={isRetryingMessage?.(item.id) ?? false}
-            onRetry={onRetryMessage ? () => onRetryMessage(item.id) : undefined}
-          />
-        )}
-        ListHeaderComponent={
-          <View>
-            {showTypingIndicator ? (
-              <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>
-                <TypingIndicator />
-              </View>
-            ) : null}
-            {bottomInset > 0 ? <View style={{ height: bottomInset }} /> : null}
-          </View>
-        }
+        onContentSizeChange={handleContentSizeChange}
+        contentContainerStyle={contentContainerStyle}
+        ItemSeparatorComponent={renderSeparator}
+        renderItem={renderItem}
+        ListHeaderComponent={listHeader}
       />
     );
   }

package/src/components/comments/useAppComments.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { appCommentsRepository } from '../../data/comments/repository';
 import type { AppComment } from '../../data/comments/types';
+import { trackSubmitComment } from '../../studio/analytics/track';
 
 export type UseAppCommentsResult = {
   comments: AppComment[];
@@ -58,7 +59,18 @@ export function useAppComments(appId: string | null): UseAppCommentsResult {
       try {
         const newComment = await appCommentsRepository.create(appId, { body: trimmed, commentType: 'general' });
         setComments((prev) => sortByCreatedAtAsc([...prev, newComment]));
+        await trackSubmitComment({
+          appId,
+          commentLength: trimmed.length,
+          success: true,
+        });
       } catch (e) {
+        await trackSubmitComment({
+          appId,
+          commentLength: trimmed.length,
+          success: false,
+          error: e,
+        });
         setError(e instanceof Error ? e : new Error(String(e)));
         throw e;
       } finally {

package/src/data/agent-progress/repository.ts

@@ -0,0 +1,179 @@
+import { getSupabaseClient } from '../../core/services/supabase';
+import { subscribeManagedChannel } from '../../core/services/supabase/realtimeManager';
+import type { AgentRun, AgentRunEvent } from './types';
+
+type DbAgentRunRow = {
+  id: string;
+  app_id: string;
+  thread_id: string;
+  queue_item_id: string | null;
+  status: AgentRun['status'];
+  current_phase: AgentRun['currentPhase'];
+  last_seq: number;
+  summary: Record<string, unknown> | null;
+  error_code: string | null;
+  error_message: string | null;
+  started_at: string;
+  finished_at: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type DbAgentRunEventRow = {
+  id: string;
+  run_id: string;
+  app_id: string;
+  thread_id: string;
+  queue_item_id: string | null;
+  seq: number;
+  event_type: AgentRunEvent['eventType'];
+  phase: AgentRunEvent['phase'];
+  tool_name: string | null;
+  path: string | null;
+  payload: Record<string, unknown> | null;
+  created_at: string;
+};
+
+function mapRun(row: DbAgentRunRow): AgentRun {
+  return {
+    id: row.id,
+    appId: row.app_id,
+    threadId: row.thread_id,
+    queueItemId: row.queue_item_id,
+    status: row.status,
+    currentPhase: row.current_phase,
+    lastSeq: Number(row.last_seq || 0),
+    summary: (row.summary || {}) as Record<string, unknown>,
+    errorCode: row.error_code,
+    errorMessage: row.error_message,
+    startedAt: row.started_at,
+    finishedAt: row.finished_at,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  };
+}
+
+function mapEvent(row: DbAgentRunEventRow): AgentRunEvent {
+  return {
+    id: row.id,
+    runId: row.run_id,
+    appId: row.app_id,
+    threadId: row.thread_id,
+    queueItemId: row.queue_item_id,
+    seq: Number(row.seq || 0),
+    eventType: row.event_type,
+    phase: row.phase,
+    toolName: row.tool_name,
+    path: row.path,
+    payload: (row.payload || {}) as Record<string, unknown>,
+    createdAt: row.created_at,
+  };
+}
+
+export interface AgentProgressRepository {
+  getLatestRun(threadId: string): Promise<AgentRun | null>;
+  listEvents(runId: string, afterSeq?: number): Promise<AgentRunEvent[]>;
+  subscribeThreadRuns(
+    threadId: string,
+    handlers: {
+      onInsert?: (run: AgentRun) => void;
+      onUpdate?: (run: AgentRun) => void;
+    }
+  ): () => void;
+  subscribeRunEvents(
+    runId: string,
+    handlers: {
+      onInsert?: (event: AgentRunEvent) => void;
+      onUpdate?: (event: AgentRunEvent) => void;
+    }
+  ): () => void;
+}
+
+class AgentProgressRepositoryImpl implements AgentProgressRepository {
+  async getLatestRun(threadId: string): Promise<AgentRun | null> {
+    if (!threadId) return null;
+    const supabase = getSupabaseClient();
+    const { data, error } = await (supabase as any)
+      .from('agent_run')
+      .select('*')
+      .eq('thread_id', threadId)
+      .order('started_at', { ascending: false })
+      .limit(1)
+      .maybeSingle();
+    if (error) throw new Error(error.message || 'Failed to fetch latest agent run');
+    if (!data) return null;
+    return mapRun(data as DbAgentRunRow);
+  }
+
+  async listEvents(runId: string, afterSeq?: number): Promise<AgentRunEvent[]> {
+    if (!runId) return [];
+    const supabase = getSupabaseClient();
+    let query = (supabase as any).from('agent_run_event').select('*').eq('run_id', runId).order('seq', { ascending: true });
+    if (typeof afterSeq === 'number' && Number.isFinite(afterSeq) && afterSeq > 0) {
+      query = query.gt('seq', afterSeq);
+    }
+    const { data, error } = await query;
+    if (error) throw new Error(error.message || 'Failed to fetch agent run events');
+    const rows = Array.isArray(data) ? (data as DbAgentRunEventRow[]) : [];
+    return rows.map(mapEvent);
+  }
+
+  subscribeThreadRuns(
+    threadId: string,
+    handlers: {
+      onInsert?: (run: AgentRun) => void;
+      onUpdate?: (run: AgentRun) => void;
+    }
+  ): () => void {
+    return subscribeManagedChannel(`agent-progress:runs:thread:${threadId}`, (channel) => {
+      channel
+        .on(
+          'postgres_changes',
+          { event: 'INSERT', schema: 'public', table: 'agent_run', filter: `thread_id=eq.${threadId}` },
+          (payload) => {
+            const row = payload.new as DbAgentRunRow;
+            handlers.onInsert?.(mapRun(row));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'UPDATE', schema: 'public', table: 'agent_run', filter: `thread_id=eq.${threadId}` },
+          (payload) => {
+            const row = payload.new as DbAgentRunRow;
+            handlers.onUpdate?.(mapRun(row));
+          }
+        );
+    });
+  }
+
+  subscribeRunEvents(
+    runId: string,
+    handlers: {
+      onInsert?: (event: AgentRunEvent) => void;
+      onUpdate?: (event: AgentRunEvent) => void;
+    }
+  ): () => void {
+    return subscribeManagedChannel(`agent-progress:events:run:${runId}`, (channel) => {
+      channel
+        .on(
+          'postgres_changes',
+          { event: 'INSERT', schema: 'public', table: 'agent_run_event', filter: `run_id=eq.${runId}` },
+          (payload) => {
+            const row = payload.new as DbAgentRunEventRow;
+            handlers.onInsert?.(mapEvent(row));
+          }
+        )
+        .on(
+          'postgres_changes',
+          { event: 'UPDATE', schema: 'public', table: 'agent_run_event', filter: `run_id=eq.${runId}` },
+          (payload) => {
+            const row = payload.new as DbAgentRunEventRow;
+            handlers.onUpdate?.(mapEvent(row));
+          }
+        );
+    });
+  }
+}
+
+export const agentProgressRepository: AgentProgressRepository = new AgentProgressRepositoryImpl();
+

package/src/data/agent-progress/types.ts

@@ -0,0 +1,67 @@
+export type AgentRunStatus = 'running' | 'succeeded' | 'failed' | 'cancelled';
+
+export type AgentProgressPhase =
+  | 'planning'
+  | 'reasoning'
+  | 'analyzing'
+  | 'editing'
+  | 'executing'
+  | 'working'
+  | 'validating'
+  | 'finalizing';
+
+export type AgentRunEventType =
+  | 'run_started'
+  | 'phase_changed'
+  | 'step_started'
+  | 'file_changed'
+  | 'todo_updated'
+  | 'run_completed'
+  | 'run_failed'
+  | 'run_cancelled';
+
+export type AgentRun = {
+  id: string;
+  appId: string;
+  threadId: string;
+  queueItemId: string | null;
+  status: AgentRunStatus;
+  currentPhase: AgentProgressPhase | null;
+  lastSeq: number;
+  summary: Record<string, unknown>;
+  errorCode: string | null;
+  errorMessage: string | null;
+  startedAt: string;
+  finishedAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type AgentRunEvent = {
+  id: string;
+  runId: string;
+  appId: string;
+  threadId: string;
+  queueItemId: string | null;
+  seq: number;
+  eventType: AgentRunEventType;
+  phase: AgentProgressPhase | null;
+  toolName: string | null;
+  path: string | null;
+  payload: Record<string, unknown>;
+  createdAt: string;
+};
+
+export type AgentTodoSummary = {
+  total: number;
+  pending: number;
+  inProgress: number;
+  completed: number;
+  currentTask: string | null;
+};
+
+export type AgentProgressSnapshot = {
+  run: AgentRun | null;
+  events: AgentRunEvent[];
+};
+