@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/types/__tests__/event-contracts.test.ts

@@ -0,0 +1,204 @@
+/**
+ * Event Contracts Types Tests
+ *
+ * Tests for the type-safe event contract system in shell components.
+ *
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, vi } from 'vitest';
+import {
+  createTypedDispatch,
+  FORM_EVENT_CONTRACT,
+  DATA_TABLE_EVENT_CONTRACT,
+  CARD_GRID_EVENT_CONTRACT,
+  SEARCH_INPUT_EVENT_CONTRACT,
+  MODAL_SLOT_EVENT_CONTRACT,
+  DRAWER_SLOT_EVENT_CONTRACT,
+  type ComponentEventContract,
+  type TypedDispatch,
+  type UIEventPayloads,
+} from '../event-contracts';
+
+describe('Event Contract Types', () => {
+  describe('Component Event Contracts', () => {
+    it('FORM_EVENT_CONTRACT should require SAVE and CANCEL', () => {
+      expect(FORM_EVENT_CONTRACT.requires).toContain('SAVE');
+      expect(FORM_EVENT_CONTRACT.requires).toContain('CANCEL');
+      expect(FORM_EVENT_CONTRACT.entityAware).toBe(true);
+    });
+
+    it('FORM_EVENT_CONTRACT should emit SAVE and CANCEL events', () => {
+      const emittedEvents = FORM_EVENT_CONTRACT.emits.map(e => e.event);
+      expect(emittedEvents).toContain('SAVE');
+      expect(emittedEvents).toContain('CANCEL');
+    });
+
+    it('DATA_TABLE_EVENT_CONTRACT should be config-driven', () => {
+      expect(DATA_TABLE_EVENT_CONTRACT.configDriven).toBe(true);
+      expect(DATA_TABLE_EVENT_CONTRACT.entityAware).toBe(true);
+      // Should not require any events (events come from itemActions)
+      expect(DATA_TABLE_EVENT_CONTRACT.requires).toHaveLength(0);
+    });
+
+    it('DATA_TABLE_EVENT_CONTRACT should emit optional VIEW/SELECT/EDIT/DELETE', () => {
+      const emits = DATA_TABLE_EVENT_CONTRACT.emits;
+      expect(emits.every(e => e.optional)).toBe(true);
+
+      const emittedEvents = emits.map(e => e.event);
+      expect(emittedEvents).toContain('VIEW');
+      expect(emittedEvents).toContain('SELECT');
+      expect(emittedEvents).toContain('EDIT');
+      expect(emittedEvents).toContain('DELETE');
+    });
+
+    it('CARD_GRID_EVENT_CONTRACT should be entity-aware', () => {
+      expect(CARD_GRID_EVENT_CONTRACT.entityAware).toBe(true);
+      expect(CARD_GRID_EVENT_CONTRACT.configDriven).toBe(true);
+    });
+
+    it('SEARCH_INPUT_EVENT_CONTRACT should not require trait handling', () => {
+      expect(SEARCH_INPUT_EVENT_CONTRACT.requires).toHaveLength(0);
+
+      const emittedEvents = SEARCH_INPUT_EVENT_CONTRACT.emits.map(e => e.event);
+      expect(emittedEvents).toContain('SEARCH');
+      expect(emittedEvents).toContain('CLEAR_SEARCH');
+    });
+
+    it('MODAL_SLOT_EVENT_CONTRACT should require CLOSE', () => {
+      expect(MODAL_SLOT_EVENT_CONTRACT.requires).toContain('CLOSE');
+    });
+
+    it('DRAWER_SLOT_EVENT_CONTRACT should require CLOSE', () => {
+      expect(DRAWER_SLOT_EVENT_CONTRACT.requires).toContain('CLOSE');
+    });
+  });
+
+  describe('createTypedDispatch', () => {
+    it('should create a typed dispatch function', () => {
+      type TestEvents = 'SAVE' | 'CANCEL' | 'VIEW';
+      const events: readonly TestEvents[] = ['SAVE', 'CANCEL', 'VIEW'];
+      const mockRawDispatch = vi.fn();
+
+      const dispatch: TypedDispatch<TestEvents> = createTypedDispatch(events, mockRawDispatch);
+
+      dispatch('SAVE', { data: {} });
+      expect(mockRawDispatch).toHaveBeenCalledWith('SAVE', { data: {} });
+
+      dispatch('CANCEL');
+      expect(mockRawDispatch).toHaveBeenCalledWith('CANCEL', undefined);
+
+      dispatch('VIEW', { row: { id: 1 } });
+      expect(mockRawDispatch).toHaveBeenCalledWith('VIEW', { row: { id: 1 } });
+    });
+
+    it('should warn on unknown events in development', () => {
+      type TestEvents = 'SAVE' | 'CANCEL';
+      const events: readonly TestEvents[] = ['SAVE', 'CANCEL'];
+      const mockRawDispatch = vi.fn();
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      // Save original NODE_ENV
+      const originalEnv = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'development';
+
+      const dispatch = createTypedDispatch(events, mockRawDispatch);
+
+      // Dispatch unknown event (type casting to bypass TypeScript)
+      (dispatch as (event: string, payload?: Record<string, unknown>) => void)('UNKNOWN');
+
+      // Should not call raw dispatch
+      expect(mockRawDispatch).not.toHaveBeenCalled();
+
+      // Should warn in development
+      expect(consoleWarnSpy).toHaveBeenCalled();
+
+      // Restore
+      process.env.NODE_ENV = originalEnv;
+      consoleWarnSpy.mockRestore();
+    });
+
+    it('should not call raw dispatch for unknown events', () => {
+      type TestEvents = 'SAVE';
+      const events: readonly TestEvents[] = ['SAVE'];
+      const mockRawDispatch = vi.fn();
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const dispatch = createTypedDispatch(events, mockRawDispatch);
+
+      // Type cast to bypass TypeScript for testing
+      (dispatch as (event: string, payload?: Record<string, unknown>) => void)('INVALID');
+
+      expect(mockRawDispatch).not.toHaveBeenCalled();
+      consoleWarnSpy.mockRestore();
+    });
+  });
+
+  describe('UIEventPayloads type safety', () => {
+    it('should have correct payload types for form events', () => {
+      // These are type-level checks - if they compile, the types are correct
+      const savePayload: UIEventPayloads['UI:SAVE'] = { data: {}, entity: 'Test' };
+      const submitPayload: UIEventPayloads['UI:SUBMIT'] = { data: { name: 'test' } };
+
+      expect(savePayload.data).toBeDefined();
+      expect(submitPayload.data).toBeDefined();
+    });
+
+    it('should have correct payload types for entity events', () => {
+      const viewPayload: UIEventPayloads['UI:VIEW'] = { row: { id: 1 }, entity: 'User' };
+      const selectPayload: UIEventPayloads['UI:SELECT'] = { row: { id: 2 } };
+      const editPayload: UIEventPayloads['UI:EDIT'] = { row: { id: 3 }, entity: 'Order' };
+      const deletePayload: UIEventPayloads['UI:DELETE'] = { row: { id: 4 } };
+
+      expect(viewPayload.row).toBeDefined();
+      expect(selectPayload.row).toBeDefined();
+      expect(editPayload.row).toBeDefined();
+      expect(deletePayload.row).toBeDefined();
+    });
+
+    it('should have correct payload types for search events', () => {
+      const searchPayload: UIEventPayloads['UI:SEARCH'] = { searchTerm: 'test' };
+      expect(searchPayload.searchTerm).toBe('test');
+    });
+
+    it('should have correct payload type for status events', () => {
+      const statusPayload: UIEventPayloads['UI:UPDATE_STATUS'] = {
+        row: { id: 1 },
+        status: 'completed',
+        entity: 'Order',
+      };
+      expect(statusPayload.status).toBe('completed');
+    });
+  });
+
+  describe('ComponentEventContract interface', () => {
+    it('should allow creating custom contracts', () => {
+      const customContract: ComponentEventContract = {
+        emits: [
+          { event: 'CUSTOM_ACTION', trigger: 'click', payload: { type: 'void' } },
+        ],
+        requires: ['CUSTOM_ACTION'],
+        entityAware: false,
+        configDriven: false,
+      };
+
+      expect(customContract.emits).toHaveLength(1);
+      expect(customContract.requires).toContain('CUSTOM_ACTION');
+    });
+
+    it('should support optional events', () => {
+      const contractWithOptional: ComponentEventContract = {
+        emits: [
+          { event: 'REQUIRED', trigger: 'click', payload: { type: 'void' } },
+          { event: 'OPTIONAL', trigger: 'click', payload: { type: 'void' }, optional: true },
+        ],
+        requires: ['REQUIRED'],
+      };
+
+      const requiredEvent = contractWithOptional.emits.find(e => e.event === 'REQUIRED');
+      const optionalEvent = contractWithOptional.emits.find(e => e.event === 'OPTIONAL');
+
+      expect(requiredEvent?.optional).toBeUndefined();
+      expect(optionalEvent?.optional).toBe(true);
+    });
+  });
+});

package/shells/typescript-shell/packages/client/src/types/event-contracts.ts

@@ -0,0 +1,267 @@
+/**
+ * Event Contract Types for Shell Components
+ *
+ * Provides type-safe event definitions for components that emit events.
+ * These types ensure the Complete Circuit pattern is enforceable at compile time.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Trigger types for component events
+ */
+export type EventTrigger =
+  | 'click'      // Button click, row click
+  | 'submit'     // Form submission
+  | 'close'      // Modal/drawer close
+  | 'select'     // Item selection
+  | 'change'     // Input change
+  | 'keydown'    // Keyboard input
+  | 'action';    // Generic action (from itemActions)
+
+/**
+ * Payload type identifiers
+ */
+export type PayloadType =
+  | 'FormData'      // Form submission data
+  | 'EntityRow'     // Selected entity row
+  | 'SearchQuery'   // Search term
+  | 'NavigationTarget' // Navigation path
+  | 'void';         // No payload
+
+/**
+ * Payload schema definition
+ */
+export interface PayloadSchema {
+  /** Named type from shared types */
+  type: PayloadType;
+  /** For custom types, the shape */
+  shape?: Record<string, string>;
+}
+
+/**
+ * Single event definition emitted by a component
+ */
+export interface ComponentEventDefinition {
+  /** The event name WITHOUT UI: prefix (e.g., 'SAVE', 'VIEW') */
+  event: string;
+  /** When this event is emitted */
+  trigger: EventTrigger;
+  /** Payload schema */
+  payload: PayloadSchema;
+  /** Whether this event is optional (e.g., from itemActions config) */
+  optional?: boolean;
+}
+
+/**
+ * Complete event contract for a component
+ */
+export interface ComponentEventContract {
+  /** Events this component can emit */
+  emits: ComponentEventDefinition[];
+  /**
+   * Events the trait MUST handle for circuit completion.
+   * If a component renders in a modal/drawer, the trait must have
+   * transitions for these events to close the UI.
+   */
+  requires: string[];
+  /**
+   * Whether this component works with entity data
+   * (affects payload structure with 'row' and 'entity' fields)
+   */
+  entityAware?: boolean;
+  /**
+   * Whether events come from schema config (itemActions)
+   * rather than being hardcoded in the component
+   */
+  configDriven?: boolean;
+}
+
+/**
+ * Base props interface for components that emit events.
+ * Components extending this interface can be validated for circuit completeness.
+ */
+export interface EventEmittingComponentProps {
+  /**
+   * Event contract for this component.
+   * Used by compiler to validate circuit completeness.
+   * This is a documentation/type-checking property - not used at runtime.
+   */
+  __eventContract?: ComponentEventContract;
+}
+
+/**
+ * Type-safe UI event payloads
+ *
+ * Maps event names to their expected payload types.
+ * Components should emit events with payloads matching these types.
+ */
+export interface UIEventPayloads {
+  // Form events
+  'UI:SAVE': { data: Record<string, unknown>; entity?: string };
+  'UI:SUBMIT': { data: Record<string, unknown>; entity?: string };
+  'UI:CANCEL': Record<string, unknown> | undefined;
+  'UI:CLOSE': Record<string, unknown> | undefined;
+
+  // Entity events
+  'UI:VIEW': { row: unknown; entity?: string };
+  'UI:SELECT': { row: unknown; entity?: string };
+  'UI:DESELECT': Record<string, unknown> | undefined;
+  'UI:EDIT': { row: unknown; entity?: string };
+  'UI:DELETE': { row: unknown; entity?: string };
+  'UI:CREATE': Record<string, unknown> | undefined;
+
+  // Search events (handled by components, not traits)
+  'UI:SEARCH': { searchTerm: string };
+  'UI:CLEAR_SEARCH': Record<string, unknown> | undefined;
+
+  // Status events
+  'UI:UPDATE_STATUS': { row: unknown; status: string; entity?: string };
+
+  // Navigation events
+  'UI:NAVIGATE': { path: string };
+
+  // Generic dispatch for custom events
+  'UI:DISPATCH': { event: string; payload?: unknown };
+}
+
+/**
+ * All known UI event names
+ */
+export type UIEventName = keyof UIEventPayloads;
+
+/**
+ * Extract payload type for a specific event
+ */
+export type UIEventPayload<E extends UIEventName> = UIEventPayloads[E];
+
+/**
+ * Create a typed dispatch function for a specific set of events
+ *
+ * @example
+ * ```typescript
+ * // In generated hook
+ * type MyTraitEvents = 'INIT' | 'VIEW' | 'SAVE' | 'CANCEL';
+ * const dispatch: TypedDispatch<MyTraitEvents> = ...
+ *
+ * dispatch('SAVE', { data: formData });  // OK
+ * dispatch('INVALID');  // TypeScript error
+ * ```
+ */
+export type TypedDispatch<Events extends string> = (
+  event: Events,
+  payload?: Record<string, unknown>
+) => void;
+
+/**
+ * Event handler type for UI event bus listeners
+ */
+export type UIEventHandler<E extends UIEventName> = (
+  payload: UIEventPayload<E>
+) => void;
+
+/**
+ * Validate that a dispatch function only accepts known events
+ *
+ * @example
+ * ```typescript
+ * function useTypedDispatch<E extends string>(events: readonly E[]) {
+ *   const [state, dispatch] = useReducer(reducer, initialState);
+ *
+ *   const typedDispatch: TypedDispatch<E> = (event, payload) => {
+ *     if (!events.includes(event)) {
+ *       console.warn(`Unknown event: ${event}`);
+ *       return;
+ *     }
+ *     dispatch({ type: event, payload });
+ *   };
+ *
+ *   return typedDispatch;
+ * }
+ * ```
+ */
+export function createTypedDispatch<E extends string>(
+  events: readonly E[],
+  rawDispatch: (event: string, payload?: Record<string, unknown>) => void
+): TypedDispatch<E> {
+  return (event: E, payload?: Record<string, unknown>) => {
+    if (!events.includes(event)) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(`[TypedDispatch] Unknown event: ${event}. Valid events: ${events.join(', ')}`);
+      }
+      return;
+    }
+    rawDispatch(event, payload);
+  };
+}
+
+/**
+ * Form component event contract
+ */
+export const FORM_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'SAVE', trigger: 'submit', payload: { type: 'FormData' } },
+    { event: 'CANCEL', trigger: 'click', payload: { type: 'void' } },
+  ],
+  requires: ['SAVE', 'CANCEL'],
+  entityAware: true,
+};
+
+/**
+ * DataTable component event contract
+ */
+export const DATA_TABLE_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'VIEW', trigger: 'action', payload: { type: 'EntityRow' }, optional: true },
+    { event: 'SELECT', trigger: 'select', payload: { type: 'EntityRow' }, optional: true },
+    { event: 'EDIT', trigger: 'action', payload: { type: 'EntityRow' }, optional: true },
+    { event: 'DELETE', trigger: 'action', payload: { type: 'EntityRow' }, optional: true },
+  ],
+  requires: [],
+  entityAware: true,
+  configDriven: true,
+};
+
+/**
+ * CardGrid component event contract
+ */
+export const CARD_GRID_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'VIEW', trigger: 'action', payload: { type: 'EntityRow' }, optional: true },
+    { event: 'SELECT', trigger: 'click', payload: { type: 'EntityRow' }, optional: true },
+  ],
+  requires: [],
+  entityAware: true,
+  configDriven: true,
+};
+
+/**
+ * SearchInput component event contract
+ */
+export const SEARCH_INPUT_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'SEARCH', trigger: 'change', payload: { type: 'SearchQuery' } },
+    { event: 'CLEAR_SEARCH', trigger: 'click', payload: { type: 'void' } },
+  ],
+  requires: [], // Search is handled by display components, not traits
+};
+
+/**
+ * ModalSlot component event contract
+ */
+export const MODAL_SLOT_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'CLOSE', trigger: 'close', payload: { type: 'void' } },
+  ],
+  requires: ['CLOSE'],
+};
+
+/**
+ * DrawerSlot component event contract
+ */
+export const DRAWER_SLOT_EVENT_CONTRACT: ComponentEventContract = {
+  emits: [
+    { event: 'CLOSE', trigger: 'close', payload: { type: 'void' } },
+  ],
+  requires: ['CLOSE'],
+};

package/shells/typescript-shell/packages/client/tailwind.config.js

@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: '#ffffff',
+        foreground: '#000000',
+        primary: {
+          DEFAULT: '#000000',
+          foreground: '#ffffff',
+          50: '#f9f9f9',
+          100: '#f0f0f0',
+          200: '#e0e0e0',
+          300: '#cccccc',
+          400: '#b3b3b3',
+          500: '#666666',
+          600: '#000000', // Main primary action is black
+          700: '#000000',
+          800: '#000000',
+          900: '#000000',
+          950: '#000000',
+        },
+        neutral: {
+          50: '#fafafa',
+          100: '#f5f5f5',
+          200: '#e5e5e5',
+          300: '#d4d4d4',
+          400: '#a3a3a3',
+          500: '#737373',
+          600: '#525252',
+          700: '#404040',
+          800: '#262626',
+          900: '#171717',
+          950: '#0a0a0a',
+        },
+        // Semantic aliases for wireframe look
+        border: '#000000',
+        input: '#000000',
+        ring: '#000000',
+      },
+      borderRadius: {
+        lg: '0px',
+        md: '0px',
+        sm: '0px',
+      },
+      boxShadow: {
+        'wireframe': '4px 4px 0px 0px rgba(0,0,0,1)',
+        'wireframe-sm': '2px 2px 0px 0px rgba(0,0,0,1)',
+      }
+    },
+  },
+  plugins: [],
+};

package/shells/typescript-shell/packages/client/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "types": ["vite/client"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components": ["./src/components"],
+      "@components/*": ["./src/components/*"],
+      "@features": ["./src/features"],
+      "@features/*": ["./src/features/*"],
+      "@hooks": ["./src/hooks"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@lib": ["./src/lib"],
+      "@lib/*": ["./src/lib/*"],
+      "@pages": ["./src/pages"],
+      "@pages/*": ["./src/pages/*"],
+      "@shared": ["../shared/src"],
+      "@shared/*": ["../shared/src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/*.stories.tsx", "src/**/__tests__/**"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/shells/typescript-shell/packages/client/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": false,
+    "declaration": true
+  },
+  "include": ["vite.config.ts"]
+}

package/shells/typescript-shell/packages/client/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfigFnObject;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/shells/typescript-shell/packages/client/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["vite.config.ts"],"names":[],"mappings":";AAIA,wBA2CG"}

package/shells/typescript-shell/packages/client/vite.config.js

@@ -0,0 +1,43 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+export default defineConfig(({ mode }) => {
+    // Load env variables from .env files
+    const env = loadEnv(mode, process.cwd(), '');
+    // Backend URL: use VITE_API_URL if set, otherwise default to TypeScript backend port
+    const backendUrl = env.VITE_API_URL || 'http://localhost:3030';
+    const wsUrl = backendUrl.replace('http://', 'ws://').replace('https://', 'wss://');
+    return {
+        plugins: [react()],
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
+                '@components': path.resolve(__dirname, './src/components'),
+                '@features': path.resolve(__dirname, './src/features'),
+                '@hooks': path.resolve(__dirname, './src/hooks'),
+                '@lib': path.resolve(__dirname, './src/lib'),
+                '@pages': path.resolve(__dirname, './src/pages'),
+                '@shared': path.resolve(__dirname, '../shared/src'),
+            },
+        },
+        server: {
+            host: true,
+            port: 5173,
+            proxy: {
+                '/api': {
+                    target: backendUrl,
+                    changeOrigin: true,
+                },
+                '/ws': {
+                    target: wsUrl,
+                    ws: true,
+                },
+            },
+        },
+        build: {
+            outDir: 'dist',
+            sourcemap: true,
+        },
+    };
+});
+//# sourceMappingURL=vite.config.js.map

package/shells/typescript-shell/packages/client/vite.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.js","sourceRoot":"","sources":["vite.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,eAAe,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACvC,qCAAqC;IACrC,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IAE7C,qFAAqF;IACrF,MAAM,UAAU,GAAG,GAAG,CAAC,YAAY,IAAI,uBAAuB,CAAC;IAC/D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAEnF,OAAO;QACL,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC;QAElB,OAAO,EAAE;YACP,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC;gBACrC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,kBAAkB,CAAC;gBAC1D,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,gBAAgB,CAAC;gBACtD,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC;gBAChD,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,WAAW,CAAC;gBAC5C,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,aAAa,CAAC;gBAChD,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,eAAe,CAAC;aACpD;SACF;QAED,MAAM,EAAE;YACN,IAAI,EAAE,IAAI;YACV,IAAI,EAAE,IAAI;YACV,KAAK,EAAE;gBACL,MAAM,EAAE;oBACN,MAAM,EAAE,UAAU;oBAClB,YAAY,EAAE,IAAI;iBACnB;gBACD,KAAK,EAAE;oBACL,MAAM,EAAE,KAAK;oBACb,EAAE,EAAE,IAAI;iBACT;aACF;SACF;QAED,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,IAAI;SAChB;KACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/shells/typescript-shell/packages/client/vite.config.ts

@@ -0,0 +1,48 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+  // Load env variables from .env files
+  const env = loadEnv(mode, process.cwd(), '');
+
+  // Backend URL: use VITE_API_URL if set, otherwise default to TypeScript backend port
+  const backendUrl = env.VITE_API_URL || 'http://localhost:3030';
+  const wsUrl = backendUrl.replace('http://', 'ws://').replace('https://', 'wss://');
+
+  return {
+    plugins: [react()],
+
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@components': path.resolve(__dirname, './src/components'),
+        '@features': path.resolve(__dirname, './src/features'),
+        '@hooks': path.resolve(__dirname, './src/hooks'),
+        '@lib': path.resolve(__dirname, './src/lib'),
+        '@pages': path.resolve(__dirname, './src/pages'),
+        '@shared': path.resolve(__dirname, '../shared/src'),
+      },
+    },
+
+    server: {
+      host: true,
+      port: 5173,
+      proxy: {
+        '/api': {
+          target: backendUrl,
+          changeOrigin: true,
+        },
+        '/ws': {
+          target: wsUrl,
+          ws: true,
+        },
+      },
+    },
+
+    build: {
+      outDir: 'dist',
+      sourcemap: true,
+    },
+  };
+});

package/shells/typescript-shell/packages/server/.env.development

@@ -0,0 +1,8 @@
+# Development Environment Variables
+# Copy this file and fill in your own API keys
+
+OPENAI_API_KEY=your-openai-api-key
+GEMINI_API_KEY=your-gemini-api-key
+DEEPSEEK_API_KEY=your-deepseek-api-key
+PORT=3949
+FB_PROJECT_ID=your-firebase-project-id