Improve demo application

r-brown · r-brown · commit 0c1b910274dd · 2026-03-07T11:37:52.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,5 @@ node_modules/
 npm-debug.log
 .build*
 .idea
-index.html
 dist/
+test/coverage/lcov-report/index.html
diff --git a/docs/client-demo.html b/docs/client-demo.html
@@ -33,55 +33,65 @@
     <style>
         /* Custom scrollbar for the console output */
         #console-log-text::-webkit-scrollbar {
-            width: 8px;
+            width: 10px;
         }
         #console-log-text::-webkit-scrollbar-track {
-            background: #1f2937; 
+            background: #111827; 
+            border-left: 1px solid #374151;
         }
         #console-log-text::-webkit-scrollbar-thumb {
             background: #4b5563; 
-            border-radius: 4px;
+            border-radius: 5px;
+            border: 2px solid #111827;
         }
         #console-log-text::-webkit-scrollbar-thumb:hover {
             background: #6b7280; 
         }
 
-        /* Flex layout to make the console fill remaining height */
+        /* Flex layout setup */
         body {
             display: flex;
             flex-direction: column;
             height: 100vh;
             margin: 0;
-            overflow: hidden; /* Prevent body scrolling, let console scroll */
+            overflow: hidden; 
         }
 
         .main-container {
             flex: 1;
             display: flex;
             flex-direction: column;
             padding-bottom: 2rem;
+            min-height: 0; /* Crucial for flex child to allow inner scrolling */
         }
 
         .terminal-container {
             flex: 1;
             display: flex;
             flex-direction: column;
-            min-height: 0; /* Important for flex child scrolling */
+            min-height: 0; /* Crucial for flex child to allow inner scrolling */
         }
 
         #console-log-text {
             flex: 1;
-            overflow-y: auto;
+            overflow-y: auto; /* Enables vertical scrolling */
+            word-wrap: break-word;
+        }
+
+        /* Prevent layout shift during auto-scroll */
+        .log-entry {
+            margin-bottom: 0.5rem;
+            white-space: pre-wrap;
+            word-break: break-all;
         }
     </style>
 </head>
 <body class="bg-gray-50 font-sans text-gray-800">
 
-    <!-- I've forced the max width of the whole container to exactly 1024px and centered it -->
     <div class="main-container w-[1024px] max-w-[1024px] mx-auto pt-8 px-4">
 
         <!-- Header Section -->
-        <div class="text-center mb-6">
+        <div class="text-center mb-6 shrink-0">
             <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
                 <span class="block text-brand">Labs64</span>
                 <a href="https://netlicensing.io/" target="_blank" class="hover:text-brand-hover transition-colors">
@@ -111,9 +121,9 @@ <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
         </div>
 
         <!-- Terminal Output Section -->
-        <div class="terminal-container bg-gray-900 rounded-lg shadow-xl overflow-hidden border border-gray-700 w-full">
+        <div class="terminal-container bg-gray-900 rounded-lg shadow-xl overflow-hidden border border-gray-700 w-full relative">
             <!-- Mac-style window header -->
-            <div class="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center shrink-0">
+            <div class="bg-gray-800 px-4 py-2 border-b border-gray-700 flex items-center shrink-0 z-10">
                 <div class="flex space-x-2">
                     <div class="w-3 h-3 rounded-full bg-red-500"></div>
                     <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
@@ -122,7 +132,7 @@ <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
                 <div class="mx-auto text-gray-400 text-xs font-mono">demo-output.log</div>
             </div>
 
-            <!-- Output container now takes up remaining screen height -->
+            <!-- Output container now takes up remaining screen height AND allows scrolling -->
             <div class="p-4 font-mono text-sm w-full" id="console-log-text">
                 <div class="text-gray-500 mb-2">Ready. Click 'Execute Demo' to start the NetLicensing API simulation...</div>
             </div>
@@ -156,7 +166,7 @@ <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
             function appendLog(args, colorClass, prefixChar = '>') {
                 const msg = formatArgs(args);
                 const div = document.createElement('div');
-                div.className = `mb-2 whitespace-pre-wrap break-all ${colorClass}`;
+                div.className = `log-entry ${colorClass}`;
 
                 const prefix = document.createElement('span');
                 prefix.className = 'text-[#E14817] mr-2 select-none font-bold';
@@ -166,7 +176,12 @@ <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight mb-2">
                 div.appendChild(document.createTextNode(msg));
 
                 logger.appendChild(div);
-                logger.scrollTop = logger.scrollHeight;
+
+                // Ensure the scroll goes all the way to the newly added item
+                // Use requestAnimationFrame to ensure the DOM has updated before calculating height
+                requestAnimationFrame(() => {
+                    logger.scrollTop = logger.scrollHeight;
+                });
             }
 
             console.log = function() {
diff --git a/docs/client-demo.js b/docs/client-demo.js
@@ -1,4 +1,5 @@
 const NetLicensingDemo = async () => {
+  try {
   const {
     Context,
     LicenseType,
@@ -301,8 +302,21 @@ const NetLicensingDemo = async () => {
   // region ********* CleanUp
 
   console.log('All done.');
-  await ProductService.delete(context, productNumber, true);
+    await ProductService.delete(context, productNumber, true);
   // endregion
+
+  } catch (error) {
+    console.error('❌ NetLicensing API Error:');
+
+    // Check if it's an Axios/API response error
+    if (error.response && error.response.data) {
+      console.error('Status Code:', error.response.status);
+      console.error(JSON.stringify(error.response.data, null, 2));
+    } else {
+      // Standard JS/Network error
+      console.error(error.message || error);
+    }
+  }
 };
 
 function numberWithPrefix(prefix, number) {
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="refresh" content="0; url=client-demo.html">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Redirecting to Labs64 NetLicensing Client Demo</title>
+    <script>
+        // Fallback JavaScript redirect in case meta refresh is disabled
+        window.location.href = "client-demo.html";
+    </script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: #f9fafb;
+            color: #374151;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            text-align: center;
+        }
+        .container {
+            max-width: 500px;
+            padding: 2rem;
+        }
+        a {
+            color: #E14817; /* Labs64 Brand Color */
+            text-decoration: none;
+            font-weight: 600;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Redirecting to Demo...</h2>
+        <p>If you are not redirected automatically, please <a href="client-demo.html">click here</a>.</p>
+    </div>
+</body>
+</html>
