Add auto-scrolling suggestion chips and company logo marquee

- Suggestion chips now scroll right-to-left with seamless loop
- Added "Previously at" marquee with actual company logos (Socket, Nodies, AWS, CGI, Pocket Network)
- Logos use external image URLs with hover effects

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

Author: dachi-dev

src/App.jsx

@@ -5,6 +5,7 @@ import ChatMessage from "./components/ChatMessage";
 import ChatInput from "./components/ChatInput";
 import TypingIndicator from "./components/TypingIndicator";
 import { sendMessage } from "./api";
+import LogoMarquee from "./components/LogoMarquee";
 
 const SUGGESTIONS = [
   "Give me a quick summary of Tommy",
@@ -99,19 +100,24 @@ export default function App() {
           </div>
         </header>
 
-        {/* Suggestion chips */}
+        {/* Company logos */}
+        {!hasMessages && <LogoMarquee />}
+
+        {/* Suggestion chips — auto-scrolling */}
         {!hasMessages && (
-          <div className="suggestions">
-            {SUGGESTIONS.map((s) => (
-              <button
-                key={s}
-                className="suggestion-chip"
-                onClick={() => handleSuggestion(s)}
-                disabled={loading}
-              >
-                {s}
-              </button>
-            ))}
+          <div className="suggestions-marquee">
+            <div className="suggestions-track">
+              {[...SUGGESTIONS, ...SUGGESTIONS].map((s, i) => (
+                <button
+                  key={i}
+                  className="suggestion-chip"
+                  onClick={() => handleSuggestion(s)}
+                  disabled={loading}
+                >
+                  {s}
+                </button>
+              ))}
+            </div>
           </div>
         )}
 

src/components/LogoMarquee.jsx

@@ -0,0 +1,32 @@
+export default function LogoMarquee() {
+  const companies = [
+    { name: "Socket", logo: "https://socket.dev/_next/image?url=%2Fimages%2Flogo-280x80.png&w=256&q=75" },
+    { name: "Nodies", logo: "https://www.nodies.app/_next/image?url=%2Fimages%2Fnodies-logo-dark.png&w=256&q=75" },
+    { name: "Amazon Web Services", logo: "https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" },
+    { name: "CGI Federal", logo: "https://upload.wikimedia.org/wikipedia/commons/3/32/CGI_logo.svg" },
+    { name: "Pocket Network", logo: "https://pocket.network/wp-content/uploads/2025/01/logo-white.png" },
+  ];
+
+  // Double the list for seamless loop
+  const items = [...companies, ...companies];
+
+  return (
+    <div className="logo-marquee-wrapper">
+      <span className="marquee-label">Previously at</span>
+      <div className="logo-marquee">
+        <div className="logo-marquee-track">
+          {items.map((company, i) => (
+            <div key={i} className="logo-marquee-item">
+              <img
+                src={company.logo}
+                alt={company.name}
+                className="logo-marquee-img"
+                loading="lazy"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -247,16 +247,92 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* ======================== SUGGESTION CHIPS ======================== */
+/* ======================== LOGO MARQUEE ======================== */
+
+.logo-marquee-wrapper {
+  flex-shrink: 0;
+  padding: 8px 0 4px;
+  text-align: center;
+  animation: fadeIn 0.6s ease-out 0.35s both;
+  overflow: hidden;
+}
+
+.marquee-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 10px;
+  opacity: 0.6;
+}
+
+.logo-marquee {
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
 
-.suggestions {
+.logo-marquee-track {
   display: flex;
-  flex-wrap: wrap;
+  gap: 32px;
+  width: max-content;
+  animation: marqueeScroll 20s linear infinite;
+}
+
+.logo-marquee-item {
+  display: flex;
+  align-items: center;
   gap: 8px;
-  justify-content: center;
-  padding: 12px 0 8px;
   flex-shrink: 0;
+}
+
+.logo-marquee-img {
+  height: 24px;
+  max-width: 120px;
+  object-fit: contain;
+  filter: brightness(0.9) grayscale(0.3);
+  opacity: 0.8;
+  transition: opacity 0.3s, filter 0.3s;
+}
+
+.logo-marquee-item:hover .logo-marquee-img {
+  opacity: 1;
+  filter: brightness(1) grayscale(0);
+}
+
+@keyframes marqueeScroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+/* ======================== SUGGESTION CHIPS ======================== */
+
+.suggestions-marquee {
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: 10px 0 6px;
   animation: fadeIn 0.6s ease-out 0.4s both;
+  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+}
+
+.suggestions-track {
+  display: flex;
+  gap: 10px;
+  width: max-content;
+  animation: suggestionsScroll 25s linear infinite;
+}
+
+.suggestions-track:hover,
+.suggestions-track:active {
+  animation-play-state: paused;
+}
+
+@keyframes suggestionsScroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
 }
 
 @keyframes fadeIn {
@@ -741,29 +817,36 @@ body {
     height: 12px;
   }
 
-  /* Horizontal scroll chips on mobile like native apps */
-  .suggestions {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    gap: 8px;
-    padding: 8px 0 6px;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    scroll-snap-type: x proximity;
-    scroll-padding: 0 12px;
+  .logo-marquee-track {
+    gap: 24px;
+    animation-duration: 15s;
   }
 
-  .suggestions::-webkit-scrollbar {
-    display: none;
+  .logo-marquee-img {
+    height: 20px;
+    max-width: 100px;
+  }
+
+  .logo-marquee-name {
+    font-size: 12px;
+  }
+
+  .marquee-label {
+    font-size: 9px;
+    margin-bottom: 8px;
+  }
+
+  .suggestions-marquee {
+    padding: 6px 0 4px;
+  }
+
+  .suggestions-track {
+    animation-duration: 20s;
   }
 
   .suggestion-chip {
     font-size: 13px;
     padding: 10px 16px;
-    flex-shrink: 0;
-    scroll-snap-align: start;
   }
 
   /* Remove hover effects on touch — use active states instead */