@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/members/MemberExecutionLog.tsx

@@ -0,0 +1,224 @@
+import { useMemo, useState } from 'react';
+
+import { DisplayItemList } from '@renderer/components/chat/DisplayItemList';
+import { LastOutputDisplay } from '@renderer/components/chat/LastOutputDisplay';
+import { SystemChatGroup } from '@renderer/components/chat/SystemChatGroup';
+import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { enhanceAIGroup } from '@renderer/utils/aiGroupEnhancer';
+import { transformChunksToConversation } from '@renderer/utils/groupTransformer';
+import { extractAgentBlockContents, stripAgentBlocks } from '@shared/constants/agentBlocks';
+import { format } from 'date-fns';
+import { Bot, ChevronDown, ChevronRight } from 'lucide-react';
+
+import type { EnhancedChunk } from '@renderer/types/data';
+import type { AIGroup, UserGroup } from '@renderer/types/groups';
+
+interface MemberExecutionLogProps {
+  chunks: EnhancedChunk[];
+  memberName?: string;
+}
+
+type ExpandedItemIdsByGroup = Map<string, Set<string>>;
+
+export const MemberExecutionLog = ({
+  chunks,
+  memberName,
+}: MemberExecutionLogProps): React.JSX.Element => {
+  const conversation = useMemo(() => transformChunksToConversation(chunks, [], false), [chunks]);
+
+  // Show newest groups first — most recent activity is most relevant in execution logs.
+  const orderedItems = useMemo(() => [...conversation.items].reverse(), [conversation.items]);
+
+  // Store collapsed groups instead of expanded: by default, everything is expanded.
+  // This avoids resetting state in an effect when conversation changes.
+  const [collapsedGroupIds, setCollapsedGroupIds] = useState<Set<string>>(new Set());
+  const [expandedItemIdsByGroup, setExpandedItemIdsByGroup] = useState<ExpandedItemIdsByGroup>(
+    new Map()
+  );
+
+  if (!orderedItems.length) {
+    return (
+      <div className="py-6 text-center text-xs text-[var(--color-text-muted)]">
+        Nothing to display
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-w-0 space-y-6 overflow-hidden">
+      {orderedItems.map((item) => {
+        if (item.type === 'system') {
+          return <SystemChatGroup key={item.group.id} systemGroup={item.group} />;
+        }
+        if (item.type === 'user') {
+          return <UserLogItem key={item.group.id} group={item.group} />;
+        }
+        if (item.type === 'ai') {
+          return (
+            <AIExecutionGroup
+              key={item.group.id}
+              group={item.group}
+              memberName={memberName}
+              expanded={!collapsedGroupIds.has(item.group.id)}
+              expandedItemIds={expandedItemIdsByGroup.get(item.group.id) ?? new Set()}
+              onToggleExpanded={() => {
+                setCollapsedGroupIds((prev) => {
+                  const next = new Set(prev);
+                  if (next.has(item.group.id)) next.delete(item.group.id);
+                  else next.add(item.group.id);
+                  return next;
+                });
+              }}
+              onToggleItem={(itemId) => {
+                setExpandedItemIdsByGroup((prev) => {
+                  const next = new Map(prev);
+                  const current = new Set(next.get(item.group.id) ?? []);
+                  if (current.has(itemId)) current.delete(itemId);
+                  else current.add(itemId);
+                  next.set(item.group.id, current);
+                  return next;
+                });
+              }}
+            />
+          );
+        }
+        if (item.type === 'compact') {
+          // Compact boundaries are useful in full session view but noisy here
+          return null;
+        }
+        return null;
+      })}
+    </div>
+  );
+};
+
+/** Extract agent-only instruction blocks and human-visible text from a message. */
+function splitAgentBlocks(raw: string): { humanText: string; agentInfo: string[] } {
+  const agentInfo = extractAgentBlockContents(raw);
+  const humanText = stripAgentBlocks(raw);
+  return { humanText, agentInfo };
+}
+
+const UserLogItem = ({ group }: { group: UserGroup }): React.JSX.Element => {
+  const text = group.content.rawText ?? group.content.text ?? '';
+  const { humanText, agentInfo } = useMemo(() => splitAgentBlocks(text), [text]);
+  const [agentInfoOpen, setAgentInfoOpen] = useState(false);
+
+  if (!humanText && agentInfo.length === 0) {
+    return (
+      <div className="py-1 text-[10px] text-[var(--color-text-muted)]">
+        {format(group.timestamp, 'h:mm:ss a')} — (empty)
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-w-0 space-y-1 overflow-hidden py-1">
+      <div className="text-[10px] text-[var(--color-text-muted)]">
+        {format(group.timestamp, 'h:mm:ss a')}
+      </div>
+      {humanText && (
+        <div className="min-w-0 overflow-x-auto break-words text-xs text-[var(--chat-user-text)]">
+          <MarkdownViewer content={humanText} copyable />
+        </div>
+      )}
+      {agentInfo.length > 0 && (
+        <div className="rounded border border-[var(--color-border)] bg-[var(--color-surface)]">
+          <button
+            type="button"
+            className="flex w-full items-center gap-1.5 px-2 py-1 text-left text-[10px] text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
+            onClick={() => setAgentInfoOpen((v) => !v)}
+          >
+            <ChevronRight
+              size={10}
+              className={`shrink-0 transition-transform ${agentInfoOpen ? 'rotate-90' : ''}`}
+            />
+            <Bot size={10} className="shrink-0" />
+            Agent instructions
+          </button>
+          {agentInfoOpen && (
+            <pre className="overflow-x-auto border-t border-[var(--color-border)] px-2 py-1.5 text-[10px] leading-relaxed text-[var(--color-text-muted)]">
+              {agentInfo.join('\n\n')}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface AIExecutionGroupProps {
+  group: AIGroup;
+  memberName?: string;
+  expanded: boolean;
+  expandedItemIds: Set<string>;
+  onToggleExpanded: () => void;
+  onToggleItem: (itemId: string) => void;
+}
+
+const AIExecutionGroup = ({
+  group,
+  memberName,
+  expanded,
+  expandedItemIds,
+  onToggleExpanded,
+  onToggleItem,
+}: AIExecutionGroupProps): React.JSX.Element => {
+  const enhanced = useMemo(() => {
+    if (!memberName) {
+      return enhanceAIGroup(group);
+    }
+    const normalized = memberName.trim().toLowerCase();
+    const filteredProcesses = group.processes.filter(
+      (p) => p.team?.memberName?.toLowerCase() === normalized
+    );
+    return enhanceAIGroup({ ...group, processes: filteredProcesses });
+  }, [group, memberName]);
+  const hasToggleContent = enhanced.displayItems.length > 0;
+  const visibleLastOutput =
+    enhanced.lastOutput?.type === 'tool_result' && hasToggleContent ? null : enhanced.lastOutput;
+
+  return (
+    <div className="space-y-3 border-l-2 pl-3" style={{ borderColor: 'var(--chat-ai-border)' }}>
+      {hasToggleContent ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center gap-2 text-left"
+              onClick={onToggleExpanded}
+              aria-expanded={expanded}
+            >
+              <Bot className="size-4 shrink-0 text-[var(--color-text-secondary)]" />
+              <span className="shrink-0 text-xs font-semibold text-[var(--color-text-secondary)]">
+                Agent
+              </span>
+              <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-muted)]">
+                {enhanced.itemsSummary}
+              </span>
+              <ChevronDown
+                className={`size-3.5 shrink-0 text-[var(--color-text-muted)] transition-transform ${expanded ? 'rotate-180' : ''}`}
+              />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{expanded ? 'Collapse' : 'Expand'}</TooltipContent>
+        </Tooltip>
+      ) : null}
+
+      {hasToggleContent && expanded ? (
+        <div className="py-1 pl-2">
+          <DisplayItemList
+            items={enhanced.displayItems}
+            order="newest-first"
+            onItemClick={onToggleItem}
+            expandedItemIds={expandedItemIds}
+            aiGroupId={group.id}
+          />
+        </div>
+      ) : null}
+
+      <LastOutputDisplay lastOutput={visibleLastOutput} aiGroupId={group.id} />
+    </div>
+  );
+};

package/src/renderer/components/team/members/MemberHoverCard.tsx

@@ -0,0 +1,292 @@
+import { Badge } from '@renderer/components/ui/badge';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@renderer/components/ui/hover-card';
+import {
+  getTeamColorSet,
+  getThemedBadge,
+  getThemedBorder,
+  getThemedText,
+} from '@renderer/constants/teamColors';
+import { useTheme } from '@renderer/hooks/useTheme';
+import { useStore } from '@renderer/store';
+import {
+  getCurrentProvisioningProgressForTeam,
+  selectResolvedMemberForTeamName,
+  selectTeamIsAliveForName,
+  selectTeamMemberSnapshotsForName,
+  selectTeamTasksForName,
+} from '@renderer/store/slices/teamSlice';
+import { formatAgentRole } from '@renderer/utils/formatAgentRole';
+import {
+  agentAvatarUrl,
+  buildMemberAvatarMap,
+  buildMemberLaunchPresentation,
+  displayMemberName,
+} from '@renderer/utils/memberHelpers';
+import {
+  buildMemberLaunchDiagnosticsPayload,
+  getMemberLaunchDiagnosticsErrorMessage,
+  hasMemberLaunchDiagnosticsDetails,
+  hasMemberLaunchDiagnosticsError,
+} from '@renderer/utils/memberLaunchDiagnostics';
+import { isLeadMember } from '@shared/utils/leadDetection';
+import { ExternalLink } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { getLaunchJoinMilestonesFromMembers, getLaunchJoinState } from '../provisioningSteps';
+
+import { CurrentTaskIndicator } from './CurrentTaskIndicator';
+import { MemberLaunchDiagnosticsButton } from './MemberLaunchDiagnosticsButton';
+
+import type { LeadActivityState, TeamTaskWithKanban } from '@shared/types';
+
+interface MemberHoverCardProps {
+  /** The member name to look up */
+  name: string;
+  /** Color key for the member */
+  color?: string;
+  /** Owning team context for store lookups. */
+  teamName?: string;
+  /** Called when user clicks on the current task */
+  onOpenTask?: (task: TeamTaskWithKanban) => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps children in a HoverCard that shows member info on hover.
+ * Reads member data from the team snapshot + resolved member selectors.
+ * Falls back to a simple wrapper when member data is unavailable.
+ */
+export const MemberHoverCard = ({
+  name,
+  color,
+  teamName,
+  onOpenTask,
+  children,
+}: MemberHoverCardProps): React.JSX.Element => {
+  const { isLight } = useTheme();
+  const selectedTeamName = useStore((s) => s.selectedTeamName);
+  const effectiveTeamName = teamName ?? selectedTeamName;
+  const {
+    member,
+    teamMembers,
+    tasks,
+    isTeamAlive,
+    progress,
+    memberSpawnSnapshot,
+    memberSpawnStatuses,
+    spawnEntry,
+    runtimeRunId,
+    runtimeEntry,
+    leadActivity,
+  } = useStore(
+    useShallow((s) => ({
+      member: effectiveTeamName
+        ? selectResolvedMemberForTeamName(s, effectiveTeamName, name)
+        : null,
+      teamMembers: effectiveTeamName ? selectTeamMemberSnapshotsForName(s, effectiveTeamName) : [],
+      tasks: effectiveTeamName ? selectTeamTasksForName(s, effectiveTeamName) : [],
+      isTeamAlive: effectiveTeamName ? selectTeamIsAliveForName(s, effectiveTeamName) : undefined,
+      progress: effectiveTeamName
+        ? getCurrentProvisioningProgressForTeam(s, effectiveTeamName)
+        : null,
+      memberSpawnSnapshot: effectiveTeamName
+        ? s.memberSpawnSnapshotsByTeam[effectiveTeamName]
+        : undefined,
+      memberSpawnStatuses: effectiveTeamName
+        ? s.memberSpawnStatusesByTeam[effectiveTeamName]
+        : undefined,
+      spawnEntry: effectiveTeamName
+        ? s.memberSpawnStatusesByTeam[effectiveTeamName]?.[name]
+        : undefined,
+      runtimeRunId: effectiveTeamName
+        ? s.teamAgentRuntimeByTeam?.[effectiveTeamName]?.runId
+        : undefined,
+      runtimeEntry: effectiveTeamName
+        ? s.teamAgentRuntimeByTeam?.[effectiveTeamName]?.members[name]
+        : undefined,
+      leadActivity: effectiveTeamName ? s.leadActivityByTeam[effectiveTeamName] : undefined,
+    }))
+  );
+  const openMemberProfile = useStore((s) => s.openMemberProfile);
+  const avatarMap = buildMemberAvatarMap(teamMembers);
+
+  if (!member) {
+    return <>{children}</>;
+  }
+
+  const launchJoinMilestones = getLaunchJoinMilestonesFromMembers({
+    members: teamMembers,
+    memberSpawnStatuses,
+    memberSpawnSnapshot,
+  });
+  const isLaunchSettling =
+    progress?.state === 'ready' && getLaunchJoinState(launchJoinMilestones).hasMembersStillJoining;
+  const colors = getTeamColorSet(color ?? member.color ?? '');
+  const roleLabel = formatAgentRole(member.role) ?? formatAgentRole(member.agentType);
+  const launchPresentation = buildMemberLaunchPresentation({
+    member,
+    spawnStatus: spawnEntry?.status,
+    spawnLaunchState: spawnEntry?.launchState,
+    spawnLivenessSource: spawnEntry?.livenessSource,
+    spawnRuntimeAlive: spawnEntry?.runtimeAlive,
+    runtimeEntry,
+    runtimeAdvisory: member.runtimeAdvisory,
+    isLaunchSettling,
+    isTeamAlive,
+    isTeamProvisioning: false,
+    leadActivity: isLeadMember(member) ? leadActivity : undefined,
+  });
+  const presenceLabel = launchPresentation.presenceLabel;
+  const launchVisualState = launchPresentation.launchVisualState;
+  const launchStatusLabel = launchPresentation.launchStatusLabel;
+  const dotClass = launchPresentation.dotClass;
+  const runtimeAdvisoryLabel = launchPresentation.runtimeAdvisoryLabel;
+  const runtimeAdvisoryTitle = launchPresentation.runtimeAdvisoryTitle;
+  const runtimeAdvisoryTone = launchPresentation.runtimeAdvisoryTone;
+  const badgeLabel =
+    runtimeAdvisoryTone === 'error' && runtimeAdvisoryLabel
+      ? runtimeAdvisoryLabel
+      : launchVisualState === 'runtime_pending' ||
+          launchVisualState === 'permission_pending' ||
+          launchVisualState === 'shell_only' ||
+          launchVisualState === 'runtime_candidate' ||
+          launchVisualState === 'registered_only' ||
+          launchVisualState === 'stale_runtime'
+        ? (launchStatusLabel ?? presenceLabel)
+        : presenceLabel;
+  const launchDiagnosticsPayload = buildMemberLaunchDiagnosticsPayload({
+    teamName: effectiveTeamName,
+    runId: runtimeRunId ?? memberSpawnSnapshot?.runId ?? progress?.runId,
+    memberName: member.name,
+    spawnEntry,
+    runtimeEntry,
+  });
+  const launchErrorMessage = getMemberLaunchDiagnosticsErrorMessage(launchDiagnosticsPayload);
+  const showCopyDiagnostics =
+    hasMemberLaunchDiagnosticsError(launchDiagnosticsPayload) &&
+    hasMemberLaunchDiagnosticsDetails(launchDiagnosticsPayload);
+  const currentTask: TeamTaskWithKanban | null = member.currentTaskId
+    ? (tasks.find((t) => t.id === member.currentTaskId) ?? null)
+    : null;
+  const reviewTask: TeamTaskWithKanban | null = tasks
+    ? (tasks.find(
+        (task) =>
+          task.reviewer === member.name &&
+          task.id !== member.currentTaskId &&
+          (task.reviewState === 'review' || task.kanbanColumn === 'review')
+      ) ?? null)
+    : null;
+
+  return (
+    <HoverCard openDelay={300} closeDelay={200}>
+      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
+      <HoverCardContent side="top" align="start" sideOffset={8}>
+        <div className="flex flex-col gap-2.5">
+          {/* Header: avatar + name + presence */}
+          <div className="flex items-center gap-3">
+            <div className="relative shrink-0">
+              <img
+                src={avatarMap.get(member.name) ?? agentAvatarUrl(member.name, 64)}
+                alt={member.name}
+                className="size-10 rounded-full bg-[var(--color-surface-raised)]"
+                loading="lazy"
+              />
+              <span
+                className={`absolute -bottom-0.5 -right-0.5 size-3 rounded-full border-2 border-[var(--color-surface)] ${dotClass}`}
+                aria-label={badgeLabel}
+              />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="truncate text-sm font-semibold"
+                  style={{ color: getThemedText(colors, isLight) }}
+                >
+                  {displayMemberName(member.name)}
+                </span>
+                <Badge
+                  variant="secondary"
+                  className="shrink-0 px-1.5 py-0 text-[10px] font-normal leading-tight"
+                  title={runtimeAdvisoryTitle}
+                  style={{
+                    backgroundColor:
+                      runtimeAdvisoryTone === 'error'
+                        ? 'rgba(239, 68, 68, 0.16)'
+                        : getThemedBadge(colors, isLight),
+                    color:
+                      runtimeAdvisoryTone === 'error'
+                        ? 'rgb(252, 165, 165)'
+                        : getThemedText(colors, isLight),
+                    border:
+                      runtimeAdvisoryTone === 'error'
+                        ? '1px solid rgba(248, 113, 113, 0.35)'
+                        : `1px solid ${getThemedBorder(colors, isLight)}40`,
+                  }}
+                >
+                  {badgeLabel}
+                </Badge>
+              </div>
+              {roleLabel && (
+                <span className="text-xs text-[var(--color-text-muted)]">{roleLabel}</span>
+              )}
+            </div>
+          </div>
+
+          {/* Current task */}
+          {currentTask && (
+            <div className="flex items-center gap-1 overflow-hidden rounded border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1.5">
+              <CurrentTaskIndicator
+                task={currentTask}
+                borderColor={colors.border}
+                maxSubjectLength={28}
+                activityLabel="working on"
+                onOpenTask={onOpenTask ? () => onOpenTask(currentTask) : undefined}
+              />
+            </div>
+          )}
+
+          {/* Review task */}
+          {reviewTask && (
+            <div className="flex items-center gap-1 overflow-hidden rounded border border-[var(--color-border)] bg-[var(--color-surface)] px-2 py-1.5">
+              <CurrentTaskIndicator
+                task={reviewTask}
+                borderColor={colors.border}
+                maxSubjectLength={28}
+                activityLabel="reviewing"
+                onOpenTask={onOpenTask ? () => onOpenTask(reviewTask) : undefined}
+              />
+            </div>
+          )}
+
+          {launchErrorMessage ? (
+            <div className="flex items-center gap-2 rounded border border-red-500/25 bg-red-500/10 px-2 py-1.5 text-xs text-red-300">
+              <span className="min-w-0 flex-1 truncate" title={launchErrorMessage}>
+                {launchErrorMessage}
+              </span>
+              {showCopyDiagnostics ? (
+                <MemberLaunchDiagnosticsButton
+                  payload={launchDiagnosticsPayload}
+                  className="h-auto shrink-0 rounded px-1.5 py-1 text-red-300 hover:bg-red-500/10 hover:text-red-200"
+                />
+              ) : null}
+            </div>
+          ) : null}
+
+          <div className="flex gap-1.5">
+            <button
+              type="button"
+              className="flex flex-1 items-center justify-center gap-1.5 rounded border border-[var(--color-border)] px-3 py-1.5 text-xs text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
+              onClick={(e) => {
+                e.stopPropagation();
+                openMemberProfile(member.name);
+              }}
+            >
+              <ExternalLink size={12} />
+              Open profile
+            </button>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+};

package/src/renderer/components/team/members/MemberLaunchDiagnosticsButton.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import {
+  formatMemberLaunchDiagnosticsPayload,
+  type MemberLaunchDiagnosticsPayload,
+} from '@renderer/utils/memberLaunchDiagnostics';
+import { Check, ClipboardList } from 'lucide-react';
+
+interface MemberLaunchDiagnosticsButtonProps {
+  payload: MemberLaunchDiagnosticsPayload;
+  label?: string;
+  className?: string;
+  size?: 'icon' | 'sm';
+}
+
+export const MemberLaunchDiagnosticsButton = ({
+  payload,
+  label,
+  className,
+  size = label ? 'sm' : 'icon',
+}: MemberLaunchDiagnosticsButtonProps): React.JSX.Element => {
+  const [copied, setCopied] = useState(false);
+
+  const copyDiagnostics = async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+    event.preventDefault();
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(formatMemberLaunchDiagnosticsPayload(payload));
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  const icon = copied ? <Check size={13} /> : <ClipboardList size={13} />;
+  const tooltip = copied ? 'Diagnostics copied' : 'Copy diagnostics';
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size={size}
+          className={className}
+          title={tooltip}
+          aria-label={tooltip}
+          onClick={copyDiagnostics}
+        >
+          {icon}
+          {label ? <span>{label}</span> : null}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+};