[feat] Playground Generation Components with Collapse Functionality

web/oss/src/components/Playground/Components/Drawers/TestsetDrawer/types.d.ts

@@ -2,9 +2,9 @@ import type {ReactNode} from "react"
 
 import {TestResult} from "@/oss/components/Playground/assets/utilities/transformer/types/testRun"
 
-import {TooltipButtonProps} from "../../../../EnhancedUIs/Button"
+import {EnhancedButtonProps} from "../../../../EnhancedUIs/Button/types"
 
-export interface TestsetDrawerButtonProps extends TooltipButtonProps {
+export interface TestsetDrawerButtonProps extends EnhancedButtonProps {
     icon?: boolean
     children?: ReactNode
     resultHashes?: (TestResult | string | null | undefined)[]

web/oss/src/components/Playground/Components/PlaygroundGenerationComparisonView/GenerationComparisonHeader/index.tsx

@@ -11,10 +11,10 @@ import {triggerWebWorkerTestAtom} from "@/oss/state/newPlayground/mutations/webW
 import RunButton from "../../../assets/RunButton"
 import {
     appChatModeAtom,
-    generationHeaderDataAtomFamily,
-    displayedVariantsAtom,
     cancelTestsMutationAtom,
     canRunAllChatComparisonAtom,
+    displayedVariantsAtom,
+    generationHeaderDataAtomFamily,
 } from "../../../state/atoms"
 import {clearAllRunsMutationAtom} from "../../../state/atoms/utilityMutations"
 import TestsetDrawerButton from "../../Drawers/TestsetDrawer"

web/oss/src/components/Playground/Components/PlaygroundGenerations/assets/GenerationCompletion/index.tsx

@@ -35,7 +35,7 @@ const GenerationCompletion = ({
 
     // Ensure is handled at MainLayout level to avoid write-on-render here
     return (
-        <div className={clsx(["flex flex-col", {"gap-2": viewType === "single"}], className)}>
+        <div className={clsx(["flex flex-col"], className)}>
             {viewType === "comparison" ? (
                 <GenerationCompletionRow
                     variantId={variantId}

web/oss/src/components/Playground/Components/PlaygroundGenerations/assets/GenerationCompletionRow/index.tsx

@@ -12,13 +12,12 @@ import {
     displayedVariantsAtom,
 } from "../../../../state/atoms"
 import {
-    resolvedGenerationResultAtomFamily,
     generationRunStatusAtomFamily,
+    resolvedGenerationResultAtomFamily,
 } from "../../../../state/atoms/generationProperties"
 
 import DefaultView from "./DefaultView"
 import SingleView from "./SingleView"
-import {useStyles} from "./styles"
 import type {GenerationCompletionRowProps} from "./types"
 
 // Keep dynamic imports local to presentational components
@@ -33,8 +32,6 @@ const GenerationCompletionRow = ({
     forceSingle,
     ...props
 }: GenerationCompletionRowProps) => {
-    const classes = useStyles()
-
     const isChat = useAtomValue(appChatModeAtom)
 
     // Only subscribe to generation result atoms in completion mode
@@ -117,7 +114,7 @@ const GenerationCompletionRow = ({
             resultHash={resultHash}
             runRow={runRow}
             cancelRow={cancelRow}
-            containerClassName={classes.container}
+            containerClassName={"border-0 border-b border-solid border-colorBorderSecondary"}
         />
     ) : (
         <DefaultView

web/oss/src/components/Playground/Components/PlaygroundGenerations/assets/GenerationHeader/index.tsx

@@ -1,9 +1,11 @@
 import {useCallback, useEffect, useMemo} from "react"
 
+import {ArrowsInLineVerticalIcon, ArrowsOutLineVerticalIcon} from "@phosphor-icons/react"
 import {Button, Tooltip, Typography} from "antd"
 import clsx from "clsx"
-import {useAtomValue, useSetAtom} from "jotai"
+import {useAtom, useAtomValue, useSetAtom} from "jotai"
 
+import EnhancedButton from "@/oss/components/EnhancedUIs/Button"
 import {appTypeAtom} from "@/oss/components/Playground/state/atoms/app"
 import {generationInputRowIdsAtom} from "@/oss/components/Playground/state/atoms/generationProperties"
 import {clearAllRunsMutationAtom} from "@/oss/components/Playground/state/atoms/utilityMutations"
@@ -13,10 +15,13 @@ import RunButton from "../../../../assets/RunButton"
 import {usePlaygroundAtoms} from "../../../../hooks/usePlaygroundAtoms"
 import {generationHeaderDataAtomFamily, triggerWebWorkerTestAtom} from "../../../../state/atoms"
 
+import {allGenerationsCollapsedAtom} from "./store"
 import {useStyles} from "./styles"
 import TestSetMenu from "./TestSetMenu"
 import type {GenerationHeaderProps} from "./types"
 
+// Global atom to track collapse state for all generations
+
 const GenerationHeader = ({variantId}: GenerationHeaderProps) => {
     const classes = useStyles()
 
@@ -36,6 +41,7 @@ const GenerationHeader = ({variantId}: GenerationHeaderProps) => {
     const runAllChat = useSetAtom(runAllChatAtom)
     const appType = useAtomValue(appTypeAtom)
     const completionRowIds = useAtomValue(generationInputRowIdsAtom) as string[]
+    const [isAllCollapsed, setIsAllCollapsed] = useAtom(allGenerationsCollapsedAtom)
 
     const runTests = useCallback(() => {
         if (appType === "chat") runAllChat()
@@ -69,9 +75,27 @@ const GenerationHeader = ({variantId}: GenerationHeaderProps) => {
             )}
         >
             <div className="w-full h-full bg-[white] flex justify-between items-center gap-4">
-                <Typography className="text-[16px] leading-[18px] font-[600] text-nowrap">
-                    Generations
-                </Typography>
+                {appType === "chat" ? (
+                    <Typography className="text-[16px] leading-[18px] font-[600] text-nowrap">
+                        Generations
+                    </Typography>
+                ) : (
+                    <EnhancedButton
+                        icon={
+                            isAllCollapsed ? (
+                                <ArrowsOutLineVerticalIcon size={16} />
+                            ) : (
+                                <ArrowsInLineVerticalIcon size={16} />
+                            )
+                        }
+                        type="text"
+                        onClick={() => setIsAllCollapsed(!isAllCollapsed)}
+                        tooltipProps={{
+                            title: isAllCollapsed ? "Expand all" : "Collapse all",
+                        }}
+                        className="text-[16px] leading-[18px] font-[600] text-nowrap flex items-center"
+                    />
+                )}
 
                 <div className="flex items-center gap-2">
                     <Tooltip title="Clear all">

web/oss/src/components/Playground/Components/PlaygroundGenerations/assets/GenerationHeader/store.ts

@@ -0,0 +1,4 @@
+import {atom} from "jotai"
+
+// Atom to track global collapsed state of all generation inputs
+export const allGenerationsCollapsedAtom = atom(false)

web/oss/src/components/Tables/ExpandableCell.tsx

@@ -4,9 +4,11 @@ import {CaretLineDown, CaretLineUp} from "@phosphor-icons/react"
 import clsx from "clsx"
 import {atom, useAtom} from "jotai"
 
-import TooltipButton, {TooltipButtonProps} from "@/oss/components/EnhancedUIs/Button"
+import EnhancedButton from "@/oss/components/EnhancedUIs/Button"
 import useResizeObserver from "@/oss/hooks/useResizeObserver"
 
+import {EnhancedButtonProps} from "../EnhancedUIs/Button/types"
+
 // Global jotai store that keeps the expanded/collapsed state for each individual cell.
 // The key must be STABLE between mounts (e.g. scenarioId + stepKey + path) so that when
 // a row is unmounted/remounted by react-window, the UI preserves its previous state.
@@ -19,7 +21,7 @@ interface ExpandableProps {
     expandKey?: string
     className?: string
     children: React.ReactNode
-    buttonProps?: TooltipButtonProps
+    buttonProps?: EnhancedButtonProps
 }
 
 export const ExpandableCell = forwardRef(
@@ -96,7 +98,7 @@ export const ExpandableCell = forwardRef(
 
                 {/* Expand/Collapse button */}
                 {(hasOverflow || expanded) && (
-                    <TooltipButton
+                    <EnhancedButton
                         {...buttonProps}
                         className={clsx([
                             "absolute top-0 right-0 z-[1] hidden group-hover:block",