updated sse supporting react-openapi

2026-06-18 20:32:34 +05:30
parent 0a668cf98d
commit 154b15fe51
28 changed files with 2132 additions and 440 deletions
--- a/react-openapi/src/components/Admin.tsx
+++ b/react-openapi/src/components/Admin.tsx
@@ -44,9 +44,13 @@ export function Admin({ basePath }: AdminProps) {
          {resources.map((r) => (
            <React.Fragment key={r.name}>
              <Route path={r.name} element={<ResourceList resource={r} basePath={basePath} />} />
-              <Route path={`${r.name}/new`} element={<ResourceForm resource={r} basePath={basePath} mode="create" />} />
-              <Route path={`${r.name}/:id`} element={<ResourceDetail resource={r} basePath={basePath} />} />
-              <Route path={`${r.name}/:id/edit`} element={<ResourceForm resource={r} basePath={basePath} mode="edit" />} />
+              {!r.streaming && (
+                <>
+                  <Route path={`${r.name}/new`} element={<ResourceForm resource={r} basePath={basePath} mode="create" />} />
+                  <Route path={`${r.name}/:id`} element={<ResourceDetail resource={r} basePath={basePath} />} />
+                  <Route path={`${r.name}/:id/edit`} element={<ResourceForm resource={r} basePath={basePath} mode="edit" />} />
+                </>
+              )}
            </React.Fragment>
          ))}
        </Routes>
--- a/react-openapi/src/components/FilterBar.tsx
+++ b/react-openapi/src/components/FilterBar.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, Button } from "@mui/material";
+import { useResource, FilterComponentProps } from "../context/useResource";
+
+interface FilterBarProps {
+  resourceName: string;
+  filters: Record<string, string>;
+  onFilterChange: (fieldName: string, value: string) => void;
+  onClear: () => void;
+  data?: any[];
+}
+
+export function FilterBar({ resourceName, filters, onFilterChange, onClear, data }: FilterBarProps) {
+  const { resource, components } = useResource(resourceName);
+  const filterable = resource.fields.filter((f) => f.filterable);
+  const hasActiveFilters = Object.values(filters).some((v) => v !== "");
+
+  if (filterable.length === 0) return null;
+
+  return (
+    <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mb: 2, alignItems: "flex-start" }}>
+      {filterable.map((field) => {
+        const Component = components[field.name] as React.FC<FilterComponentProps>;
+        const isRange = field.type === "integer" || field.type === "number" || field.format === "date" || field.format === "date-time";
+
+        if (isRange) {
+          return (
+            <Box key={field.name} sx={{ minWidth: 260, display: "flex", gap: 1 }}>
+              <Box sx={{ flex: 1, minWidth: 120 }}>
+                <Component
+                  labelOverride={`${field.label} From`}
+                  value={filters[field.name + "_from"] ?? ""}
+                  onChange={(v) => onFilterChange(field.name + "_from", v)}
+                  data={data}
+                />
+              </Box>
+              <Box sx={{ flex: 1, minWidth: 120 }}>
+                <Component
+                  labelOverride={`${field.label} To`}
+                  value={filters[field.name + "_to"] ?? ""}
+                  onChange={(v) => onFilterChange(field.name + "_to", v)}
+                  data={data}
+                />
+              </Box>
+            </Box>
+          );
+        }
+
+        return (
+          <Box key={field.name} sx={{ minWidth: 180 }}>
+            <Component
+              value={filters[field.name] ?? ""}
+              onChange={(v) => onFilterChange(field.name, v)}
+              data={data}
+            />
+          </Box>
+        );
+      })}
+      {hasActiveFilters && (
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Button size="small" variant="outlined" onClick={onClear}>
+            Clear
+          </Button>
+        </Box>
+      )}
+    </Box>
+  );
+}
--- a/react-openapi/src/components/ResourceDetail.tsx
+++ b/react-openapi/src/components/ResourceDetail.tsx
@@ -23,7 +23,7 @@ interface ResourceDetailProps {
 export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
  const navigate = useNavigate();
  const { id } = useParams();
-  const crud = useResource(resource);
+  const crud = useResource(resource.name);
  const { resources: allResources } = useAppContext();
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
--- a/react-openapi/src/components/ResourceForm.tsx
+++ b/react-openapi/src/components/ResourceForm.tsx
@@ -28,7 +28,7 @@ interface ResourceFormProps {
 export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
  const navigate = useNavigate();
  const { id } = useParams();
-  const crud = useResource(resource);
+  const crud = useResource(resource.name);
  const { resources: allResources } = useAppContext();
  const [formData, setFormData] = useState<Record<string, any>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});
@@ -218,7 +218,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
    }
  };

-  const title = mode === "create" ? `Create ${resource.schemaName}` : `Edit ${resource.schemaName}`;
+  const title = mode === "create" ? `Create ${resource.displayName}` : `Edit ${resource.displayName}`;

  return (
    <Box>
--- a/react-openapi/src/components/ResourceList.tsx
+++ b/react-openapi/src/components/ResourceList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import {
  Box,
@@ -14,42 +14,127 @@ import {
  TableRow,
  TablePagination,
  Paper,
-  TextField,
-  InputAdornment,
  TableSortLabel,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Grid,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
-import SearchIcon from "@mui/icons-material/Search";
 import type { ResourceConfig, FieldConfig } from "../types";
 import { useResource } from "../context/useResource";
 import { useAppContext } from "../context/AppContext";
-import { ListCellRenderer, applyDisplayFormat } from "./fields";
+import { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./fields";
+import { FilterBar } from "./FilterBar";
+import { readSseCache, appendSseCache, clearSseCache, nextSseSeq, setSseConnected } from "../context/useResource";
+import { SseConnectionStatus } from "./SseConnectionStatus";

 interface ResourceListProps {
  resource: ResourceConfig;
  basePath: string;
 }

+function matchRow(row: any, filters: Record<string, string>, fields: FieldConfig[], allResources: ResourceConfig[]): boolean {
+  for (const field of fields) {
+    if (!field.filterable) continue;
+
+    const isRange = field.type === "integer" || field.type === "number" || field.format === "date" || field.format === "date-time";
+
+    if (isRange) {
+      const from = filters[field.name + "_from"];
+      const to = filters[field.name + "_to"];
+      if (from || to) {
+        const cell = row[field.name];
+        if (cell == null) return false;
+        if (field.type === "integer" || field.type === "number") {
+          if (from && Number(cell) < Number(from)) return false;
+          if (to && Number(cell) > Number(to)) return false;
+        } else {
+          if (from && String(cell) < String(from)) return false;
+          if (to && String(cell) > String(to)) return false;
+        }
+      }
+      continue;
+    }
+
+    const val = filters[field.name];
+    if (!val) continue;
+
+    const cell = row[field.name];
+    if (cell == null) return false;
+
+    let str: string;
+    if (field.fk && typeof cell === "object" && cell !== null) {
+      const targetRes = allResources.find((r) => r.name === field.fk!.resource);
+      if (targetRes) {
+        const items = Array.isArray(cell) ? cell : [cell];
+        str = items.map((item: any) => applyDisplayFormat(item, targetRes.displayFormat)).join(" ");
+      } else {
+        str = String(cell);
+      }
+    } else {
+      str = String(cell);
+    }
+    const filterParts = val.split(",").filter(Boolean);
+    if (!filterParts.some((part) => str.toLowerCase().includes(part.toLowerCase()))) return false;
+  }
+  return true;
+}
+
 export function ResourceList({ resource, basePath }: ResourceListProps) {
  const navigate = useNavigate();
-  const crud = useResource(resource);
-  const { resources: allResources } = useAppContext();
+  const { components, ...crud } = useResource(resource.name);
+  const { resources: allResources, config } = useAppContext();
  const [data, setData] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(resource.pagination?.defaultLimit ?? 20);
-  const [search, setSearch] = useState("");
  const [sortField, setSortField] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [detailRow, setDetailRow] = useState<any | null>(null);
+
+  const isStreaming = resource.streaming === true;
+  const hasActions = resource.operations.get || resource.operations.update || resource.operations.delete;
+
+  const filterMode = config.resourceConfig?.[resource.name]?.filterOptions?.mode ?? "client";
+  const isClientMode = filterMode === "client" && !isStreaming;

  const visibleColumns = resource.listColumns
    .map((colName) => resource.fields.find((f) => f.name === colName))
    .filter((f): f is FieldConfig => !!f && !f.hidden?.list);

-  const fetchData = useCallback(async () => {
+  useEffect(() => {
+    setFilters({});
+  }, [resource.name]);
+
+  useEffect(() => {
+    if (!isStreaming || !crud.stream) return;
+
+    setData(readSseCache(resource.name));
+    setSseConnected(resource.name, false);
+
+    const sub = crud.stream({
+      onEvent: (evt) => {
+        const enriched = { ...evt, _received_at: new Date().toISOString(), _seq: nextSseSeq() };
+        const updated = appendSseCache(resource.name, enriched);
+        setData(updated);
+      },
+      onOpen: () => setSseConnected(resource.name, true),
+      onError: () => setSseConnected(resource.name, false),
+    });
+
+    return () => {
+      setSseConnected(resource.name, false);
+      sub.close();
+    };
+  }, [isStreaming, crud.stream, resource.name]);
+
+  const serverFetchData = useCallback(async () => {
    const params: Record<string, any> = {};
    if (resource.pagination) {
      params[resource.pagination.limitParam] = rowsPerPage;
@@ -58,19 +143,76 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
    if (sortField) {
      params.sort = sortDir === "desc" ? `-${sortField}` : sortField;
    }
+    for (const [key, val] of Object.entries(filters)) {
+      if (val) params[key] = val;
+    }
    const result = await crud.list(params);
    setData(result.items ?? []);
    setTotal(result.total ?? result.items?.length ?? 0);
-  }, [crud.list, resource.pagination, rowsPerPage, page, sortField, sortDir]);
+  }, [crud.list, resource.pagination, rowsPerPage, page, sortField, sortDir, filters]);
+
+  const clientFetchAll = useCallback(async () => {
+    const params: Record<string, any> = {};
+    if (resource.pagination) {
+      params[resource.pagination.limitParam] = 0;
+    }
+    const result = await crud.list(params);
+    setData(result.items ?? []);
+    setTotal(result.items?.length ?? 0);
+  }, [crud.list, resource.pagination]);

  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+    if (isStreaming) return;
+    if (isClientMode) {
+      clientFetchAll();
+    } else {
+      serverFetchData();
+    }
+  }, [isStreaming, isClientMode, clientFetchAll, serverFetchData]);
+
+  useEffect(() => {
+    if (isClientMode) {
+      setPage(0);
+    }
+  }, [filters, isClientMode]);
+
+  const filteredData = useMemo(() => {
+    if (!isClientMode) return data;
+
+    let items = data.filter((row) => matchRow(row, filters, resource.fields, allResources));
+
+    if (sortField) {
+      items = [...items].sort((a, b) => {
+        const aVal = a[sortField];
+        const bVal = b[sortField];
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (aVal < bVal) return sortDir === "asc" ? -1 : 1;
+        if (aVal > bVal) return sortDir === "asc" ? 1 : -1;
+        return 0;
+      });
+    }
+
+    const start = page * rowsPerPage;
+    return items.slice(start, start + rowsPerPage);
+  }, [data, isClientMode, filters, sortField, sortDir, page, rowsPerPage, resource.fields, allResources]);
+
+  const clientTotal = useMemo(() => {
+    if (!isClientMode) return total;
+    return data.filter((row) => matchRow(row, filters, resource.fields, allResources)).length;
+  }, [data, isClientMode, filters, resource.fields, allResources]);
+
+  const displayData = isClientMode ? filteredData : data;
+  const displayTotal = isClientMode ? clientTotal : total;

  const handleDelete = async (id: string | number) => {
    if (!window.confirm("Are you sure you want to delete this item?")) return;
    await crud.remove(id);
-    fetchData();
+    if (isClientMode) {
+      clientFetchAll();
+    } else {
+      serverFetchData();
+    }
  };

  const handleSort = (field: string) => {
@@ -82,39 +224,46 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
    }
  };

+  const handleFilterChange = (fieldName: string, value: string) => {
+    setFilters((prev) => ({ ...prev, [fieldName]: value }));
+  };
+
  return (
    <Box>
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
-        <Typography variant="h5" fontWeight={700}>
-          {resource.schemaName}
-        </Typography>
-        {resource.operations.create && (
-          <Button
-            variant="contained"
-            startIcon={<AddIcon />}
-            onClick={() => navigate(`${basePath}/${resource.name}/new`)}
-          >
-            Create
-          </Button>
-        )}
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+          <Typography variant="h5" fontWeight={700}>
+            {resource.displayName}
+          </Typography>
+          {isStreaming && <SseConnectionStatus resourceName={resource.name} />}
+        </Box>
+        <Box sx={{ display: "flex", gap: 1 }}>
+          {isStreaming && data.length > 0 && (
+            <Button variant="outlined" size="small" onClick={() => { setData([]); setTotal(0); clearSseCache(resource.name); }}>
+              Clear ({data.length})
+            </Button>
+          )}
+          {resource.operations.create && !isStreaming && (
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => navigate(`${basePath}/${resource.name}/new`)}
+            >
+              Create
+            </Button>
+          )}
+        </Box>
      </Box>

-      <Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "center" }}>
-        <TextField
-          size="small"
-          placeholder="Search..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon fontSize="small" />
-              </InputAdornment>
-            ),
-          }}
-          sx={{ minWidth: 280 }}
+      {!isStreaming && (
+        <FilterBar
+          resourceName={resource.name}
+          filters={filters}
+          onFilterChange={handleFilterChange}
+          onClear={() => setFilters({})}
+          data={data}
        />
-      </Box>
+      )}

      <TableContainer component={Paper} variant="outlined">
        <Table size="small">
@@ -135,27 +284,33 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                  )}
                </TableCell>
              ))}
-              <TableCell align="right" sx={{ fontWeight: 700 }}>Actions</TableCell>
+              {hasActions && <TableCell align="right" sx={{ fontWeight: 700 }}>Actions</TableCell>}
            </TableRow>
          </TableHead>
          <TableBody>
-            {data.length === 0 ? (
+            {displayData.length === 0 ? (
              <TableRow>
-                <TableCell colSpan={visibleColumns.length + 1} align="center">
+                <TableCell colSpan={visibleColumns.length + (hasActions ? 1 : 0)} align="center">
                  <Typography variant="body2" color="text.secondary" sx={{ py: 4 }}>
-                    No records found
+                    {isStreaming ? "Waiting for events\u2026" : "No records found"}
                  </Typography>
                </TableCell>
              </TableRow>
            ) : (
-              data.map((row) => {
-                const rowId = row[resource.primaryKey];
+              displayData.map((row, idx) => {
+                const rowId = isStreaming ? `evt-${row._seq ?? idx}` : row[resource.primaryKey];
                return (
                  <TableRow
                    key={rowId}
                    hover
                    sx={{ cursor: "pointer" }}
-                    onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}
+                    onClick={() => {
+                      if (isStreaming) {
+                        setDetailRow(row);
+                      } else {
+                        navigate(`${basePath}/${resource.name}/${rowId}`);
+                      }
+                    }}
                  >
                    {visibleColumns.map((col) => {
                      let value = row[col.name];
@@ -172,29 +327,31 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                        </TableCell>
                      );
                    })}
-                    <TableCell align="right" onClick={(e) => e.stopPropagation()}>
-                      {resource.operations.get && (
-                        <Tooltip title="View">
-                          <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}>
-                            <VisibilityIcon fontSize="small" />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      {resource.operations.update && (
-                        <Tooltip title="Edit">
-                          <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}/edit`)}>
-                            <EditIcon fontSize="small" />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                      {resource.operations.delete && (
-                        <Tooltip title="Delete">
-                          <IconButton size="small" onClick={() => handleDelete(rowId)} color="error">
-                            <DeleteIcon fontSize="small" />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                    </TableCell>
+                    {hasActions && (
+                      <TableCell align="right" onClick={(e) => e.stopPropagation()}>
+                        {resource.operations.get && !isStreaming && (
+                          <Tooltip title="View">
+                            <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}>
+                              <VisibilityIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        {resource.operations.update && (
+                          <Tooltip title="Edit">
+                            <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}/edit`)}>
+                              <EditIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                        {resource.operations.delete && (
+                          <Tooltip title="Delete">
+                            <IconButton size="small" onClick={() => handleDelete(rowId)} color="error">
+                              <DeleteIcon fontSize="small" />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </TableCell>
+                    )}
                  </TableRow>
                );
              })
@@ -203,10 +360,10 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
        </Table>
      </TableContainer>

-      {resource.pagination && (
+      {!isStreaming && (resource.pagination || isClientMode) && (
        <TablePagination
          component="div"
-          count={total}
+          count={displayTotal}
          page={page}
          onPageChange={(_, p) => setPage(p)}
          rowsPerPage={rowsPerPage}
@@ -217,6 +374,34 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
          rowsPerPageOptions={[10, 20, 50, 100]}
        />
      )}
+
+      {!isStreaming && displayData.length > 0 && (
+        <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: "block", textAlign: "right" }}>
+          {displayTotal} record{displayTotal !== 1 ? "s" : ""}
+        </Typography>
+      )}
+
+      <Dialog open={!!detailRow} onClose={() => setDetailRow(null)} maxWidth="sm" fullWidth>
+        <DialogTitle>{resource.displayName} Event</DialogTitle>
+        <DialogContent dividers>
+          {detailRow && (
+            <Grid container spacing={2} sx={{ mt: 0.5 }}>
+              {visibleColumns.map((col) => (
+                <Grid key={col.name} item xs={12} sm={6}>
+                  <DetailFieldRenderer
+                    field={col}
+                    value={detailRow[col.name]}
+                    displayFormat={resource.displayFormat}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDetailRow(null)}>Close</Button>
+        </DialogActions>
+      </Dialog>
    </Box>
  );
 }
--- a/react-openapi/src/components/SideMenu.tsx
+++ b/react-openapi/src/components/SideMenu.tsx
@@ -67,7 +67,7 @@ export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuP
                <CircleIcon sx={{ color: colors[i % colors.length], fontSize: 12 }} />
              </ListItemIcon>
              <ListItemText
-                primary={r.schemaName}
+                primary={r.displayName}
                primaryTypographyProps={{ fontWeight: active ? 700 : 500, fontSize: 14 }}
              />
            </ListItemButton>
--- a/react-openapi/src/components/SseConnectionStatus.tsx
+++ b/react-openapi/src/components/SseConnectionStatus.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { useSseConnected } from "../context/useResource";
+
+interface SseConnectionStatusProps {
+  resourceName: string;
+}
+
+export function SseConnectionStatus({ resourceName }: SseConnectionStatusProps) {
+  const connected = useSseConnected(resourceName);
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 1,
+        py: 0.25,
+        borderRadius: 1,
+        border: 1,
+        borderColor: connected ? "#4caf50" : "#f44336",
+        color: connected ? "#4caf50" : "#f44336",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+      }}
+    >
+      <FiberManualRecordIcon sx={{ fontSize: 10 }} />
+      {connected ? "Connected" : "Disconnected"}
+    </Box>
+  );
+}
--- a/react-openapi/src/components/SseStreamView.tsx
+++ b/react-openapi/src/components/SseStreamView.tsx
@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box, Typography, Paper, Chip, Snackbar,
+} from "@mui/material";
+import type { ResourceConfig } from "../types";
+import { useResource, readSseCache, appendSseCache, clearSseCache, nextSseSeq, setSseConnected } from "../context/useResource";
+import { applyDisplayFormat } from "./fields";
+import { SseConnectionStatus } from "./SseConnectionStatus";
+
+interface SseStreamViewProps {
+  resource: ResourceConfig;
+}
+
+export function SseStreamView({ resource }: SseStreamViewProps) {
+  const { stream } = useResource(resource.name);
+  const [events, setEvents] = useState<any[]>(() => readSseCache(resource.name));
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMsg, setSnackbarMsg] = useState("");
+
+  useEffect(() => {
+    if (!stream) return;
+    setSseConnected(resource.name, false);
+
+    const sub = stream({
+      onEvent: (evt) => {
+        const enriched = { ...evt, _received_at: new Date().toISOString(), _seq: nextSseSeq() };
+        const updated = appendSseCache(resource.name, enriched);
+        setEvents([...updated]);
+        setSnackbarMsg(applyDisplayFormat(evt, resource.displayFormat));
+        setSnackbarOpen(true);
+      },
+      onOpen: () => setSseConnected(resource.name, true),
+      onError: () => setSseConnected(resource.name, false),
+    });
+
+    return () => {
+      setSseConnected(resource.name, false);
+      sub.close();
+    };
+  }, [resource.name]);
+
+  const eventCount = events.length;
+  const latestEvent = events[events.length - 1] ?? null;
+
+  return (
+    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2.5 }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+          <Typography variant="subtitle1" fontWeight={700}>
+            {resource.displayName}
+          </Typography>
+          <SseConnectionStatus resourceName={resource.name} />
+        </Box>
+        <Chip
+          label={eventCount > 0 ? `${eventCount} event${eventCount !== 1 ? "s" : ""}` : "No events"}
+          size="small"
+          variant="outlined"
+          color={eventCount > 0 ? "primary" : "default"}
+        />
+      </Box>
+
+      {latestEvent ? (
+        <Box
+          sx={{
+            bgcolor: "grey.50",
+            borderRadius: 1,
+            p: 2,
+            border: "1px solid",
+            borderColor: "divider",
+            fontFamily: "monospace",
+            fontSize: "0.875rem",
+          }}
+        >
+          <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: "block" }}>
+            Latest event (#{latestEvent._seq})
+          </Typography>
+          <Typography>
+            {applyDisplayFormat(latestEvent, resource.displayFormat)}
+          </Typography>
+        </Box>
+      ) : (
+        <Typography variant="body2" color="text.secondary" sx={{ py: 2, textAlign: "center" }}>
+          Waiting for events&hellip;
+        </Typography>
+      )}
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={2000}
+        onClose={() => setSnackbarOpen(false)}
+        message={snackbarMsg}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      />
+    </Paper>
+  );
+}
--- a/react-openapi/src/components/fields/renderers/BooleanField.tsx
+++ b/react-openapi/src/components/fields/renderers/BooleanField.tsx
@@ -1,14 +1,44 @@
 import React from "react";
-import { FormControl, FormControlLabel, Switch, FormHelperText } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Switch, FormHelperText, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CancelIcon from "@mui/icons-material/Cancel";
 import type { FieldConfig } from "../../../types";

 interface Props {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
+  nullable?: boolean;
 }

-export function BooleanField({ field, value, onChange }: Props) {
+export function BooleanField({ field, value, onChange, nullable }: Props) {
+  if (nullable) {
+    const strValue = String(value ?? "");
+    return (
+      <Box>
+        <Box sx={{ fontSize: "0.75rem", color: "text.secondary", mb: 0.5, fontWeight: 600 }}>
+          {field.label}
+        </Box>
+        <ToggleButtonGroup
+          value={strValue}
+          exclusive
+          onChange={(_, v) => onChange(v ?? "")}
+          size="small"
+        >
+          <ToggleButton value="" sx={{ color: "text.disabled", borderColor: "divider" }}>
+            <Box sx={{ width: 16, height: 16, borderRadius: "50%", bgcolor: "action.disabledBackground" }} />
+          </ToggleButton>
+          <ToggleButton value="true" sx={{ color: "success.main", borderColor: "success.main" }}>
+            <CheckCircleIcon fontSize="small" />
+          </ToggleButton>
+          <ToggleButton value="false" sx={{ color: "error.main", borderColor: "error.main" }}>
+            <CancelIcon fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Box>
+    );
+  }
+
  return (
    <FormControl component="fieldset" fullWidth size="small">
      <FormControlLabel