Merge branch 'develop' into dw/direct-ip

Author: dolled-possum

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "hyperdrive_lib"
 authors = ["Sybil Technologies AG"]
-version = "1.9.2"
+version = "1.9.3"
 edition = "2021"
 description = "A general-purpose sovereign cloud computing platform"
 homepage = "https://hyperware.ai"

hyperdrive/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "hyperdrive"
 authors = ["Sybil Technologies AG"]
-version = "1.9.2"
+version = "1.9.3"
 edition = "2021"
 description = "A general-purpose sovereign cloud computing platform"
 homepage = "https://hyperware.ai"

hyperdrive/packages/homepage/homepage/src/lib.rs

@@ -63,6 +63,65 @@ enum NotificationsResponse {
     Err(String),
 }
 
+/// WebSocket message types sent to frontend
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(tag = "kind", content = "data")]
+#[serde(rename_all = "snake_case")]
+enum WsMessage {
+    AppsUpdate(Vec<WsApp>),
+}
+
+/// App data sent over WebSocket (mirrors HomepageApp in TypeScript)
+#[derive(Serialize, Deserialize, Debug, Clone)]
+struct WsApp {
+    id: String,
+    process: String,
+    package_name: String,
+    publisher: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    path: Option<String>,
+    label: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    base64_icon: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    widget: Option<String>,
+    order: u32,
+    favorite: bool,
+}
+
+impl From<&homepage::App> for WsApp {
+    fn from(app: &homepage::App) -> Self {
+        WsApp {
+            id: app.id.clone(),
+            process: app.process.clone(),
+            package_name: app.package_name.clone(),
+            publisher: app.publisher.clone(),
+            path: app.path.clone(),
+            label: app.label.clone(),
+            base64_icon: app.base64_icon.clone(),
+            widget: app.widget.clone(),
+            order: app.order,
+            favorite: app.favorite,
+        }
+    }
+}
+
+/// Helper function to broadcast app updates to all WebSocket clients
+fn broadcast_apps_update(
+    http_server: &server::HttpServer,
+    app_data: &BTreeMap<String, homepage::App>,
+) {
+    let apps: Vec<WsApp> = app_data.values().map(WsApp::from).collect();
+    let message = WsMessage::AppsUpdate(apps);
+    let json = serde_json::to_string(&message).unwrap();
+
+    http_server.ws_push_all_channels(
+        "/",
+        http::server::WsMessageType::Text,
+        LazyLoadBlob::new(Some("application/json"), json.into_bytes()),
+    );
+}
+
 wit_bindgen::generate!({
     path: "../target/wit",
     world: "homepage-sys-v1",
@@ -295,6 +354,10 @@ fn init(our: Address) {
         .bind_http_path("/api/notifications/test-vapid", http_config)
         .expect("failed to bind /api/notifications/test-vapid");
 
+    http_server
+        .bind_ws_path("/", server::WsBindingConfig::default())
+        .expect("failed to bind ws path");
+
     hyperware_process_lib::homepage::add_to_homepage(
         "Clock",
         None,
@@ -319,6 +382,23 @@ fn init(our: Address) {
                 let Ok(request) = http_server.parse_request(message.body()) else {
                     continue;
                 };
+                // Handle WebSocket events
+                match &request {
+                    http::server::HttpServerRequest::WebSocketOpen { path, channel_id } => {
+                        http_server.handle_websocket_open(path, *channel_id);
+                        continue;
+                    }
+                    http::server::HttpServerRequest::WebSocketClose(channel_id) => {
+                        http_server.handle_websocket_close(*channel_id);
+                        continue;
+                    }
+                    http::server::HttpServerRequest::WebSocketPush { .. } => {
+                        continue;
+                    }
+                    http::server::HttpServerRequest::Http(_) => {
+                        // Fall through to handle_request for HTTP
+                    }
+                }
                 http_server.handle_request(
                     request,
                     |incoming| {
@@ -955,11 +1035,13 @@ fn init(our: Address) {
                                     .contains(&message.source().process.to_string().as_str()),
                             },
                         );
+                        broadcast_apps_update(&http_server, &app_data);
                     }
                     homepage::Request::Remove => {
                         let id = message.source().process.to_string();
                         app_data.remove(&id);
                         persisted_app_order.remove(&id);
+                        broadcast_apps_update(&http_server, &app_data);
                     }
                     homepage::Request::RemoveOther(id) => {
                         // caps check
@@ -973,6 +1055,7 @@ fn init(our: Address) {
                         // end caps check
                         app_data.remove(&id);
                         persisted_app_order.remove(&id);
+                        broadcast_apps_update(&http_server, &app_data);
                     }
                     homepage::Request::GetApps => {
                         let apps = app_data.values().cloned().collect::<Vec<homepage::App>>();

hyperdrive/packages/homepage/ui/src/components/Home/components/AppContainer.tsx

@@ -10,6 +10,14 @@ export const AppContainer: React.FC<AppContainerProps> = ({ app, isVisible }) =>
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [hasError, setHasError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [hasAnimatedIn, setHasAnimatedIn] = useState(false);
+
+  // Track when the app first becomes visible to trigger entrance animation
+  useEffect(() => {
+    if (isVisible && !hasAnimatedIn) {
+      setHasAnimatedIn(true);
+    }
+  }, [isVisible, hasAnimatedIn]);
 
   // Ensure we have a valid path
   const appUrl = useMemo(() => {
@@ -29,8 +37,13 @@ export const AppContainer: React.FC<AppContainerProps> = ({ app, isVisible }) =>
 
   return (
     <div
-      className={`app-container fixed inset-0 dark:bg-black bg-white z-30 transition-transform duration-300
-        ${isVisible ? 'translate-x-0' : 'translate-x-full'}`}
+      className={`app-container fixed inset-0 dark:bg-black bg-white z-30
+        ${isVisible
+          ? hasAnimatedIn ? 'animate-app-launch' : 'opacity-0'
+          : 'pointer-events-none opacity-0 scale-95'}`}
+      style={{
+        transition: isVisible ? 'none' : 'opacity 0.2s ease-in, transform 0.2s ease-in',
+      }}
     >
       {hasError ? (
         <div className="w-full h-full flex flex-col items-center justify-center bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900">

hyperdrive/packages/homepage/ui/src/components/Home/components/AppDrawer.tsx

@@ -33,7 +33,7 @@ export const AppDrawer: React.FC = () => {
 
   return (
     <div
-      className="app-drawer fixed inset-0 bg-gradient-to-b from-gray-100/20 to-white/20 dark:from-gray-900/20 dark:to-black/20 backdrop-blur-xl z-50 flex flex-col"
+      className="app-drawer fixed inset-0 bg-gradient-to-b from-gray-100/20 to-white/20 dark:from-gray-900/20 dark:to-black/20 backdrop-blur-xl z-50 flex flex-col animate-modal-backdrop"
       onClick={toggleAppDrawer}
     >
       <div className="px-2 py-1 self-stretch flex items-center gap-2">
@@ -59,10 +59,11 @@ export const AppDrawer: React.FC = () => {
           'grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6': filteredApps.length > 0,
           'grid-cols-2': filteredApps.length === 0,
         })}>
-          {filteredApps.map(app => (
+          {filteredApps.map((app, index) => (
             <div
               key={app.id}
-              className="relative group"
+              className="relative group animate-grid-enter"
+              style={{ '--item-index': index } as React.CSSProperties}
               data-app-id={app.id}
             >
               <div onClick={(e) => {

hyperdrive/packages/homepage/ui/src/components/Home/components/AppIcon.tsx

@@ -18,26 +18,38 @@ export const AppIcon: React.FC<AppIconProps> = ({
 }) => {
   const { openApp } = useNavigationStore();
   const [isPressed, setIsPressed] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   const handlePress = () => {
     if (!isEditMode && app.path && app.path !== null) {
       openApp(app);
     }
   };
 
+  // Calculate scale based on state priority: pressed > hovered > default
+  const getScale = () => {
+    if (isPressed) return 'scale(0.94)';
+    if (isHovered && !isEditMode && isFloating) return 'scale(1.08)';
+    return 'scale(1)';
+  };
+
   return (
     <div
-      className={classNames('app-icon relative flex gap-1 flex-col items-center justify-center  rounded-2xl cursor-pointer select-none transition-all', {
-        'scale-95': isPressed,
-        'scale-100': !isPressed,
+      className={classNames('app-icon relative flex gap-1 flex-col items-center justify-center rounded-2xl cursor-pointer select-none', {
         'animate-wiggle': isEditMode && isFloating,
-        'hover:scale-110': !isEditMode && isFloating,
         'opacity-50': !app.path && !(app.process && app.publisher) && !app.base64_icon,
         'p-2': isUndocked,
       })}
+      style={{
+        transform: getScale(),
+        transition: 'transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
+      }}
       onMouseDown={() => setIsPressed(true)}
       onMouseUp={() => setIsPressed(false)}
-      onMouseLeave={() => setIsPressed(false)}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => { setIsPressed(false); setIsHovered(false); }}
+      onTouchStart={() => setIsPressed(true)}
+      onTouchEnd={() => setIsPressed(false)}
       onClick={handlePress}
       data-app-id={app.id}
       data-app-path={app.path}

hyperdrive/packages/homepage/ui/src/components/Home/components/HomeScreen.tsx

@@ -430,6 +430,7 @@ export const HomeScreen: React.FC = () => {
                 >
                   {app ? (
                     <div
+                      className="dock-icon"
                       draggable
                       onDragStart={(e) => {
                         e.dataTransfer.setData('appId', app.id);

hyperdrive/packages/homepage/ui/src/components/Home/components/Modal.tsx

@@ -18,8 +18,8 @@ export const Modal: React.FC<ModalProps> = ({
     title
 }) => {
     return (
-        <div className={classNames("fixed inset-0 backdrop-blur-sm bg-black/10 dark:bg-black/50 flex items-center justify-center z-50", backdropClassName)}>
-            <div className={classNames("bg-white dark:bg-black shadow-lg dark:shadow-white/10 p-4 rounded-lg relative w-full max-w-screen md:max-w-md min-h-0 max-h-screen overflow-y-auto flex flex-col items-stretch gap-4", modalClassName)}    >
+        <div className={classNames("fixed inset-0 backdrop-blur-sm bg-black/10 dark:bg-black/50 flex items-center justify-center z-50 animate-modal-backdrop", backdropClassName)}>
+            <div className={classNames("bg-white dark:bg-black shadow-lg dark:shadow-white/10 p-4 rounded-lg relative w-full max-w-screen md:max-w-md min-h-0 max-h-screen overflow-y-auto flex flex-col items-stretch gap-4 animate-modal-content", modalClassName)}>
                 <div className="flex items-center justify-between">
                     {title && <h2 className="text-lg font-bold prose">{title}</h2>}
                 <button

hyperdrive/packages/homepage/ui/src/components/Home/styles/animations.css

@@ -21,3 +21,91 @@
 .animate-slide-down {
   animation: slide-down 0.3s ease-out;
 }
+
+/* App launch - scale up with subtle blur clear */
+@keyframes app-launch {
+  0% {
+    transform: scale(0.92);
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* App close - scale down and fade */
+@keyframes app-close {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+}
+
+/* Staggered grid item entrance */
+@keyframes grid-item-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.85) translateY(12px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Modal entrance */
+@keyframes modal-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Modal backdrop fade with blur */
+@keyframes backdrop-enter {
+  0% {
+    opacity: 0;
+    backdrop-filter: blur(0);
+  }
+  100% {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
+}
+
+/* OmniButton idle pulse with neon glow */
+@keyframes omni-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 var(--neon-green-light, rgba(220, 255, 113, 0.4));
+  }
+  50% {
+    box-shadow: 0 0 0 10px transparent;
+  }
+}
+
+/* Card entrance for RecentApps */
+@keyframes card-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) rotate(-2deg) scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotate(0) scale(1);
+  }
+}
+
+.animate-card-enter {
+  animation: card-enter 0.35s var(--ease-out, cubic-bezier(0.0, 0.0, 0.2, 1)) both;
+}