[dev] [Marfuen] mariano/small-ui-ux-fixes (#1579)

* chore: standardize size of panels

* chore: make sure latest processing message is auto expanded not only the first one

* chore: make view mode switch smaller

* chore: use gpt-5-mini and improve test ui

* chore: add confetti animation to TestDialog on success

---------

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/app/src/ai/constants.ts

@@ -5,18 +5,22 @@ export enum Models {
   AnthropicClaude4Sonnet = 'anthropic/claude-4-sonnet',
   GoogleGeminiFlash = 'google/gemini-2.5-flash',
   MoonshotKimiK2 = 'moonshotai/kimi-k2',
-  OpenAIGPT5 = 'gpt-5',
+  OpenAIGPT5 = 'openai/gpt-5',
+  OpenAIGPT5Mini = 'openai/gpt-5-mini',
+  OpenAIGPT4oMini = 'openai/gpt-4o-mini',
   XaiGrok3Fast = 'xai/grok-3-fast',
 }
 
-export const DEFAULT_MODEL = Models.OpenAIGPT5;
+export const DEFAULT_MODEL = Models.OpenAIGPT5Mini;
 
 export const SUPPORTED_MODELS: GatewayModelId[] = [
   Models.AmazonNovaPro,
   Models.AnthropicClaude4Sonnet,
   Models.GoogleGeminiFlash,
   Models.MoonshotKimiK2,
   Models.OpenAIGPT5,
+  Models.OpenAIGPT5Mini,
+  Models.OpenAIGPT4oMini,
   Models.XaiGrok3Fast,
 ];
 

apps/app/src/ai/gateway.ts

@@ -1,29 +1,27 @@
-import { createGatewayProvider } from '@ai-sdk/gateway'
-import { Models } from './constants'
-import type { JSONValue } from 'ai'
-import type { OpenAIResponsesProviderOptions } from '@ai-sdk/openai'
-import type { LanguageModelV2 } from '@ai-sdk/provider'
+import { createGatewayProvider } from '@ai-sdk/gateway';
+import type { OpenAIResponsesProviderOptions } from '@ai-sdk/openai';
+import type { LanguageModelV2 } from '@ai-sdk/provider';
+import type { JSONValue } from 'ai';
+import { Models } from './constants';
 
 export async function getAvailableModels() {
-  const gateway = gatewayInstance()
-  const response = await gateway.getAvailableModels()
-  return response.models
-    .map((model) => ({ id: model.id, name: model.name }))
-    .concat([{ id: Models.OpenAIGPT5, name: 'GPT-5' }])
+  const gateway = gatewayInstance();
+  const response = await gateway.getAvailableModels();
+  return response.models.map((model) => ({ id: model.id, name: model.name }));
 }
 
 export interface ModelOptions {
-  model: LanguageModelV2
-  providerOptions?: Record<string, Record<string, JSONValue>>
-  headers?: Record<string, string>
+  model: LanguageModelV2;
+  providerOptions?: Record<string, Record<string, JSONValue>>;
+  headers?: Record<string, string>;
 }
 
 export function getModelOptions(
   modelId: string,
-  options?: { reasoningEffort?: 'minimal' | 'low' | 'medium' }
+  options?: { reasoningEffort?: 'minimal' | 'low' | 'medium' },
 ): ModelOptions {
-  const gateway = gatewayInstance()
-  if (modelId === Models.OpenAIGPT5) {
+  const gateway = gatewayInstance();
+  if (modelId === Models.OpenAIGPT5 || modelId === Models.OpenAIGPT5Mini) {
     return {
       model: gateway(modelId),
       providerOptions: {
@@ -34,28 +32,16 @@ export function getModelOptions(
           serviceTier: 'priority',
         } satisfies OpenAIResponsesProviderOptions,
       },
-    }
-  }
-
-  if (modelId === Models.AnthropicClaude4Sonnet) {
-    return {
-      model: gateway(modelId),
-      headers: { 'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14' },
-      providerOptions: {
-        anthropic: {
-          cacheControl: { type: 'ephemeral' },
-        },
-      },
-    }
+    };
   }
 
   return {
     model: gateway(modelId),
-  }
+  };
 }
 
 function gatewayInstance() {
   return createGatewayProvider({
     baseURL: process.env.AI_GATEWAY_BASE_URL,
-  })
+  });
 }

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/chat.tsx

@@ -36,7 +36,7 @@ export function Chat({ className, orgId, taskId }: Props) {
       if (text.trim()) {
         sendMessage(
           { text },
-          { body: { modelId: Models.OpenAIGPT5, reasoningEffort: 'medium', orgId, taskId } },
+          { body: { modelId: Models.OpenAIGPT5Mini, reasoningEffort: 'medium', orgId, taskId } },
         );
         setInput('');
       }
@@ -51,7 +51,7 @@ export function Chat({ className, orgId, taskId }: Props) {
         {
           text: `I've added the secret "${secretName}". You can now use it in the automation script.`,
         },
-        { body: { modelId: Models.OpenAIGPT5, reasoningEffort: 'medium', orgId, taskId } },
+        { body: { modelId: Models.OpenAIGPT5Mini, reasoningEffort: 'medium', orgId, taskId } },
       );
     },
     [sendMessage, orgId, taskId],
@@ -69,7 +69,7 @@ export function Chat({ className, orgId, taskId }: Props) {
         {
           text: `I've provided the following information:\n\n${infoText}\n\nYou can now continue with creating the automation script.`,
         },
-        { body: { modelId: Models.OpenAIGPT5, reasoningEffort: 'medium', orgId, taskId } },
+        { body: { modelId: Models.OpenAIGPT5Mini, reasoningEffort: 'medium', orgId, taskId } },
       );
     },
     [sendMessage, orgId, taskId],

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/chat/message.tsx

@@ -36,7 +36,16 @@ export const Message = memo(function Message({
     .filter(({ part }) => part.type === 'reasoning');
 
   useEffect(() => {
-    // Only auto-expand once or when no selection exists.
+    // Prefer expanding the latest streaming reasoning part if present.
+    const latestStreaming = [...reasoningParts]
+      .reverse()
+      .find(({ part }) => (part as any)?.state === 'streaming');
+    if (latestStreaming && latestStreaming.index !== expandedReasoningIndex) {
+      setExpandedReasoningIndex(latestStreaming.index);
+      return;
+    }
+
+    // Otherwise, if nothing expanded yet, expand the latest reasoning block.
     if (expandedReasoningIndex === null && reasoningParts.length > 0) {
       const latestReasoningIndex = reasoningParts[reasoningParts.length - 1].index;
       setExpandedReasoningIndex(latestReasoningIndex);

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/panels/panels.tsx

@@ -31,7 +31,7 @@ export function PanelHeader({ className, children }: Props) {
   return (
     <div
       className={cn(
-        'relative flex items-center px-5 py-3',
+        'relative flex items-center shrink-0 h-12 px-4',
         // Primary-tinted header for better contrast
         'bg-primary/5',
         // Primary-accented divider

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/settings/reasoning-effort.tsx

@@ -6,7 +6,7 @@ import { useModelId, useReasoningEffort } from './use-settings';
 export function ReasoningEffort() {
   const [modelId] = useModelId();
   const [effort, setEffort] = useReasoningEffort();
-  if (modelId !== Models.OpenAIGPT5) {
+  if (modelId !== Models.OpenAIGPT5 && modelId !== Models.OpenAIGPT5Mini) {
     return null;
   }
 

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/workflow/components/ConfettiEffect.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+// Confetti particle class
+class Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  color: string;
+  alpha: number;
+  decay: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+    this.vx = (Math.random() - 0.5) * 12;
+    this.vy = Math.random() * -15 - 10;
+    this.size = Math.random() * 6 + 2;
+    this.color = ['#10b981', '#22c55e', '#6ee7b7', '#34d399', '#86efac'][
+      Math.floor(Math.random() * 5)
+    ];
+    this.alpha = 1;
+    this.decay = 0.015;
+  }
+
+  update() {
+    this.x += this.vx;
+    this.y += this.vy;
+    this.vy += 0.5; // gravity
+    this.vx *= 0.99; // air resistance
+    this.alpha -= this.decay;
+    // Keep alpha at 0 minimum so particles keep falling
+    if (this.alpha < 0) this.alpha = 0;
+  }
+
+  draw(ctx: CanvasRenderingContext2D) {
+    ctx.save();
+    ctx.globalAlpha = this.alpha;
+    ctx.fillStyle = this.color;
+    ctx.fillRect(this.x, this.y, this.size, this.size);
+    ctx.restore();
+  }
+}
+
+interface ConfettiEffectProps {
+  trigger: boolean;
+  particleCount?: number;
+}
+
+export function ConfettiEffect({ trigger, particleCount = 100 }: ConfettiEffectProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const particlesRef = useRef<Particle[]>([]);
+  const animationRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (trigger && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      // Set canvas size
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      // Create initial particles from dialog center
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2 - 100; // Slightly above center
+
+      particlesRef.current = Array.from(
+        { length: particleCount },
+        () => new Particle(centerX, centerY),
+      );
+
+      // Animation loop
+      const animate = () => {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        particlesRef.current = particlesRef.current.filter((particle) => {
+          particle.update();
+          particle.draw(ctx);
+          // Only remove particles that have fallen off the bottom of the screen
+          return particle.y < canvas.height + 50; // +50 to ensure they're fully off-screen
+        });
+
+        if (particlesRef.current.length > 0) {
+          animationRef.current = requestAnimationFrame(animate);
+        }
+      };
+
+      animate();
+
+      return () => {
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
+        }
+      };
+    }
+  }, [trigger, particleCount]);
+
+  if (!trigger) return null;
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed inset-0 pointer-events-none z-[100]"
+      style={{ width: '100vw', height: '100vh' }}
+    />
+  );
+}