1  // Copyright (c) 2026 VPL Solutions. All rights reserved.
 2  // Licensed under the MIT License. See LICENSE for details.
 3  //
 4  // SessionBadge — shows active aiPolaris session + Clear Session control (ADR-011)
 5  // Session data is memory-only — never written to localStorage. ADR-011.
 6  
 7  import { MessageSquare, X } from 'lucide-react';
 8  
 9  interface SessionBadgeProps {
10    sessionId: string | null;
11    onClear: () => void;
12  }
13  
14  export function SessionBadge({ sessionId, onClear }: SessionBadgeProps) {
15    if (!sessionId) return null;
16  
17    // Show only the last 8 chars of the session ID for readability
18    const shortId = sessionId.slice(-8);
19  
20    return (
21      <div className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-purple-50 dark:bg-purple-500/10 border border-purple-200 dark:border-purple-500/20 text-xs text-purple-700 dark:text-purple-300">
22        <MessageSquare className="w-3 h-3 shrink-0" />
23        <span className="font-medium">Session active</span>
24        <span className="font-mono text-purple-400 dark:text-purple-500 text-[10px]">
25          ···{shortId}
26        </span>
27        <span className="text-purple-300 dark:text-purple-600">·</span>
28        <span className="text-[10px] text-purple-500 dark:text-purple-400">
29          Follow-up questions use this context
30        </span>
31        <button
32          onClick={onClear}
33          title="Clear session — next query starts fresh"
34          className="ml-0.5 p-0.5 rounded-full hover:bg-purple-200 dark:hover:bg-purple-500/20 transition-colors"
35          aria-label="Clear session"
36        >
37          <X className="w-3 h-3" />
38        </button>
39      </div>
40    );
41  }