@superdangerous/app-framework 4.9.2 → 4.15.0

package/src/services/index.ts

@@ -46,3 +46,17 @@ export type {
 // Queue Service
 export { default as QueueService } from "./queueService.js";
 export type { QueueJob, QueueConfig, JobHandler } from "./queueService.js";
+
+// Email Service
+export {
+  EmailService,
+  getEmailService,
+  createEmailService,
+} from "./emailService.js";
+export type {
+  EmailConfig,
+  EmailOptions,
+  EmailServiceStatus,
+  NotificationEvent,
+  NotificationEventType,
+} from "./emailService.js";

package/src/services/websocketServer.ts

@@ -13,9 +13,10 @@ import {
   DataUpdateMessage,
   Simulator,
   Template,
+  Logger,
 } from "../types/index.js";
 
-let logger: any; // Will be initialized when needed
+let logger: Logger | null = null;
 
 interface ClientInfo {
   id: string;
@@ -26,7 +27,10 @@ interface ClientInfo {
 interface BroadcastData {
   simulatorId?: string;
   templateId?: string;
-  [key: string]: any;
+  address?: string;
+  value?: unknown;
+  values?: Record<string, unknown>;
+  [key: string]: unknown;
 }
 
 class WebSocketServer {
@@ -34,7 +38,7 @@ class WebSocketServer {
   private httpServer: HTTPServer;
   private clients: Map<string, ClientInfo>;
   private simulatorSubscriptions: Map<string, Set<string>>; // simulatorId -> Set of socket IDs
-  private broadcastHook?: (event: string, data: any) => void;
+  private broadcastHook?: (event: string, data: BroadcastData) => void;
 
   constructor(httpServer: HTTPServer) {
     // Initialize logger if not already done
@@ -48,12 +52,12 @@ class WebSocketServer {
   }
 
   initialize(opts?: {
-    broadcastHook?: (event: string, data: any) => void;
+    broadcastHook?: (event: string, data: BroadcastData) => void;
   }): void {
     if (this.io) {
       if (opts?.broadcastHook) {
         this.broadcastHook = opts.broadcastHook;
-        logger.debug("WebSocket broadcast hook updated");
+        logger?.debug("WebSocket broadcast hook updated");
       }
       return;
     }
@@ -71,7 +75,7 @@ class WebSocketServer {
     }
 
     this.setupEventHandlers();
-    logger.info("WebSocket server initialized");
+    logger?.info("WebSocket server initialized");
   }
 
   /**
@@ -87,7 +91,7 @@ class WebSocketServer {
     this.io.on("connection", (socket: Socket) => {
       // Only log in debug mode to avoid spam
       if (process.env.LOG_LEVEL?.toLowerCase() === "debug") {
-        logger.debug(`Client connected: ${socket.id}`);
+        logger?.debug(`Client connected: ${socket.id}`);
       }
       this.clients.set(socket.id, {
         id: socket.id,
@@ -114,14 +118,14 @@ class WebSocketServer {
       socket.on("disconnect", () => {
         // Only log in debug mode to avoid spam
         if (process.env.LOG_LEVEL?.toLowerCase() === "debug") {
-          logger.debug(`Client disconnected: ${socket.id}`);
+          logger?.debug(`Client disconnected: ${socket.id}`);
         }
         this.handleDisconnect(socket);
       });
 
       // Handle errors
-      socket.on("error", (_error: Error) => {
-        logger.error(`Socket error for ${socket.id}:`, _error);
+      socket.on("error", (error: Error) => {
+        logger?.error(`Socket error for ${socket.id}:`, error);
       });
     });
   }
@@ -145,7 +149,7 @@ class WebSocketServer {
     // Join socket.io room for efficient broadcasting
     socket.join(`simulator:${simulatorId}`);
 
-    logger.debug(`Client ${socket.id} subscribed to simulator ${simulatorId}`);
+    logger?.debug(`Client ${socket.id} subscribed to simulator ${simulatorId}`);
   }
 
   private unsubscribeFromSimulator(socket: Socket, simulatorId: string): void {
@@ -167,7 +171,7 @@ class WebSocketServer {
     // Leave socket.io room
     socket.leave(`simulator:${simulatorId}`);
 
-    logger.debug(
+    logger?.debug(
       `Client ${socket.id} unsubscribed from simulator ${simulatorId}`,
     );
   }
@@ -240,7 +244,9 @@ class WebSocketServer {
           type: "data:update",
           data: {
             simulatorId: data.simulatorId!,
-            values: data.values || { [data.address]: data.value },
+            values: (data.values as Record<string, unknown>) || {
+              [data.address as string]: data.value,
+            },
           },
         } as DataUpdateMessage;
         break;
@@ -252,21 +258,29 @@ class WebSocketServer {
         } as WebSocketMessage;
     }
 
-    // Broadcast to all clients
-    this.io.emit(event, message.data);
-
-    // If simulator-specific, also send to room
+    // Broadcast: if simulator-specific, send only to room; otherwise broadcast globally
+    // This prevents duplicate events for subscribed clients
     if (data.simulatorId) {
       this.io.to(`simulator:${data.simulatorId}`).emit(event, message.data);
+      const subscriberCount =
+        this.simulatorSubscriptions.get(data.simulatorId)?.size || 0;
+      logger?.debug(
+        `Broadcast ${event} to ${subscriberCount} subscribers of simulator ${data.simulatorId}`,
+      );
+    } else {
+      this.io.emit(event, message.data);
+      logger?.debug(`Broadcast ${event} to ${this.clients.size} clients`);
     }
-
-    logger.debug(`Broadcast ${event} to ${this.clients.size} clients`);
   }
 
   /**
    * Send event to specific simulator subscribers
    */
-  broadcastToSimulator(simulatorId: string, event: string, data: any): void {
+  broadcastToSimulator(
+    simulatorId: string,
+    event: string,
+    data: Record<string, unknown>,
+  ): void {
     if (!this.io) return;
 
     const message: DataUpdateMessage = {
@@ -281,7 +295,7 @@ class WebSocketServer {
 
     const subscriberCount =
       this.simulatorSubscriptions.get(simulatorId)?.size || 0;
-    logger.debug(
+    logger?.debug(
       `Broadcast ${event} to ${subscriberCount} subscribers of simulator ${simulatorId}`,
     );
   }
@@ -338,7 +352,7 @@ class WebSocketServer {
       // Close the server
       await new Promise<void>((resolve) => {
         this.io!.close(() => {
-          logger.info("WebSocket server shut down");
+          logger?.info("WebSocket server shut down");
           resolve();
         });
       });
@@ -362,7 +376,7 @@ export function createWebSocketServer(
   httpServer: HTTPServer,
   opts?: {
     reset?: boolean;
-    broadcastHook?: (event: string, data: any) => void;
+    broadcastHook?: (event: string, data: BroadcastData) => void;
   },
 ): WebSocketServer {
   // Initialize logger if not already done

package/src/types/index.ts

@@ -92,7 +92,6 @@ export interface UpdateCheckResult {
 export interface ClientInfo {
   id: string;
   connectedAt: Date;
-  lastActivity: Date;
   subscriptions: Set<string>;
 }
 
@@ -109,9 +108,9 @@ export interface Logger {
 /**
  * WebSocket message types
  */
-export interface WebSocketMessage {
+export interface WebSocketMessage<T = unknown> {
   type: string;
-  data: any;
+  data: T;
 }
 
 export interface SimulatorUpdateMessage extends WebSocketMessage {
@@ -128,7 +127,7 @@ export interface DataUpdateMessage extends WebSocketMessage {
   type: "data:update";
   data: {
     simulatorId: string;
-    values: Record<string, any>;
+    values: Record<string, unknown>;
   };
 }
 
@@ -136,19 +135,19 @@ export interface Simulator {
   id: string;
   name: string;
   status: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export interface Template {
   id: string;
   name: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export interface AppConfig {
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 export interface ValidationError extends Error {
-  details?: any[];
+  details?: unknown[];
 }

package/ui/data-table/components/BatchActionsBar.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { Card } from '../../components/base/card';
+import { Button } from '../../components/base/button';
+import { cn } from '../../src/utils/cn';
+
+export interface BatchActionsBarProps {
+  /** Number of selected items */
+  selectedCount: number;
+  /** Callback to clear selection */
+  onClear: () => void;
+  /** Action buttons to display on the right side */
+  children: ReactNode;
+  /** Label for the selected items (default: "item"/"items") */
+  itemLabel?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A horizontal bar that appears when items are selected,
+ * showing the count and providing batch action buttons.
+ */
+export function BatchActionsBar({
+  selectedCount,
+  onClear,
+  children,
+  itemLabel,
+  className,
+}: BatchActionsBarProps) {
+  if (selectedCount === 0) return null;
+
+  const label = itemLabel ?? (selectedCount === 1 ? 'item' : 'items');
+
+  return (
+    <Card className={cn("p-3 bg-primary/5 border-primary/20", className)}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="font-medium text-sm" role="status" aria-live="polite">
+            {selectedCount} {label} selected
+          </span>
+          <Button variant="ghost" size="sm" onClick={onClear} aria-label="Clear selection">
+            <X className="h-4 w-4 mr-1" aria-hidden="true" />
+            Clear
+          </Button>
+        </div>
+        <div className="flex items-center gap-2" role="group" aria-label="Batch actions">
+          {children}
+        </div>
+      </div>
+    </Card>
+  );
+}

package/ui/data-table/components/ColumnVisibility.tsx

@@ -0,0 +1,111 @@
+import { Columns3, Check, Eye, EyeOff } from 'lucide-react';
+import { Button } from '../../components/base/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../components/base/dropdown-menu';
+import { cn } from '../../src/utils/cn';
+import type { ColumnConfig } from '../hooks/useColumnVisibility';
+
+interface ColumnVisibilityProps {
+  columns: ColumnConfig[];
+  isColumnVisible: (columnId: string) => boolean;
+  toggleColumn: (columnId: string) => void;
+  showAllColumns: () => void;
+  hideAllColumns: () => void;
+}
+
+export function ColumnVisibility({
+  columns,
+  isColumnVisible,
+  toggleColumn,
+  showAllColumns,
+  hideAllColumns,
+}: ColumnVisibilityProps) {
+  const visibleCount = columns.filter(c => isColumnVisible(c.id)).length;
+  const toggleableColumns = columns.filter(c => !c.locked);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Columns3 className="h-4 w-4" />
+          Columns
+          <span className="text-muted-foreground text-xs">
+            ({visibleCount}/{columns.length})
+          </span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        <DropdownMenuLabel className="font-normal text-xs text-muted-foreground">
+          Toggle columns
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        {columns.map(column => {
+          const visible = isColumnVisible(column.id);
+          const isLocked = column.locked === true;
+
+          return (
+            <DropdownMenuItem
+              key={column.id}
+              onClick={(e) => {
+                e.preventDefault();
+                if (!isLocked) {
+                  toggleColumn(column.id);
+                }
+              }}
+              className={cn(
+                'gap-2 cursor-pointer',
+                isLocked && 'opacity-50 cursor-not-allowed'
+              )}
+              disabled={isLocked}
+            >
+              <div className="w-4 h-4 flex items-center justify-center">
+                {visible ? (
+                  <Check className="h-3.5 w-3.5 text-primary" />
+                ) : (
+                  <div className="h-3.5 w-3.5" />
+                )}
+              </div>
+              <span className="flex-1">{column.label}</span>
+              {isLocked && (
+                <span className="text-xs text-muted-foreground">Required</span>
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+
+        {toggleableColumns.length > 1 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                showAllColumns();
+              }}
+              className="gap-2 cursor-pointer"
+            >
+              <Eye className="h-4 w-4" />
+              Show All
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                hideAllColumns();
+              }}
+              className="gap-2 cursor-pointer"
+            >
+              <EyeOff className="h-4 w-4" />
+              Hide Optional
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/ui/data-table/components/DataTablePage.tsx

@@ -0,0 +1,238 @@
+/**
+ * DataTablePage - Full-height data table layout with integrated header
+ *
+ * This component provides a desktop-app style layout where:
+ * - The header contains search, filters, action buttons, AND pagination controls
+ * - The data table fills the available vertical space between header and footer
+ * - Pagination controls appear inline in the header (right side)
+ *
+ * Usage:
+ * ```tsx
+ * <DataTablePage
+ *   title="Issues"
+ *   description="Review and manage detected code issues"
+ *   search={searchTerm}
+ *   onSearchChange={setSearchTerm}
+ *   searchPlaceholder="Search issues..."
+ *   filters={filterOptions}
+ *   activeFilterCount={countActiveFilters}
+ *   onClearFilters={clearFilters}
+ *   pagination={pagination}
+ *   actions={<>
+ *     <Button>Refresh</Button>
+ *     <Button>Export</Button>
+ *   </>}
+ * >
+ *   <DataTable ... hidePagination />
+ * </DataTablePage>
+ * ```
+ */
+
+import React from 'react';
+import { Search, Filter, X } from 'lucide-react';
+import { Input } from '../../components/base/input';
+import { Button } from '../../components/base/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/base/popover';
+import { cn } from '../../src/utils/cn';
+import { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+
+export interface FilterOption {
+  id: string;
+  label: string;
+  render: () => React.ReactNode;
+}
+
+export interface DataTablePageProps {
+  /** Page title */
+  title: string;
+  /** Page description */
+  description?: string;
+  /** Search term */
+  search?: string;
+  /** Search change handler */
+  onSearchChange?: (value: string) => void;
+  /** Search placeholder text */
+  searchPlaceholder?: string;
+  /** Filter options for popover */
+  filters?: FilterOption[];
+  /** Number of active filters */
+  activeFilterCount?: number;
+  /** Clear all filters handler */
+  onClearFilters?: () => void;
+  /** Pagination props from usePagination hook */
+  pagination?: PaginationControlsProps;
+  /** Action buttons to show in the header */
+  actions?: React.ReactNode;
+  /** Content before the table (e.g., BatchActionsBar) */
+  beforeTable?: React.ReactNode;
+  /** The DataTable component */
+  children: React.ReactNode;
+  /** Additional class for the container */
+  className?: string;
+  /** Whether to show a loading state */
+  loading?: boolean;
+  /** Loading component to show */
+  loadingComponent?: React.ReactNode;
+}
+
+export function DataTablePage({
+  title,
+  description,
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Search...',
+  filters,
+  activeFilterCount = 0,
+  onClearFilters,
+  pagination,
+  actions,
+  beforeTable,
+  children,
+  className,
+  loading,
+  loadingComponent,
+}: DataTablePageProps) {
+  // Always show pagination controls when pagination is provided (for row count selector)
+  const showPagination = pagination && pagination.totalItems > 0;
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      {/* Page Header - has horizontal padding */}
+      <div className="data-table-page-header flex-shrink-0 space-y-4 pb-4">
+        {/* Title */}
+        <div>
+          <h1 className="text-3xl font-bold">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground">{description}</p>
+          )}
+        </div>
+
+        {/* Controls Row: Search | Filters | Pagination | Spacer | Actions */}
+        <div className="flex items-center gap-3 flex-wrap">
+          {/* Search Input - responsive width */}
+          {onSearchChange !== undefined && (
+            <div className="relative w-full sm:w-auto sm:min-w-[200px] sm:max-w-xs">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10" />
+              <Input
+                placeholder={searchPlaceholder}
+                value={search || ''}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="pl-9 h-9"
+              />
+              {search && (
+                <button
+                  type="button"
+                  onClick={() => onSearchChange('')}
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded-sm hover:bg-muted"
+                >
+                  <X className="h-3 w-3 text-muted-foreground" />
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Filters Popover */}
+          {filters && filters.length > 0 && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2 h-9">
+                  <Filter className="h-4 w-4" />
+                  <span className="hidden sm:inline">Filters</span>
+                  {activeFilterCount > 0 && (
+                    <span className="rounded-full bg-primary text-primary-foreground px-2 py-0.5 text-xs font-medium">
+                      {activeFilterCount}
+                    </span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="w-80 overflow-y-auto"
+                align="start"
+                collisionPadding={16}
+                style={{ maxHeight: 'var(--radix-popover-content-available-height)' }}
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium text-sm">Filters</h4>
+                    {activeFilterCount > 0 && onClearFilters && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={onClearFilters}
+                        className="h-auto p-0 text-xs text-destructive hover:text-destructive"
+                      >
+                        Clear all
+                      </Button>
+                    )}
+                  </div>
+
+                  <div className="space-y-3">
+                    {filters.map((filter) => (
+                      <div key={filter.id} className="space-y-1.5">
+                        <label className="text-xs font-medium text-muted-foreground">
+                          {filter.label}
+                        </label>
+                        {filter.render()}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          )}
+
+          {/* Clear filters button (visible when filters are active) */}
+          {activeFilterCount > 0 && onClearFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="h-9 gap-1.5 text-muted-foreground hover:text-foreground"
+              title="Clear filters"
+            >
+              <X className="h-4 w-4" />
+              <span className="hidden sm:inline">Clear</span>
+            </Button>
+          )}
+
+          {/* Pagination Controls (after filters) */}
+          {showPagination && (
+            <PaginationControls {...pagination} />
+          )}
+
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Action buttons (right side) - never wrap */}
+          {actions && (
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Before Table Content (e.g., BatchActionsBar) - with padding */}
+      {beforeTable && (
+        <div className="px-6 pb-2">
+          {beforeTable}
+        </div>
+      )}
+
+      {/* Table Container - edge to edge, scrolls both directions */}
+      <div className="relative flex-1 min-h-0">
+        <div className="data-table-scroll-container h-full">
+          {loading ? (
+            loadingComponent || (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-muted-foreground">Loading...</div>
+              </div>
+            )
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}