Merge remote-tracking branch 'origin/master' into jupyter-llm-8500

Author: haraldschilly

src/packages/frontend/admin/llm/admin-llm-test.tsx

@@ -1,4 +1,13 @@
-import { Alert, Button, Input, Select, Space, Table } from "antd";
+import {
+  Alert,
+  Button,
+  Input,
+  Progress,
+  Select,
+  Space,
+  Table,
+  Tooltip,
+} from "antd";
 
 import {
   redux,
@@ -20,12 +29,13 @@ import { trunc_middle } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { PROMPTS } from "./tests";
 import { Value } from "./value";
-
 interface TestResult {
   model: string;
   status: "pending" | "running" | "passed" | "failed";
   output: string;
   error?: string;
+  firstResponseTime?: number; // Time in milliseconds until first token
+  totalTime?: number; // Total time in milliseconds until completion
 }
 
 export function TestLLMAdmin() {
@@ -101,6 +111,10 @@ export function TestLLMAdmin() {
 
     return new Promise((resolve) => {
       try {
+        const startTime = Date.now();
+        let firstResponseTime: number | undefined;
+        let totalTime: number | undefined;
+
         const llmStream = webapp_client.openai_client.queryStream({
           input: prompt,
           project_id: null,
@@ -116,6 +130,10 @@ export function TestLLMAdmin() {
         llmStream.on("token", (token) => {
           console.log({ model, system, token });
           if (token != null) {
+            // Record first response time if this is the first token
+            if (firstResponseTime === undefined) {
+              firstResponseTime = Date.now() - startTime;
+            }
             reply += token;
             // Update the result in real-time
             setTestResults((prev) =>
@@ -125,22 +143,28 @@ export function TestLLMAdmin() {
             );
           } else {
             // Stream is complete (token is null)
+            totalTime = Date.now() - startTime;
             const passed = expectedRegex.test(reply);
             resolve({
               model,
               status: passed ? "passed" : "failed",
               output: reply,
+              firstResponseTime,
+              totalTime,
             });
           }
         });
 
         llmStream.on("error", (err) => {
+          totalTime = Date.now() - startTime;
           console.error(`Error in LLM stream for model ${model}:`, err);
           resolve({
             model,
             status: "failed",
             output: reply,
             error: err?.toString(),
+            firstResponseTime,
+            totalTime,
           });
         });
 
@@ -241,6 +265,57 @@ export function TestLLMAdmin() {
     }
   }
 
+  function formatTiming(timeMs: number | undefined): string {
+    if (timeMs === undefined) return "-";
+    return `${(timeMs / 1000).toFixed(1)}s`;
+  }
+
+  function renderTimingColumn(record: TestResult) {
+    const { firstResponseTime, totalTime, status } = record;
+
+    if (status === "pending" || status === "running") {
+      return <span style={{ color: COLORS.GRAY_M }}>-</span>;
+    }
+
+    if (firstResponseTime === undefined || totalTime === undefined) {
+      return <span style={{ color: COLORS.GRAY_M }}>-</span>;
+    }
+
+    // Calculate progress bar values (normalize to 10 seconds max)
+    const maxTime = Math.max(
+      10000,
+      ...testResults.filter((r) => r.totalTime).map((r) => r.totalTime!),
+    );
+    const totalPercent = Math.min(100, (totalTime / maxTime) * 100);
+
+    // Determine if this is one of the slowest (top 10% quantile)
+    const completedResults = testResults.filter(
+      (r) => r.totalTime !== undefined,
+    );
+    const sortedTimes = completedResults
+      .map((r) => r.totalTime!)
+      .sort((a, b) => b - a);
+    const slowThreshold =
+      sortedTimes[Math.floor(sortedTimes.length * 0.1)] || 0;
+    const isSlow = totalTime >= slowThreshold && completedResults.length > 1;
+
+    return (
+      <div>
+        <Tooltip title="First response time / Total completion time">
+          <div style={{ marginBottom: 2 }}>
+            {formatTiming(firstResponseTime)}/{formatTiming(totalTime)}
+          </div>
+        </Tooltip>
+        <Progress
+          percent={totalPercent}
+          size="small"
+          status={isSlow ? "exception" : "normal"}
+          showInfo={false}
+        />
+      </div>
+    );
+  }
+
   function renderTestResults() {
     if (testResults.length === 0) {
       return (
@@ -292,6 +367,12 @@ export function TestLLMAdmin() {
             <span style={{ color: COLORS.GRAY_M }}>-</span>
           ),
       },
+      {
+        title: "Timing",
+        key: "timing",
+        width: 120,
+        render: (_, record: TestResult) => renderTimingColumn(record),
+      },
       {
         title: "Test",
         key: "test",

src/packages/frontend/package.json

@@ -71,7 +71,7 @@
     "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "anser": "^2.1.1",
-    "antd": "^5.24.7",
+    "antd": "^5.27.0",
     "antd-img-crop": "^4.21.0",
     "async": "^2.6.3",
     "audio-extensions": "^0.0.0",
@@ -122,11 +122,11 @@
     "plotly.js": "^2.29.1",
     "project-name-generator": "^2.1.6",
     "re-resizable": "^6.9.0",
-    "react": "^19.1.0",
+    "react": "^19.1.1",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-debounce-input": "^3.3.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "react-draggable": "^4.5.0",
     "react-highlight-words": "^0.21.0",
     "react-interval-hook": "^1.1.3",
@@ -159,8 +159,8 @@
     "@types/lodash": "^4.14.202",
     "@types/markdown-it": "12.2.3",
     "@types/md5": "^2.2.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "@types/react-redux": "^7.1.34",
     "coffeescript": "^2.5.1",
     "cspell": "^8.17.2",

src/packages/frontend/project/explorer/search-bar.tsx

@@ -30,7 +30,7 @@ const HelpStyle = {
 export const outputMinitermStyle: React.CSSProperties = {
   background: "white",
   position: "absolute",
-  zIndex: 2,
+  zIndex: 10,
   boxShadow: "-4px 4px 7px #aaa",
   maxHeight: "450px",
   overflow: "auto",

src/packages/hub/package.json

@@ -37,7 +37,7 @@
     "ms": "2.1.2",
     "parse-domain": "^5.0.0",
     "random-key": "^0.3.2",
-    "react": "^19.1.0",
+    "react": "^19.1.1",
     "uglify-js": "^3.14.1",
     "underscore": "^1.12.1",
     "uuid": "^8.3.2",

src/packages/next/lib/with-customize.ts

@@ -67,7 +67,7 @@ export default async function withCustomize(
   customize.onCoCalcCom = customize.kucalc === KUCALC_COCALC_COM;
   customize.noindex = obj.props?.unlisted ?? false;
   customize.imprintOrPolicies =
-    (customize.imprint ?? "" + customize.policies ?? "") != "";
+    (customize.imprint ?? "") + (customize.policies ?? "") != "";
   customize.serverTime = Date.now();
 
   // this is used for creating new projects from a share

src/packages/next/package.json

@@ -57,6 +57,7 @@
   "homepage": "https://github.com/sagemathinc/cocalc/tree/master/src/packages/next",
   "private": false,
   "dependencies": {
+    "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/icons": "^6.0.0",
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@cocalc/backend": "workspace:*",
@@ -67,7 +68,7 @@
     "@cocalc/util": "workspace:*",
     "@openapitools/openapi-generator-cli": "^2.19.1",
     "@vscode/vscode-languagedetection": "^1.0.22",
-    "antd": "^5.24.7",
+    "antd": "^5.27.0",
     "antd-img-crop": "^4.21.0",
     "awaiting": "^3.0.0",
     "base-64": "^1.0.0",
@@ -83,8 +84,8 @@
     "next-translate": "^2.6.2",
     "password-hash": "^1.2.2",
     "pg": "^8.7.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-google-recaptcha-v3": "^1.9.7",
     "react-intl": "^7.1.11",
     "serve-index": "^1.9.1",
@@ -95,19 +96,13 @@
     "zod": "^3.23.5"
   },
   "devDependencies": {
-    "@ant-design/cssinjs": "^1.23.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/express": "^4.17.21",
     "@types/node": "^18.16.14",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.10",
     "@uiw/react-textarea-code-editor": "^3.1.1",
-    "next-rspack": "^15.3.4",
+    "next-rspack": "^15.4.6",
     "node-mocks-http": "^1.14.1"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "19.1.8"
-    }
   }
 }

src/packages/next/pages/_document.tsx

@@ -1,72 +1,50 @@
-/*
-This custom document is needed to workaround this bug in antd + nextjs:
-
-    https://github.com/ant-design/ant-design/issues/38767
-
-The actual fix -- i.e., this entire file -- comes from
-
-    https://github.com/ant-design/ant-design/issues/38767#issuecomment-1350362026
-
-which is for a different bug in antd + nextjs, but it happens to fix
-the same problem, and fortunately also works with the older nextjs 12.x, which
-we are currently stuck with.
-
-See also the discussion at https://github.com/ant-design/ant-design/issues/39891
-*/
-
+// pages/_document.tsx
 import type { DocumentContext, DocumentInitialProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
-
 import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
-
 import { Locale } from "@cocalc/util/i18n";
-
 import { query2locale } from "locales/misc";
 
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext): Promise<
-    DocumentInitialProps & {
-      locale: Locale;
-    }
-  > {
+export default class MyDocument extends Document<{ locale: Locale }> {
+  static async getInitialProps(
+    ctx: DocumentContext,
+  ): Promise<DocumentInitialProps & { locale: Locale }> {
     const locale = query2locale(ctx.query);
-
     const cache = createCache();
     const originalRenderPage = ctx.renderPage;
 
-    // The IntlProvider is only for english and all components with translations in the frontend
     ctx.renderPage = () =>
       originalRenderPage({
-        enhanceApp: (App) => (props) =>
-          (
-            <StyleProvider cache={cache}>
-              <App {...props} {...{ locale }} />
-            </StyleProvider>
-          ),
+        enhanceApp: (App: any) => (props: any) => (
+          <StyleProvider cache={cache} hashPriority="high">
+            <App {...props} locale={locale} />
+          </StyleProvider>
+        ),
       });
 
     const initialProps = await Document.getInitialProps(ctx);
 
+    // inline critical AntD CSS as real <style> tags (no script hack)
+    const css = extractStyle(cache, { plain: true, types: ["style", "token"] });
+
     return {
       ...initialProps,
       locale,
       styles: (
         <>
           {initialProps.styles}
-          {/* This is hack, `extractStyle` does not currently support returning JSX or related data. */}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `</script>${extractStyle(cache)}<script>`,
-            }}
+          <style
+            // keep it obvious for debugging
+            data-antd="cssinjs-ssr"
+            // extractStyle returns complete <style> tags; that’s OK here
+            // If you prefer only the CSS text, you can parse it, but this works well in practice.
+            dangerouslySetInnerHTML={{ __html: css }}
           />
         </>
       ),
     };
   }
 
-  // TODO: this "lang={...}" is only working for the very first page that's being loaded
-  // next's dynamic page updates to not have an impact on this. So, to really fix this, we
-  // probably have to get rid of this _document customization and update to version 15 properly.
   render() {
     return (
       <Html lang={this.props.locale}>