AI Image Studio Phase 1

frontend/src/components/ImageStudio/ui/AsyncStatusBanner.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Alert, LinearProgress, Stack, Typography } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/ErrorOutline';
+import HourglassTopIcon from '@mui/icons-material/HourglassTop';
+
+interface AsyncStatusBannerProps {
+  state: 'idle' | 'running' | 'success' | 'error';
+  message?: string;
+}
+
+export const AsyncStatusBanner: React.FC<AsyncStatusBannerProps> = ({
+  state,
+  message,
+}) => {
+  if (state === 'idle') return null;
+
+  if (state === 'running') {
+    return (
+      <Stack spacing={1}>
+        <LinearProgress
+          sx={{
+            height: 6,
+            borderRadius: 999,
+            '& .MuiLinearProgress-bar': {
+              background: 'linear-gradient(90deg,#7c3aed,#2563eb)',
+            },
+          }}
+        />
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <HourglassTopIcon sx={{ color: '#93c5fd' }} fontSize="small" />
+          <Typography variant="caption" color="text.secondary">
+            {message || 'Processing request…'}
+          </Typography>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  if (state === 'success') {
+    return (
+      <Alert
+        icon={<CheckCircleIcon />}
+        severity="success"
+        sx={{ borderRadius: 2 }}
+      >
+        {message || 'Completed successfully.'}
+      </Alert>
+    );
+  }
+
+  return (
+    <Alert
+      icon={<ErrorIcon />}
+      severity="error"
+      sx={{ borderRadius: 2 }}
+    >
+      {message || 'Something went wrong.'}
+    </Alert>
+  );
+};
+