Fix TS build errors + add UX animations and Settings save feedback

[Copilot]

Two TypeScript errors blocked the Vercel build. Additionally, the Settings tab lacked save feedback and loading animations were basic compared to modern AI UIs.

TypeScript fixes

• Mixed ??/|| without parentheses (TS5076): goalOverride ?? assocGoal || undefined → goalOverride ?? (assocGoal || undefined)
• Unused categories variable (TS6133): removed from MarketTab

CSS additions (src/index.css)

New keyframes: blink, pulse-glow, fadeSlideIn, dotBounce, orb-rotate

New utility classes:

• .animate-fade-slide-in, .animate-pulse-glow, .animate-shimmer
• .typing-cursor::after — blinking ▋ cursor via blink animation
• .dot-bounce + .dot-thinking — CSS-driven bouncing dots (no JS animation delays)
• .glass — glassmorphism backdrop blur
• .btn-glow — radial gradient hover via ::before pseudo-element
• .status-dot.active / .status-dot.thinking — pulsing status indicators

App changes (src/App.tsx)

• Settings save button: renamed to "Sauvegarder les paramètres", applies animate-pulse-glow on click and shows "Paramètres sauvegardés ✓" for 2s via a saved state flag; added "Réinitialiser" button that resets to DEFAULTS
• Chat typing indicator: replaced inline-styled static dots with .dot-bounce .dot-thinking classes (staggered via CSS :nth-child delays)
• Agent sidebar: applies animate-pulse-glow on cards when aStatus === 'thinking'
• Chat bubbles: adds animate-fade-slide-in for smooth entrance on each message

Original prompt

Contexte

L'application Sora est une interface IA avec 4 onglets : chat, market, repos, settings. Le build Vercel échoue et l'UX est incomplète.

🔴 Erreurs TypeScript à corriger (PRIORITÉ 1 — bloquent le build)

Dans src/App.tsx :

1. Ligne ~270 — error TS5076: '??' and '||' operations cannot be mixed without parentheses

   • Trouver l'expression qui mélange ?? et || sans parenthèses et ajouter des parenthèses pour clarifier la priorité des opérateurs. Exemple : remplacer a ?? b || c par (a ?? b) || c ou a ?? (b || c) selon la logique voulue.

2. Ligne ~616 — error TS6133: 'categories' is declared but its value is never read

   • Supprimer la déclaration de la variable categories si elle n'est pas utilisée, ou la prefixer avec _ pour indiquer qu'elle est intentionnellement inutilisée.

🟡 UX/UI Améliorations (PRIORITÉ 2 — next-gen design)

1. Bouton "Sauvegarder" dans les Paramètres (Settings)

La section Settings a des champs (supabaseUrl, supabaseKey, groqKey, githubToken, tinyfishKey, scraplingKey, model, temperature, maxTokens, systemPrompt, contextWindow, ragChunks, webEnabled, scrapingEnabled, persona) mais manque d'un bouton Sauvegarder en bas de page.

Ajouter en bas de la section Settings :

• Un bouton "Sauvegarder les paramètres" avec un style prominent (couleur var(--red), fond sombre, bordure lumineuse)
• Lorsqu'on clique, afficher un feedback visuel : animation de succès (checkmark animé + texte "Paramètres sauvegardés ✓") pendant 2 secondes
• Un bouton secondaire "Réinitialiser" pour remettre les valeurs par défaut
• Sticky en bas de la section ou à la fin du formulaire

2. Animations "vivantes" lors des requêtes (comme Claude/Gemini/Grok)

Actuellement les animations de chargement sont basiques. Améliorer dans src/index.css et src/App.tsx :

Dans src/index.css, ajouter ces keyframes et classes CSS :

/* Typing cursor animation */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Pulse glow effect for thinking agents */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 26, 26, 0); }
  50% { box-shadow: 0 0 20px 4px rgba(139, 26, 26, 0.3); }
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Smooth fade-slide in for messages */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dots bounce for thinking */
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Gradient orb rotation */
@keyframes orb-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fade-slide-in {
  animation: fadeSlideIn 0.3s ease-out forwards;
}
.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}
.animate-shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--s2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.typing-cursor::after {
  content: '▋';
  animation: blink 1s step-end infinite;
  color: var(--red);
}
.dot-bounce {
  animation: dotBounce 1.4s ease-in-out infinite;
}
.dot-bounce:nth-child(2) { animation-delay: 0.2s; }
.dot-bounce:nth-child(3) { animation-delay: 0.4s; }

3. Indicateur de "streaming" pendant la génération de réponse

Dans src/App.tsx, lorsque l'IA est en train de générer (isProcessing = true), afficher :

• Un indicateur de frappe animé (3 points qui rebondissent, comme iMessage/Claude)
• Un halo lumineux autour de la zone de chat
• Les messages de l'IA apparaissent avec une animation fadeSlideIn au lieu d'apparaître brusquement

4. Améliorations visuelles globales dans src/index.css

Maintenir la palette de couleurs existante (--red: #8b1a1a, --bg: #f7f4ef, etc.) mais ajouter :

/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 224, 212, 0.8);
}

/* Glow button effect */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(139,26,26,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-glow:hover::before {
  opacity: 1;
}

/* Smooth tab transitions */
.tab-content-enter {
  animation: fadeSlideIn 0.25s ease-out;
}

/* Status indicator dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.active {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-s);
  animation: pulse-glow 2s ease-in-out infinite;
}
.status-dot.thinking {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-s);
  animation: pulse-glow 1s ease-in...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>

<!-- START COPILOT CODING AGENT TIPS -->
---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. [Learn more about Advanced Security.](https://gh.io/cca-advanced-security)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sora	Ready	Preview, Comment	Feb 25, 2026 10:23pm