style/hmr

frontend/common/dist/index.js

@@ -4,7 +4,7 @@ import './styles/global.css';
 export * from './utils/types';
 // Export utility functions
 export * from './utils';
-// Export all UI components
+// Export UI components
 export * from './components/ui';
 // Export timeline components
 export * from './components/TimelineStep';
@@ -12,7 +12,7 @@ export * from './components/TimelineFeed';
 // Export session navigation components
 export * from './components/SessionDrawer';
 export * from './components/SessionSidebar';
-// Export the main screen component
+// Export main screens
 export * from './components/DefaultAgentScreen';
 // Export the hello function (temporary example)
 export const hello = () => {

frontend/common/dist/styles/global.css

@@ -917,6 +917,9 @@ video {
 .border-b {
   border-bottom-width: 1px;
 }
+.border-b-2 {
+  border-bottom-width: 2px;
+}
 .border-l {
   border-left-width: 1px;
 }
@@ -929,6 +932,10 @@ video {
 .border-dashed {
   border-style: dashed;
 }
+.border-blue-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
+}
 .border-border {
   border-color: hsl(var(--border));
 }
@@ -1021,6 +1028,14 @@ video {
   --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-purple-100 {
+  --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.to-blue-100 {
+  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
+}
 .to-purple-500 {
   --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
 }
@@ -1483,6 +1498,10 @@ video {
 .data-\[state\=open\]\:duration-500[data-state="open"] {
   animation-duration: 500ms;
 }
+.dark\:border-blue-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
+}
 .dark\:border-gray-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
@@ -1491,6 +1510,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
 }
+.dark\:from-purple-900:is(.dark *) {
+  --tw-gradient-from: #581c87 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.dark\:to-blue-900:is(.dark *) {
+  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
+}
 @media (min-width: 640px) {
 
   .sm\:max-w-md {

frontend/common/package.json

@@ -6,7 +6,9 @@
   "types": "src/index.ts",
   "scripts": {
     "build": "tsc && postcss src/styles/global.css -o dist/styles/global.css",
-    "dev": "concurrently \"tsc --watch\" \"postcss src/styles/global.css -o dist/styles/global.css --watch\"",
+    "dev": "tsc --watch",
+    "watch:css": "postcss src/styles/global.css -o dist/styles/global.css --watch",
+    "watch": "concurrently \"npm run dev\" \"npm run watch:css\"",
     "prepare": "npm run build"
   },
   "dependencies": {

frontend/common/src/components/DefaultAgentScreen.tsx

@@ -89,7 +89,7 @@ export const DefaultAgentScreen: React.FC = () => {
   const headerContent = (
     <div className="flex justify-between items-center h-full px-4">
       <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">
-        RA-Aid
+        RA.Aid
       </h1>
       
       <div className="flex items-center gap-2">

frontend/common/src/index.ts

@@ -7,7 +7,7 @@ export * from './utils/types';
 // Export utility functions
 export * from './utils';
 
-// Export all UI components
+// Export UI components
 export * from './components/ui';
 
 // Export timeline components
@@ -18,6 +18,9 @@ export * from './components/TimelineFeed';
 export * from './components/SessionDrawer';
 export * from './components/SessionSidebar';
 
+// Export main screens
+export * from './components/DefaultAgentScreen';
+
 // Export the hello function (temporary example)
 export const hello = (): void => {
   console.log("Hello from @ra-aid/common");

frontend/web/vite.config.js

@@ -1,46 +1,40 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import fs from 'fs';
+
+// Get all component files from common package
+const commonSrcDir = path.resolve(__dirname, '../common/src');
 
 export default defineConfig({
-  plugins: [
-    react(),
-  ],
+  plugins: [react()],
   resolve: {
-    // Point to the source files instead of dist for development
     alias: {
+      // Direct alias to the source directory
       '@ra-aid/common': path.resolve(__dirname, '../common/src')
-    }
+    },
+    preserveSymlinks: true
   },
   optimizeDeps: {
-    // Force Vite to include these dependencies in its optimization
-    include: ['@ra-aid/common'],
-    // Tell Vite to respect our aliased packages instead of using node_modules for them
-    esbuildOptions: {
-      preserveSymlinks: true,
-    }
+    // Exclude the common package from optimization so it can trigger hot reload
+    exclude: ['@ra-aid/common']
   },
   server: {
-    hmr: {
-      // More verbose logging for HMR
-      overlay: true,
-    },
+    hmr: true,
     watch: {
-      // Watch for changes in the common package
-      paths: ['../common/src/**'],
-      // Ensure changes in source files trigger a reload
       usePolling: true,
+      interval: 100,
+      // Make sure to explicitly NOT ignore the common package
+      ignored: [
+        '**/node_modules/**',
+        '**/dist/**',
+        '!**/common/src/**'
+      ]
     }
   },
-  css: {
-    // PostCSS configuration is loaded from postcss.config.js
-    // This ensures proper processing of Tailwind directives
-    devSourcemap: true,
-  },
   build: {
-    // When building for production, we need to make sure the common package is built too
     commonjsOptions: {
-      transformMixedEsModules: true,
-    },
+      transformMixedEsModules: true
+    }
   }
 });