fix: stagger sequence now guaranteed via inline animationDelay

nth-child CSS approach was unreliable — the Python replacement script
cascaded 140ms→240ms→400ms making card 3 appear last (400ms = same as 5).

Fix: set animationDelay inline from map() index in App.jsx so the
1,2,3,4,5 order is always correct regardless of DOM structure.
80ms base + 80ms per card = 80/160/240/320/400ms.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/App.jsx

@@ -740,10 +740,11 @@ export default function App() {
                         { icon: "entry", title: "Entry points",       body: "Find all main entry points across repos" },
                         { icon: "config",  title: "Configuration",    body: "How do these repos handle env & config?" },
                         { icon: "pattern", title: "Design patterns",  body: "Common abstractions across all repos" },
-                      ].map(({ icon, title, body }) => {
+                      ].map(({ icon, title, body }, i) => {
                         const q = `${title}: ${body}`;
                         return (
                           <button key={title} className="suggestion-btn"
+                            style={{ animationDelay: `${80 + i * 80}ms` }}
                             onClick={() => { setInput(q); textareaRef.current?.focus(); }}>
                             <span className="suggestion-icon">{ICONS[icon]}</span>
                             <span className="suggestion-content">
@@ -816,10 +817,11 @@ export default function App() {
                             { icon: "diagram",      title: "Generate a diagram",      body: "Visual map of the main components" },
                             { icon: "shield",       title: "Error handling",          body: "How edge cases are managed across the codebase" },
                             { icon: "flow",         title: "Data flow",               body: "How data moves from input to final result" },
-                          ].map(({ icon, title, body }) => {
+                          ].map(({ icon, title, body }, i) => {
                             const q = `${title}: ${body}`;
                             return (
                               <button key={title} className="suggestion-btn"
+                                style={{ animationDelay: `${80 + i * 80}ms` }}
                                 onClick={() => { setInput(q); textareaRef.current?.focus(); }}>
                                 <span className="suggestion-icon">{ICONS[icon]}</span>
                                 <span className="suggestion-content">
@@ -844,10 +846,11 @@ export default function App() {
                             { icon: "classes",      title: "Key classes",           body: "What each major class does" },
                             { icon: "flow",         title: "Data processing",       body: "How data is transformed through the system" },
                             { icon: "package",      title: "Dependencies",          body: "External libraries and how they're used" },
-                          ].map(({ icon, title, body }) => {
+                          ].map(({ icon, title, body }, i) => {
                             const q = `${title}: ${body}`;
                             return (
                               <button key={title} className="suggestion-btn"
+                                style={{ animationDelay: `${80 + i * 80}ms` }}
                                 onClick={() => { setInput(q); textareaRef.current?.focus(); }}>
                                 <span className="suggestion-icon">{ICONS[icon]}</span>
                                 <span className="suggestion-content">

ui/src/index.css

@@ -1543,16 +1543,12 @@ textarea:focus-visible {
   margin-bottom: 18px;
 }
 
-/* Staggered entrance — each card slides up with a short delay */
+/* Staggered entrance — delay set inline via animationDelay style prop in App.jsx
+   so index-based order is always guaranteed correct */
 @keyframes suggestionIn {
   from { opacity: 0; transform: translateY(10px); }
   to   { opacity: 1; transform: translateY(0); }
 }
-.suggestions .suggestion-btn:nth-child(1) { animation-delay: 80ms; }
-.suggestions .suggestion-btn:nth-child(2) { animation-delay: 160ms; }
-.suggestions .suggestion-btn:nth-child(3) { animation-delay: 400ms; }
-.suggestions .suggestion-btn:nth-child(4) { animation-delay: 320ms; }
-.suggestions .suggestion-btn:nth-child(5) { animation-delay: 400ms; }
 
 .suggestion-btn {
   display: flex;