feat(platform): optimize logs page navigation for instant feedback (vm0-ai#2577)

Lunarivibe · cursoragent · web-flow · commit f874e375b809 · 2026-02-09T01:57:40.000Z
* test(platform): add skeleton loading state test for logs page Add test case to verify skeleton loading state is displayed while fetching logs data, ensuring smooth transition from loading state to actual content. Closes vm0-ai#2505 Co-authored-by: Cursor <cursoragent@cursor.com> * feat(platform): optimize logs page navigation for instant feedback Move page rendering before scope validation to provide immediate visual feedback when navigating to logs page. This eliminates the perceived delay by showing the logs page with skeleton loading states while scope validation and data fetching happen in the background. Changes: - Render LogsPage immediately in setupLogsPage$ before data initialization - Move scope check in setupScopeRequiredPageWrapper to run after page display - Maintain existing validation logic and redirect behavior Closes vm0-ai#2505 Co-authored-by: Cursor <cursoragent@cursor.com> * fix(platform): enable horizontal scroll for logs table on mobile Remove table-fixed layout and add overflow-x-auto to enable horizontal scrolling on small screens. Standardize all column min-width to 120px for better content visibility. Changes: - Remove table-fixed from Table component to allow natural width - Add overflow-x-auto to table-wrapper for horizontal scrolling - Update all column min-width from 80px/70px to 120px - Apply changes to logs table, skeleton, and table rows Addresses vm0-ai#2537 (P0 issue #1) Co-authored-by: Cursor <cursoragent@cursor.com> * fix(platform): improve onboarding modal mobile layout and spacing Optimize modal for mobile devices by adjusting height constraints, padding, and font sizes: - Change mobile max-height from 100dvh to 90dvh for better content space - Reduce padding on mobile (px-4 py-4) while maintaining desktop spacing - Add responsive padding and sizing for close button and logo - Add border-top to footer for visual separation - Reduce gap between form elements on mobile (gap-4 vs gap-6) Addresses vm0-ai#2537 (P0 issue vm0-ai#2) Co-authored-by: Cursor <cursoragent@cursor.com> * fix(ui): restore table-fixed layout for proportional column scaling Restore table-fixed layout to maintain proportional column scaling while keeping overflow-x-auto for horizontal scroll support. This allows tables to scale proportionally on larger screens and scroll horizontally when columns reach their minimum width constraints on small screens. Related to vm0-ai#2537 Co-authored-by: Cursor <cursoragent@cursor.com> * style(ui): add subtle scrollbar styling for table component Add elegant, minimal scrollbar styling for horizontal scroll: - Thin scrollbar (6px height) - Subtle color (muted-foreground 20% opacity) - Transparent track for clean appearance - Smooth hover transition (30% opacity) - Rounded corners (3px) for refined look Related to vm0-ai#2537 Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
diff --git a/turbo/apps/platform/src/signals/bootstrap.ts b/turbo/apps/platform/src/signals/bootstrap.ts
@@ -77,6 +77,12 @@ function setupScopeRequiredPageWrapper(
     command(async ({ get, set }, signal: AbortSignal) => {
       L.debug("enter setupScopeRequiredPageWrapper");
 
+      // First, immediately render the page to provide instant visual feedback
+      // The page components will show loading skeletons while data fetches
+      await set(fn, signal);
+      signal.throwIfAborted();
+
+      // Then check scope in background (after page is already displayed)
       const scopeExists = await get(hasScope$);
       signal.throwIfAborted();
       L.debug("scopeExists", scopeExists);
@@ -86,9 +92,6 @@ function setupScopeRequiredPageWrapper(
         set(navigateInReact$, "/");
         return;
       }
-
-      await set(fn, signal);
-      signal.throwIfAborted();
     }),
   );
 }
diff --git a/turbo/apps/platform/src/signals/logs-page/logs-page.ts b/turbo/apps/platform/src/signals/logs-page/logs-page.ts
@@ -5,7 +5,10 @@ import { updatePage$ } from "../react-router.ts";
 import { initLogs$ } from "./logs-signals.ts";
 
 export const setupLogsPage$ = command(({ set }, signal: AbortSignal) => {
+  // Immediately update page to show LogsPage with skeleton loading
+  // This provides instant visual feedback while data is being fetched
   set(updatePage$, createElement(LogsPage));
 
+  // Initialize logs data in background (non-blocking)
   set(initLogs$, signal);
 });
diff --git a/turbo/apps/platform/src/views/home/onboarding-modal.tsx b/turbo/apps/platform/src/views/home/onboarding-modal.tsx
@@ -95,13 +95,13 @@ export function OnboardingModal() {
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
       <DialogContent
-        className="flex max-h-[100dvh] flex-col gap-0 overflow-hidden sm:max-h-[85dvh] sm:max-w-[600px] p-0 border-border rounded-[10px] [&>button[aria-label=Close]:last-child]:hidden"
+        className="flex max-h-[90dvh] flex-col gap-0 overflow-hidden sm:max-h-[85dvh] sm:max-w-[600px] p-0 border-border rounded-[10px] [&>button[aria-label=Close]:last-child]:hidden"
         style={{
           backgroundImage: backgroundGradient,
         }}
       >
         {/* Close button - top row */}
-        <div className="shrink-0 flex justify-end pr-4 pt-4">
+        <div className="shrink-0 flex justify-end pr-3 pt-3 sm:pr-4 sm:pt-4">
           <DialogClose asChild>
             <button
               className="icon-button opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
@@ -113,32 +113,32 @@ export function OnboardingModal() {
         </div>
 
         {/* Fixed Header - Logo and Title */}
-        <div className="shrink-0 px-6 pb-4">
+        <div className="shrink-0 px-4 pb-3 sm:px-6 sm:pb-4">
           {/* Logo */}
-          <div className="flex items-center justify-center gap-2 mb-4">
+          <div className="flex items-center justify-center gap-2 mb-3 sm:mb-4">
             <img
               src={theme === "dark" ? "/logo_dark.svg" : "/logo_light.svg"}
               alt="VM0"
-              className="h-[40px] w-auto"
+              className="h-[32px] sm:h-[40px] w-auto"
             />
-            <span className="text-4xl font-normal text-foreground">
+            <span className="text-3xl sm:text-4xl font-normal text-foreground">
               Platform
             </span>
           </div>
 
           {/* Header */}
           <div className="text-center">
-            <DialogTitle className="text-lg font-medium leading-7 text-foreground">
+            <DialogTitle className="text-base sm:text-lg font-medium leading-6 sm:leading-7 text-foreground">
               Define your model provider
             </DialogTitle>
-            <DialogDescription className="text-sm text-foreground mt-[10px]">
+            <DialogDescription className="text-sm text-foreground mt-2">
               Your model provider is required for sandboxed execution.
             </DialogDescription>
           </div>
         </div>
 
         {/* Scrollable content area */}
-        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-6 flex flex-col gap-6 dialog-scrollable">
+        <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-6 flex flex-col gap-4 sm:gap-6 dialog-scrollable">
           {/* Provider Type Selector */}
           <div className="flex flex-col gap-2">
             <label className="px-1 text-sm font-medium text-foreground">
@@ -203,7 +203,7 @@ export function OnboardingModal() {
         </div>
 
         {/* Fixed Footer - Action Buttons */}
-        <div className="shrink-0 flex justify-end gap-2 px-6 pb-6 pt-4">
+        <div className="shrink-0 flex justify-end gap-2 px-4 pb-4 pt-3 sm:px-6 sm:pb-6 sm:pt-4 border-t border-border/50">
           <Button variant="outline" onClick={() => closeModal()}>
             Cancel
           </Button>
diff --git a/turbo/apps/platform/src/views/logs-page/__tests__/logs-page.test.tsx b/turbo/apps/platform/src/views/logs-page/__tests__/logs-page.test.tsx
@@ -223,4 +223,53 @@ describe("logs page", () => {
       expect(screen.getByText(/Failed to fetch logs/)).toBeInTheDocument();
     });
   });
+
+  it("should show skeleton loading state while fetching data", async () => {
+    let resolveRequest: ((value: unknown) => void) | undefined;
+    const requestPromise = new Promise((resolve) => {
+      resolveRequest = resolve;
+    });
+
+    server.use(
+      http.get("*/api/platform/logs", async () => {
+        await requestPromise;
+        return HttpResponse.json({
+          data: [
+            {
+              id: "run_test",
+              sessionId: "session_test",
+              agentName: "Test Agent",
+              framework: "claude-code",
+              status: "completed",
+              createdAt: "2024-01-01T00:00:00Z",
+            },
+          ],
+          pagination: { hasMore: false, nextCursor: null },
+        });
+      }),
+    );
+
+    await setupPage({
+      context,
+      path: "/logs",
+    });
+
+    // Should show skeleton while loading
+    // Skeleton rows have specific test structure - check for multiple skeleton elements
+    const table = screen.getByRole("table");
+    const skeletonElements = within(table).getAllByRole("row");
+    // Should have header row + multiple skeleton rows (8 in LogsTableSkeleton)
+    expect(skeletonElements.length).toBeGreaterThan(1);
+
+    // Resolve the request to show actual data
+    resolveRequest?.(true);
+
+    // Wait for actual data to appear
+    await waitFor(() => {
+      expect(screen.getByText("Test Agent")).toBeInTheDocument();
+    });
+
+    // Verify skeleton is replaced with actual data
+    expect(screen.getByText("session_test")).toBeInTheDocument();
+  });
 });
diff --git a/turbo/apps/platform/src/views/logs-page/logs-table-row.tsx b/turbo/apps/platform/src/views/logs-page/logs-table-row.tsx
@@ -41,25 +41,25 @@ export function LogsTableRow({ entry }: LogsTableRowProps) {
       className="h-[53px] cursor-pointer hover:bg-muted/50"
       onClick={handleRowClick}
     >
-      <TableCell className="px-3 py-2 text-sm font-medium w-[20%] min-w-[80px]">
+      <TableCell className="px-3 py-2 text-sm font-medium w-[20%] min-w-[120px]">
         <span className="block truncate whitespace-nowrap">{entry.id}</span>
       </TableCell>
-      <TableCell className="px-3 py-2 text-sm w-[20%] min-w-[80px]">
+      <TableCell className="px-3 py-2 text-sm w-[20%] min-w-[120px]">
         <span className="block truncate whitespace-nowrap">
           {entry.sessionId ?? "-"}
         </span>
       </TableCell>
-      <TableCell className="px-3 py-2 text-sm w-[15%] min-w-[80px]">
+      <TableCell className="px-3 py-2 text-sm w-[15%] min-w-[120px]">
         <span className="block truncate whitespace-nowrap">
           {entry.agentName}
         </span>
       </TableCell>
-      <TableCell className="px-3 py-2 text-sm w-[12%] min-w-[70px]">
+      <TableCell className="px-3 py-2 text-sm w-[12%] min-w-[120px]">
         <span className="block truncate whitespace-nowrap">
           {entry.framework ?? "-"}
         </span>
       </TableCell>
-      <TableCell className="px-3 py-2 w-[13%] min-w-[80px]">
+      <TableCell className="px-3 py-2 w-[13%] min-w-[120px]">
         <div className="truncate whitespace-nowrap">
           <StatusBadge status={entry.status} />
         </div>
diff --git a/turbo/apps/platform/src/views/logs-page/logs-table-skeleton.tsx b/turbo/apps/platform/src/views/logs-page/logs-table-skeleton.tsx
@@ -12,19 +12,19 @@ function LogsTableHeader() {
   return (
     <TableHeader className="bg-muted">
       <TableRow className="hover:bg-transparent">
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Run ID</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Session ID</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Agent</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[12%] min-w-[70px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[12%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Framework</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[13%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[13%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Status</span>
         </TableHead>
         <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[120px]">
@@ -45,22 +45,22 @@ export function LogsTableSkeleton() {
       <TableBody>
         {Array.from({ length: 8 }, (_, i) => (
           <TableRow key={`skeleton-${i}`} className="h-[49px]">
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-4 w-24" />
             </TableCell>
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-4 w-28" />
             </TableCell>
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-4 w-20" />
             </TableCell>
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-4 w-16" />
             </TableCell>
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-6 w-20 rounded-full" />
             </TableCell>
-            <TableCell className="px-3 py-2">
+            <TableCell className="px-3 py-2 min-w-[120px]">
               <Skeleton className="h-4 w-32" />
             </TableCell>
             <TableCell className="px-2 py-2">
diff --git a/turbo/apps/platform/src/views/logs-page/logs-table.tsx b/turbo/apps/platform/src/views/logs-page/logs-table.tsx
@@ -11,19 +11,19 @@ function LogsTableHeader() {
   return (
     <TableHeader className="bg-muted">
       <TableRow className="hover:bg-transparent">
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Run ID</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[20%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Session ID</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Agent</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[12%] min-w-[70px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[12%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Framework</span>
         </TableHead>
-        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[13%] min-w-[80px]">
+        <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[13%] min-w-[120px]">
           <span className="block truncate whitespace-nowrap">Status</span>
         </TableHead>
         <TableHead className="h-10 px-3 text-sm font-medium text-foreground w-[15%] min-w-[120px]">
diff --git a/turbo/packages/ui/src/components/ui/table.tsx b/turbo/packages/ui/src/components/ui/table.tsx
@@ -19,13 +19,33 @@ const Table = React.forwardRef<
         .table-wrapper thead tr {
           border-bottom: 0 !important;
         }
+        .table-wrapper {
+          scrollbar-width: thin;
+          scrollbar-color: hsl(var(--muted-foreground) / 0.2) transparent;
+        }
+        .table-wrapper::-webkit-scrollbar {
+          height: 6px;
+        }
+        .table-wrapper::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .table-wrapper::-webkit-scrollbar-thumb {
+          background-color: hsl(var(--muted-foreground) / 0.2);
+          border-radius: 3px;
+        }
+        .table-wrapper::-webkit-scrollbar-thumb:hover {
+          background-color: hsl(var(--muted-foreground) / 0.3);
+        }
       `,
       }}
     />
-    <div className="table-wrapper">
+    <div className="table-wrapper overflow-x-auto">
       <table
         ref={ref}
-        className={cn("w-full caption-bottom text-sm table-fixed", className)}
+        className={cn(
+          "w-full min-w-[764px] caption-bottom text-sm table-fixed",
+          className,
+        )}
         {...props}
       />
     </div>
