Phase 4 + M5: Low-priority fixes and frontend component integration

M5: TagBadge integrated into ContactDetail (replaces plain Badge)
M5: EntityHistoryPanel integrated into ContactDetail (timeline section)

L1: Replace document.write() with Blob URL in print.ts (XSS-safe)
L2: AI UI Control feedback storage capped at 100 entries (FIFO eviction)
L3: Backup & Restore documentation added to DEPLOY.md

Verified: Backend import OK, TypeScript 0 errors

frontend/src/components/contacts/ContactDetail.tsx

@@ -15,6 +15,8 @@ import { useAIUIControlStore } from '@/store/aiUIControlStore';
 import { PluginPage } from '@/components/plugins/PluginLoader';
 import { useAuthStore } from '@/store/authStore';
 import { CustomFieldRenderer } from '@/components/contacts/CustomFieldRenderer';
+import { TagBadge } from '@/components/tags/TagBadge';
+import { EntityHistoryPanel } from '@/components/common/EntityHistoryPanel';
 import { useCustomFields } from '@/api/customFields';
 import {
   type UnifiedContact,
@@ -427,7 +429,9 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
               <dd>
                 {tags.length > 0 ? (
                   <div className="flex flex-wrap gap-1 mt-1">
-                    {tags.map((tag) => <Badge key={tag} variant="secondary">{tag}</Badge>)}
+                    {tags.map((tag) => (
+                      <TagBadge key={tag} tag={{ name: tag, color: 'blue' }} size="sm" />
+                    ))}
                   </div>
                 ) : (
                   <span className="text-sm text-secondary-400">—</span>
@@ -453,6 +457,13 @@ export function ContactDetail({ contact, loading, onEdit, onDeleted }: ContactDe
             <HistoryViewer entityType="contact" entityId={contact.id} />
           </Section>
         )}
+
+        {/* Entity History Timeline */}
+        {contact.id && (
+          <Section title={t('history.timeline', 'Aktivitäts-Timeline')}>
+            <EntityHistoryPanel entityType="contact" entityId={contact.id} />
+          </Section>
+        )}
       </div>
       ) : (
         <div className="p-4">

frontend/src/components/layout/AppShell.tsx

@@ -13,6 +13,7 @@ import { WindowContainer } from '@/components/window/WindowContainer';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { WelcomeDialog } from '@/components/onboarding/WelcomeDialog';
 import { OnboardingTour } from '@/components/onboarding/OnboardingTour';
+import { useOnboardingStore } from '@/store/onboardingStore';
 
 export function AppShell() {
   const location = useLocation();
@@ -23,6 +24,11 @@ export function AppShell() {
   // AI UI Control — WebSocket-based UI control from AI agents (Phase 4)
   useAIUIControl();
 
+  // Onboarding state — show WelcomeDialog on first login
+  const completed = useOnboardingStore((s) => s.completed);
+  const skipped = useOnboardingStore((s) => s.skipped);
+  const skip = useOnboardingStore((s) => s.skip);
+
   // Hide message sidebar on the AI Assistant page itself
   const showMessageSidebar = !location.pathname.startsWith('/ai-assistant');
 
@@ -52,7 +58,7 @@ export function AppShell() {
       <AIUIControlIndicator />
       <WindowContainer />
       <ToastContainer />
-      <WelcomeDialog open={false} />
+      <WelcomeDialog open={!completed && !skipped} onClose={skip} />
       <OnboardingTour />
     </div>
   );