Add redirect URI callback for spend request approval flow with polling fallback

packages/cli/src/commands/spend-request/approval-waiting-view.tsx

@@ -4,12 +4,10 @@ import type React from 'react';
 import { AppDownloadQrCodes } from './app-download-qr-codes';
 
 interface ApprovalWaitingViewProps {
-  status: 'waiting' | 'polling';
   approvalUrl: string;
 }
 
 export const ApprovalWaitingView: React.FC<ApprovalWaitingViewProps> = ({
-  status,
   approvalUrl,
 }) => (
   <Box flexDirection="column" paddingY={1}>
@@ -30,13 +28,9 @@ export const ApprovalWaitingView: React.FC<ApprovalWaitingViewProps> = ({
     </Box>
     <AppDownloadQrCodes />
     <Box marginTop={1}>
-      {status === 'polling' ? (
-        <Text color="cyan">
-          <Spinner type="dots" /> Waiting for approval...
-        </Text>
-      ) : (
-        <Text dimColor>Waiting...</Text>
-      )}
+      <Text color="cyan">
+        <Spinner type="dots" /> Waiting for approval...
+      </Text>
     </Box>
   </Box>
 );

packages/cli/src/commands/spend-request/create.tsx

@@ -6,9 +6,11 @@ import type {
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import type React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DISPLAY_DELAY_MS } from '../../utils/constants';
 import { writeCredentialFile } from '../../utils/credential-output';
+import { tryStartCallbackServer } from '../../utils/local-callback-server';
+import { sanitizeDeep } from '../../utils/sanitize-text';
 import { AppDownloadQrCodes } from './app-download-qr-codes';
 import { ApprovalWaitingView } from './approval-waiting-view';
 import { useApprovalPolling } from './use-approval-polling';
@@ -31,52 +33,129 @@ export const CreateSpendRequest: React.FC<CreateSpendRequestProps> = ({
   onComplete,
 }) => {
   const [status, setStatus] = useState<
-    'creating' | 'waiting' | 'polling' | 'success' | 'error'
+    | 'creating'
+    | 'waiting'
+    | 'polling'
+    | 'success'
+    | 'denied'
+    | 'expired'
+    | 'error'
   >('creating');
   const [request, setRequest] = useState<SpendRequest | null>(null);
+  const [approvalUrl, setApprovalUrl] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [outputFilePath, setOutputFilePath] = useState<string | null>(null);
   const [fileError, setFileError] = useState<string>('');
-
-  const approvalUrl = request?.approval_url ?? '';
-
-  const onSuccess = useCallback(
-    (result: SpendRequest) => setRequest(result),
-    [],
-  );
-  const onError = useCallback((msg: string) => setError(msg), []);
+  const [pollingFallback, setPollingFallback] = useState(false);
 
   useApprovalPolling({
+    enabled: pollingFallback,
     status,
-    setStatus,
+    setStatus: () => setStatus('polling'),
     approvalUrl,
     repository,
     requestId: request?.id ?? null,
     onComplete,
-    onSuccess,
-    onError,
+    onTerminal: (final, s) => {
+      setRequest(sanitizeDeep(final));
+      if (s === 'approved') {
+        setStatus('success');
+      } else if (s === 'denied') {
+        setStatus('denied');
+      } else if (s === 'expired') {
+        setStatus('expired');
+      } else {
+        setError('An error occurred during approval');
+        setStatus('error');
+      }
+    },
+    onPollError: (msg) => {
+      setError(msg);
+      setStatus('error');
+    },
   });
 
   useEffect(() => {
+    let close: (() => void) | null = null;
+    let cancelled = false;
+
     const create = async () => {
       try {
-        const result = await repository.createSpendRequest(params);
-        setRequest(result);
+        const server = requestApproval ? await tryStartCallbackServer() : null;
+        if (server) close = server.close;
 
-        if (requestApproval) {
-          setStatus('waiting');
-        } else {
+        // Strip request_approval so the spend request starts in `created` state; we call requestApproval explicitly below.
+        const { request_approval: _, ...createParams } = params;
+        const result = await repository.createSpendRequest(createParams);
+        if (cancelled) return;
+        setRequest(sanitizeDeep(result));
+
+        if (!requestApproval) {
           setStatus('success');
           setTimeout(() => onComplete(result), DISPLAY_DELAY_MS);
+          return;
         }
+
+        const approval = await repository.requestApproval(
+          result.id,
+          server ? { redirect_uri: server.redirectUri } : undefined,
+        );
+        if (cancelled) return;
+
+        setApprovalUrl(sanitizeDeep(approval.approval_link));
+        setStatus('waiting');
+
+        if (!server) {
+          setPollingFallback(true);
+          return;
+        }
+
+        const { status: callbackStatus } = await server.waitForCallback();
+        if (cancelled) return;
+
+        if (callbackStatus === 'timeout') {
+          setPollingFallback(true);
+          return;
+        }
+
+        const final = await repository.retrieve(result.id);
+        if (cancelled) return;
+
+        if (!final) {
+          setError('Spend request not found after approval');
+          setStatus('error');
+          setTimeout(() => onComplete(null), DISPLAY_DELAY_MS);
+          return;
+        }
+
+        setRequest(sanitizeDeep(final));
+        if (callbackStatus === 'approved') {
+          setStatus('success');
+        } else if (callbackStatus === 'denied') {
+          setStatus('denied');
+        } else if (callbackStatus === 'expired') {
+          setStatus('expired');
+        } else {
+          setError('An error occurred during approval');
+          setStatus('error');
+        }
+        setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);
       } catch (err) {
-        setError((err as Error).message);
-        setStatus('error');
-        setTimeout(() => onComplete(null), DISPLAY_DELAY_MS);
+        if (!cancelled) {
+          setError((err as Error).message);
+          setStatus('error');
+          setTimeout(() => onComplete(null), DISPLAY_DELAY_MS);
+        }
+      } finally {
+        close?.();
       }
     };
 
     create();
+    return () => {
+      cancelled = true;
+      close?.();
+    };
   }, [repository, params, requestApproval, onComplete]);
 
   useEffect(() => {
@@ -114,6 +193,41 @@ export const CreateSpendRequest: React.FC<CreateSpendRequestProps> = ({
     );
   }
 
+  if (status === 'denied') {
+    return (
+      <Box flexDirection="column">
+        <Text color="red">✗ Spend request denied</Text>
+        <Box flexDirection="column" marginTop={1} paddingX={2}>
+          <Text>
+            ID: <Text bold>{request?.id}</Text>
+          </Text>
+          <Text>
+            Status:{' '}
+            <Text bold color="red">
+              {request?.status}
+            </Text>
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (status === 'expired') {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">✗ Spend request expired</Text>
+        <Box flexDirection="column" marginTop={1} paddingX={2}>
+          <Text>
+            ID: <Text bold>{request?.id}</Text>
+          </Text>
+          <Text>
+            Status: <Text bold>{request?.status}</Text>
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
   if (status === 'success') {
     return (
       <Box flexDirection="column">
@@ -206,10 +320,7 @@ export const CreateSpendRequest: React.FC<CreateSpendRequestProps> = ({
           ✓ Spend request created (ID: <Text bold>{request?.id}</Text>)
         </Text>
       </Box>
-      <ApprovalWaitingView
-        status={status as 'waiting' | 'polling'}
-        approvalUrl={approvalUrl}
-      />
+      <ApprovalWaitingView approvalUrl={approvalUrl} />
     </>
   );
 };