feat(recipe-studio): improve UI responsiveness and fix JSON preview handling

This commit is contained in:
Shine1i 2026-03-09 16:04:46 +01:00
commit c67f4ba29f
3 changed files with 12 additions and 10 deletions

View file

@ -171,9 +171,9 @@ def _read_preview_rows_from_local_file(path: Path, preview_size: int) -> list[di
df = pd.read_json(path, lines=True).head(preview_size)
elif ext == ".json":
try:
df = pd.read_json(path, lines=True).head(preview_size)
except ValueError:
df = pd.read_json(path).head(preview_size)
except ValueError:
df = pd.read_json(path, lines=True).head(preview_size)
else:
raise HTTPException(status_code=422, detail=f"unsupported file type: {ext}")
except HTTPException:

View file

@ -49,7 +49,7 @@ export function ConfigDialog({
position="absolute"
overlayPosition="absolute"
overlayClassName="bg-transparent"
className="corner-squircle max-h-[650px] overflow-auto sm:max-w-2xl shadow-border"
className="corner-squircle max-h-[650px] overflow-y-auto overflow-x-hidden sm:max-w-2xl shadow-border"
>
<DialogShell
title={blockDefinition ? `${blockDefinition.title} block` : undefined}
@ -65,14 +65,16 @@ export function ConfigDialog({
</div>
)}
{config && (
<div className="space-y-4">
<div className="min-w-0 space-y-4">
{readOnly && (
<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-300">
Recipe locked while execution is active.
</div>
)}
<ValidationBanner config={config} />
<div className={readOnly ? "pointer-events-none opacity-75" : undefined}>
<div
className={readOnly ? "pointer-events-none min-w-0 opacity-75" : "min-w-0"}
>
{showDropToggle && (
<div className="mb-2 flex items-center corner-squircle justify-between gap-3 rounded-2xl border border-border/60 px-3 pt-2 pb-4">
<div>

View file

@ -423,13 +423,13 @@ export function SeedDialog({ config, onUpdate, open }: SeedDialogProps): ReactEl
);
return (
<Tabs defaultValue="config" className="w-full">
<Tabs defaultValue="config" className="w-full min-w-0">
<TabsList className="w-full">
<TabsTrigger value="config">Config</TabsTrigger>
<TabsTrigger value="preview">Preview</TabsTrigger>
</TabsList>
<TabsContent value="config" className="pt-3">
<TabsContent value="config" className="min-w-0 pt-3">
<div className="space-y-4">
{mode === "hf" && (
<>
@ -774,7 +774,7 @@ export function SeedDialog({ config, onUpdate, open }: SeedDialogProps): ReactEl
</div>
</TabsContent>
<TabsContent value="preview" className="pt-3">
<TabsContent value="preview" className="min-w-0 pt-3">
<div className="space-y-4">
{previewRows.length === 0 ? (
<div className="flex w-full items-center justify-center">
@ -795,8 +795,8 @@ export function SeedDialog({ config, onUpdate, open }: SeedDialogProps): ReactEl
<div className="text-xs text-muted-foreground">
Loaded columns: {previewColumns.join(", ") || "None"}
</div>
<div className="max-h-[360px] overflow-auto rounded-xl corner-squircle border border-border/60">
<Table className="corner-squircle">
<div className="max-h-[360px] overflow-y-auto overflow-x-hidden rounded-xl corner-squircle border border-border/60">
<Table className="corner-squircle min-w-max">
<TableHeader>
<TableRow>
{previewColumns.map((col) => (