@comergehq/studio 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/chat/ChatPage.tsx

@@ -13,6 +13,7 @@ export type ChatPageProps = {
   showTypingIndicator?: boolean;
   renderMessageContent?: ChatMessageListProps['renderMessageContent'];
   topBanner?: React.ReactNode;
+  composerTop?: React.ReactNode;
   composer: Omit<ChatComposerProps, 'attachments'> & {
     attachments?: ChatComposerProps['attachments'];
   };
@@ -32,6 +33,7 @@ export function ChatPage({
   showTypingIndicator,
   renderMessageContent,
   topBanner,
+  composerTop,
   composer,
   overlay,
   style,
@@ -42,6 +44,7 @@ export function ChatPage({
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
+  const [composerTopHeight, setComposerTopHeight] = React.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
   React.useEffect(() => {
@@ -55,8 +58,9 @@ export function ChatPage({
   }, []);
 
   const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
-  const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
-  const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
+  const totalComposerHeight = composerHeight + composerTopHeight;
+  const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
+  const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;
 
   const resolvedOverlay = React.useMemo(() => {
     if (!overlay) return null;
@@ -66,6 +70,11 @@ export function ChatPage({
       style: [prevStyle, { bottom: overlayBottom }],
     });
   }, [overlay, overlayBottom]);
+
+  React.useEffect(() => {
+    if (composerTop) return;
+    setComposerTopHeight(0);
+  }, [composerTop]);
   return (
     <View style={[{ flex: 1 }, style]}>
       {header ? <View>{header}</View> : null}
@@ -99,6 +108,14 @@ export function ChatPage({
             paddingBottom: footerBottomPadding,
           }}
         >
+          {composerTop ? (
+            <View
+              style={{ marginBottom: theme.spacing.sm }}
+              onLayout={(e) => setComposerTopHeight(e.nativeEvent.layout.height)}
+            >
+              {composerTop}
+            </View>
+          ) : null}
           <ChatComposer
             {...composer}
             attachments={composer.attachments ?? []}

package/src/components/chat/ChatQueue.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+
+import type { EditQueueItem } from '../../data/apps/edit-queue/types';
+import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+import { Text } from '../primitives/Text';
+import { IconClose } from '../icons/StudioIcons';
+
+export type ChatQueueProps = {
+  items: EditQueueItem[];
+  onRemove?: (id: string) => void;
+};
+
+type ExpansionState = Record<string, boolean>;
+type CollapsedState = Record<string, string>;
+type RemovalState = Record<string, boolean>;
+
+export function ChatQueue({ items, onRemove }: ChatQueueProps) {
+  const theme = useTheme();
+  const [expanded, setExpanded] = React.useState<ExpansionState>({});
+  const [canExpand, setCanExpand] = React.useState<ExpansionState>({});
+  const [collapsedText, setCollapsedText] = React.useState<CollapsedState>({});
+  const [removing, setRemoving] = React.useState<RemovalState>({});
+
+  const buildCollapsedText = React.useCallback((lines: { text: string }[]) => {
+    const line1 = lines[0]?.text ?? '';
+    const line2 = lines[1]?.text ?? '';
+    const moreLabel = 'more';
+    const reserve = `… ${moreLabel}`.length;
+    let trimmedLine2 = line2;
+
+    if (trimmedLine2.length > reserve) {
+      trimmedLine2 = trimmedLine2.slice(0, Math.max(0, trimmedLine2.length - reserve));
+    } else {
+      trimmedLine2 = '';
+    }
+
+    trimmedLine2 = trimmedLine2.replace(/\s+$/, '');
+    return `${line1}\n${trimmedLine2}… `;
+  }, []);
+
+  React.useEffect(() => {
+    if (items.length === 0) return;
+    const ids = new Set(items.map((item) => item.id));
+    setExpanded((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
+    setCanExpand((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
+    setCollapsedText((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
+    setRemoving((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
+  }, [items]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: theme.radii.lg,
+        marginHorizontal: theme.spacing.md,
+        padding: theme.spacing.md,
+        backgroundColor: 'transparent',
+      }}
+    >
+      <Text variant="caption" style={{ marginBottom: theme.spacing.sm }}>
+        Queue
+      </Text>
+      <View style={{ gap: theme.spacing.sm }}>
+        {items.map((item) => {
+          const isExpanded = Boolean(expanded[item.id]);
+          const showToggle = Boolean(canExpand[item.id]);
+          const prompt = item.prompt ?? '';
+          const moreLabel = 'more';
+          const displayPrompt =
+            !isExpanded && showToggle && collapsedText[item.id] ? collapsedText[item.id] : prompt;
+          const isRemoving = Boolean(removing[item.id]);
+          return (
+            <View
+              key={item.id}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: theme.spacing.sm,
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                borderRadius: theme.radii.md,
+                backgroundColor: withAlpha(theme.colors.surface, theme.scheme === 'dark' ? 0.8 : 0.9),
+              }}
+            >
+              <View style={{ flex: 1 }}>
+                {!canExpand[item.id] ? (
+                  <Text
+                    style={{ position: 'absolute', opacity: 0, zIndex: -1, width: '100%' }}
+                    onTextLayout={(e) => {
+                      const lines = e.nativeEvent?.lines;
+                      if (!lines) return;
+                      if (lines.length > 2) {
+                        setCanExpand((prev) => ({ ...prev, [item.id]: true }));
+                        setCollapsedText((prev) => ({
+                          ...prev,
+                          [item.id]: buildCollapsedText(lines),
+                        }));
+                      }
+                    }}
+                  >
+                    {prompt}
+                  </Text>
+                ) : null}
+                <Text
+                  variant="bodyMuted"
+                  numberOfLines={isExpanded ? undefined : 2}
+                >
+                  {displayPrompt}
+                  {!isExpanded && showToggle ? (
+                    <Text
+                      color={theme.colors.text}
+                      onPress={() => setExpanded((prev) => ({ ...prev, [item.id]: true }))}
+                      suppressHighlighting
+                    >
+                      {moreLabel}
+                    </Text>
+                  ) : null}
+                </Text>
+                {showToggle && isExpanded ? (
+                  <Pressable
+                    onPress={() => setExpanded((prev) => ({ ...prev, [item.id]: false }))}
+                    hitSlop={6}
+                    style={{ alignSelf: 'flex-start', marginTop: 4 }}
+                  >
+                    <Text variant="captionMuted" color={theme.colors.text}>
+                      less
+                    </Text>
+                  </Pressable>
+                ) : null}
+              </View>
+              <Pressable
+                onPress={() => {
+                  if (!onRemove || isRemoving) return;
+                  setRemoving((prev) => ({ ...prev, [item.id]: true }));
+                  Promise.resolve(onRemove(item.id)).finally(() => {
+                    setRemoving((prev) => {
+                      if (!prev[item.id]) return prev;
+                      const { [item.id]: _removed, ...rest } = prev;
+                      return rest;
+                    });
+                  });
+                }}
+                hitSlop={8}
+                style={{ alignSelf: 'center' }}
+              >
+                {isRemoving ? (
+                  <ActivityIndicator size="small" color={theme.colors.text} />
+                ) : (
+                  <IconClose size={14} colorToken="text" />
+                )}
+              </Pressable>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/data/agent/types.ts

@@ -21,7 +21,8 @@ export type AgentCreateAppResult = {
 export type AgentEditAppResult = {
   threadId: string;
   appId: string;
-  sandboxExternalId: string;
+  queueItemId?: string | null;
+  queuePosition?: number | null;
 };
 
 import type { AttachmentMeta } from '../../data/attachment/types';

package/src/data/apps/edit-queue/remote.ts

@@ -0,0 +1,45 @@
+import { api } from '../../../core/services/http';
+import type { ServiceResponse } from '../../types';
+import { BaseRemote } from '../../base-remote';
+import type { EditQueueItem, EditQueueListResponse, UpdateEditQueueItemRequest } from './types';
+
+export interface EditQueueRemoteDataSource {
+  list(appId: string): Promise<ServiceResponse<EditQueueListResponse>>;
+  update(
+    appId: string,
+    queueItemId: string,
+    payload: UpdateEditQueueItemRequest
+  ): Promise<ServiceResponse<EditQueueItem>>;
+  cancel(appId: string, queueItemId: string): Promise<ServiceResponse<EditQueueItem>>;
+}
+
+class EditQueueRemoteDataSourceImpl extends BaseRemote implements EditQueueRemoteDataSource {
+  async list(appId: string): Promise<ServiceResponse<EditQueueListResponse>> {
+    const { data } = await api.get<ServiceResponse<EditQueueListResponse>>(
+      `/v1/apps/${encodeURIComponent(appId)}/edit-queue`
+    );
+    return data;
+  }
+
+  async update(
+    appId: string,
+    queueItemId: string,
+    payload: UpdateEditQueueItemRequest
+  ): Promise<ServiceResponse<EditQueueItem>> {
+    const { data } = await api.patch<ServiceResponse<EditQueueItem>>(
+      `/v1/apps/${encodeURIComponent(appId)}/edit-queue/${encodeURIComponent(queueItemId)}`,
+      payload
+    );
+    return data;
+  }
+
+  async cancel(appId: string, queueItemId: string): Promise<ServiceResponse<EditQueueItem>> {
+    const { data } = await api.delete<ServiceResponse<EditQueueItem>>(
+      `/v1/apps/${encodeURIComponent(appId)}/edit-queue/${encodeURIComponent(queueItemId)}`
+    );
+    return data;
+  }
+}
+
+export const editQueueRemoteDataSource: EditQueueRemoteDataSource =
+  new EditQueueRemoteDataSourceImpl();

package/src/data/apps/edit-queue/repository.ts

@@ -0,0 +1,136 @@
+import type { EditQueueRemoteDataSource } from './remote';
+import { editQueueRemoteDataSource } from './remote';
+import type { EditQueueItem, EditQueueListResponse, UpdateEditQueueItemRequest } from './types';
+import { BaseRepository } from '../../base-repository';
+import { getSupabaseClient } from '../../../core/services/supabase';
+import type { AttachmentMeta } from '../../attachment/types';
+
+type DbAppJobQueueRow = {
+  id: string;
+  app_id: string;
+  kind: string;
+  status: EditQueueItem['status'];
+  payload: Record<string, unknown> | null;
+  created_at: string;
+  updated_at: string;
+  run_after: string | null;
+  priority: number;
+};
+
+const ACTIVE_STATUSES: EditQueueItem['status'][] = ['pending'];
+
+function toString(value: unknown): string | null {
+  return typeof value === 'string' && value.trim().length > 0 ? value : null;
+}
+
+function toAttachments(value: unknown): AttachmentMeta[] {
+  return Array.isArray(value) ? (value as AttachmentMeta[]) : [];
+}
+
+function mapQueueItem(row: DbAppJobQueueRow): EditQueueItem {
+  const payload = (row.payload ?? {}) as Record<string, unknown>;
+  return {
+    id: row.id,
+    status: row.status,
+    prompt: toString(payload.trimmedPrompt),
+    messageId: toString(payload.messageId),
+    attachments: toAttachments(payload.attachments),
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+    runAfter: row.run_after,
+    priority: row.priority,
+  };
+}
+
+export interface EditQueueRepository {
+  list(appId: string): Promise<EditQueueItem[]>;
+  update(appId: string, queueItemId: string, payload: UpdateEditQueueItemRequest): Promise<EditQueueItem>;
+  cancel(appId: string, queueItemId: string): Promise<EditQueueItem>;
+  subscribeEditQueue(
+    appId: string,
+    handlers: {
+      onInsert?: (item: EditQueueItem) => void;
+      onUpdate?: (item: EditQueueItem) => void;
+      onDelete?: (item: EditQueueItem) => void;
+    }
+  ): () => void;
+}
+
+class EditQueueRepositoryImpl extends BaseRepository implements EditQueueRepository {
+  constructor(private readonly remote: EditQueueRemoteDataSource) {
+    super();
+  }
+
+  async list(appId: string): Promise<EditQueueItem[]> {
+    const res = await this.remote.list(appId);
+    const data = this.unwrapOrThrow(res) as EditQueueListResponse;
+    return data.items ?? [];
+  }
+
+  async update(
+    appId: string,
+    queueItemId: string,
+    payload: UpdateEditQueueItemRequest
+  ): Promise<EditQueueItem> {
+    const res = await this.remote.update(appId, queueItemId, payload);
+    return this.unwrapOrThrow(res);
+  }
+
+  async cancel(appId: string, queueItemId: string): Promise<EditQueueItem> {
+    const res = await this.remote.cancel(appId, queueItemId);
+    return this.unwrapOrThrow(res);
+  }
+
+  subscribeEditQueue(
+    appId: string,
+    handlers: {
+      onInsert?: (item: EditQueueItem) => void;
+      onUpdate?: (item: EditQueueItem) => void;
+      onDelete?: (item: EditQueueItem) => void;
+    }
+  ): () => void {
+    const supabase = getSupabaseClient();
+    const channel = supabase
+      .channel(`edit-queue:app:${appId}`)
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+        (payload) => {
+          const row = payload.new as DbAppJobQueueRow;
+          if (row.kind !== 'edit') return;
+          const item = mapQueueItem(row);
+          if (!ACTIVE_STATUSES.includes(item.status)) return;
+          handlers.onInsert?.(item);
+        }
+      )
+      .on(
+        'postgres_changes',
+        { event: 'UPDATE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+        (payload) => {
+          const row = payload.new as DbAppJobQueueRow;
+          if (row.kind !== 'edit') return;
+          const item = mapQueueItem(row);
+          if (ACTIVE_STATUSES.includes(item.status)) handlers.onUpdate?.(item);
+          else handlers.onDelete?.(item);
+        }
+      )
+      .on(
+        'postgres_changes',
+        { event: 'DELETE', schema: 'public', table: 'app_job_queue', filter: `app_id=eq.${appId}` },
+        (payload) => {
+          const row = payload.old as DbAppJobQueueRow;
+          if (row.kind !== 'edit') return;
+          handlers.onDelete?.(mapQueueItem(row));
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }
+}
+
+export const editQueueRepository: EditQueueRepository = new EditQueueRepositoryImpl(
+  editQueueRemoteDataSource
+);

package/src/data/apps/edit-queue/types.ts

@@ -0,0 +1,31 @@
+import type { AttachmentMeta } from '../../attachment/types';
+
+export type EditQueueStatus =
+  | 'pending'
+  | 'enqueued'
+  | 'processing'
+  | 'succeeded'
+  | 'failed'
+  | 'cancelled';
+
+export type EditQueueItem = {
+  id: string;
+  status: EditQueueStatus;
+  prompt: string | null;
+  messageId: string | null;
+  attachments: AttachmentMeta[];
+  createdAt: string;
+  updatedAt: string;
+  runAfter: string | null;
+  priority: number;
+};
+
+export type EditQueueListResponse = {
+  items: EditQueueItem[];
+};
+
+export type UpdateEditQueueItemRequest = {
+  prompt?: string;
+  attachments?: AttachmentMeta[];
+  runAfter?: string | null;
+};

package/src/studio/ComergeStudio.tsx

@@ -11,10 +11,11 @@ import type { EmbeddedBaseBundles } from './hooks/useBundleManager';
 import { useMergeRequests } from './hooks/useMergeRequests';
 import { useAttachmentUpload } from './hooks/useAttachmentUpload';
 import { useStudioActions } from './hooks/useStudioActions';
-import { hasNoOutcomeAfterLastHuman } from './lib/chat';
 import { RuntimeRenderer } from './ui/RuntimeRenderer';
 import { StudioOverlay } from './ui/StudioOverlay';
 import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
+import { useEditQueue } from './hooks/useEditQueue';
+import { useEditQueueActions } from './hooks/useEditQueueActions';
 
 export type ComergeStudioProps = {
   appId: string;
@@ -175,6 +176,17 @@ function ComergeStudioInner({
 
   const threadId = app?.threadId ?? '';
   const thread = useThreadMessages(threadId);
+  const editQueue = useEditQueue(activeAppId);
+  const editQueueActions = useEditQueueActions(activeAppId);
+  const [lastEditQueueInfo, setLastEditQueueInfo] = React.useState<{
+    queueItemId?: string | null;
+    queuePosition?: number | null;
+  } | null>(null);
+  const lastEditQueueInfoRef = React.useRef<{
+    queueItemId?: string | null;
+    queuePosition?: number | null;
+  } | null>(null);
+  const [suppressQueueUntilResponse, setSuppressQueueUntilResponse] = React.useState(false);
 
   const mergeRequests = useMergeRequests({ appId: activeAppId });
   const hasOpenOutgoingMr = React.useMemo(() => {
@@ -188,6 +200,14 @@ function ComergeStudioInner({
 
   const uploader = useAttachmentUpload();
 
+  const updateLastEditQueueInfo = React.useCallback(
+    (info: { queueItemId?: string | null; queuePosition?: number | null } | null) => {
+      lastEditQueueInfoRef.current = info;
+      setLastEditQueueInfo(info);
+    },
+    []
+  );
+
   const actions = useStudioActions({
     userId,
     app,
@@ -203,9 +223,25 @@ function ComergeStudioInner({
       }
     },
     uploadAttachments: uploader.uploadBase64Images,
+    onEditStart: () => {
+      if (editQueue.items.length === 0) {
+        setSuppressQueueUntilResponse(true);
+      }
+    },
+    onEditQueued: (info) => {
+      updateLastEditQueueInfo(info);
+      if (info.queuePosition !== 1) {
+        setSuppressQueueUntilResponse(false);
+      }
+    },
+    onEditFinished: () => {
+      if (lastEditQueueInfoRef.current?.queuePosition !== 1) {
+        setSuppressQueueUntilResponse(false);
+      }
+    },
   });
 
-  const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
+  const chatSendDisabled = false;
 
   const [processingMrId, setProcessingMrId] = React.useState<string | null>(null);
   const [testingMrId, setTestingMrId] = React.useState<string | null>(null);
@@ -218,6 +254,36 @@ function ComergeStudioInner({
     return payloadType !== 'outcome';
   }, [thread.raw]);
 
+  React.useEffect(() => {
+    updateLastEditQueueInfo(null);
+    setSuppressQueueUntilResponse(false);
+  }, [activeAppId, updateLastEditQueueInfo]);
+
+  React.useEffect(() => {
+    if (!lastEditQueueInfo?.queueItemId) return;
+    const stillPresent = editQueue.items.some((item) => item.id === lastEditQueueInfo.queueItemId);
+    if (!stillPresent) {
+      updateLastEditQueueInfo(null);
+      setSuppressQueueUntilResponse(false);
+    }
+  }, [editQueue.items, lastEditQueueInfo?.queueItemId]);
+
+  const chatQueueItems = React.useMemo(() => {
+    if (suppressQueueUntilResponse && editQueue.items.length <= 1) {
+      return [];
+    }
+    if (!lastEditQueueInfo || lastEditQueueInfo.queuePosition !== 1 || !lastEditQueueInfo.queueItemId) {
+      return editQueue.items;
+    }
+    if (
+      editQueue.items.length === 1 &&
+      editQueue.items[0]?.id === lastEditQueueInfo.queueItemId
+    ) {
+      return [];
+    }
+    return editQueue.items;
+  }, [editQueue.items, lastEditQueueInfo, suppressQueueUntilResponse]);
+
   return (
       <View style={[{ flex: 1 }, style]}>
       <View ref={captureTargetRef} style={{ flex: 1 }} collapsable={false}>
@@ -283,6 +349,8 @@ function ComergeStudioInner({
           chatSending={actions.sending}
           chatShowTypingIndicator={chatShowTypingIndicator}
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
+          chatQueueItems={chatQueueItems}
+          onRemoveQueueItem={(id) => editQueueActions.cancel(id)}
           onNavigateHome={onNavigateHome}
           showBubble={showBubble}
           studioControlOptions={studioControlOptions}

package/src/studio/hooks/useEditQueue.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import type { EditQueueItem } from '../../data/apps/edit-queue/types';
+import { editQueueRepository } from '../../data/apps/edit-queue/repository';
+import { useForegroundSignal } from './useForegroundSignal';
+
+export type UseEditQueueResult = {
+  items: EditQueueItem[];
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+};
+
+export function useEditQueue(appId: string): UseEditQueueResult {
+  const [items, setItems] = React.useState<EditQueueItem[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+  const activeRequestIdRef = React.useRef(0);
+  const foregroundSignal = useForegroundSignal(Boolean(appId));
+
+  const upsertSorted = React.useCallback((prev: EditQueueItem[], nextItem: EditQueueItem) => {
+    const next = prev.some((x) => x.id === nextItem.id)
+      ? prev.map((x) => (x.id === nextItem.id ? nextItem : x))
+      : [...prev, nextItem];
+    next.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return next;
+  }, []);
+
+  const refetch = React.useCallback(async () => {
+    if (!appId) {
+      setItems([]);
+      return;
+    }
+    const requestId = ++activeRequestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await editQueueRepository.list(appId);
+      if (activeRequestIdRef.current !== requestId) return;
+      setItems([...list].sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt))));
+    } catch (e) {
+      if (activeRequestIdRef.current !== requestId) return;
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setItems([]);
+    } finally {
+      if (activeRequestIdRef.current === requestId) setLoading(false);
+    }
+  }, [appId]);
+
+  React.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+
+  React.useEffect(() => {
+    if (!appId) return;
+    const unsubscribe = editQueueRepository.subscribeEditQueue(appId, {
+      onInsert: (item) => setItems((prev) => upsertSorted(prev, item)),
+      onUpdate: (item) => setItems((prev) => upsertSorted(prev, item)),
+      onDelete: (item) => setItems((prev) => prev.filter((x) => x.id !== item.id)),
+    });
+    return unsubscribe;
+  }, [appId, upsertSorted, foregroundSignal]);
+
+  React.useEffect(() => {
+    if (!appId) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [appId, foregroundSignal, refetch]);
+
+  return { items, loading, error, refetch };
+}

package/src/studio/hooks/useEditQueueActions.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import type { UpdateEditQueueItemRequest } from '../../data/apps/edit-queue/types';
+import { editQueueRepository } from '../../data/apps/edit-queue/repository';
+
+export type UseEditQueueActionsResult = {
+  update: (queueItemId: string, payload: UpdateEditQueueItemRequest) => Promise<void>;
+  cancel: (queueItemId: string) => Promise<void>;
+};
+
+export function useEditQueueActions(appId: string): UseEditQueueActionsResult {
+  const update = React.useCallback(
+    async (queueItemId: string, payload: UpdateEditQueueItemRequest) => {
+      if (!appId) return;
+      await editQueueRepository.update(appId, queueItemId, payload);
+    },
+    [appId]
+  );
+
+  const cancel = React.useCallback(
+    async (queueItemId: string) => {
+      if (!appId) return;
+      await editQueueRepository.cancel(appId, queueItemId);
+    },
+    [appId]
+  );
+
+  return { update, cancel };
+}