{/* Left: logo */}
-
+
+
+ BETA
+
{/* Center: pill nav */}
diff --git a/studio/frontend/src/components/ui/slider.tsx b/studio/frontend/src/components/ui/slider.tsx
index eef1e024e1..573dea835b 100644
--- a/studio/frontend/src/components/ui/slider.tsx
+++ b/studio/frontend/src/components/ui/slider.tsx
@@ -6,6 +6,18 @@ import * as React from "react";
import { cn } from "@/lib/utils";
+const THUMB_SIZE_PX = 16;
+
+function getThumbInBoundsOffset(width: number, percent: number) {
+ const halfWidth = width / 2;
+ const halfPercent = 50;
+
+ if (percent <= 0) return halfWidth;
+ if (percent >= 100) return -halfWidth;
+
+ return halfWidth - (percent / halfPercent) * halfWidth;
+}
+
function Slider({
className,
defaultValue,
@@ -32,11 +44,6 @@ function Slider({
},
[isControlled, onValueChange],
);
-
- // For single-thumb horizontal sliders, render the fill bar as a sibling of
- // the track (outside its overflow-hidden container) so it can align flush
- // with the thumb center without being clipped. The Range inside the track
- // is hidden in this case to avoid double-painting.
const isSingleThumbHorizontal =
values.length === 1 && orientation === "horizontal";
const fillPercent = isSingleThumbHorizontal
@@ -48,6 +55,12 @@ function Slider({
),
)
: null;
+ const fillWidth =
+ fillPercent === null
+ ? undefined
+ : fillPercent <= 0
+ ? "0%"
+ : `calc(${fillPercent}% + ${getThumbInBoundsOffset(THUMB_SIZE_PX, fillPercent)}px)`;
return (
();
+function estimateTokenCount(text: string): number | undefined {
+ const trimmed = text.trim();
+ if (!trimmed) {
+ return undefined;
+ }
+ return Math.max(1, Math.round(trimmed.length / 4));
+}
+
+function buildTiming(
+ streamStartTime: number,
+ totalChunks: number,
+ firstTokenTime?: number,
+ totalStreamTime?: number,
+ tokenCount?: number,
+): MessageTiming {
+ return {
+ streamStartTime,
+ firstTokenTime,
+ totalStreamTime,
+ tokenCount,
+ tokensPerSecond:
+ typeof totalStreamTime === "number" &&
+ totalStreamTime > 0 &&
+ typeof tokenCount === "number"
+ ? tokenCount / (totalStreamTime / 1000)
+ : undefined,
+ totalChunks,
+ toolCallCount: 0,
+ };
+}
+
function collectTextParts(message: RunMessage): string[] {
const textParts = message.content
.filter((part) => part.type === "text")
@@ -227,6 +259,9 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
const threadKey = unstable_threadId || "__default";
let waitingFirstChunk = true;
let firstTokenSettled = false;
+ const streamStartTime = Date.now();
+ let firstTokenTime: number | undefined;
+ let totalChunks = 0;
let resolveFirstToken: (() => void) | null = null;
let rejectFirstToken: ((err: unknown) => void) | null = null;
const firstTokenPromise = new Promise((resolve, reject) => {
@@ -288,12 +323,14 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
);
for await (const chunk of stream) {
+ totalChunks += 1;
const delta = chunk.choices?.[0]?.delta?.content;
if (!delta) {
continue;
}
if (waitingFirstChunk) {
waitingFirstChunk = false;
+ firstTokenTime = Date.now() - streamStartTime;
settleFirstTokenOk();
}
@@ -310,11 +347,30 @@ export function createOpenAIStreamAdapter(): ChatModelAdapter {
if (parts.length > 0) {
yield {
content: parts,
- metadata: { custom: { reasoningDuration } },
+ metadata: {
+ timing: buildTiming(
+ streamStartTime,
+ totalChunks,
+ firstTokenTime,
+ ),
+ custom: { reasoningDuration },
+ },
};
}
}
settleFirstTokenOk();
+ yield {
+ metadata: {
+ timing: buildTiming(
+ streamStartTime,
+ totalChunks,
+ firstTokenTime,
+ Date.now() - streamStartTime,
+ estimateTokenCount(cumulativeText),
+ ),
+ custom: { reasoningDuration },
+ },
+ };
} catch (err) {
settleFirstTokenErr(err instanceof Error ? err : new Error("Generation failed"));
const isEarly = waitingFirstChunk;
diff --git a/studio/frontend/src/features/data-recipes/data/recipes-db.ts b/studio/frontend/src/features/data-recipes/data/recipes-db.ts
index 883898a43e..f89707e159 100644
--- a/studio/frontend/src/features/data-recipes/data/recipes-db.ts
+++ b/studio/frontend/src/features/data-recipes/data/recipes-db.ts
@@ -15,6 +15,8 @@ db.version(1).stores({
recipes: "id, name, updatedAt, createdAt",
});
+const recentRecipeCache = new Map();
+
export function listRecipes(): Promise {
return db.recipes.orderBy("updatedAt").reverse().toArray();
}
@@ -23,6 +25,18 @@ export function getRecipe(id: string): Promise {
return db.recipes.get(id);
}
+function writeRecipeCache(record: RecipeRecord): void {
+ recentRecipeCache.set(record.id, record);
+}
+
+export function getCachedRecipe(id: string): RecipeRecord | null {
+ return recentRecipeCache.get(id) ?? null;
+}
+
+export function primeRecipeCache(record: RecipeRecord): void {
+ writeRecipeCache(record);
+}
+
export async function saveRecipe(
input: SaveRecipeInput,
): Promise {
@@ -40,11 +54,13 @@ export async function saveRecipe(
input.learningRecipeTitle ?? existing?.learningRecipeTitle,
};
await db.recipes.put(record);
+ writeRecipeCache(record);
return record;
}
export async function deleteRecipe(id: string): Promise {
await db.recipes.delete(id);
+ recentRecipeCache.delete(id);
}
export function createRecipeDraft(): Promise {
@@ -67,16 +83,29 @@ export function createRecipeFromLearningRecipe(input: {
});
}
-export function useRecipes(): RecipeRecord[] {
+export function useRecipes(): {
+ recipes: RecipeRecord[];
+ ready: boolean;
+} {
const [recipes, setRecipes] = useState([]);
+ const [ready, setReady] = useState(false);
useEffect(() => {
const sub = liveQuery(() => listRecipes()).subscribe({
- next: (value) => setRecipes(value),
- error: (error) => console.error("data-recipes liveQuery:", error),
+ next: (value) => {
+ for (const recipe of value) {
+ writeRecipeCache(recipe);
+ }
+ setRecipes(value);
+ setReady(true);
+ },
+ error: (error) => {
+ console.error("data-recipes liveQuery:", error);
+ setReady(true);
+ },
});
return () => sub.unsubscribe();
}, []);
- return recipes;
+ return { recipes, ready };
}
diff --git a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
index ad576f4fbe..9148b9e0da 100644
--- a/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
+++ b/studio/frontend/src/features/data-recipes/pages/data-recipes-page.tsx
@@ -41,15 +41,19 @@ import {
import { HugeiconsIcon } from "@hugeicons/react";
import { useNavigate } from "@tanstack/react-router";
import type { ReactElement } from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import {
createRecipeDraft,
createRecipeFromLearningRecipe,
deleteRecipe,
+ primeRecipeCache,
useRecipes,
} from "../data/recipes-db";
import { LEARNING_RECIPES } from "../learning-recipes";
+const OPEN_LEARNING_RECIPES_ON_ARRIVAL_KEY =
+ "data-recipes:open-learning-recipes";
+
type TemplateCard = {
title: string;
description: string;
@@ -293,13 +297,21 @@ function LearningRecipeCards({
export function DataRecipesPage(): ReactElement {
const navigate = useNavigate();
- const recipes = useRecipes();
+ const { recipes, ready } = useRecipes();
const [creatingRecipe, setCreatingRecipe] = useState(false);
const [learningDialogOpen, setLearningDialogOpen] = useState(false);
const [loadingTemplateId, setLoadingTemplateId] = useState(
null,
);
+ useEffect(() => {
+ if (sessionStorage.getItem(OPEN_LEARNING_RECIPES_ON_ARRIVAL_KEY) !== "1") {
+ return;
+ }
+ sessionStorage.removeItem(OPEN_LEARNING_RECIPES_ON_ARRIVAL_KEY);
+ setLearningDialogOpen(true);
+ }, []);
+
async function openNewRecipe(): Promise {
if (creatingRecipe || loadingTemplateId) {
return;
@@ -307,6 +319,7 @@ export function DataRecipesPage(): ReactElement {
setCreatingRecipe(true);
try {
const recipe = await createRecipeDraft();
+ primeRecipeCache(recipe);
await navigate({
to: "/data-recipes/$recipeId",
params: { recipeId: recipe.id },
@@ -338,6 +351,7 @@ export function DataRecipesPage(): ReactElement {
templateTitle: recipeTemplate.title,
payload,
});
+ primeRecipeCache(recipe);
setLearningDialogOpen(false);
await navigate({
to: "/data-recipes/$recipeId",
@@ -353,10 +367,11 @@ export function DataRecipesPage(): ReactElement {
}
}
- function openRecipe(recipeId: string): void {
+ function openRecipe(recipe: (typeof recipes)[number]): void {
+ primeRecipeCache(recipe);
navigate({
to: "/data-recipes/$recipeId",
- params: { recipeId },
+ params: { recipeId: recipe.id },
}).catch(() => undefined);
}
@@ -407,7 +422,16 @@ export function DataRecipesPage(): ReactElement {
- {recipes.length === 0 ? (
+ {!ready ? (
+
+
+ BETA
+
{/* Center: pill nav */}
diff --git a/studio/frontend/src/components/ui/slider.tsx b/studio/frontend/src/components/ui/slider.tsx
index eef1e024e1..573dea835b 100644
--- a/studio/frontend/src/components/ui/slider.tsx
+++ b/studio/frontend/src/components/ui/slider.tsx
@@ -6,6 +6,18 @@ import * as React from "react";
import { cn } from "@/lib/utils";
+const THUMB_SIZE_PX = 16;
+
+function getThumbInBoundsOffset(width: number, percent: number) {
+ const halfWidth = width / 2;
+ const halfPercent = 50;
+
+ if (percent <= 0) return halfWidth;
+ if (percent >= 100) return -halfWidth;
+
+ return halfWidth - (percent / halfPercent) * halfWidth;
+}
+
function Slider({
className,
defaultValue,
@@ -32,11 +44,6 @@ function Slider({
},
[isControlled, onValueChange],
);
-
- // For single-thumb horizontal sliders, render the fill bar as a sibling of
- // the track (outside its overflow-hidden container) so it can align flush
- // with the thumb center without being clipped. The Range inside the track
- // is hidden in this case to avoid double-painting.
const isSingleThumbHorizontal =
values.length === 1 && orientation === "horizontal";
const fillPercent = isSingleThumbHorizontal
@@ -48,6 +55,12 @@ function Slider({
),
)
: null;
+ const fillWidth =
+ fillPercent === null
+ ? undefined
+ : fillPercent <= 0
+ ? "0%"
+ : `calc(${fillPercent}% + ${getThumbInBoundsOffset(THUMB_SIZE_PX, fillPercent)}px)`;
return (
+
+ ) : recipes.length === 0 ? (
+ Loading recipes +
++ Fetching your saved recipes and learning templates. +
+