feat: user profile panel with hover popover and click-to-expand

desktop/scripts/check-file-sizes.mjs

@@ -35,6 +35,7 @@ const overrides = new Map([
   ["src/app/AppShell.tsx", 860], // message edit state + handlers + ChannelPane edit prop threading + scrollback pagination + workflows view + memory-leak safeguards
   ["src/features/channels/hooks.ts", 550], // canvas query + mutation hooks + DM hide mutation
   ["src/features/channels/ui/ChannelManagementSheet.tsx", 800],
+  ["src/features/channels/ui/ChannelScreen.tsx", 530], // profile panel state + mutual exclusion wiring + ProfilePanelProvider context
   ["src/features/messages/hooks.ts", 500], // message query/mutation hooks + optimistic updates
   ["src/features/messages/ui/MessageComposer.tsx", 700], // media upload handlers (paste, drop, dialog) + channelId reset effect + edit mode (pre-fill, save, cancel, escape)
   ["src/features/settings/ui/SettingsView.tsx", 600],

desktop/src/features/channels/ui/ChannelPane.tsx

@@ -5,6 +5,7 @@ import { MessageComposer } from "@/features/messages/ui/MessageComposer";
 import { MessageThreadPanel } from "@/features/messages/ui/MessageThreadPanel";
 import { MessageTimeline } from "@/features/messages/ui/MessageTimeline";
 import { TypingIndicatorRow } from "@/features/messages/ui/TypingIndicatorRow";
+import { UserProfilePanel } from "@/features/profile/ui/UserProfilePanel";
 import { ChannelFindBar } from "@/features/search/ui/ChannelFindBar";
 import { AgentSessionThreadPanel } from "@/features/channels/ui/AgentSessionThreadPanel";
 import { BotActivityBar } from "@/features/channels/ui/BotActivityBar";
@@ -70,13 +71,15 @@ type ChannelPaneProps = {
   onCancelEdit?: () => void;
   onCancelThreadReply: () => void;
   onCloseAgentSession: () => void;
+  onCloseProfilePanel: () => void;
   onCloseThread: () => void;
   onDelete?: (message: TimelineMessage) => void;
   onEdit?: (message: TimelineMessage) => void;
   onEditSave?: (content: string) => Promise<void>;
   onExpandThreadReplies: (message: TimelineMessage) => void;
   onJoinChannel?: () => Promise<void>;
   onOpenAgentSession: (pubkey: string) => void;
+  onOpenDm?: (pubkeys: string[]) => void;
   onOpenThread: (message: TimelineMessage) => void;
   onSelectThreadReplyTarget: (message: TimelineMessage) => void;
   onSendMessage: (
@@ -101,6 +104,7 @@ type ChannelPaneProps = {
   profiles?: UserProfileLookup;
   openThreadHeadId: string | null;
   openAgentSessionPubkey: string | null;
+  profilePanelPubkey?: string | null;
   threadHeadMessage: TimelineMessage | null;
   threadMessages: MainTimelineEntry[];
   threadTypingPubkeys: string[];
@@ -128,13 +132,15 @@ export const ChannelPane = React.memo(function ChannelPane({
   onCancelEdit,
   onCancelThreadReply,
   onCloseAgentSession,
+  onCloseProfilePanel,
   onCloseThread,
   onDelete,
   onEdit,
   onEditSave,
   onExpandThreadReplies,
   onJoinChannel,
   onOpenAgentSession,
+  onOpenDm,
   onOpenThread,
   onSelectThreadReplyTarget,
   onSendMessage,
@@ -146,6 +152,7 @@ export const ChannelPane = React.memo(function ChannelPane({
   profiles,
   openThreadHeadId,
   openAgentSessionPubkey,
+  profilePanelPubkey,
   targetMessageId,
   threadHeadMessage,
   threadMessages,
@@ -392,6 +399,17 @@ export const ChannelPane = React.memo(function ChannelPane({
           onResizeStart={handleThreadPanelResizeStart}
           widthPx={threadPanelWidthPx}
         />
+      ) : profilePanelPubkey ? (
+        <UserProfilePanel
+          canResetWidth={canResetThreadPanelWidth}
+          currentPubkey={currentPubkey}
+          onClose={onCloseProfilePanel}
+          onOpenDm={onOpenDm}
+          onResetWidth={handleThreadPanelWidthReset}
+          onResizeStart={handleThreadPanelResizeStart}
+          pubkey={profilePanelPubkey}
+          widthPx={threadPanelWidthPx}
+        />
       ) : null}
     </div>
   );

desktop/src/features/channels/ui/ChannelScreen.tsx

@@ -46,7 +46,9 @@ import type {
 import { useChannelFind } from "@/features/search/useChannelFind";
 import { ViewLoadingFallback } from "@/shared/ui/ViewLoadingFallback";
 import { AgentSessionProvider } from "@/shared/context/AgentSessionContext";
+import { ProfilePanelProvider } from "@/shared/context/ProfilePanelContext";
 import { useChannelAgentSessions } from "./useChannelAgentSessions";
+import { useChannelProfilePanel } from "./useChannelProfilePanel";
 type ChannelScreenProps = {
   activeChannel: Channel | null;
   currentIdentity?: Identity;
@@ -71,6 +73,9 @@ export function ChannelScreen({
   targetMessageId,
 }: ChannelScreenProps) {
   const { markChannelRead, openChannelManagement } = useAppShell();
+  const [profilePanelPubkey, setProfilePanelPubkey] = React.useState<
+    string | null
+  >(null);
   const [isMembersSidebarOpen, setIsMembersSidebarOpen] = React.useState(false);
   const [openThreadHeadId, setOpenThreadHeadId] = React.useState<string | null>(
     null,
@@ -341,12 +346,23 @@ export function ChannelScreen({
     managedAgents: managedAgentsQuery.data ?? [],
     setExpandedThreadReplyIds,
     setOpenThreadHeadId,
+    setProfilePanelPubkey,
     setThreadReplyTargetId,
     setThreadScrollTargetId,
     targetMessageId,
     timelineMessages,
   });
 
+  const { handleOpenProfilePanel, handleCloseProfilePanel, handleOpenDm } =
+    useChannelProfilePanel({
+      closeAgentSession: handleCloseAgentSession,
+      setExpandedThreadReplyIds,
+      setOpenThreadHeadId,
+      setProfilePanelPubkey,
+      setThreadReplyTargetId,
+      setThreadScrollTargetId,
+    });
+
   const isTimelineLoading =
     activeChannel !== null &&
     activeChannel.channelType !== "forum" &&
@@ -360,6 +376,7 @@ export function ChannelScreen({
       setThreadReplyTargetId(null);
       handleCloseAgentSession();
       setEditTargetId(null);
+      setProfilePanelPubkey(null);
     },
     [handleCloseAgentSession],
   );
@@ -402,98 +419,105 @@ export function ChannelScreen({
 
   return (
     <AgentSessionProvider onOpenAgentSession={handleOpenAgentSession}>
-      <ChannelScreenHeader
-        activeChannel={activeChannel}
-        activeChannelEphemeralDisplay={activeChannelEphemeralDisplay}
-        activeChannelTitle={activeChannelTitle}
-        activeDmPresenceStatus={activeDmPresenceStatus}
-        currentPubkey={currentPubkey}
-        isJoining={joinChannelMutation.isPending}
-        onJoinChannel={joinChannelMutation.mutateAsync}
-        onManageChannel={openChannelManagement}
-        onToggleMembers={() => setIsMembersSidebarOpen((prev) => !prev)}
-      />
+      <ProfilePanelProvider onOpenProfilePanel={handleOpenProfilePanel}>
+        <ChannelScreenHeader
+          activeChannel={activeChannel}
+          activeChannelEphemeralDisplay={activeChannelEphemeralDisplay}
+          activeChannelTitle={activeChannelTitle}
+          activeDmPresenceStatus={activeDmPresenceStatus}
+          currentPubkey={currentPubkey}
+          isJoining={joinChannelMutation.isPending}
+          onJoinChannel={joinChannelMutation.mutateAsync}
+          onManageChannel={openChannelManagement}
+          onToggleMembers={() => setIsMembersSidebarOpen((prev) => !prev)}
+        />
 
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-        {activeChannel ? (
-          activeChannel.channelType === "forum" ? (
-            <React.Suspense fallback={<ViewLoadingFallback kind="forum" />}>
-              <ForumView
-                channel={activeChannel}
-                currentPubkey={currentPubkey}
-                onClosePost={onCloseForumPost}
-                onSelectPost={onSelectForumPost}
-                selectedPostId={selectedForumPostId}
-                targetReplyId={targetForumReplyId}
-              />
-            </React.Suspense>
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+          {activeChannel ? (
+            activeChannel.channelType === "forum" ? (
+              <React.Suspense fallback={<ViewLoadingFallback kind="forum" />}>
+                <ForumView
+                  channel={activeChannel}
+                  currentPubkey={currentPubkey}
+                  onClosePost={onCloseForumPost}
+                  onSelectPost={onSelectForumPost}
+                  selectedPostId={selectedForumPostId}
+                  targetReplyId={targetForumReplyId}
+                />
+              </React.Suspense>
+            ) : (
+              <React.Suspense fallback={<ViewLoadingFallback kind="channel" />}>
+                <ChannelPane
+                  activeChannel={activeChannel}
+                  agentSessionAgents={channelAgentSessionAgents}
+                  botTypingPubkeys={botTypingPubkeys}
+                  channelFind={channelFind}
+                  currentPubkey={currentPubkey}
+                  fetchOlder={fetchOlder}
+                  hasOlderMessages={hasOlderMessages}
+                  isFetchingOlder={isFetchingOlder}
+                  editTarget={
+                    editTargetMessage
+                      ? {
+                          author: editTargetMessage.author,
+                          body: editTargetMessage.body,
+                          id: editTargetMessage.id,
+                        }
+                      : null
+                  }
+                  isSending={sendMessageMutation.isPending}
+                  isTimelineLoading={isTimelineLoading}
+                  messages={timelineMessages}
+                  onCancelEdit={handleCancelEdit}
+                  onCancelThreadReply={handleCancelThreadReply}
+                  onCloseAgentSession={handleCloseAgentSession}
+                  onCloseThread={handleCloseThread}
+                  onDelete={handleDelete}
+                  onEdit={handleEdit}
+                  onEditSave={handleEditSave}
+                  onExpandThreadReplies={handleExpandThreadReplies}
+                  onOpenAgentSession={handleOpenAgentSession}
+                  onOpenDm={handleOpenDm}
+                  onCloseProfilePanel={handleCloseProfilePanel}
+                  onOpenThread={handleOpenThreadAndCloseAgentSession}
+                  onSelectThreadReplyTarget={handleSelectThreadReplyTarget}
+                  onSendMessage={handleSendMessage}
+                  onSendThreadReply={handleSendThreadReply}
+                  onThreadScrollTargetResolved={
+                    handleThreadScrollTargetResolved
+                  }
+                  onToggleReaction={effectiveToggleReaction}
+                  openAgentSessionPubkey={openAgentSessionPubkey}
+                  openThreadHeadId={openThreadHeadId}
+                  profilePanelPubkey={profilePanelPubkey}
+                  personaLookup={personaLookup}
+                  profiles={messageProfiles}
+                  targetMessageId={targetMessageId}
+                  threadHeadMessage={openThreadHeadMessage}
+                  threadMessages={threadMessages}
+                  threadTypingPubkeys={threadTypingPubkeys}
+                  threadReplyTargetId={threadReplyTargetId}
+                  threadReplyTargetMessage={threadReplyTargetMessage}
+                  threadScrollTargetId={threadScrollTargetId}
+                  isJoining={joinChannelMutation.isPending}
+                  onJoinChannel={joinChannelMutation.mutateAsync}
+                  typingPubkeys={humanTypingPubkeys}
+                />
+              </React.Suspense>
+            )
           ) : (
-            <React.Suspense fallback={<ViewLoadingFallback kind="channel" />}>
-              <ChannelPane
-                activeChannel={activeChannel}
-                agentSessionAgents={channelAgentSessionAgents}
-                botTypingPubkeys={botTypingPubkeys}
-                channelFind={channelFind}
-                currentPubkey={currentPubkey}
-                fetchOlder={fetchOlder}
-                hasOlderMessages={hasOlderMessages}
-                isFetchingOlder={isFetchingOlder}
-                editTarget={
-                  editTargetMessage
-                    ? {
-                        author: editTargetMessage.author,
-                        body: editTargetMessage.body,
-                        id: editTargetMessage.id,
-                      }
-                    : null
-                }
-                isSending={sendMessageMutation.isPending}
-                isTimelineLoading={isTimelineLoading}
-                messages={timelineMessages}
-                onCancelEdit={handleCancelEdit}
-                onCancelThreadReply={handleCancelThreadReply}
-                onCloseAgentSession={handleCloseAgentSession}
-                onCloseThread={handleCloseThread}
-                onDelete={handleDelete}
-                onEdit={handleEdit}
-                onEditSave={handleEditSave}
-                onExpandThreadReplies={handleExpandThreadReplies}
-                onOpenAgentSession={handleOpenAgentSession}
-                onOpenThread={handleOpenThreadAndCloseAgentSession}
-                onSelectThreadReplyTarget={handleSelectThreadReplyTarget}
-                onSendMessage={handleSendMessage}
-                onSendThreadReply={handleSendThreadReply}
-                onThreadScrollTargetResolved={handleThreadScrollTargetResolved}
-                onToggleReaction={effectiveToggleReaction}
-                openAgentSessionPubkey={openAgentSessionPubkey}
-                openThreadHeadId={openThreadHeadId}
-                personaLookup={personaLookup}
-                profiles={messageProfiles}
-                targetMessageId={targetMessageId}
-                threadHeadMessage={openThreadHeadMessage}
-                threadMessages={threadMessages}
-                threadTypingPubkeys={threadTypingPubkeys}
-                threadReplyTargetId={threadReplyTargetId}
-                threadReplyTargetMessage={threadReplyTargetMessage}
-                threadScrollTargetId={threadScrollTargetId}
-                isJoining={joinChannelMutation.isPending}
-                onJoinChannel={joinChannelMutation.mutateAsync}
-                typingPubkeys={humanTypingPubkeys}
-              />
-            </React.Suspense>
-          )
-        ) : (
-          <ChannelScreenEmptyState />
-        )}
-      </div>
+            <ChannelScreenEmptyState />
+          )}
+        </div>
 
-      <MembersSidebar
-        channel={activeChannel}
-        currentPubkey={currentPubkey}
-        open={isMembersSidebarOpen}
-        onOpenChange={setIsMembersSidebarOpen}
-        onViewActivity={handleOpenAgentSession}
-      />
+        <MembersSidebar
+          channel={activeChannel}
+          currentPubkey={currentPubkey}
+          open={isMembersSidebarOpen}
+          onOpenChange={setIsMembersSidebarOpen}
+          onViewActivity={handleOpenAgentSession}
+        />
+      </ProfilePanelProvider>
     </AgentSessionProvider>
   );
 }

desktop/src/features/channels/ui/useChannelAgentSessions.ts

@@ -12,6 +12,7 @@ type UseChannelAgentSessionsOptions = {
   managedAgents: ManagedAgent[];
   setExpandedThreadReplyIds: (value: Set<string>) => void;
   setOpenThreadHeadId: (value: string | null) => void;
+  setProfilePanelPubkey: (value: string | null) => void;
   setThreadReplyTargetId: (value: string | null) => void;
   setThreadScrollTargetId: (value: string | null) => void;
   targetMessageId: string | null;
@@ -26,6 +27,7 @@ export function useChannelAgentSessions({
   managedAgents,
   setExpandedThreadReplyIds,
   setOpenThreadHeadId,
+  setProfilePanelPubkey,
   setThreadReplyTargetId,
   setThreadScrollTargetId,
   targetMessageId,
@@ -62,11 +64,13 @@ export function useChannelAgentSessions({
       setExpandedThreadReplyIds(new Set());
       setThreadScrollTargetId(null);
       setThreadReplyTargetId(null);
+      setProfilePanelPubkey(null);
       setOpenAgentSessionPubkey(pubkey);
     },
     [
       setExpandedThreadReplyIds,
       setOpenThreadHeadId,
+      setProfilePanelPubkey,
       setThreadReplyTargetId,
       setThreadScrollTargetId,
     ],
@@ -79,9 +83,10 @@ export function useChannelAgentSessions({
   const openThreadAndCloseAgentSession = React.useCallback(
     (message: TimelineMessage) => {
       setOpenAgentSessionPubkey(null);
+      setProfilePanelPubkey(null);
       handleOpenThread(message);
     },
-    [handleOpenThread],
+    [handleOpenThread, setProfilePanelPubkey],
   );
 
   React.useEffect(() => {
@@ -138,6 +143,7 @@ export function useChannelAgentSessions({
     }
 
     setOpenAgentSessionPubkey(null);
+    setProfilePanelPubkey(null);
     setOpenThreadHeadId(threadHeadId);
     setThreadReplyTargetId(threadHeadId);
     setThreadScrollTargetId(targetMessageId);
@@ -148,6 +154,7 @@ export function useChannelAgentSessions({
     activeChannelId,
     setExpandedThreadReplyIds,
     setOpenThreadHeadId,
+    setProfilePanelPubkey,
     setThreadReplyTargetId,
     setThreadScrollTargetId,
     targetMessageId,