@comergehq/studio 0.1.2 → 0.1.4

package/src/studio/hooks/useStudioActions.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+import type { App } from '../../data/apps/types';
+import { appsRepository } from '../../data/apps/repository';
+import { agentRepository } from '../../data/agent/repository';
+import type { AttachmentMeta } from '../../data/attachment/types';
+
+export type UseStudioActionsParams = {
+  userId: string | null;
+  /**
+   * Current app object for the active appId.
+   */
+  app: App | null;
+  /**
+   * Called when we fork and should switch to the new app.
+   */
+  onForkedApp?: (appId: string, opts?: { keepRenderingAppId?: string }) => void;
+  /**
+   * Upload function used to convert attachments.
+   */
+  uploadAttachments?: (params: { threadId: string; appId: string; dataUrls: string[] }) => Promise<AttachmentMeta[]>;
+};
+
+export type UseStudioActionsResult = {
+  isOwner: boolean;
+  shouldForkOnEdit: boolean;
+  forking: boolean;
+  sending: boolean;
+  error: Error | null;
+  sendEdit: (params: { prompt: string; attachments?: string[] }) => Promise<void>;
+};
+
+export function useStudioActions({
+  userId,
+  app,
+  onForkedApp,
+  uploadAttachments,
+}: UseStudioActionsParams): UseStudioActionsResult {
+  const [forking, setForking] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const isOwner = Boolean(userId && app?.createdBy && userId === app.createdBy);
+  const shouldForkOnEdit = Boolean(userId && app && app.createdBy !== userId);
+
+  const sendEdit = React.useCallback(
+    async ({ prompt, attachments }: { prompt: string; attachments?: string[] }) => {
+      if (!userId || !app) return;
+      if (!prompt.trim()) return;
+      if (sending) return;
+
+      setSending(true);
+      setError(null);
+      try {
+        let targetApp = app;
+
+        if (shouldForkOnEdit) {
+          setForking(true);
+          const sourceAppId = app.id;
+          const forked = await appsRepository.fork(app.id, {});
+          targetApp = forked;
+          // For fork+edit, keep rendering the original app until the edit completes on the fork.
+          onForkedApp?.(forked.id, { keepRenderingAppId: sourceAppId });
+        }
+        setForking(false);
+
+        const threadId = targetApp.threadId;
+        if (!threadId) throw new Error('No thread available for this app.');
+
+        let attachmentMetas: AttachmentMeta[] | undefined;
+        if (attachments && attachments.length > 0 && uploadAttachments) {
+          attachmentMetas = await uploadAttachments({ threadId, appId: targetApp.id, dataUrls: attachments });
+        }
+
+        await agentRepository.editApp({
+          prompt,
+          thread_id: threadId,
+          app_id: targetApp.id,
+          attachments: attachmentMetas && attachmentMetas.length > 0 ? attachmentMetas : undefined,
+        });
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        throw err;
+      } finally {
+        setForking(false);
+        setSending(false);
+      }
+    },
+    [app, onForkedApp, sending, shouldForkOnEdit, uploadAttachments, userId]
+  );
+
+  return { isOwner, shouldForkOnEdit, forking, sending, error, sendEdit };
+}
+
+

package/src/studio/hooks/useThreadMessages.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import type { Message } from '../../data/messages/types';
+import { messagesRepository } from '../../data/messages/repository';
+import type { ChatMessage } from '../../components/models/types';
+
+export type UseThreadMessagesResult = {
+  raw: Message[];
+  messages: ChatMessage[];
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+};
+
+function extractMeta(payload: unknown): ChatMessage['meta'] {
+  const meta = (payload as any)?.meta;
+  if (!meta || typeof meta !== 'object') return null;
+  const obj = meta as Record<string, unknown>;
+  return {
+    kind: typeof obj.kind === 'string' ? obj.kind : undefined,
+    event: typeof obj.event === 'string' ? obj.event : undefined,
+    status: typeof obj.status === 'string' ? (obj.status as any) : undefined,
+    mergeRequestId: typeof obj.mergeRequestId === 'string' ? obj.mergeRequestId : undefined,
+    sourceAppId: typeof obj.sourceAppId === 'string' ? obj.sourceAppId : undefined,
+    targetAppId: typeof obj.targetAppId === 'string' ? obj.targetAppId : undefined,
+    appId: typeof obj.appId === 'string' ? obj.appId : undefined,
+    threadId: typeof obj.threadId === 'string' ? obj.threadId : undefined,
+  };
+}
+
+function mapMessageToChatMessage(m: Message): ChatMessage {
+  const kind = typeof (m.payload as any)?.type === 'string' ? String((m.payload as any).type) : null;
+  return {
+    id: m.id,
+    author: m.authorType === 'ai' ? 'assistant' : 'human',
+    content: typeof m.payload?.content === 'string' ? m.payload.content : '',
+    createdAt: m.createdAt,
+    kind,
+    meta: extractMeta(m.payload),
+  };
+}
+
+export function useThreadMessages(threadId: string): UseThreadMessagesResult {
+  const [raw, setRaw] = React.useState<Message[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const refetch = React.useCallback(async () => {
+    if (!threadId) {
+      setRaw([]);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await messagesRepository.list(threadId);
+      setRaw(list);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setRaw([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [threadId]);
+
+  React.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+
+  React.useEffect(() => {
+    if (!threadId) return;
+    const unsubscribe = messagesRepository.subscribeThread(threadId, {
+      onInsert: (m) => setRaw((prev) => [...prev, m]),
+      onUpdate: (m) => setRaw((prev) => prev.map((x) => (x.id === m.id ? m : x))),
+      onDelete: (m) => setRaw((prev) => prev.filter((x) => x.id !== m.id)),
+    });
+    return unsubscribe;
+  }, [threadId]);
+
+  const messages = React.useMemo(() => raw.map(mapMessageToChatMessage), [raw]);
+
+  return { raw, messages, loading, error, refetch };
+}
+
+

package/src/studio/lib/chat.ts

@@ -0,0 +1,34 @@
+import type { Message } from '../../data/messages/types';
+
+type MessagePayload = { type?: string; content?: unknown; text?: unknown; prompt?: unknown; message?: unknown };
+
+export function getLastOutcomeIndex(messages: Message[]): number {
+  let idx = -1;
+  for (let i = 0; i < messages.length; i += 1) {
+    const payload = messages[i].payload as MessagePayload | undefined;
+    if (payload?.type === 'outcome') idx = i;
+  }
+  return idx;
+}
+
+export function hasNoOutcomeAfterLastHuman(messages: Message[]): boolean {
+  if (!messages || messages.length === 0) return false;
+
+  let lastHumanIndex = -1;
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    if (messages[i].authorType === 'human') {
+      lastHumanIndex = i;
+      break;
+    }
+  }
+  if (lastHumanIndex === -1) return false;
+
+  for (let i = lastHumanIndex + 1; i < messages.length; i += 1) {
+    const m = messages[i];
+    const payload = m.payload as MessagePayload | undefined;
+    if (m.authorType === 'ai' && payload?.type === 'outcome') return false;
+  }
+  return true;
+}
+
+

package/src/studio/ui/ChatPanel.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import type { ChatMessageListRef } from '../../components/chat/ChatMessageList';
+import { ChatPage } from '../../components/chat/ChatPage';
+import { ScrollToBottomButton } from '../../components/chat/ScrollToBottomButton';
+import { ChatHeader } from '../../components/chat/ChatHeader';
+import { ForkNoticeBanner } from '../../components/chat/ForkNoticeBanner';
+import { StudioSheetHeaderIconButton } from '../../components/studio-sheet/StudioSheetHeaderIconButton';
+import { IconArrowDown, IconBack, IconClose, IconDraw, IconHome } from '../../components/icons/StudioIcons';
+import { Text } from '../../components/primitives/Text';
+import type { ChatMessage } from '../../components/models/types';
+
+export type ChatPanelProps = {
+  title?: string;
+  autoFocusComposer?: boolean;
+  messages: ChatMessage[];
+  showTypingIndicator?: boolean;
+  loading?: boolean;
+  sendDisabled?: boolean;
+  forking?: boolean;
+  sending?: boolean;
+  shouldForkOnEdit?: boolean;
+  attachments?: string[];
+  onRemoveAttachment?: (index: number) => void;
+  onClearAttachments?: () => void;
+  onBack: () => void;
+  onClose: () => void;
+  onNavigateHome?: () => void;
+  onStartDraw?: () => void;
+  onSend: (text: string, attachments?: string[]) => void | Promise<void>;
+};
+
+export function ChatPanel({
+  title = 'Chat',
+  autoFocusComposer = false,
+  messages,
+  showTypingIndicator,
+  loading,
+  sendDisabled,
+  forking = false,
+  sending,
+  shouldForkOnEdit,
+  attachments = [],
+  onRemoveAttachment,
+  onClearAttachments,
+  onBack,
+  onClose,
+  onNavigateHome,
+  onStartDraw,
+  onSend,
+}: ChatPanelProps) {
+  const listRef = React.useRef<ChatMessageListRef | null>(null);
+  const [nearBottom, setNearBottom] = React.useState(true);
+
+  const handleSend = React.useCallback(
+    async (text: string, composerAttachments?: string[]) => {
+      const all = composerAttachments ?? attachments;
+      await onSend(text, all.length > 0 ? all : undefined);
+      onClearAttachments?.();
+      requestAnimationFrame(() => listRef.current?.scrollToBottom({ animated: true }));
+    },
+    [attachments, onClearAttachments, onSend]
+  );
+
+  const handleScrollToBottom = React.useCallback(() => {
+    listRef.current?.scrollToBottom({ animated: true });
+  }, []);
+
+  const header = (
+    <ChatHeader
+      left={
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <StudioSheetHeaderIconButton onPress={onBack} accessibilityLabel="Back" style={{ marginRight: 8 }}>
+            <IconBack size={20} colorToken="floatingContent" />
+          </StudioSheetHeaderIconButton>
+          {onNavigateHome ? (
+            <StudioSheetHeaderIconButton onPress={onNavigateHome} accessibilityLabel="Home">
+              <IconHome size={20} colorToken="floatingContent" />
+            </StudioSheetHeaderIconButton>
+          ) : null}
+        </View>
+      }
+      right={
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {onStartDraw ? (
+            <StudioSheetHeaderIconButton onPress={onStartDraw} accessibilityLabel="Draw" intent="danger" style={{ marginRight: 8 }}>
+              <IconDraw size={20} colorToken="onDanger" />
+            </StudioSheetHeaderIconButton>
+          ) : null}
+          <StudioSheetHeaderIconButton onPress={onClose} accessibilityLabel="Close">
+            <IconClose size={20} colorToken="floatingContent" />
+          </StudioSheetHeaderIconButton>
+        </View>
+      }
+      center={null}
+    />
+  );
+
+  const topBanner =
+    shouldForkOnEdit ? (
+      <ForkNoticeBanner
+        isOwner={!shouldForkOnEdit}
+        style={{ marginBottom: 12 }}
+      />
+    ) : null;
+
+  const showMessagesLoading = (Boolean(loading) && messages.length === 0) || forking;
+  if (showMessagesLoading) {
+    return (
+      <View style={{ flex: 1 }}>
+        <View>{header}</View>
+        {topBanner ? <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>{topBanner}</View> : null}
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 24, paddingVertical: 12 }}>
+          <ActivityIndicator />
+          <View style={{ height: 12 }} />
+          <Text variant="bodyMuted">{forking ? 'Creating your copy…' : 'Loading messages…'}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <ChatPage
+      header={header}
+      messages={messages}
+      showTypingIndicator={showTypingIndicator}
+      topBanner={topBanner}
+      listRef={listRef}
+      onNearBottomChange={setNearBottom}
+      overlay={
+        <ScrollToBottomButton
+          visible={!nearBottom}
+          onPress={handleScrollToBottom}
+          style={{ bottom: 80 }}
+        >
+          <IconArrowDown size={20} colorToken="floatingContent" />
+        </ScrollToBottomButton>
+      }
+      composer={{
+        disabled: Boolean(loading) || Boolean(sendDisabled) || Boolean(forking),
+        sending: Boolean(sending),
+        autoFocus: autoFocusComposer,
+        onSend: handleSend,
+        attachments,
+        onRemoveAttachment: onRemoveAttachment,
+        onAddAttachment: onStartDraw,
+        useBottomSheetTextInput: true,
+      }}
+    />
+  );
+}
+
+

package/src/studio/ui/ConfirmMergeFlow.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import type { MergeRequest } from '../../data/merge-requests/types';
+import { ConfirmMergeRequestDialog } from '../../components/dialogs/ConfirmMergeRequestDialog';
+import type { MergeRequestSummary } from '../../components/models/types';
+
+export type ConfirmMergeFlowProps = {
+  visible: boolean;
+  onOpenChange: (open: boolean) => void;
+  mergeRequest: MergeRequest | null;
+  toSummary: (mr: MergeRequest) => MergeRequestSummary;
+  /**
+   * Disable the primary "Approve Merge" action (e.g. while submitting).
+   */
+  approveDisabled?: boolean;
+  /**
+   * Whether the system is building/preparing a test bundle.
+   * Disables the "Test edits first" action and shows "Preparing…".
+   */
+  isBuilding?: boolean;
+  onConfirm: (mr: MergeRequest) => void | Promise<void>;
+  onTestFirst: (mr: MergeRequest) => void | Promise<void>;
+};
+
+export function ConfirmMergeFlow({
+  visible,
+  onOpenChange,
+  mergeRequest,
+  toSummary,
+  approveDisabled,
+  isBuilding,
+  onConfirm,
+  onTestFirst,
+}: ConfirmMergeFlowProps) {
+  return (
+    <ConfirmMergeRequestDialog
+      visible={visible}
+      onOpenChange={onOpenChange}
+      mergeRequest={mergeRequest ? toSummary(mergeRequest) : null}
+      approveDisabled={approveDisabled}
+      isBuilding={isBuilding}
+      onConfirm={() => {
+        if (!mergeRequest) return;
+        return onConfirm(mergeRequest);
+      }}
+      onTestFirst={(mrSummary) => {
+        if (!mergeRequest) return;
+        void mrSummary;
+        return onTestFirst(mergeRequest);
+      }}
+    />
+  );
+}
+
+

package/src/studio/ui/PreviewPanel.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import type { App } from '../../data/apps/types';
+import type { MergeRequest } from '../../data/merge-requests/types';
+import { PreviewPage } from '../../components/preview/PreviewPage';
+import { Text } from '../../components/primitives/Text';
+import { PreviewPanelHeader } from './preview-panel/PreviewPanelHeader';
+import { PreviewHeroSection } from './preview-panel/PreviewHeroSection';
+import { PreviewMetaSection } from './preview-panel/PreviewMetaSection';
+import { PreviewCustomizeSection } from './preview-panel/PreviewCustomizeSection';
+import { PreviewCollaborateSection } from './preview-panel/PreviewCollaborateSection';
+import { usePreviewPanelData } from './preview-panel/usePreviewPanelData';
+
+export type PreviewPanelProps = {
+  app: App | null;
+  loading?: boolean;
+  isOwner: boolean;
+  shouldForkOnEdit: boolean;
+  incomingMergeRequests: MergeRequest[];
+  outgoingMergeRequests: MergeRequest[];
+  creatorStatsById: Record<string, import('../../data/users/types').UserStats>;
+  processingMrId?: string | null;
+  isBuildingMrTest?: boolean;
+  testingMrId?: string | null;
+  toMergeRequestSummary: (mr: MergeRequest) => import('../../components/models/types').MergeRequestSummary;
+  onClose: () => void;
+  onNavigateHome?: () => void;
+  onGoToChat: () => void;
+  onStartDraw?: () => void;
+  onSubmitMergeRequest?: () => void | Promise<void>;
+  onRequestApprove?: (mr: MergeRequest) => void;
+  onReject?: (mr: MergeRequest) => void | Promise<void>;
+  onTestMr?: (mr: MergeRequest) => void | Promise<void>;
+  onOpenComments?: () => void;
+  commentCountOverride?: number;
+};
+
+export function PreviewPanel({
+  app,
+  loading,
+  isOwner,
+  shouldForkOnEdit,
+  incomingMergeRequests,
+  outgoingMergeRequests,
+  creatorStatsById,
+  processingMrId,
+  isBuildingMrTest,
+  testingMrId,
+  toMergeRequestSummary,
+  onClose,
+  onNavigateHome,
+  onGoToChat,
+  onStartDraw,
+  onSubmitMergeRequest,
+  onRequestApprove,
+  onReject,
+  onTestMr,
+  onOpenComments,
+  commentCountOverride,
+}: PreviewPanelProps) {
+  const { imageUrl, imageLoaded, setImageLoaded, creator, insights, stats, showProcessing, canSubmitMergeRequest } = usePreviewPanelData({
+    app,
+    isOwner,
+    outgoingMergeRequests,
+    onOpenComments,
+    commentCountOverride,
+  });
+
+  const header = <PreviewPanelHeader isOwner={isOwner} onClose={onClose} onNavigateHome={onNavigateHome} onGoToChat={onGoToChat} />;
+
+  if (loading || !app) {
+    return (
+      <PreviewPage header={header}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
+          <ActivityIndicator />
+          <View style={{ height: 12 }} />
+          <Text variant="bodyMuted">Loading app…</Text>
+        </View>
+      </PreviewPage>
+    );
+  }
+
+  return (
+    <PreviewPage header={header}>
+      <PreviewHeroSection
+        appStatus={app.status}
+        showProcessing={showProcessing}
+        imageUrl={imageUrl}
+        imageLoaded={imageLoaded}
+        onImageLoad={() => setImageLoaded(true)}
+        stats={{
+          likeCount: stats.likeCount,
+          commentCount: stats.commentCount,
+          forkCount: stats.forkCount,
+          isLiked: stats.isLiked,
+          handleLike: stats.handleLike,
+          handleOpenComments: stats.handleOpenComments,
+        }}
+      />
+
+      <PreviewMetaSection app={app} isOwner={isOwner} creator={creator} downloadsCount={insights.downloads} />
+
+      <PreviewCustomizeSection
+        app={app}
+        isOwner={isOwner}
+        shouldForkOnEdit={shouldForkOnEdit}
+        showProcessing={showProcessing}
+        onGoToChat={onGoToChat}
+        onStartDraw={onStartDraw}
+      />
+
+      <PreviewCollaborateSection
+        canSubmitMergeRequest={canSubmitMergeRequest}
+        incomingMergeRequests={incomingMergeRequests}
+        outgoingMergeRequests={outgoingMergeRequests}
+        creatorStatsById={creatorStatsById}
+        processingMrId={processingMrId}
+        isBuildingMrTest={isBuildingMrTest}
+        testingMrId={testingMrId}
+        toMergeRequestSummary={toMergeRequestSummary}
+        onSubmitMergeRequest={onSubmitMergeRequest}
+        onRequestApprove={onRequestApprove}
+        onReject={onReject}
+        onTestMr={onTestMr}
+      />
+    </PreviewPage>
+  );
+}
+
+

package/src/studio/ui/RuntimeRenderer.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { ComergeRuntimeRenderer } from '@comergehq/runtime';
+
+import { Text } from '../../components/primitives/Text';
+
+export type RuntimeRendererProps = {
+  appKey: string;
+  bundlePath: string | null;
+  /**
+   * Used to force a runtime remount even when bundlePath stays constant
+   * (e.g. base bundle replaced in-place).
+   */
+  renderToken?: number;
+  style?: ViewStyle;
+};
+
+export function RuntimeRenderer({ appKey, bundlePath, renderToken, style }: RuntimeRendererProps) {
+  if (!bundlePath) {
+    return (
+      <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }, style]}>
+        <Text variant="bodyMuted">Preparing app…</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[{ flex: 1 }, style]}>
+      <ComergeRuntimeRenderer
+        key={`${appKey}:${bundlePath}:${renderToken ?? 0}`}
+        appKey={appKey}
+        bundlePath={bundlePath}
+        style={{ flex: 1 }}
+      />
+    </View>
+  );
+}
+
+