Function ChatHeader

src/components/layout/ChatHeader.tsx:19–308

({ onToggleLeftSidebar })

}

export const ChatHeader: React.FC<ChatHeaderProps> = ({ onToggleLeftSidebar }) => {
  const { activeSessionId, sessions, updateSessionTitle, setActiveSessionId, addSession, removeSession, setSessions } = useSessionStore();
  const rightSidebarOpen = useUIStore((s) => s.rightSidebarOpen);
  const toggleRightSidebar = useUIStore((s) => s.toggleRightSidebar);
  const fluxEnabled = useUIStore((s) => s.fluxEnabled);
  const toggleFlux = useUIStore((s) => s.toggleFlux);
  const mainView = useUIStore((s) => s.mainView);
  const setMainView = useUIStore((s) => s.setMainView);
  const { activeProjectId } = useProjectStore();
  const sessionUsage = useChatStore((s) => s.sessionUsage);

  const { theme, toggleTheme } = useUIStore();
  const activeSession = sessions.find(s => s.id === activeSessionId);
  const currentUsage = activeSessionId ? sessionUsage[activeSessionId] : undefined;

  const formatTokens = (n: number) =>
    n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);

  const [isRenaming, setIsRenaming] = useState(false);
  const [renameValue, setRenameValue] = useState('');
  const [menuOpen, setMenuOpen] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const renameInputRef = useRef<HTMLInputElement>(null);

  // Close menu on outside click
  useEffect(() => {
    if (!menuOpen) return;
    const handleClick = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setMenuOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [menuOpen]);

  // Focus rename input when entering rename mode
  useEffect(() => {
    if (isRenaming && renameInputRef.current) {
      renameInputRef.current.focus();
      renameInputRef.current.select();
    }
  }, [isRenaming]);

  const handleStartRename = () => {
    if (!activeSession) return;
    setRenameValue(activeSession.title);
    setIsRenaming(true);
  };

  const handleConfirmRename = async () => {
    const trimmed = renameValue.trim();
    if (!trimmed || !activeSessionId) {
      setIsRenaming(false);
      return;
    }
    updateSessionTitle(activeSessionId, trimmed);