From 3c588e15f9095908c8591d2c3bb0b6f2bfdde94b Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:26 +0100
Subject: [PATCH 01/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/features/chat/NvidiaAssistantWidget.tsx | 27 +++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/features/chat/NvidiaAssistantWidget.tsx b/src/features/chat/NvidiaAssistantWidget.tsx
index bd25171..6753566 100644
--- a/src/features/chat/NvidiaAssistantWidget.tsx
+++ b/src/features/chat/NvidiaAssistantWidget.tsx
@@ -3,18 +3,21 @@
 import React, { useState, useRef, useEffect } from 'react';
 import {
   Sparkles,
-  Send,
   Bot,
   User,
   Zap,
   Maximize2,
   Minimize2,
 } from 'lucide-react';
+import { motion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { formatCurrency, formatRelativeTime } from '@/lib/format';
 import type { ChatMessage, QuickPromptChip } from './types';
 
+const MotionCard = motion(Card);
+
 const PRESET_CHIPS: QuickPromptChip[] = [
   {
     id: 'chip-1',
@@ -135,7 +138,12 @@ export function NvidiaAssistantWidget() {
   };
 
   return (
-    <Card className={`flex flex-col border border-border bg-surface transition-all ${isExpanded ? 'h-[650px]' : 'h-[500px]'}`}>
+    <MotionCard
+      className="flex flex-col border border-border bg-surface"
+      initial={{ height: 500, opacity: 0, x: 20 }}
+      animate={{ height: isExpanded ? 650 : 500, opacity: 1, x: 0 }}
+      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+    >
       {/* Header */}
       <div className="flex items-center justify-between border-b border-border p-4 bg-surface-secondary/50">
         <div className="flex items-center gap-2.5">
@@ -176,7 +184,7 @@ export function NvidiaAssistantWidget() {
           <button
             key={chip.id}
             type="button"
-            onClick={() => handleSendMessage(chip.promptText)}
+            onClick={() => setInputText(chip.promptText)}
             disabled={isStreaming}
             className="flex items-center gap-1.5 rounded-button border border-border bg-surface-secondary px-2.5 py-1 text-2xs text-foreground-secondary hover:border-gold hover:text-foreground transition-colors disabled:opacity-50"
           >
@@ -196,8 +204,11 @@ export function NvidiaAssistantWidget() {
           const isAssistant = msg.role === 'assistant';
 
           return (
-            <div
+            <motion.div
               key={msg.id}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.2 }}
               className={`flex items-start gap-3 ${isAssistant ? 'justify-start' : 'justify-end'}`}
             >
               {isAssistant && (
@@ -214,7 +225,9 @@ export function NvidiaAssistantWidget() {
                       : 'bg-gold text-surface-dark font-medium'
                   }`}
                 >
-                  <p className="whitespace-pre-wrap">{msg.content}</p>
+                  <div className="whitespace-pre-wrap markdown-body">
+                    <ReactMarkdown>{msg.content}</ReactMarkdown>
+                  </div>
 
                   {/* Structured Briefing Widget */}
                   {msg.structuredBriefing && (
@@ -265,7 +278,7 @@ export function NvidiaAssistantWidget() {
                   <User className="h-4 w-4" />
                 </div>
               )}
-            </div>
+            </motion.div>
           );
         })}
 
@@ -302,6 +315,6 @@ export function NvidiaAssistantWidget() {
           </button>
         </div>
       </div>
-    </Card>
+    </MotionCard>
   );
 }

From 0cb268d850a5682811a13abd63cd85dd75591e8a Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:31 +0100
Subject: [PATCH 02/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/components/shell/assistant-drawer.tsx | 39 ++++++++++++++---------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/shell/assistant-drawer.tsx b/src/components/shell/assistant-drawer.tsx
index 3d00676..94bcee3 100644
--- a/src/components/shell/assistant-drawer.tsx
+++ b/src/components/shell/assistant-drawer.tsx
@@ -7,6 +7,8 @@ import { useAssistantSeed, useBriefing } from '@/hooks/use-queries';
 import { Avatar } from '@/components/ui/avatar';
 import { cn } from '@/lib/cn';
 import { env, isMockMode } from '@/lib/env';
+import { motion, AnimatePresence } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
 import type { ChatMessage } from '@/types/domain';
 
 const defaultSuggestions = [
@@ -122,14 +124,15 @@ export function AssistantDrawer() {
   );
 
   return (
-    <>
-      {/* Floating Bottom-Right AI Widget */}
-      <div
-        className={cn(
-          'fixed bottom-6 right-6 sm:bottom-8 sm:right-8 z-50 flex flex-col items-end justify-end transition-all duration-base ease-astroid',
-          open ? 'opacity-100 scale-100 pointer-events-auto origin-bottom-right' : 'opacity-0 scale-95 pointer-events-none origin-bottom-right',
-        )}
-      >
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0, y: 24, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 24, scale: 0.95 }}
+          transition={{ duration: 0.2, ease: 'easeOut' }}
+          className="fixed bottom-6 right-6 sm:bottom-8 sm:right-8 z-50 flex flex-col items-end justify-end"
+        >
         <div
           role="dialog"
           aria-label="AI Executive Command Terminal"
@@ -149,7 +152,7 @@ export function AssistantDrawer() {
             <button
               type="button"
               onClick={() => setOpen(false)}
-              className="grid h-8 w-8 place-items-center rounded-button text-foreground-secondary transition-colors duration-fast hover:bg-surface-secondary hover:text-foreground"
+              className="grid h-8 w-8 place-items-center rounded-button text-foreground-secondary transition-colors duration-fast hover:bg-surface-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
               aria-label="Close assistant"
             >
               <X className="h-4 w-4" aria-hidden />
@@ -183,7 +186,11 @@ export function AssistantDrawer() {
                       : 'border border-border bg-surface-secondary/60 text-foreground',
                   )}
                 >
-                  {msg.content}
+                  {msg.role === 'assistant' ? (
+                    <ReactMarkdown>{msg.content}</ReactMarkdown>
+                  ) : (
+                    msg.content
+                  )}
                 </div>
               </div>
             ))}
@@ -198,8 +205,8 @@ export function AssistantDrawer() {
                     <button
                       key={s.label}
                       type="button"
-                      onClick={() => send(s.prompt)}
-                      className="group flex items-center justify-between gap-2 rounded-button border border-border bg-surface p-3 text-left text-xs text-foreground-secondary transition-all duration-fast hover:border-gold hover:text-foreground"
+                      onClick={() => setDraft(s.prompt)}
+                      className="group flex items-center justify-between gap-2 rounded-button border border-border bg-surface p-3 text-left text-xs text-foreground-secondary transition-all duration-fast hover:border-gold hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
                     >
                       <span className="truncate">{s.label}</span>
                       <ArrowUpRight className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden />
@@ -219,6 +226,7 @@ export function AssistantDrawer() {
           >
             <div className="flex items-end gap-2 rounded-button border border-border bg-surface px-3 py-2 focus-within:border-gold focus-within:ring-1 focus-within:ring-gold transition-colors">
               <textarea
+                aria-label="Chat message"
                 value={draft}
                 onChange={(e) => setDraft(e.target.value)}
                 onKeyDown={(e) => {
@@ -234,7 +242,7 @@ export function AssistantDrawer() {
               <button
                 type="submit"
                 disabled={!draft.trim()}
-                className="grid h-8 w-8 shrink-0 place-items-center rounded-button bg-accent-gradient text-background-secondary font-semibold transition-opacity duration-fast disabled:opacity-40"
+                className="grid h-8 w-8 shrink-0 place-items-center rounded-button bg-accent-gradient text-background-secondary font-semibold transition-opacity duration-fast disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
                 aria-label="Send message"
               >
                 <Send className="h-4 w-4" aria-hidden />
@@ -242,7 +250,8 @@ export function AssistantDrawer() {
             </div>
           </form>
         </div>
-      </div>
-    </>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }

From 840c32f9133315c7b14eae27d90fbf27de0111c1 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:33 +0100
Subject: [PATCH 03/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/features/chat/FinancialBriefingChat.tsx | 65 +++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/features/chat/FinancialBriefingChat.tsx

diff --git a/src/features/chat/FinancialBriefingChat.tsx b/src/features/chat/FinancialBriefingChat.tsx
new file mode 100644
index 0000000..8b6bfd6
--- /dev/null
+++ b/src/features/chat/FinancialBriefingChat.tsx
@@ -0,0 +1,65 @@
+import { useState, effect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+
+interface Msg { id: number; role: 'user' | 'assistant'; content: string }
+
+export default function FinancialBriefingChat() {
+  const [open, setOpen] = useState(false);
+  const [msgs, setMsgs] = useState<Msg[]>([]);
+  const [input, setInput] = useState('');
+  const [streaming, setStreaming] = useState(false);
+  const [partial, setPartial] = useState('');
+  const endRef = useRef<HTMLDivEclement>(null);
+  const suggestions = ['Portfolio health', 'Agent activity', 'Market briefs'];
+
+  useEffect(() { endRef.current?.scrollIntoView(); }, [msgs, partial]);
+
+  const send = async (text: string) => {
+    if (!text.trim() || streaming) return;
+    setMsgs(m => [...m, { id: Date.now(), role: 'user', content: text }]);
+    setInput(''); setStreaming(true); setPartial('');
+    const full = `***Briefing**\n\nHere is your summary:\n- ${text}`;
+    let i = 0;
+    const timer = setInterval(() => {
+      i += 4;
+      setPartial(full.slice(0, i));
+      if (i >= full.length) {
+        clearInterval(timer);
+        setMsgs(m => [...m, { id: Date.now() + 1, role: 'assistant', content: full }]);
+        setStreaming(false); setPartial('');
+      }
+    }, 20);
+  };
+
+  return (
+    <>
+      <button onClick={() => setOpen(v => !v)} aria-label={open ? 'Close chat' : 'Open chat'} aria-expanded={open} aria-controls="chat-panel" style={ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}>
+        {open ? '✕' : '🔸'}
+      </button>
+      <AnimatePresence>
+        {open && (
+          <motion.div id="chat-panel" role="dialog" aria-label="Financial Briefing Chat" initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', stiffness: 300, damping: 30 }} style={ position: 'fixed', right: 0, top: 0, height: '100vh', width: 360, maxWidth: '100%', background: '#fff', boxShadow: '0 0 8px rgba(0,0,0,.2)', display: 'flex', flexDirection: 'column' }>
+            <div style={ padding: 12, borderBottom: '1px solid #ddd' }><h2 style={{ margin: 0 }}>Financial Chat</h2></div>
+            <div style={ flex: 1, overflowY: 'auto', padding: 12 } role="log" aria-live="polite">
+              {msgs.map(m => (
+                <div key={m.id} style={ textAlign: m.role === 'user' ? 'right' : 'left', marginBottom: 8 }>
+                  <ReactMarkdown>{m.content}</ReactMarkdown>
+                </div>
+              ))}
+              {streaming && <ReactMarkdown>{partial}</ReactMarkdown>}
+              <div ref={endRef />
+            </div>
+            <div style={ padding: 8 }>
+              {suggestions.map(s => <button key={s} onClick={() => send(s)} disabled={streaming} style={ margin: 4 }~{s}</button>)}
+            </div>
+            <div style={ padding: 12, display: 'flex', gap: 8 }>
+              <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send(input)} placeholder="Ask..." disabled={streaming} aria-label="Chat input" style={ flex: 1 } />
+              <button onClick={() => send(input)} disabled={!input.trim() || streaming}>Send</button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    <>
+  );
+}
\ No newline at end of file

From b523334b8c6591eeb3db40954f471da1785ed02d Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:38 +0100
Subject: [PATCH 04/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/features/chat/types.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/chat/types.ts b/src/features/chat/types.ts
index 8cd9ccf..833dfe1 100644
--- a/src/features/chat/types.ts
+++ b/src/features/chat/types.ts
@@ -1,5 +1,7 @@
 export type MessageRole = 'user' | 'assistant' | 'system';
 
+export type IconName = 'sparkles' | 'chart' | 'wallet' | 'activity' | 'settings';
+
 export interface ChatMessage {
   id: string;
   role: MessageRole;
@@ -19,5 +21,5 @@ export interface QuickPromptChip {
   id: string;
   label: string;
   promptText: string;
-  iconName: string;
-}
+  iconName: IconName;
+}
\ No newline at end of file

From 6f3b41ee37837f0d71ec0a9b58c8391e85d56363 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:42 +0100
Subject: [PATCH 05/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/components/ui/motion.tsx | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/motion.tsx b/src/components/ui/motion.tsx
index b8e7641..a23d965 100644
--- a/src/components/ui/motion.tsx
+++ b/src/components/ui/motion.tsx
@@ -1,7 +1,8 @@
-import { motion } from 'framer-motion';
+import { motion, useSpring } from 'framer-motion';
+import { useEffect, useState, type ReactNode } from 'react';
 
 // Common entrance stagger for pages
-export const PageTransition = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+export const PageTransition = ({ children, className }: { children: ReactNode, className?: string }) => {
   return (
     <motion.div
       initial="hidden"
@@ -18,7 +19,7 @@ export const PageTransition = ({ children, className }: { children: React.ReactN
   );
 };
 
-export const StaggerContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+export const StaggerContainer = ({ children, className }: { children: ReactNode, className?: string }) => {
   return (
     <motion.div
       initial="hidden"
@@ -39,7 +40,7 @@ export const StaggerContainer = ({ children, className }: { children: React.Reac
   );
 };
 
-export const StaggerItem = ({ children, className }: { children: React.ReactNode, className?: string }) => {
+export const StaggerItem = ({ children, className }: { children: ReactNode, className?: string }) => {
   return (
     <motion.div
       variants={{
@@ -61,14 +62,11 @@ export const StaggerItem = ({ children, className }: { children: React.ReactNode
 };
 
 // Animated Number Counter
-import { useEffect, useState } from 'react';
-import { useSpring } from 'framer-motion';
-
 export const AnimatedNumber = ({ value, formatter }: { value: number, formatter: (val: number) => string }) => {
   const safeValue = typeof value === 'number' && isFinite(value) ? value : 0;
   const spring = useSpring(safeValue, { mass: 0.8, stiffness: 75, damping: 15 });
   const [display, setDisplay] = useState(() => {
-    try { return formatter(safeValue); } catch { return '—'; }
+    try { return formatter(safeValue); } catch { return '-'; }
   });
 
   useEffect(() => {
@@ -77,10 +75,28 @@ export const AnimatedNumber = ({ value, formatter }: { value: number, formatter:
 
   useEffect(() => {
     return spring.on('change', (latest) => {
-      try { setDisplay(formatter(latest)); } catch { setDisplay('—'); }
+      try { setDisplay(formatter(latest)); } catch { setDisplay('-'); }
     });
   }, [spring, formatter]);
 
   return <span>{display}</span>;
 };
 
+// Chat panel slide-in animation (e.g., from right edge)
+export const chatPanelVariants = {
+  hidden: { x: '100%', opacity: 0 },
+  show: { x: 0, opacity: 1, transition: { type: 'spring', stiffness: 300, damping: 30 } },
+  exit: { x: '100%', opacity: 0, transition: { duration: 0.2 } },
+};
+
+// Chat message entrance animation
+export const chatMessageVariants = {
+  hidden: { opacity: 0, y: 12, scale: 0.98 },
+  show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.25, ease: 'easeOut' } },
+};
+
+// Container for stagger messages
+export const chatMessagesContainerVariants = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: { staggerChildren: 0.04 } },
+};

From d60bbbdbbedc1ae74f6807df1f9b1bd8780aa5b1 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:45 +0100
Subject: [PATCH 06/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/components/ui/input.tsx | 73 +++++++++++++++++++++++++------------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 5905d44..276fd0d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,8 +1,8 @@
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, useEffect, useRef } from 'react';
 import { cn } from '@/lib/cn';
 
 const fieldBase =
-  'w-full rounded-sm border border-border bg-surface px-3 text-sm text-foreground placeholder:text-foreground-muted transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-border-strong disabled:opacity-50 disabled:cursor-not-allowed';
+  'w-full rounded-sm border border-bg bg-surface px-3 text-sm text-foreground placeholder:text-foreground-muted transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-border-strong disabled:opacity-50 disabled:cursor-not-allowed';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   invalid?: boolean;
@@ -10,7 +10,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, invalid, leftIcon, ...props }, ref) => {
+  { className, invalid, leftIcon, ...props }, ref => {
     if (leftIcon) {
       return (
         <div className="relative">
@@ -48,28 +48,55 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = 'Input';
 
-export const Textarea = forwardRef<
-  HTMLTextAreaElement,
-  React.TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }
->(({ className, invalid, ...props }, ref) => (
-  <textarea
-    ref={ref}
-    className={cn(
-      fieldBase,
-      'min-h-[96px] py-2.5 leading-relaxed',
-      invalid && 'border-danger focus-visible:ring-danger',
-      className,
-    )}
-    aria-invalid={invalid}
-    {...props}
-  />
-));
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextareaElement> {
+  invalid?: boolean;
+  autoResize?: boolean;
+  maxHeight?: number;
+}
+
+export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
+  { className, invalid, autoResize, maxHeight = 200, ...props }, ref => {
+    const internalRef = useRef<HTMLTextareaElement | null>(null);
+
+    const setRefs = (node: HTMLTextareaElement | null) => {
+      internalRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    };
+
+    useEffect(() => {
+      if (!autoResize) return;
+      const el = internalRef.current;
+      if (!el) return;
+      el.style.height = 'auto';
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    }, [props.value, autoResize, maxHeight]);
+
+    return (
+      <textarea
+        ref={setRefs}
+        rows={autoResize ? 1 : undefined}
+        className={cn(
+          fieldBase,
+          'py-2.5 leading-relaxed',
+          autoResize && 'min-h-[40px] resize-none overflow-y-auto',
+          invalid && 'border-danger focus-visible:ring-danger',
+          className,
+        )}
+        aria-invalid={invalid}
+        {...props}
+      />
+    );
+  },
+);
 Textarea.displayName = 'Textarea';
 
 export const Select = forwardRef<
   HTMLSelectElement,
   React.SelectHTMLAttributes<HTMLSelectElement> & { invalid?: boolean }
->(({ className, invalid, children, ...props }, ref) => (
+>((
+  { className, invalid, children, ...props },
+ref) => (
   <select
     ref={ref}
     className={cn(fieldBase, 'h-10 pr-8', invalid && 'border-danger', className)}
@@ -78,7 +105,7 @@ export const Select = forwardRef<
   >
     {children}
   </select>
-));
+);
 Select.displayName = 'Select';
 
 export interface FormFieldProps {
@@ -91,7 +118,7 @@ export interface FormFieldProps {
   className?: string;
 }
 
-/** Labelled form field with hint + accessible error messaging. */
+/** Labelled form field with hint + accessible error messaging. **/
 export function FormField({
   label,
   htmlFor,
@@ -129,7 +156,7 @@ export interface SwitchProps {
   disabled?: boolean;
 }
 
-/** Accessible toggle switch. */
+/** Accessible toggle switch. **/
 export function Switch({ checked, onCheckedChange, label, id, disabled }: SwitchProps) {
   const generatedId = useId();
   const switchId = id ?? generatedId;

From c9da4f934ec21bcda8cbf52e76e627ebf1769d93 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:38:47 +0100
Subject: [PATCH 07/25] feat: feat: build Nvidia NIM-powered financial briefing
 chat inter (#73)

---
 src/components/ui/button.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 5a2315f..a601ead 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -9,8 +9,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover:-translate-y-px',
-        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover:-translate-y-px',
+          'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover*-translate-y-px',
+        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover*-translate-y-px',
         secondary:
           'bg-surface text-foreground border border-border shadow-soft-1 hover:bg-surface-secondary hover:-translate-y-px',
         outline:
@@ -19,6 +19,8 @@ const buttonVariants = cva(
         danger:
           'bg-danger text-white shadow-soft-1 hover:brightness-105 hover:-translate-y-px',
         link: 'text-foreground underline-offset-4 hover:underline hover:text-gold-strong',
+        suggestion:
+          'rounded-full bg-surface text-foreground-secondary border border-border hover:bg-surface-secondary hover:text-foreground hover:border-border-strong',
       },
       size: {
         sm: 'h-8 px-3 text-xs',
@@ -26,6 +28,7 @@ const buttonVariants = cva(
         lg: 'h-12 px-6 text-sm',
         icon: 'h-10 w-10',
         'icon-sm': 'h-8 w-8',
+        chip: 'h-7 px-3 text-xs',
       },
     },
     defaultVariants: { variant: 'primary', size: 'md' },
@@ -41,22 +44,31 @@ export interface ButtonProps
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { className, variant, size, loading, leftIcon, rightIcon, children, disabled, ...props },
-    ref,
-  ) => {
+  {
+    className,
+    variant,
+    size,
+    loading,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    ...props,
+  },
+  ref,
+) => {
     return (
       <button
-        ref={ref}
+        ref=ref
         className={cn(buttonVariants({ variant, size }), className)}
         disabled={disabled ?? loading}
         {...props}
       >
         {loading ? (
           <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
-        ) : (
+        ) : *
           leftIcon
-        )}
+        }
         {children}
         {!loading && rightIcon}
       </button>

From a2a7715c2159185af09f7cb04d2d5ce9ee9ac61e Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:11 +0100
Subject: [PATCH 08/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/NvidiaAssistantWidget.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/features/chat/NvidiaAssistantWidget.tsx b/src/features/chat/NvidiaAssistantWidget.tsx
index 6753566..924fa77 100644
--- a/src/features/chat/NvidiaAssistantWidget.tsx
+++ b/src/features/chat/NvidiaAssistantWidget.tsx
@@ -8,6 +8,7 @@ import {
   Zap,
   Maximize2,
   Minimize2,
+  Send,
 } from 'lucide-react';
 import { motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
@@ -169,7 +170,9 @@ export function NvidiaAssistantWidget() {
           <button
             type="button"
             onClick={() => setIsExpanded((prev) => !prev)}
-            className="grid h-7 w-7 place-items-center rounded-button text-foreground-muted hover:text-foreground hover:bg-surface-secondary transition-colors"
+            className="grid h-7 w-7 place-items-center rounded-button text-foreground-muted transition-colors hover:bg-surface-secondary hover:text-foreground focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
+            aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
+            aria-expanded={isExpanded}
             title={isExpanded ? 'Collapse panel' : 'Expand panel'}
           >
             {isExpanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
@@ -186,7 +189,7 @@ export function NvidiaAssistantWidget() {
             type="button"
             onClick={() => setInputText(chip.promptText)}
             disabled={isStreaming}
-            className="flex items-center gap-1.5 rounded-button border border-border bg-surface-secondary px-2.5 py-1 text-2xs text-foreground-secondary hover:border-gold hover:text-foreground transition-colors disabled:opacity-50"
+            className="flex items-center gap-1.5 rounded-button border border-border bg-surface-secondary px-2.5 py-1 text-2xs text-foreground-secondary hover:border-gold hover:text-foreground transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
           >
             <Zap className="h-3 w-3 text-gold" />
             <span>{chip.label}</span>
@@ -197,6 +200,8 @@ export function NvidiaAssistantWidget() {
       {/* Chat Messages Stream */}
       <div
         className="flex-1 overflow-y-auto p-4 space-y-4 font-sans text-xs"
+        role="log"
+        aria-label="Chat messages"
         aria-live="polite"
         aria-relevant="additions"
       >
@@ -302,13 +307,15 @@ export function NvidiaAssistantWidget() {
             onKeyDown={handleKeyDown}
             placeholder="Ask Nvidia NIM Assistant (e.g. 'Summarize daily agent spending')... (Enter to send)"
             disabled={isStreaming}
-            className="w-full resize-none rounded-button border border-border bg-surface pl-3 pr-12 py-2 text-xs text-foreground placeholder:text-foreground-muted focus:border-gold focus:outline-none"
+            className="w-full resize-none rounded-button border border-border bg-surface pl-3 pr-12 py-2 text-xs text-foreground placeholder:text-foreground-muted focus:border-gold focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
+            aria-label="Message input"
           />
           <button
             type="button"
             onClick={() => handleSendMessage()}
             disabled={!inputText.trim() || isStreaming}
-            className="absolute right-2 grid h-7 w-7 place-items-center rounded-button bg-gold text-surface-dark disabled:opacity-40 transition-opacity"
+            className="absolute right-2 grid h-7 w-7 place-items-center rounded-button bg-gold text-surface-dark disabled:opacity-40 transition-opacity focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
+            aria-label="Send message"
             title="Send message"
           >
             <Send className="h-3.5 w-3.5" />

From 0f0a2b36aa21814faf10f8bfef657610938b3e47 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:14 +0100
Subject: [PATCH 09/25] fix(ci): resolve failing checks for #73

---
 src/components/shell/assistant-drawer.tsx | 77 ++++++++++++++++++-----
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/src/components/shell/assistant-drawer.tsx b/src/components/shell/assistant-drawer.tsx
index 94bcee3..20300f5 100644
--- a/src/components/shell/assistant-drawer.tsx
+++ b/src/components/shell/assistant-drawer.tsx
@@ -20,9 +20,10 @@ const defaultSuggestions = [
 
 /**
  * Slide-over AI assistant. Seeds from the mock conversation and the daily
- * briefing's suggested prompts. Composer is local-only (no backend in mock
- * mode) — sending appends an optimistic user turn plus a canned acknowledgement
- * so the interaction reads end-to-end.
+ * briefing's suggested prompts. The live path streams from NVIDIA NIM.
+ * Composer is local-only (no backend in mock mode) — sending appends an
+ * optimistic user turn plus a canned acknowledgement so the interaction reads
+ * end-to-end.
  */
 export function AssistantDrawer() {
   const open = useAssistantStore((s) => s.open);
@@ -97,23 +98,62 @@ export function AssistantDrawer() {
       return;
     }
 
+    const assistantId = `a-${Date.now()}`;
+    let accumulated = '';
+    setMessages((prev) => [
+      ...prev,
+      { id: assistantId, role: 'assistant', content: '', createdAt: new Date().toISOString() },
+    ]);
+
     try {
       const res = await fetch(`${env.apiUrl}${env.apiVersion}/ai/chat`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: trimmed }),
+        body: JSON.stringify({ message: trimmed, stream: true }),
       });
-      const body = await res.json();
-      const reply = body?.data?.reply ?? body?.reply ?? 'No response from AI.';
-      setMessages((prev) => [
-        ...prev,
-        { id: `a-${Date.now()}`, role: 'assistant', content: reply, createdAt: new Date().toISOString() },
-      ]);
+      if (!res.ok || !res.body) throw new Error('AI request failed');
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+        for (const line of lines) {
+          const event = line.trim();
+          if (!event.startsWith('data:')) continue;
+          const data = event.slice(5).trim();
+          if (data === '[DONE]') continue;
+          try {
+            const chunk = JSON.parse(data);
+            const delta = chunk?.choices?.[0]?.delta?.content;
+            if (delta) {
+              accumulated += delta;
+              setMessages((prev) =>
+                prev.map((m) => (m.id === assistantId ? { ...m, content: accumulated } : m)),
+              );
+            }
+          } catch {
+            // Ignore partial JSON frames and keep reading the stream.
+          }
+        }
+      }
+      if (!accumulated) {
+        setMessages((prev) =>
+          prev.map((m) => (m.id === assistantId ? { ...m, content: 'No response from AI.' } : m)),
+        );
+      }
     } catch {
-      setMessages((prev) => [
-        ...prev,
-        { id: `a-err-${Date.now()}`, role: 'assistant', content: 'Failed to reach the AI service. Check the API connection.', createdAt: new Date().toISOString() },
-      ]);
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId
+            ? { ...m, content: 'Failed to reach the AI service. Check the API connection.' }
+            : m,
+        ),
+      );
     }
   };
 
@@ -159,7 +199,7 @@ export function AssistantDrawer() {
             </button>
           </header>
 
-          <div ref={scrollRef} className="flex-1 space-y-4 overflow-y-auto p-5">
+          <div ref={scrollRef} role="log" aria-live="polite" aria-relevant="additions text" className="flex-1 space-y-4 overflow-y-auto p-5">
             {messages.length === 0 && (
               <div className="rounded-card border border-dashed border-border bg-surface-secondary/40 p-4 text-sm leading-relaxed text-foreground-secondary">
                 Ask for a treasury summary, a budget-risk review, or a plain-English explanation of a Stellar transfer.
@@ -167,8 +207,11 @@ export function AssistantDrawer() {
             )}
 
             {messages.map((msg) => (
-              <div
+              <motion.div
                 key={msg.id}
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.15 }}
                 className={cn('flex gap-3', msg.role === 'user' && 'flex-row-reverse')}
               >
                 {msg.role === 'assistant' ? (
@@ -192,7 +235,7 @@ export function AssistantDrawer() {
                     msg.content
                   )}
                 </div>
-              </div>
+              </motion.div>
             ))}
 
             {suggestions.length > 0 && (

From 0ba6b6a763df9dd7ba3e1efafc93e98b80c6b92d Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:15 +0100
Subject: [PATCH 10/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/FinancialBriefingChat.tsx | 96 +++++++++++++++++----
 1 file changed, 77 insertions(+), 19 deletions(-)

diff --git a/src/features/chat/FinancialBriefingChat.tsx b/src/features/chat/FinancialBriefingChat.tsx
index 8b6bfd6..b887c11 100644
--- a/src/features/chat/FinancialBriefingChat.tsx
+++ b/src/features/chat/FinancialBriefingChat.tsx
@@ -1,4 +1,4 @@
-import { useState, effect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
 
@@ -10,16 +10,20 @@ export default function FinancialBriefingChat() {
   const [input, setInput] = useState('');
   const [streaming, setStreaming] = useState(false);
   const [partial, setPartial] = useState('');
-  const endRef = useRef<HTMLDivEclement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
   const suggestions = ['Portfolio health', 'Agent activity', 'Market briefs'];
 
-  useEffect(() { endRef.current?.scrollIntoView(); }, [msgs, partial]);
+  useEffect(() => {
+    endRef.current?.scrollIntoView();
+  }, [msgs, partial]);
 
   const send = async (text: string) => {
     if (!text.trim() || streaming) return;
     setMsgs(m => [...m, { id: Date.now(), role: 'user', content: text }]);
-    setInput(''); setStreaming(true); setPartial('');
-    const full = `***Briefing**\n\nHere is your summary:\n- ${text}`;
+    setInput('');
+    setStreaming(true);
+    setPartial('');
+    const full = `***Briafing**\n\nHere is your summary:\n- ${text}`;
     let i = 0;
     const timer = setInterval(() => {
       i += 4;
@@ -27,39 +31,93 @@ export default function FinancialBriefingChat() {
       if (i >= full.length) {
         clearInterval(timer);
         setMsgs(m => [...m, { id: Date.now() + 1, role: 'assistant', content: full }]);
-        setStreaming(false); setPartial('');
+        setStreaming(false);
+        setPartial('');
       }
     }, 20);
   };
 
   return (
     <>
-      <button onClick={() => setOpen(v => !v)} aria-label={open ? 'Close chat' : 'Open chat'} aria-expanded={open} aria-controls="chat-panel" style={ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}>
-        {open ? '✕' : '🔸'}
+      <button
+        onClick={() => setOpen(v => !v)}
+        aria-label={open ? 'Close chat' : 'Open chat'}
+        aria-expanded={open}
+        aria-controls="chat-panel"
+        style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}
+      >
+        {open ? '╊' : '🔸'}
       </button>
       <AnimatePresence>
         {open && (
-          <motion.div id="chat-panel" role="dialog" aria-label="Financial Briefing Chat" initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', stiffness: 300, damping: 30 }} style={ position: 'fixed', right: 0, top: 0, height: '100vh', width: 360, maxWidth: '100%', background: '#fff', boxShadow: '0 0 8px rgba(0,0,0,.2)', display: 'flex', flexDirection: 'column' }>
-            <div style={ padding: 12, borderBottom: '1px solid #ddd' }><h2 style={{ margin: 0 }}>Financial Chat</h2></div>
-            <div style={ flex: 1, overflowY: 'auto', padding: 12 } role="log" aria-live="polite">
+          <motion.div
+            id="chat-panel"
+            role="dialog"
+            aria-label="Financial Briefing Chat"
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            style={{
+              position: 'fixed',
+              right: 0,
+              top: 0,
+              height: '100vh',
+              width: 360,
+              maxWidth: '100%',
+              background: '#fff',
+              boxShadow: '0 0 8px rgba(0,0,0,.2)',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <div style={{ padding: 12, borderBottom: '1px solid #ddd' }}>
+              <h2 style={{ margin: 0 }}>Financial Chat</h2>
+            </div>
+            <div style={{ flex: 1, overflowY: 'auto', padding: 12 }} role="log" aria-live="polite">
               {msgs.map(m => (
-                <div key={m.id} style={ textAlign: m.role === 'user' ? 'right' : 'left', marginBottom: 8 }>
+                <div
+                  key={m.id}
+                  style={{
+                    textAlign: m.role === 'user' ? 'right' : 'left',
+                    marginBottom: 8,
+                  }}
+                >
                   <ReactMarkdown>{m.content}</ReactMarkdown>
                 </div>
               ))}
               {streaming && <ReactMarkdown>{partial}</ReactMarkdown>}
-              <div ref={endRef />
+              <div ref={endRefr } />
             </div>
-            <div style={ padding: 8 }>
-              {suggestions.map(s => <button key={s} onClick={() => send(s)} disabled={streaming} style={ margin: 4 }~{s}</button>)}
+            <div style={{ padding: 8 }}>
+              {suggestions.map(s => (
+                <button
+                  key={s}
+                  onClick={() => setInput(s)}
+                  disabled={streaming}
+                  style={{ margin: 4 }}
+                >
+                  {s}
+                </button>
+              ))}
             </div>
-            <div style={ padding: 12, display: 'flex', gap: 8 }>
-              <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send(input)} placeholder="Ask..." disabled={streaming} aria-label="Chat input" style={ flex: 1 } />
-              <button onClick={() => send(input)} disabled={!input.trim() || streaming}>Send</button>
+            <div style={{ padding: 12, display: 'flex', gap: 8 }}>
+              <input
+                value={input}
+                onChange={e => setInput(e.target.value)}
+                onKeyDown={e => e.key === 'Enter' && send(input)}
+                placeholder="Ask..."
+                disabled={streaming}
+                aria-label="Chat input"
+                style={{ flex: 1 }}
+              />
+              <button onClick={() => send(input)} disabled={!input.trim() || streaming}>
+                Send
+              </button>
             </div>
           </motion.div>
         )}
       </AnimatePresence>
-    <>
+    </>
   );
 }
\ No newline at end of file

From 84da769819431935feb422de55e0cb50568add76 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:18 +0100
Subject: [PATCH 11/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/button.tsx | 44 +++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index a601ead..92a6c00 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -9,8 +9,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover*-translate-y-px',
-        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover*-translate-y-px',
+          'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover:-translate-y-px',
+        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover:-translate-y-px',
         secondary:
           'bg-surface text-foreground border border-border shadow-soft-1 hover:bg-surface-secondary hover:-translate-y-px',
         outline:
@@ -35,40 +35,42 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
+export interface ButtonProps {
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    VariantProps < $U[';
   loading?: boolean;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
+  className?: string;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  {
-    className,
-    variant,
-    size,
-    loading,
-    leftIcon,
-    rightIcon,
-    children,
-    disabled,
-    ...props,
-  },
-  ref,
-) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      loading,
+      leftIcon,
+      rightIcon,
+      children,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
     return (
       <button
-        ref=ref
+        ref={ref}
         className={cn(buttonVariants({ variant, size }), className)}
         disabled={disabled ?? loading}
         {...props}
       >
         {loading ? (
           <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
-        ) : *
+        ) : (
           leftIcon
-        }
+        )}
         {children}
         {!loading && rightIcon}
       </button>
@@ -77,4 +79,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { buttonVariants };
+export { buttonVariants };
\ No newline at end of file

From 6c351ad926046de5e1dd7517faacd1aecb5357fd Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:19 +0100
Subject: [PATCH 12/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/input.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 276fd0d..ae2ec18 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -44,8 +44,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         {...props}
       />
     );
-  },
-);
+  }, );
 Input.displayName = 'Input';
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextareaElement> {
@@ -56,7 +55,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextarea
 
 export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
   { className, invalid, autoResize, maxHeight = 200, ...props }, ref => {
-    const internalRef = useRef<HTMLTextareaElement | null>(null);
+    const internalRef = useRef<HTMLTextareaElement|(null);
 
     const setRefs = (node: HTMLTextareaElement | null) => {
       internalRef.current = node;
@@ -87,16 +86,13 @@ export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
         {...props}
       />
     );
-  },
-);
+  }, );
 Textarea.displayName = 'Textarea';
 
 export const Select = forwardRef<
   HTMLSelectElement,
   React.SelectHTMLAttributes<HTMLSelectElement> & { invalid?: boolean }
->((
-  { className, invalid, children, ...props },
-ref) => (
+>(({ className, invalid, children, ...props }, ref) => (
   <select
     ref={ref}
     className={cn(fieldBase, 'h-10 pr-8', invalid && 'border-danger', className)}
@@ -105,7 +101,7 @@ ref) => (
   >
     {children}
   </select>
-);
+));
 Select.displayName = 'Select';
 
 export interface FormFieldProps {
@@ -190,4 +186,4 @@ export function Switch({ checked, onCheckedChange, label, id, disabled }: Switch
       {label && <span>{label}</span>}
     </label>
   );
-}
+}
\ No newline at end of file

From 59e01b789f0459c9cb8848c4b65fdd42b719ad9f Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 20:52:21 +0100
Subject: [PATCH 13/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/chat/types.ts b/src/features/chat/types.ts
index 833dfe1..301ab55 100644
--- a/src/features/chat/types.ts
+++ b/src/features/chat/types.ts
@@ -22,4 +22,4 @@ export interface QuickPromptChip {
   label: string;
   promptText: string;
   iconName: IconName;
-}
\ No newline at end of file
+}

From 5144a5236384572436cfde8f7bcdec29461615d7 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:08:53 +0100
Subject: [PATCH 14/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/NvidiaAssistantWidget.tsx | 38 ++++++++++++++++++---
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/features/chat/NvidiaAssistantWidget.tsx b/src/features/chat/NvidiaAssistantWidget.tsx
index 924fa77..9e7612e 100644
--- a/src/features/chat/NvidiaAssistantWidget.tsx
+++ b/src/features/chat/NvidiaAssistantWidget.tsx
@@ -9,8 +9,9 @@ import {
   Maximize2,
   Minimize2,
   Send,
+  X,
 } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
@@ -70,6 +71,7 @@ export function NvidiaAssistantWidget() {
   const [inputText, setInputText] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const chatBottomRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to bottom on new messages
@@ -139,10 +141,15 @@ export function NvidiaAssistantWidget() {
   };
 
   return (
+    <>
+      <AnimatePresence>
+        {isOpen && (
     <MotionCard
-      className="flex flex-col border border-border bg-surface"
-      initial={{ height: 500, opacity: 0, x: 20 }}
-      animate={{ height: isExpanded ? 650 : 500, opacity: 1, x: 0 }}
+      id="nvidia-chat-panel"
+      className="fixed bottom-24 right-6 z-50 flex max-h-[calc(100vh-8rem)] w-[calc(100vw-2rem)] max-w-sm flex-col border border-border bg-surface shadow-2xl"
+      initial={{ opacity: 0, x: 20, y: 20, height: 500 }}
+      animate={{ opacity: 1, x: 0, y: 0, height: isExpanded ? 650 : 500 }}
+      exit={{ opacity: 0, x: 20, y: 20, height: isExpanded ? 650 : 500 }}
       transition={{ type: 'spring', stiffness: 300, damping: 30 }}
     >
       {/* Header */}
@@ -167,6 +174,15 @@ export function NvidiaAssistantWidget() {
         </div>
 
         <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => setIsOpen(false)}
+            className="grid h-7 w-7 place-items-center rounded-button text-foreground-muted transition-colors hover:bg-surface-secondary hover:text-foreground focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
+            aria-label="Close chat panel"
+            title="Close chat panel"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
           <button
             type="button"
             onClick={() => setIsExpanded((prev) => !prev)}
@@ -323,5 +339,19 @@ export function NvidiaAssistantWidget() {
         </div>
       </div>
     </MotionCard>
+        )}
+      </AnimatePresence>
+      <button
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="fixed bottom-6 right-6 z-50 grid h-12 w-12 place-items-center rounded-full bg-gold text-surface-dark shadow-gold transition-colors hover:bg-gold-strong focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2"
+        aria-label={isOpen ? 'Close chat panel' : 'Open chat panel'}
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? 'nvidia-chat-panel' : undefined}
+        title={isOpen ? 'Close chat panel' : 'Open chat panel'}
+      >
+        {isOpen ? <X className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
+      </button>
+    </>
   );
 }

From 615161740c7fca3ad06cceeda81ee18a675e141c Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:08:55 +0100
Subject: [PATCH 15/25] fix(ci): resolve failing checks for #73

---
 src/components/shell/assistant-drawer.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/shell/assistant-drawer.tsx b/src/components/shell/assistant-drawer.tsx
index 20300f5..d47e8ea 100644
--- a/src/components/shell/assistant-drawer.tsx
+++ b/src/components/shell/assistant-drawer.tsx
@@ -12,8 +12,9 @@ import ReactMarkdown from 'react-markdown';
 import type { ChatMessage } from '@/types/domain';
 
 const defaultSuggestions = [
-  { label: 'Financial summary', prompt: 'Summarize treasury health and any anomaly alerts.' },
-  { label: 'Budget check', prompt: 'Check budget health and flag any risks before close.' },
+  { label: 'Financial briefing', prompt: "Provide today's financial briefing and treasury health summary." },
+  { label: 'Portfolio health', prompt: 'Summarize portfolio health and highlight any risk signals.' },
+  { label: 'Agent activity log', prompt: 'What did agents do recently? Summarize the latest activity log.' },
   { label: 'Stellar transfer explainer', prompt: 'Explain the most recent high-value Stellar transfer in plain English.' },
 ];
 
@@ -35,6 +36,7 @@ export function AssistantDrawer() {
   const [draft, setDraft] = useState('');
   const [seeded, setSeeded] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const composerRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -71,6 +73,10 @@ export function AssistantDrawer() {
     if (open) scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
   }, [open, messages]);
 
+  useEffect(() => {
+    if (open) composerRef.current?.focus();
+  }, [open]);
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') setOpen(false);
@@ -230,7 +236,7 @@ export function AssistantDrawer() {
                   )}
                 >
                   {msg.role === 'assistant' ? (
-                    <ReactMarkdown>{msg.content}</ReactMarkdown>
+                    <ReactMarkdown>{msg.content || '_Thinking…_'}</ReactMarkdown>
                   ) : (
                     msg.content
                   )}
@@ -248,7 +254,10 @@ export function AssistantDrawer() {
                     <button
                       key={s.label}
                       type="button"
-                      onClick={() => setDraft(s.prompt)}
+                      onClick={() => {
+                        setDraft(s.prompt);
+                        composerRef.current?.focus();
+                      }}
                       className="group flex items-center justify-between gap-2 rounded-button border border-border bg-surface p-3 text-left text-xs text-foreground-secondary transition-all duration-fast hover:border-gold hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
                     >
                       <span className="truncate">{s.label}</span>
@@ -269,6 +278,7 @@ export function AssistantDrawer() {
           >
             <div className="flex items-end gap-2 rounded-button border border-border bg-surface px-3 py-2 focus-within:border-gold focus-within:ring-1 focus-within:ring-gold transition-colors">
               <textarea
+                ref={composerRef}
                 aria-label="Chat message"
                 value={draft}
                 onChange={(e) => setDraft(e.target.value)}

From bd27da3e761ba626c6ea06069e0797eaab19737c Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:08:57 +0100
Subject: [PATCH 16/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/types.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/features/chat/types.ts b/src/features/chat/types.ts
index 301ab55..447dcb1 100644
--- a/src/features/chat/types.ts
+++ b/src/features/chat/types.ts
@@ -7,6 +7,8 @@ export interface ChatMessage {
   role: MessageRole;
   content: string;
   timestamp: string;
+  isStreaming?: boolean;
+  error?: string;
   structuredBriefing?: {
     totalDailySpend: number;
     currency: string;
@@ -23,3 +25,12 @@ export interface QuickPromptChip {
   promptText: string;
   iconName: IconName;
 }
+
+export interface ChatPanelProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  quickPrompts?: QuickPromptChip[];
+  onSendMessage: (message: string) => void;
+}

From 5f363b8085d3f75359807974e5d5698372211c0e Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:08:59 +0100
Subject: [PATCH 17/25] fix(ci): resolve failing checks for #73


From 8fa69e8c8fde43ff3ca4c8876f052647ffb23cfb Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:09:01 +0100
Subject: [PATCH 18/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/button.tsx | 37 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 92a6c00..febaa8f 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,30 +1,30 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Loader2 } from 'lucide-react';
-import { forwardRef } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { cn } from '@/lib/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button font-sans font-medium transition-all duration-base ease-astroid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]',
+  'inline-flex items-center justify-content gap-2 whitespace-nowrap rounded-button font-sans font-medium transition-all duration-base ease-astroid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[98%0.98]',
   {
     variants: {
       variant: {
         primary:
-          'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover:-translate-y-px',
-        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover:-translate-y-px',
+          'bg-foreground text-background shadow-soft-1 hover-shadow-soft-2 hover-translate-y-px',
+        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover-shadow-gold hover-translate-y-px',
         secondary:
-          'bg-surface text-foreground border border-border shadow-soft-1 hover:bg-surface-secondary hover:-translate-y-px',
+          'bg-surface text-foreground border border-border shadow-soft-1 hover-bg-surface-secondary hover-translate-y-px',
         outline:
-          'border border-border-strong bg-transparent text-foreground hover:bg-surface-secondary',
-        ghost: 'text-foreground-secondary hover:bg-surface-secondary hover:text-foreground',
+          'border border-border-strong bg-transparent text-foreground hover-bg-surface-secondary',
+        ghost: 'text-foreground-secondary hover-bg-surface-secondary hover-text-foreground',
         danger:
-          'bg-danger text-white shadow-soft-1 hover:brightness-105 hover:-translate-y-px',
-        link: 'text-foreground underline-offset-4 hover:underline hover:text-gold-strong',
+          'bg-danger text-white shadow-soft-1 hover-brightness-105 hover-translate-y-px',
+        link: 'text-foreground underline-offset-4 hover-underline hover-text-gold-strong',
         suggestion:
-          'rounded-full bg-surface text-foreground-secondary border border-border hover:bg-surface-secondary hover:text-foreground hover:border-border-strong',
+          'rounded-full bg-surface text-foreground-secondary border border-border hover-bg-surface-secondary hover-text-foreground hover-border-border-strong',
       },
       size: {
         sm: 'h-8 px-3 text-xs',
-        md: 'h-10 px-4 text-sm',
+        md: '-10 px-4 text-sm',
         lg: 'h-12 px-6 text-sm',
         icon: 'h-10 w-10',
         'icon-sm': 'h-8 w-8',
@@ -35,12 +35,12 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps {
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps < $U[';
+export interface ButtonPropes
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   loading?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
   className?: string;
 }
 
@@ -59,8 +59,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    return (
-      <button
+    return (J      <button
         ref={ref}
         className={cn(buttonVariants({ variant, size }), className)}
         disabled={disabled ?? loading}
@@ -79,4 +78,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { buttonVariants };
\ No newline at end of file
+export { buttonVariants };

From bd2f9d7b0d64cc95081eb3c3b9011a41817a705d Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:34 +0100
Subject: [PATCH 19/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/NvidiaAssistantWidget.tsx | 94 ++++++++++++++-------
 1 file changed, 64 insertions(+), 30 deletions(-)

diff --git a/src/features/chat/NvidiaAssistantWidget.tsx b/src/features/chat/NvidiaAssistantWidget.tsx
index 9e7612e..7d1a21d 100644
--- a/src/features/chat/NvidiaAssistantWidget.tsx
+++ b/src/features/chat/NvidiaAssistantWidget.tsx
@@ -95,41 +95,74 @@ export function NvidiaAssistantWidget() {
     setInputText('');
     setIsStreaming(true);
 
-    // Mock response fallback simulating Nvidia NIM LLM response
-    setTimeout(() => {
-      let replyText = `Nvidia NIM LLM Insights: Analyzed query "${text}". On-chain telemetry indicates normal agent activity across Stellar Testnet.`;
-      let briefing;
+    // Mock response fallback simulating streaming Nvidia NIM LLM response
+    let replyText = `Nvidia NIM LLM Insights: Analyzed query "${text}". On-chain telemetry indicates normal agent activity across Stellar Testnet.`;
+    let briefing;
 
-      if (text.toLowerCase().includes('daily') || text.toLowerCase().includes('spend')) {
-        replyText =
-          'Daily spend summary analysis completed. All 8 active agents are operating within established daily budget envelopes.';
-        briefing = {
-          totalDailySpend: 24500,
-          currency: 'USDC',
-          activeAgentsCount: 8,
-          lowBalanceWalletsCount: 0,
-          topSpenderAgent: 'Auto-Sweep Treasury Bot (15,000 XLM)',
-          recommendation: 'All budget envelopes healthy. Velocity is +12% vs 7-day trailing average.',
-        };
-      } else if (text.toLowerCase().includes('balance') || text.toLowerCase().includes('wallet')) {
-        replyText =
-          'Wallet balance audit: 7 of 8 agent wallets are fully funded. 1 wallet (agt-ci-bot) is at 15.5% capacity.';
-      } else if (text.toLowerCase().includes('gas') || text.toLowerCase().includes('fee')) {
-        replyText =
-          'Soroban RPC network congestion is currently minimal. Recommended base fee: 100 stroops.';
-      }
+    if (text.toLowerCase().includes('daily') || text.toLowerCase().includes('spend')) {
+      replyText =
+        'Daily spend summary analysis completed. All 8 active agents are operating within established daily budget envelopes.';
+      briefing = {
+        totalDailySpend: 24500,
+        currency: 'USDC',
+        activeAgentsCount: 8,
+        lowBalanceWalletsCount: 0,
+        topSpenderAgent: 'Auto-Sweep Treasury Bot (15,000 XLM)',
+        recommendation: 'All budget envelopes healthy. Velocity is +12% vs 7-day trailing average.',
+      };
+    } else if (text.toLowerCase().includes('portfolio') || text.toLowerCase().includes('health')) {
+      replyText =
+        'Portfolio health summary: all strategies are within target allocations and reserve requirements.';
+      briefing = {
+        totalDailySpend: 13200,
+        currency: 'USDC',
+        activeAgentsCount: 8,
+        lowBalanceWalletsCount: 1,
+        topSpenderAgent: 'Yield Harvest Bot (6,100 USDC)',
+        recommendation: 'Maintain current allocations; monitor agt-ci-bot before next epoch.',
+      };
+    } else if (text.toLowerCase().includes('balance') || text.toLowerCase().includes('wallet')) {
+      replyText =
+        'Wallet balance audit: 7 of 8 agent wallets are fully funded. 1 wallet (agt-ci-bot) is at 15.5% capacity.';
+    } else if (text.toLowerCase().includes('gas') || text.toLowerCase().includes('fee')) {
+      replyText =
+        'Soroban RPC network congestion is currently minimal. Recommended base fee: 100 stroops.';
+    }
+
+    const assistantId = `ast-${Date.now()}`;
+    const words = replyText.split(' ');
+    let streamedContent = '';
 
-      const assistantMsg: ChatMessage = {
-        id: `ast-${Date.now()}`,
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: assistantId,
         role: 'assistant',
-        content: replyText,
+        content: '',
         timestamp: new Date().toISOString(),
-        structuredBriefing: briefing,
-      };
+      },
+    ]);
+
+    const streamInterval = window.setInterval(() => {
+      const nextWord = words.shift();
 
-      setMessages((prev) => [...prev, assistantMsg]);
-      setIsStreaming(false);
-    }, 1000);
+      if (nextWord !== undefined) {
+        streamedContent = streamedContent ? `${streamedContent} ${nextWord}` : nextWord;
+        setMessages((prev) =>
+          prev.map((msg) => (msg.id === assistantId ? { ...msg, content: streamedContent } : msg)),
+        );
+      }
+
+      if (words.length === 0) {
+        window.clearInterval(streamInterval);
+        setMessages((prev) =>
+          prev.map((msg) =>
+            msg.id === assistantId ? { ...msg, structuredBriefing: briefing } : msg,
+          ),
+        );
+        setIsStreaming(false);
+      }
+    }, 40);
   };
 
   // Keyboard shortcut listener
@@ -220,6 +253,7 @@ export function NvidiaAssistantWidget() {
         aria-label="Chat messages"
         aria-live="polite"
         aria-relevant="additions"
+        aria-busy={isStreaming}
       >
         {messages.map((msg) => {
           const isAssistant = msg.role === 'assistant';

From 5350cf4fd30ebc11262e22f9000f976a2808c7ef Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:36 +0100
Subject: [PATCH 20/25] fix(ci): resolve failing checks for #73

---
 src/components/shell/assistant-drawer.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/shell/assistant-drawer.tsx b/src/components/shell/assistant-drawer.tsx
index d47e8ea..9648c23 100644
--- a/src/components/shell/assistant-drawer.tsx
+++ b/src/components/shell/assistant-drawer.tsx
@@ -181,7 +181,7 @@ export function AssistantDrawer() {
         >
         <div
           role="dialog"
-          aria-label="AI Executive Command Terminal"
+          aria-label="Financial Briefing Assistant"
           aria-modal="false"
           className="relative flex h-[580px] max-h-[calc(100vh-120px)] w-[400px] max-w-[calc(100vw-48px)] flex-col rounded-card border border-border-strong bg-surface/95 shadow-raised backdrop-blur-xl overflow-hidden"
         >
@@ -191,8 +191,8 @@ export function AssistantDrawer() {
                 <Sparkles className="h-4 w-4" aria-hidden />
               </span>
               <div>
-                <h3 className="font-display text-sm font-semibold leading-tight">Command Terminal</h3>
-                <p className="text-2xs text-foreground-secondary">Autonomous AI Copilot</p>
+                <h3 className="font-display text-sm font-semibold leading-tight">Financial Briefing</h3>
+                <p className="text-2xs text-foreground-secondary">Powered by NVIDIA NIM</p>
               </div>
             </span>
             <button
@@ -238,7 +238,7 @@ export function AssistantDrawer() {
                   {msg.role === 'assistant' ? (
                     <ReactMarkdown>{msg.content || '_Thinking…_'}</ReactMarkdown>
                   ) : (
-                    msg.content
+                    <ReactMarkdown>{msg.content}</ReactMarkdown>
                   )}
                 </div>
               </motion.div>
@@ -249,7 +249,7 @@ export function AssistantDrawer() {
                 <p className="text-2xs font-semibold uppercase tracking-wider text-foreground-muted">
                   Suggested Actions
                 </p>
-                <div className="flex flex-col gap-2">
+                <div className="flex flex-wrap gap-2">
                   {suggestions.map((s) => (
                     <button
                       key={s.label}
@@ -258,7 +258,7 @@ export function AssistantDrawer() {
                         setDraft(s.prompt);
                         composerRef.current?.focus();
                       }}
-                      className="group flex items-center justify-between gap-2 rounded-button border border-border bg-surface p-3 text-left text-xs text-foreground-secondary transition-all duration-fast hover:border-gold hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
+                      className="group inline-flex items-center gap-1.5 rounded-full border border-border bg-surface px-3 py-1.5 text-xs text-foreground-secondary transition-all duration-fast hover:border-gold hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2"
                     >
                       <span className="truncate">{s.label}</span>
                       <ArrowUpRight className="h-3.5 w-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden />
@@ -289,7 +289,7 @@ export function AssistantDrawer() {
                   }
                 }}
                 rows={1}
-                placeholder="Ask about spend, policies..."
+                placeholder="Ask for a financial briefing..."
                 className="max-h-32 flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground outline-none placeholder:text-foreground-muted"
               />
               <button

From ae6b331c06d8703819d59c5be0f38c50cb60cfa2 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:37 +0100
Subject: [PATCH 21/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/FinancialBriefingChat.tsx | 267 ++++++++++++++------
 1 file changed, 183 insertions(+), 84 deletions(-)

diff --git a/src/features/chat/FinancialBriefingChat.tsx b/src/features/chat/FinancialBriefingChat.tsx
index b887c11..e986bcc 100644
--- a/src/features/chat/FinancialBriefingChat.tsx
+++ b/src/features/chat/FinancialBriefingChat.tsx
@@ -1,119 +1,218 @@
-import { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { chatPanelVariants, chatMessageVariants } from '@/components/ui/motion';
+import type { ChatMessage, QuickPromptChip } from './types';
 
-interface Msg { id: number; role: 'user' | 'assistant'; content: string }
+interface FinancialBriefingChatProps {
+  initialOpen: boolean;
+  quickPrompts?: QuickPromptChip[];
+  onSendMessage?: (message: string) => Promise<string> | string;
+}
 
-export default function FinancialBriefingChat() {
-  const [open, setOpen] = useState(false);
-  const [msgs, setMsgs] = useState<Msg[]>([]);
+const defaultPrompts: QuickPromptChip[] = [
+  { id: 'portfolio', label: 'Portfolio health', promptText: 'Give me a portfolio health summary', iconName: 'chart' },
+  { id: 'activity', label: 'Agent activity', promptText: 'Show agent activity logs', iconName: 'activity' },
+  { id: 'market', label: 'Market briefs', promptText: 'Provide today market briefs', iconName: 'sparkles' },
+];
+
+const initialAssistantMessage: ChatMessage = {
+  id: 'assistant-welcome',
+  role: 'assistant',
+  content: '👋 Welcome! Ask me about your financial briefings, portfolio health, or agent activity.',
+  timestamp: new Date().toISOString(),
+};
+
+export function FinancialBriefingChat({
+  initialOpen = false,
+  quickPrompts = defaultPrompts,
+  onSendMessage,
+}: FinancialBriefingChatProps) {
+  const [open, setOpen] = useState(initialOpen);
+  const [messages, setMessages] = useState<ChatMessage>([initialAssistantMessage]);
   const [input, setInput] = useState('');
   const [streaming, setStreaming] = useState(false);
-  const [partial, setPartial] = useState('');
-  const endRef = useRef<HTMLDivElement>(null);
-  const suggestions = ['Portfolio health', 'Agent activity', 'Market briefs'];
+  const [partialContent, setPartialContent] = useState('');
+  const endRef = useRef<HTMLDivElement | null(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, partialContent, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [open]);
 
   useEffect(() => {
-    endRef.current?.scrollIntoView();
-  }, [msgs, partial]);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
 
-  const send = async (text: string) => {
-    if (!text.trim() || streaming) return;
-    setMsgs(m => [...m, { id: Date.now(), role: 'user', content: text }]);
-    setInput('');
+  const simulateStream = useCallback((text: string) => {
     setStreaming(true);
-    setPartial('');
-    const full = `***Briafing**\n\nHere is your summary:\n- ${text}`;
-    let i = 0;
-    const timer = setInterval(() => {
-      i += 4;
-      setPartial(full.slice(0, i));
-      if (i >= full.length) {
-        clearInterval(timer);
-        setMsgs(m => [...m, { id: Date.now() + 1, role: 'assistant', content: full }]);
+    setPartialContent('');
+    let index = 0;
+    timerRef.current = setInterval(() => {
+      index += 4;
+      setPartialContent(text.slice(0, index));
+      if (index >= text.length) {
+        if (timerRef.current) clearInterval(timerRef.current);
+        timerRef.current = null;
         setStreaming(false);
-        setPartial('');
+        setPartialContent('');
+        setMessages(prev => [...prev, { id: `assistant-${Date.now()}`, role: 'assistant', content: text, timestamp: new Date().toISOString() }]);
+      }
+    }, 24);
+  }, []);
+
+  const handleSend = useCallback(
+    async (raw?: string) => {
+      const text = (raw ?? input).trim();
+      if (!text || streaming) return;
+      setMessages(prev => [...prev, { id: `user-${Date.now()}`, role: 'user', content: text, timestamp: new Date().toISOString() }]);
+      setInput('');
+      let response: string;
+      if (onSendMessage) {
+        try {
+          response = await onSendMessage(text);
+        } catch (err) {
+          response = `"♢ **Error**: ${err instanceof Error ? err.message : 'Something went wrong'}`;
+        }
+      } else {
+        response = `***Financial Briefing***
+
+Thanks for your question: **${text}**.
+
+- Portfolio remains stable with a diversified allocation.
+- Agent activity is nominal across all clusters.
+- no low-balance wallets detected.
+
+> This is simulated nvidia nim output.`;
       }
-    }, 20);
+      simulateStream(response);
+    },
+    [input, streaming, onSendMessage, simulateStream],
+  );
+
+  const handleKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
   };
 
   return (
     <>
-      <button
+      <Button
         onClick={() => setOpen(v => !v)}
-        aria-label={open ? 'Close chat' : 'Open chat'}
+        aria-label={open ? 'Close financial briefing chat' : 'Open financial briefing chat'}
         aria-expanded={open}
-        aria-controls="chat-panel"
-        style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}
+        aria-controls='financial-chat-panel'
+        variant='primary'
+        size='icon'
+        className="fixed bottom-4 r-4 z-50 rounded-full shadow-soft-2"
       >
-        {open ? '╊' : '🔸'}
-      </button>
+        {open ? '×' : '💸'}
+      </Button>
+
       <AnimatePresence>
         {open && (
           <motion.div
-            id="chat-panel"
-            role="dialog"
-            aria-label="Financial Briefing Chat"
-            initial={{ x: '100%' }}
-            animate={{ x: 0 }}
-            exit={{ x: '100%' }}
-            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-            style={{
-              position: 'fixed',
-              right: 0,
-              top: 0,
-              height: '100vh',
-              width: 360,
-              maxWidth: '100%',
-              background: '#fff',
-              boxShadow: '0 0 8px rgba(0,0,0,.2)',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
+            id='financial-chat-panel'
+            role='dialog'
+            aria-label='Financial Briefing Chat'
+            aria-modal="true"
+            variants={chatPanelVariants}
+            initial="hidden"
+            animate="show"
+            exit="exit"
+            className="fixed r-0 t-0 z-50 flex h-full w-full max-w-md flex-col border-l border-border bg-surface shadow-soft-2"
           >
-            <div style={{ padding: 12, borderBottom: '1px solid #ddd' }}>
-              <h2 style={{ margin: 0 }}>Financial Chat</h2>
-            </div>
-            <div style={{ flex: 1, overflowY: 'auto', padding: 12 }} role="log" aria-live="polite">
-              {msgs.map(m => (
-                <div
-                  key={m.id}
-                  style={{
-                    textAlign: m.role === 'user' ? 'right' : 'left',
-                    marginBottom: 8,
-                  }}
-                >
-                  <ReactMarkdown>{m.content}</ReactMarkdown>
-                </div>
-              ))}
-              {streaming && <ReactMarkdown>{partial}</ReactMarkdown>}
-              <div ref={endRefr } />
+            <header className="flex items-center justify-between gap-2 border-b border-border px-4 py-3">
+              <div>
+                <h2 className="text-sm font-semibold text-foreground">Financial Briefing</h2>
+                <p className="text-xs text-foreground-secondary">Powered by Nvidia NIM</p>
+              </div>
+              <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close chat panel">✅</Button>
+            </header>
+
+            <div className="flex-1 overflow-y-auto px-4 py-3" role="log" aria-live="polite" aria-relevant="additions">
+              <motion.div
+                variants={{ hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.05 } } }}
+                initial="hidden"
+                animate="show"
+              >
+                {messages.map(message => (
+                  <motion.div
+                    key={message.id}
+                    variants={chatMessageVariants}
+                    className={`"mb-3 flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div
+                      className={`"max-w-[85%] rounded-xl px-3 py-2 text-sm shadow-soft-1 ${
+                        message.role === 'user' ? 'bg-foreground text-background' : 'bg-surface-secondary text-foreground'
+                      }`}
+                    >
+                      <ReactMarkdown
+                        components={
+                          p: ({children}) => <p className="mb-1 last:mb-0">{children}</p>,
+                          ul: ({children}) => <ul className="list-disc pl-4">{children}</ul>
+                        }
+                      >
+                        {message.content}
+                      </ReactMarkdown>
+                    </div>
+                  </motion.div>
+                )
+                )
+                {streaming && (
+                  <motion.div variants={chatMessageVariants} className="mb-3 flex justify-start">
+                    <div className="max-w-[85%] rounded-xl bg-surface-secondary px-3 py-2 text-sm text-foreground shadow-soft-1">
+                      <ReactMarkdown>{partialContent}</ReactMarkdown>
+                      <span className="ml-0.5 inline-block h-3 w-1.5 animate-pulse bg-foreground align-middle" />
+                    </div>
+                  </motion.div>
+                )}
+              </motion.div>
+              <div ref={endRef} />
             </div>
-            <div style={{ padding: 8 }}>
-              {suggestions.map(s => (
-                <button
-                  key={s}
-                  onClick={() => setInput(s)}
+
+            <div className="flex flex-wrap gap-2 border-t border-border px-4 py-2">
+              {quickPrompts.map(prompt => (
+                <Button
+                  key={prompt.id}
+                  variant="suggestion"
+                  size="chip"
+                  onClick={() => handleSend(prompt.promptText)}
                   disabled={streaming}
-                  style={{ margin: 4 }}
                 >
-                  {s}
-                </button>
+                  {prompt.label}
+                </Button>
               ))}
             </div>
-            <div style={{ padding: 12, display: 'flex', gap: 8 }}>
-              <input
+
+            <div className="fler gap-2 border-t border-border p-4">
+              <Input
                 value={input}
                 onChange={e => setInput(e.target.value)}
-                onKeyDown={e => e.key === 'Enter' && send(input)}
-                placeholder="Ask..."
+                onKeyDown={handleKeyDown}
+                placeholder="Ask a financial question…"
                 disabled={streaming}
-                aria-label="Chat input"
-                style={{ flex: 1 }}
+                aria-label="Chat message"
+                className="flex-1"
               />
-              <button onClick={() => send(input)} disabled={!input.trim() || streaming}>
+              <Button onClick={() => handleSend()} disabled={!(input.trim() && !streaming)}>
                 Send
-              </button>
+              </Button>
             </div>
           </motion.div>
         )}

From 979924fa604840a96bb0490eb6e5090f02a94dcf Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:39 +0100
Subject: [PATCH 22/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/button.tsx | 56 ++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index febaa8f..861c072 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,38 +4,37 @@ import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { cn } from '@/lib/cn';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-content gap-2 whitespace-nowrap rounded-button font-sans font-medium transition-all duration-base ease-astroid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[98%0.98]',
+  'inline-flex items-center justify-center gap-2 whoitespace-nowrap rounded-button font-sans font-medium transition-all duration-base ease-astroid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]',
   {
     variants: {
-      variant: {
-        primary:
-          'bg-foreground text-background shadow-soft-1 hover-shadow-soft-2 hover-translate-y-px',
-        gold: 'bg-gold text-accent-foreground shadow-soft-1 hover-shadow-gold hover-translate-y-px',
-        secondary:
-          'bg-surface text-foreground border border-border shadow-soft-1 hover-bg-surface-secondary hover-translate-y-px',
-        outline:
-          'border border-border-strong bg-transparent text-foreground hover-bg-surface-secondary',
-        ghost: 'text-foreground-secondary hover-bg-surface-secondary hover-text-foreground',
-        danger:
-          'bg-danger text-white shadow-soft-1 hover-brightness-105 hover-translate-y-px',
-        link: 'text-foreground underline-offset-4 hover-underline hover-text-gold-strong',
-        suggestion:
-          'rounded-full bg-surface text-foreground-secondary border border-border hover-bg-surface-secondary hover-text-foreground hover-border-border-strong',
-      },
-      size: {
-        sm: 'h-8 px-3 text-xs',
-        md: '-10 px-4 text-sm',
-        lg: 'h-12 px-6 text-sm',
-        icon: 'h-10 w-10',
-        'icon-sm': 'h-8 w-8',
-        chip: 'h-7 px-3 text-xs',
-      },
+      primary:
+        'bg-foreground text-background shadow-soft-1 hover:shadow-soft-2 hover:-translate-y-px',
+      gold: 'bg-gold text-accent-foreground shadow-soft-1 hover:shadow-gold hover:-translate-y-px',
+      secondary:
+        'bg-surface text-foreground border border-border shadow-soft-1 hover:bg-surface-secondary hover:-translate-y-px',
+      outline: 'border border-border-strong bg-transparent text-foreground hover:bg-surface-secondary',
+      ghost: 'text-foreground-secondary hover:bg-surface-secondary hover:text-foreground',
+      danger:
+        'bg-danger text-white shadow-soft-1 hover:brightness-105 hover:-translate-y-px',
+      link: 'text-foreground underline-offset-4 hover:underline hover:text-gold-strong',
+      suggestion:
+        'rounded-full bg-surface text-foreground-secondary border border-border hover:bg-surface-secondary hover:text-foreground hover:border-border-strong',
     },
+    size: {
+      sm: 'h-8 px-3 text-xs',
+      md: 'h-10 px-4 text-sm',
+      lg: 'h-12 px-6 text-sm',
+      icon: 'h-10 w-10',
+      'icon-sm': 'h-8 w-8',
+      chip: 'h-7 px-3 text-xs',
+    },
+  },
+  {
     defaultVariants: { variant: 'primary', size: 'md' },
   },
 );
 
-export interface ButtonPropes
+export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   loading?: boolean;
@@ -59,11 +58,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref,
   ) => {
-    return (J      <button
+    return (
+      <button
         ref={ref}
         className={cn(buttonVariants({ variant, size }), className)}
         disabled={disabled ?? loading}
-        {...props}
+        {.props}
       >
         {loading ? (
           <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
@@ -78,4 +78,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { buttonVariants };
+export { buttonVariants };
\ No newline at end of file

From ebe0bd158ae6aa24f08ae5829a6b0cd6ad168a58 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:40 +0100
Subject: [PATCH 23/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/input.tsx | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index ae2ec18..8344b3f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,16 +1,18 @@
-import { forwardRef, useId, useEffect, useRef } from 'react';
+import { forwardRef, useId, useEffect, useRef, type InputHTMLAttributes, type TextareaHTMLAttributes, type SelectHTMLAttributes, type ReactNode } from 'react';
 import { cn } from '@/lib/cn';
 
 const fieldBase =
-  'w-full rounded-sm border border-bg bg-surface px-3 text-sm text-foreground placeholder:text-foreground-muted transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-border-strong disabled:opacity-50 disabled:cursor-not-allowed';
+  'w-full rounded-sm border border-border bg-surface px-3 text-sm text-foreground placeholder:text-foreground-muted transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-border-strong disabled:opacity-50 disabled:cursor-not-allowed';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   invalid?: boolean;
-  leftIcon?: React.ReactNode;
+  leftIcon?: ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  { className, invalid, leftIcon, ...props }, ref => {
+  { className, invalid, leftIcon, ...props },
+  ref,
+	)=> {
     if (leftIcon) {
       return (
         <div className="relative">
@@ -44,18 +46,21 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         {...props}
       />
     );
-  }, );
+  },
+);
 Input.displayName = 'Input';
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextareaElement> {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextareaElement> {
   invalid?: boolean;
   autoResize?: boolean;
   maxHeight?: number;
 }
 
 export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
-  { className, invalid, autoResize, maxHeight = 200, ...props }, ref => {
-    const internalRef = useRef<HTMLTextareaElement|(null);
+  { className, invalid, autoResize, maxHeight = 200, ...props },
+  ref,
+) => {
+    const internalRef = useRef<HTMLTextareaElement | null>(null);
 
     const setRefs = (node: HTMLTextareaElement | null) => {
       internalRef.current = node;
@@ -68,7 +73,7 @@ export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
       const el = internalRef.current;
       if (!el) return;
       el.style.height = 'auto';
-      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px$;
     }, [props.value, autoResize, maxHeight]);
 
     return (
@@ -86,13 +91,14 @@ export const Textarea = forwardRef<HTMLTextareaElement, TextareaProps>(
         {...props}
       />
     );
-  }, );
+  },
+);
 Textarea.displayName = 'Textarea';
 
 export const Select = forwardRef<
   HTMLSelectElement,
-  React.SelectHTMLAttributes<HTMLSelectElement> & { invalid?: boolean }
->(({ className, invalid, children, ...props }, ref) => (
+  SelectHTMLAttributes<HTMLSelectElement> & { invalid?: boolean }
+>(({className, invalid, children, ...props}, ref) => (
   <select
     ref={ref}
     className={cn(fieldBase, 'h-10 pr-8', invalid && 'border-danger', className)}
@@ -110,7 +116,7 @@ export interface FormFieldProps {
   hint?: string;
   error?: string;
   required?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
 }
 
@@ -183,7 +189,7 @@ export function Switch({ checked, onCheckedChange, label, id, disabled }: Switch
           )}
         />
       </button>
-      {label && <span>{label}</span>}
+      {label && <span>{label}</span>
     </label>
   );
 }
\ No newline at end of file

From bb6066d6d0935bece0a19622c96f0b62e2e11409 Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:41 +0100
Subject: [PATCH 24/25] fix(ci): resolve failing checks for #73

---
 src/features/chat/types.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/features/chat/types.ts b/src/features/chat/types.ts
index 447dcb1..efa20cb 100644
--- a/src/features/chat/types.ts
+++ b/src/features/chat/types.ts
@@ -2,6 +2,15 @@ export type MessageRole = 'user' | 'assistant' | 'system';
 
 export type IconName = 'sparkles' | 'chart' | 'wallet' | 'activity' | 'settings';
 
+export interface StructuredBriefing {
+  totalDailySpend: number;
+  currency: string;
+  activeAgentsCount: number;
+  lowBalanceWalletsCount: number;
+  topSpenderAgent: string;
+  recommendation: string;
+}
+
 export interface ChatMessage {
   id: string;
   role: MessageRole;
@@ -9,14 +18,8 @@ export interface ChatMessage {
   timestamp: string;
   isStreaming?: boolean;
   error?: string;
-  structuredBriefing?: {
-    totalDailySpend: number;
-    currency: string;
-    activeAgentsCount: number;
-    lowBalanceWalletsCount: number;
-    topSpenderAgent: string;
-    recommendation: string;
-  };
+  format?: 'markdown' | 'text';
+  structuredBriefing?: StructuredBriefing;
 }
 
 export interface QuickPromptChip {

From 5b96e98e597ee0178205da031558bee951439f1e Mon Sep 17 00:00:00 2001
From: Farouq Adeshola Fashina <farouqfashina@gmail.com>
Date: Mon, 31 Aug 2026 21:21:42 +0100
Subject: [PATCH 25/25] fix(ci): resolve failing checks for #73

---
 src/components/ui/motion.tsx | 38 ++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/ui/motion.tsx b/src/components/ui/motion.tsx
index a23d965..64010fd 100644
--- a/src/components/ui/motion.tsx
+++ b/src/components/ui/motion.tsx
@@ -100,3 +100,41 @@ export const chatMessagesContainerVariants = {
   hidden: { opacity: 0 },
   show: { opacity: 1, transition: { staggerChildren: 0.04 } },
 };
+
+// Chat panel component (drawer)
+export function ChatPanel({ children, className }: { children: ReactNode, className?: string }) {
+  return (
+    <motion.div
+      variants={chatPanelVariants}
+      initial="hidden"
+      animate="show"
+      exit="exit"
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+// Chat message item
+export function ChatMessage({ children, className }: { children: ReactNode, className?: string }) {
+  return (
+    <motion.div variants={chatMessageVariants} className={className}>
+      {children}
+    </motion.div>
+  );
+}
+
+// Container for chat messages with stagger
+export function ChatMessagesContainer({ children, className }: { children: ReactNode, className?: string }) {
+  return (
+    <motion.div
+      variants={chatMessagesContainerVariants}
+      initial="hidden"
+      animate="show"
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}