feat: preserve messages after compaction (IndexedDB cache) + show agent name in header

- Add IndexedDB message cache to retain pre-compaction history locally
- Show compaction separator with amber styling when messages are compacted
- Archived messages render at 60% opacity above the separator
- Display agent name (from gateway identity) in header instead of 'PinchChat' when available
- Fallback to 'PinchChat' when no agent name is configured
- Add i18n keys for compaction separator (EN/FR)

Closes #72, #69

src/components/Chat.tsx

@@ -302,6 +302,21 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session
           )}
           {visibleMessages.map(({ msg, showSep, isFirstInGroup }) => {
             const isActiveMatch = searchMatches.length > 0 && searchMatches[searchActiveIndex] === msg.id;
+
+            // Render compaction separator
+            if (msg.isCompactionSeparator) {
+              return (
+                <div key={msg.id} className="flex items-center gap-3 py-4 px-4 select-none">
+                  <div className="flex-1 h-px bg-amber-500/30" />
+                  <span className="text-[11px] font-medium text-amber-400/70 uppercase tracking-wider flex items-center gap-1.5">
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+                    {t('chat.contextCompacted')}
+                  </span>
+                  <div className="flex-1 h-px bg-amber-500/30" />
+                </div>
+              );
+            }
+
             return (
                 <div key={msg.id} data-msg-id={msg.id}>
                   {showSep && (
@@ -311,7 +326,7 @@ export function Chat({ messages, isGenerating, isLoadingHistory, status, session
                       <div className="flex-1 h-px bg-[var(--pc-hover-strong)]" />
                     </div>
                   )}
-                  <div className={isActiveMatch ? 'ring-1 ring-pc-accent-light/40 rounded-lg' : ''}>
+                  <div className={`${isActiveMatch ? 'ring-1 ring-pc-accent-light/40 rounded-lg' : ''} ${msg.isArchived ? 'opacity-60' : ''}`}>
                     <ChatMessageComponent message={msg} onRetry={!isGenerating ? handleSend : undefined} agentAvatarUrl={agentAvatarUrl} isFirstInGroup={isFirstInGroup} isBookmarked={isBookmarked(msg.id)} onToggleBookmark={sessionKey ? () => toggleBookmark(msg.id, sessionKey, (msg.content || '').slice(0, 120), msg.timestamp) : undefined} />
                   </div>
                 </div>

src/components/Header.tsx

@@ -17,9 +17,10 @@ interface Props {
   onToggleSound?: () => void;
   messages?: ChatMessage[];
   agentAvatarUrl?: string;
+  agentName?: string;
 }
 
-export function Header({ status, sessionKey, onToggleSidebar, activeSessionData, onLogout, soundEnabled, onToggleSound, messages, agentAvatarUrl }: Props) {
+export function Header({ status, sessionKey, onToggleSidebar, activeSessionData, onLogout, soundEnabled, onToggleSound, messages, agentAvatarUrl, agentName }: Props) {
   const t = useT();
   const sessionLabel = activeSessionData ? sessionDisplayName(activeSessionData) : (sessionKey.split(':').pop() || sessionKey);
 
@@ -41,7 +42,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
         <img src={agentAvatarUrl || '/logo.png'} alt="PinchChat" className="h-9 w-9 rounded-2xl object-cover" onError={(e) => { const img = e.target as HTMLImageElement; if (img.src !== window.location.origin + '/logo.png') { img.src = '/logo.png'; } else { img.style.display = 'none'; } }} />
         <div className="min-w-0">
           <div className="flex items-center gap-2">
-            <span className="font-semibold text-pc-text text-sm tracking-wide">{t('header.title')}</span>
+            <span className="font-semibold text-pc-text text-sm tracking-wide">{agentName || t('header.title')}</span>
             <Sparkles className="h-3.5 w-3.5 text-pc-accent-light/60" />
           </div>
           <span className="text-xs text-pc-text-muted truncate flex items-center gap-1.5">