feat: integrate tooltip functionality across various components

- Added TooltipProvider and Tooltip components to enhance user experience with contextual information.
- Wrapped existing components such as TeamListView, TeamDetailView, and SendMessageDialog with tooltips for better interaction feedback.
- Implemented MessagesFilterPopover to allow filtering messages by sender and recipient, improving message management.
- Updated KanbanBoard and KanbanFilterPopover to include tooltips for view mode buttons, enhancing usability.

These changes aim to provide users with clearer guidance and improve overall interaction within the application.

src/renderer/App.tsx

@@ -4,6 +4,7 @@ import { ConfirmDialog } from './components/common/ConfirmDialog';
 import { ContextSwitchOverlay } from './components/common/ContextSwitchOverlay';
 import { ErrorBoundary } from './components/common/ErrorBoundary';
 import { TabbedLayout } from './components/layout/TabbedLayout';
+import { TooltipProvider } from './components/ui/tooltip';
 import { useTheme } from './hooks/useTheme';
 import { api } from './api';
 import { initializeNotificationListeners, useStore } from './store';
@@ -43,9 +44,11 @@ export const App = (): React.JSX.Element => {
 
   return (
     <ErrorBoundary>
+      <TooltipProvider delayDuration={300}>
         <ContextSwitchOverlay />
         <TabbedLayout />
         <ConfirmDialog />
+      </TooltipProvider>
     </ErrorBoundary>
   );
 };

src/renderer/components/team/TeamDetailView.tsx

@@ -19,11 +19,13 @@ import { KanbanBoard } from './kanban/KanbanBoard';
 import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover';
 import { MemberDetailDialog } from './members/MemberDetailDialog';
 import { MemberList } from './members/MemberList';
+import { MessagesFilterPopover } from './messages/MessagesFilterPopover';
 import { CollapsibleTeamSection } from './CollapsibleTeamSection';
 import { TeamProvisioningBanner } from './TeamProvisioningBanner';
 import { TeamSessionsSection } from './TeamSessionsSection';
 
 import type { KanbanFilterState } from './kanban/KanbanFilterPopover';
+import type { MessagesFilterState } from './messages/MessagesFilterPopover';
 import type { Session } from '@renderer/types/data';
 import type { ResolvedTeamMember, TeamTask } from '@shared/types';
 
@@ -134,6 +136,12 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
   );
 
   const [kanbanSearch, setKanbanSearch] = useState('');
+  const [messagesSearchQuery, setMessagesSearchQuery] = useState('');
+  const [messagesFilter, setMessagesFilter] = useState<MessagesFilterState>({
+    from: new Set(),
+    to: new Set(),
+  });
+  const [messagesFilterOpen, setMessagesFilterOpen] = useState(false);
 
   useEffect(() => {
     if (!teamName) {
@@ -251,12 +259,31 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
 
   const filteredMessages = useMemo(() => {
     if (!data) return [];
-    if (!timeWindow) return data.messages;
+    let list = data.messages;
-    return data.messages.filter((m) => {
+    if (timeWindow) {
+      list = list.filter((m) => {
         const ts = new Date(m.timestamp).getTime();
         return ts >= timeWindow.start && ts < timeWindow.end;
       });
-  }, [data, timeWindow]);
+    }
+    if (messagesFilter.from.size > 0) {
+      list = list.filter((m) => m.from?.trim() && messagesFilter.from.has(m.from.trim()));
+    }
+    if (messagesFilter.to.size > 0) {
+      list = list.filter((m) => m.to?.trim() && messagesFilter.to.has(m.to.trim()));
+    }
+    const q = messagesSearchQuery.trim().toLowerCase();
+    if (q) {
+      list = list.filter((m) => {
+        const text = (m.text ?? '').toLowerCase();
+        const summary = (m.summary ?? '').toLowerCase();
+        const from = (m.from ?? '').toLowerCase();
+        const to = (m.to ?? '').toLowerCase();
+        return text.includes(q) || summary.includes(q) || from.includes(q) || to.includes(q);
+      });
+    }
+    return list;
+  }, [data, timeWindow, messagesFilter, messagesSearchQuery]);
 
   const kanbanDisplayTasks = useMemo(() => {
     const query = kanbanSearch.trim();
@@ -593,10 +620,30 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
         badge={filteredMessages.length}
         defaultOpen
         action={
+          <div className="flex items-center gap-2 pl-2">
+            <div className="flex w-36 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
+              <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
+              <input
+                type="search"
+                placeholder="Поиск..."
+                value={messagesSearchQuery}
+                onChange={(e) => setMessagesSearchQuery(e.target.value)}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
+                className="min-w-0 flex-1 bg-transparent text-xs text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none"
+              />
+            </div>
+            <MessagesFilterPopover
+              filter={messagesFilter}
+              messages={data?.messages ?? []}
+              open={messagesFilterOpen}
+              onOpenChange={setMessagesFilterOpen}
+              onApply={setMessagesFilter}
+            />
             <Button
               variant="outline"
               size="sm"
-            className="h-7 gap-1.5 px-2.5 text-xs font-medium text-[var(--color-text)]"
+              className="h-7 shrink-0 gap-1.5 px-2.5 text-xs font-medium text-[var(--color-text)]"
               onClick={(e) => {
                 e.stopPropagation();
                 setSendDialogRecipient(undefined);
@@ -607,6 +654,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
               <MessageSquare size={12} />
               Message
             </Button>
+          </div>
         }
       >
         <ActivityTimeline

src/renderer/components/team/TeamListView.tsx

@@ -4,6 +4,12 @@ import { api, isElectronMode } from '@renderer/api';
 import { Badge } from '@renderer/components/ui/badge';
 import { Button } from '@renderer/components/ui/button';
 import { Input } from '@renderer/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
 import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { useStore } from '@renderer/store';
 import { buildTaskCountsByTeam, normalizePath } from '@renderer/utils/pathNormalize';
@@ -377,6 +383,7 @@ export const TeamListView = (): React.JSX.Element => {
   }
 
   return (
+    <TooltipProvider delayDuration={300}>
       <div className="size-full overflow-auto p-4">
         {renderHeader()}
 
@@ -423,22 +430,30 @@ export const TeamListView = (): React.JSX.Element => {
                         <StatusBadge status={status} />
                       </div>
                       <div className="flex shrink-0 gap-1">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
                             <button
                               type="button"
                               className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-blue-500/10 hover:text-blue-300 group-hover:opacity-100"
                               onClick={(e) => handleCopyTeam(team.teamName, e)}
-                        title="Copy team"
                             >
                               <Copy size={14} />
                             </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">Copy team</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
                             <button
                               type="button"
                               className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-red-500/10 hover:text-red-300 group-hover:opacity-100"
                               onClick={(e) => handleDeleteTeam(team.teamName, e)}
-                        title="Delete team"
                             >
                               <Trash2 size={14} />
                             </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">Delete team</TooltipContent>
+                        </Tooltip>
                       </div>
                     </div>
                     <p className="mt-2 line-clamp-2 min-h-10 text-xs text-[var(--color-text-muted)]">
@@ -479,7 +494,10 @@ export const TeamListView = (): React.JSX.Element => {
                       )}
                       {(() => {
                         const tc = taskCountsByTeam.get(team.teamName);
-                      if (!tc || (tc.pending === 0 && tc.inProgress === 0 && tc.completed === 0)) {
+                        if (
+                          !tc ||
+                          (tc.pending === 0 && tc.inProgress === 0 && tc.completed === 0)
+                        ) {
                           return (
                             <Badge variant="secondary" className="text-[10px] font-normal">
                               Tasks: 0
@@ -536,5 +554,6 @@ export const TeamListView = (): React.JSX.Element => {
         )}
         {createDialogElement}
       </div>
+    </TooltipProvider>
   );
 };

src/renderer/components/team/TeamSessionsSection.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useStore } from '@renderer/store';
 import { formatDistanceToNowStrict } from 'date-fns';
 import {
@@ -205,9 +206,10 @@ const SessionRow = ({
       </button>
 
       <div className="flex shrink-0 items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
             <button
               type="button"
-          title={isSelected ? 'Remove filter' : 'Filter by this session'}
               className={`rounded p-0.5 text-[var(--color-text-muted)] transition-opacity hover:text-blue-400 ${
                 isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
               }`}
@@ -218,6 +220,13 @@ const SessionRow = ({
             >
               {isSelected ? <FilterX size={12} /> : <Filter size={12} />}
             </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            {isSelected ? 'Remove filter' : 'Filter by this session'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <button
               type="button"
               className="rounded p-0.5 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:text-[var(--color-text)] group-hover:opacity-100"
@@ -228,6 +237,9 @@ const SessionRow = ({
             >
               <ExternalLink size={12} />
             </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Open session</TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );

src/renderer/components/team/dialogs/SendMessageDialog.tsx

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@renderer/components/ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
 import { buildReplyBlock } from '@renderer/utils/agentMessageFormatting';
@@ -180,6 +181,8 @@ export const SendMessageDialog = ({
 
           {quote ? (
             <div className="relative rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-2.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
                   <button
                     type="button"
                     className="absolute right-1.5 top-1.5 rounded p-0.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
@@ -187,6 +190,9 @@ export const SendMessageDialog = ({
                   >
                     <X size={12} />
                   </button>
+                </TooltipTrigger>
+                <TooltipContent side="left">Remove quote</TooltipContent>
+              </Tooltip>
               <span className="mb-0.5 block text-[10px] font-medium text-[var(--color-text-muted)]">
                 Replying to @{quote.from}
               </span>

src/renderer/components/team/dialogs/TaskCommentsSection.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
 import { ReplyQuoteBlock } from '@renderer/components/team/activity/ReplyQuoteBlock';
 import { MentionableTextarea } from '@renderer/components/ui/MentionableTextarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
 import { useMarkCommentsRead } from '@renderer/hooks/useMarkCommentsRead';
 import { useStore } from '@renderer/store';
@@ -156,6 +157,8 @@ export const TaskCommentsSection = ({
               {replyTo.text}
             </div>
           </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
               <button
                 type="button"
                 className="shrink-0 rounded p-0.5 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-secondary)]"
@@ -163,6 +166,9 @@ export const TaskCommentsSection = ({
               >
                 <X size={12} />
               </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">Cancel reply</TooltipContent>
+          </Tooltip>
         </div>
       ) : null}
 

src/renderer/components/team/kanban/KanbanBoard.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { cn } from '@renderer/lib/utils';
 import { Columns3, LayoutGrid } from 'lucide-react';
 
@@ -138,6 +139,8 @@ export const KanbanBoard = ({
           onFilterChange={onFilterChange}
         />
         <div className="inline-flex rounded-md border border-[var(--color-border)]">
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Button
                 variant="ghost"
                 size="sm"
@@ -149,10 +152,14 @@ export const KanbanBoard = ({
                 )}
                 onClick={() => setViewMode('grid')}
                 aria-label="Grid view"
-            title="Grid"
               >
                 <LayoutGrid size={14} />
               </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Grid view</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
               <Button
                 variant="ghost"
                 size="sm"
@@ -164,10 +171,12 @@ export const KanbanBoard = ({
                 )}
                 onClick={() => setViewMode('columns')}
                 aria-label="Columns view"
-            title="Columns"
               >
                 <Columns3 size={14} />
               </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Columns view</TooltipContent>
+          </Tooltip>
         </div>
       </div>
 

src/renderer/components/team/kanban/KanbanFilterPopover.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Button } from '@renderer/components/ui/button';
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { Crown, Filter } from 'lucide-react';
 
 import type { Session } from '@renderer/types/data';
@@ -57,13 +58,14 @@ export const KanbanFilterPopover = ({
 
   return (
     <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
           <PopoverTrigger asChild>
             <Button
               variant="ghost"
               size="sm"
               className="relative h-7 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
               aria-label="Filter tasks"
-          title="Filter"
             >
               <Filter size={14} />
               {activeCount > 0 && (
@@ -73,6 +75,9 @@ export const KanbanFilterPopover = ({
               )}
             </Button>
           </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Filter tasks</TooltipContent>
+      </Tooltip>
       <PopoverContent align="end" className="w-72 p-0">
         {/* Session section */}
         <div className="border-b border-[var(--color-border)] p-3">

src/renderer/components/team/messages/MessagesFilterPopover.tsx

@@ -0,0 +1,171 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Checkbox } from '@renderer/components/ui/checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Filter } from 'lucide-react';
+
+import type { InboxMessage } from '@shared/types';
+
+export interface MessagesFilterState {
+  from: Set<string>;
+  to: Set<string>;
+}
+
+interface MessagesFilterPopoverProps {
+  filter: MessagesFilterState;
+  messages: InboxMessage[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApply: (filter: MessagesFilterState) => void;
+}
+
+function collectFromOptions(messages: InboxMessage[]): string[] {
+  const set = new Set<string>();
+  for (const m of messages) {
+    if (m.from?.trim()) set.add(m.from.trim());
+  }
+  return Array.from(set).sort();
+}
+
+function collectToOptions(messages: InboxMessage[]): string[] {
+  const set = new Set<string>();
+  for (const m of messages) {
+    if (m.to?.trim()) set.add(m.to.trim());
+  }
+  return Array.from(set).sort();
+}
+
+export const MessagesFilterPopover = ({
+  filter,
+  messages,
+  open,
+  onOpenChange,
+  onApply,
+}: MessagesFilterPopoverProps): React.JSX.Element => {
+  const [draft, setDraft] = useState<MessagesFilterState>({ from: new Set(), to: new Set() });
+
+  useEffect(() => {
+    if (open) {
+      setDraft({
+        from: new Set(filter.from),
+        to: new Set(filter.to),
+      });
+    }
+  }, [open, filter.from, filter.to]);
+
+  const fromOptions = useMemo(() => collectFromOptions(messages), [messages]);
+  const toOptions = useMemo(() => collectToOptions(messages), [messages]);
+
+  const activeCount = (filter.from.size > 0 ? 1 : 0) + (filter.to.size > 0 ? 1 : 0);
+  const draftCount = (draft.from.size > 0 ? 1 : 0) + (draft.to.size > 0 ? 1 : 0);
+
+  const toggleFrom = (name: string): void => {
+    setDraft((prev) => {
+      const next = new Set(prev.from);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return { ...prev, from: next };
+    });
+  };
+
+  const toggleTo = (name: string): void => {
+    setDraft((prev) => {
+      const next = new Set(prev.to);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return { ...prev, to: next };
+    });
+  };
+
+  const handleSave = (): void => {
+    onApply(draft);
+    onOpenChange(false);
+  };
+
+  const handleReset = (): void => {
+    const empty = { from: new Set<string>(), to: new Set<string>() };
+    setDraft(empty);
+    onApply(empty);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-7 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+          aria-label="Filter messages"
+          title="Filter"
+        >
+          <Filter size={14} />
+          {activeCount > 0 && (
+            <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
+              {activeCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 p-0">
+        <div className="border-b border-[var(--color-border)] p-3">
+          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            Кто писал
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto">
+            {fromOptions.length === 0 ? (
+              <p className="text-xs italic text-[var(--color-text-muted)]">Нет данных</p>
+            ) : (
+              fromOptions.map((name) => (
+                <label
+                  key={name}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+                >
+                  <Checkbox
+                    checked={draft.from.has(name)}
+                    onCheckedChange={() => toggleFrom(name)}
+                  />
+                  {name}
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="border-b border-[var(--color-border)] p-3">
+          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            Кому писали
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto">
+            {toOptions.length === 0 ? (
+              <p className="text-xs italic text-[var(--color-text-muted)]">Нет данных</p>
+            ) : (
+              toOptions.map((name) => (
+                <label
+                  key={name}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+                >
+                  <Checkbox checked={draft.to.has(name)} onCheckedChange={() => toggleTo(name)} />
+                  {name}
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="flex justify-between gap-2 p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+            disabled={draftCount === 0}
+            onClick={handleReset}
+          >
+            Сбросить
+          </Button>
+          <Button size="sm" className="h-7 px-3 text-[11px]" onClick={handleSave}>
+            Сохранить
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

src/renderer/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading -- Standard Radix/shadcn pattern */
+import * as React from 'react';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@renderer/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 max-w-[var(--radix-tooltip-content-available-width)] rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text)] shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+/* eslint-enable react/jsx-props-no-spreading */