@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/activity/MessageExpandDialog.tsx

@@ -0,0 +1,213 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
+import { getTeamColorSet } from '@renderer/constants/teamColors';
+import { agentAvatarUrl, buildMemberAvatarMap } from '@renderer/utils/memberHelpers';
+
+import { MemberBadge } from '../MemberBadge';
+
+import { ActivityItem } from './ActivityItem';
+import { buildMessageContext, resolveMessageRenderProps } from './activityMessageContext';
+import { ThoughtBodyContent } from './ThoughtBodyContent';
+
+import type { LeadThoughtGroup, TimelineItem } from './LeadThoughtsGroup';
+import type { InboxMessage, ResolvedTeamMember } from '@shared/types';
+
+function formatTime(timestamp: string): string {
+  const d = new Date(timestamp);
+  if (Number.isNaN(d.getTime())) return timestamp;
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+interface DialogThoughtsContentProps {
+  group: LeadThoughtGroup;
+  members?: ResolvedTeamMember[];
+  memberColor?: string;
+  onTaskIdClick?: (taskId: string) => void;
+  onReply?: (message: InboxMessage) => void;
+  memberColorMap?: Map<string, string>;
+  teamNames?: string[];
+  teamColorByName?: ReadonlyMap<string, string>;
+  onTeamClick?: (teamName: string) => void;
+}
+
+const DialogThoughtsContent = ({
+  group,
+  members,
+  memberColor,
+  onTaskIdClick,
+  onReply,
+  memberColorMap,
+  teamNames = [],
+  teamColorByName,
+  onTeamClick,
+}: DialogThoughtsContentProps): React.JSX.Element => {
+  const { thoughts } = group;
+  const newest = thoughts[0];
+  const oldest = thoughts[thoughts.length - 1];
+  const colors = getTeamColorSet(memberColor ?? '');
+  const avatarMap = useMemo(() => buildMemberAvatarMap(members ?? []), [members]);
+  const chronological = useMemo(() => [...thoughts].reverse(), [thoughts]);
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center gap-2 pb-3">
+        <img
+          src={avatarMap.get(newest.from) ?? agentAvatarUrl(newest.from, 32)}
+          alt=""
+          className="size-6 rounded-full bg-[var(--color-surface-raised)]"
+          loading="lazy"
+        />
+        <MemberBadge name={newest.from} color={memberColor} hideAvatar />
+        <span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+          {thoughts.length} thoughts
+        </span>
+        <span className="ml-auto text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+          {formatTime(oldest.timestamp) === formatTime(newest.timestamp)
+            ? formatTime(oldest.timestamp)
+            : `${formatTime(oldest.timestamp)}–${formatTime(newest.timestamp)}`}
+        </span>
+      </div>
+      {/* Body */}
+      <div
+        className="rounded-md"
+        style={{
+          border: `1px solid var(--color-border-subtle)`,
+          borderLeft: `3px solid ${colors.border}`,
+        }}
+      >
+        {chronological.map((thought, idx) => (
+          <ThoughtBodyContent
+            key={thought.messageId ?? idx}
+            thought={thought}
+            showDivider={idx > 0}
+            onTaskIdClick={onTaskIdClick}
+            onReply={onReply}
+            memberColorMap={memberColorMap}
+            teamNames={teamNames}
+            teamColorByName={teamColorByName}
+            onTeamClick={onTeamClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface MessageExpandDialogProps {
+  expandedItem: TimelineItem | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  teamName: string;
+  members?: ResolvedTeamMember[];
+  onCreateTaskFromMessage?: (subject: string, description: string) => void;
+  onReplyToMessage?: (message: InboxMessage) => void;
+  onMemberClick?: (member: ResolvedTeamMember) => void;
+  onTaskIdClick?: (taskId: string) => void;
+  onRestartTeam?: () => void;
+  teamNames?: string[];
+  teamColorByName?: ReadonlyMap<string, string>;
+  onTeamClick?: (teamName: string) => void;
+}
+
+export const MessageExpandDialog = memo(function MessageExpandDialog({
+  expandedItem,
+  open,
+  onOpenChange,
+  teamName,
+  members,
+  onCreateTaskFromMessage,
+  onReplyToMessage,
+  onMemberClick,
+  onTaskIdClick,
+  onRestartTeam,
+  teamNames = [],
+  teamColorByName,
+  onTeamClick,
+}: MessageExpandDialogProps): React.JSX.Element {
+  // Keep last valid item for exit animation
+  const lastItemRef = useRef<TimelineItem | null>(null);
+  if (expandedItem) lastItemRef.current = expandedItem;
+  const displayItem = expandedItem ?? lastItemRef.current;
+
+  const ctx = useMemo(() => buildMessageContext(members), [members]);
+
+  const handleMemberNameClick = useCallback(
+    (name: string) => {
+      const member = members?.find(
+        (candidate) => candidate.name === name || candidate.agentType === name
+      );
+      if (member) onMemberClick?.(member);
+    },
+    [members, onMemberClick]
+  );
+
+  const renderProps =
+    displayItem?.type === 'message' ? resolveMessageRenderProps(displayItem.message, ctx) : null;
+
+  const thoughtMemberColor =
+    displayItem?.type === 'lead-thoughts'
+      ? ctx.memberInfo.get(displayItem.group.thoughts[0].from)?.color
+      : undefined;
+
+  const headerTitle =
+    displayItem?.type === 'message'
+      ? displayItem.message.from
+      : displayItem?.type === 'lead-thoughts'
+        ? `${displayItem.group.thoughts[0].from} — thoughts`
+        : '';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[90vh] w-[80vw] max-w-[2000px] flex-col overflow-hidden p-0">
+        <DialogHeader className="shrink-0 px-4 pt-4">
+          <DialogTitle className="text-sm">{headerTitle}</DialogTitle>
+          <DialogDescription className="sr-only">Expanded message view</DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto p-4">
+          {displayItem?.type === 'message' ? (
+            <ActivityItem
+              message={displayItem.message}
+              teamName={teamName}
+              memberRole={renderProps?.memberRole}
+              memberColor={renderProps?.memberColor}
+              recipientColor={renderProps?.recipientColor}
+              memberColorMap={ctx.colorMap}
+              localMemberNames={ctx.localMemberNames}
+              onMemberNameClick={onMemberClick ? handleMemberNameClick : undefined}
+              onCreateTask={onCreateTaskFromMessage}
+              onReply={onReplyToMessage}
+              onTaskIdClick={onTaskIdClick}
+              onRestartTeam={onRestartTeam}
+              compactHeader={false}
+              isCollapsed={false}
+              teamNames={teamNames}
+              teamColorByName={teamColorByName}
+              onTeamClick={onTeamClick}
+            />
+          ) : displayItem?.type === 'lead-thoughts' ? (
+            <DialogThoughtsContent
+              group={displayItem.group}
+              members={members}
+              memberColor={thoughtMemberColor}
+              onTaskIdClick={onTaskIdClick}
+              onReply={onReplyToMessage}
+              memberColorMap={ctx.colorMap}
+              teamNames={teamNames}
+              teamColorByName={teamColorByName}
+              onTeamClick={onTeamClick}
+            />
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+});

package/src/renderer/components/team/activity/PendingRepliesBlock.tsx

@@ -0,0 +1,275 @@
+import { CARD_BG, CARD_BORDER_STYLE, CARD_ICON_MUTED } from '@renderer/constants/cssVariables';
+import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
+import { useTheme } from '@renderer/hooks/useTheme';
+import { useStore } from '@renderer/store';
+import { formatAgentRole } from '@renderer/utils/formatAgentRole';
+import {
+  agentAvatarUrl,
+  buildMemberAvatarMap,
+  buildMemberColorMap,
+  displayMemberName,
+  getMemberRuntimeAdvisoryLabel,
+  getMemberRuntimeAdvisoryTitle,
+} from '@renderer/utils/memberHelpers';
+import { nameColorSet } from '@renderer/utils/projectColor';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { Loader2, ShieldQuestion, Users } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { ResolvedTeamMember } from '@shared/types';
+import type { ReactNode } from 'react';
+
+export interface PendingCrossTeamReply {
+  teamName: string;
+  sentAtMs: number;
+}
+
+interface PendingRepliesBlockProps {
+  members: ResolvedTeamMember[];
+  pendingRepliesByMember: Record<string, number>;
+  pendingCrossTeamReplies?: PendingCrossTeamReply[];
+  headerRight?: ReactNode;
+  onMemberClick?: (member: ResolvedTeamMember) => void;
+}
+
+export const PendingRepliesBlock = ({
+  members,
+  pendingRepliesByMember,
+  pendingCrossTeamReplies = [],
+  headerRight,
+  onMemberClick,
+}: PendingRepliesBlockProps): React.JSX.Element | null => {
+  const { isLight } = useTheme();
+  const pendingApprovals = useStore(useShallow((s) => s.pendingApprovals));
+  const teamByName = useStore(useShallow((s) => s.teamByName));
+  const colorMap = buildMemberColorMap(members);
+  const avatarMap = buildMemberAvatarMap(members);
+  const memberPending = Object.entries(pendingRepliesByMember)
+    .map(([name, sentAtMs]) => ({
+      kind: 'member' as const,
+      member: members.find((m) => m.name === name) ?? null,
+      name,
+      sentAtMs,
+    }))
+    .filter(
+      (p): p is { kind: 'member'; member: ResolvedTeamMember; name: string; sentAtMs: number } =>
+        !!p.member
+    );
+  const teamPending = pendingCrossTeamReplies.map((entry) => ({
+    kind: 'team' as const,
+    teamName: entry.teamName,
+    sentAtMs: entry.sentAtMs,
+  }));
+
+  // Tool approvals awaiting user response
+  const userPending = pendingApprovals.map((a) => ({
+    kind: 'user' as const,
+    toolName: a.toolName,
+    sentAtMs: new Date(a.receivedAt).getTime(),
+  }));
+
+  const pending = [...memberPending, ...teamPending, ...userPending].sort(
+    (a, b) => b.sentAtMs - a.sentAtMs
+  );
+
+  if (pending.length === 0) return null;
+
+  return (
+    <div className="mb-3 space-y-1.5">
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-[10px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
+          Awaiting replies
+        </p>
+        {headerRight ? <div className="shrink-0">{headerRight}</div> : null}
+      </div>
+      {pending.map((entry) => {
+        const since = formatDistanceToNowStrict(entry.sentAtMs, { addSuffix: true });
+
+        if (entry.kind === 'member') {
+          const { member } = entry;
+          const colors = getTeamColorSet(colorMap.get(member.name) ?? '');
+          const roleLabel = formatAgentRole(
+            member.role ?? (member.agentType !== 'general-purpose' ? member.agentType : undefined)
+          );
+          const advisoryLabel = getMemberRuntimeAdvisoryLabel(
+            member.runtimeAdvisory,
+            member.providerId
+          );
+          const advisoryTitle = getMemberRuntimeAdvisoryTitle(
+            member.runtimeAdvisory,
+            member.providerId
+          );
+          const isRetrying = advisoryLabel !== null;
+
+          return (
+            <article
+              key={`pending-reply:${member.name}:${entry.sentAtMs}`}
+              className="activity-card-enter-animate overflow-hidden rounded-md"
+              style={{
+                backgroundColor: CARD_BG,
+                border: CARD_BORDER_STYLE,
+                borderLeft: `3px solid ${colors.border}`,
+              }}
+            >
+              <div className="flex items-center gap-2 px-3 py-2">
+                <span className="relative inline-flex shrink-0">
+                  <img
+                    src={avatarMap.get(member.name) ?? agentAvatarUrl(member.name, 24)}
+                    alt=""
+                    className="size-5 rounded-full bg-[var(--color-surface-raised)]"
+                    loading="lazy"
+                  />
+                  <span className="absolute -bottom-0.5 -right-0.5 flex size-2.5">
+                    <span
+                      className={`absolute inline-flex size-full animate-ping rounded-full opacity-70 ${isRetrying ? 'bg-amber-400' : 'bg-emerald-400'}`}
+                    />
+                    <span
+                      className={`relative inline-flex size-full rounded-full ${isRetrying ? 'bg-amber-500' : 'bg-emerald-500'}`}
+                    />
+                  </span>
+                </span>
+                {onMemberClick ? (
+                  <button
+                    type="button"
+                    className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide transition-opacity hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--color-border)]"
+                    style={{
+                      backgroundColor: getThemedBadge(colors, isLight),
+                      color: colors.text,
+                      border: `1px solid ${colors.border}40`,
+                    }}
+                    onClick={() => onMemberClick(member)}
+                    title="Open member"
+                  >
+                    {displayMemberName(member.name)}
+                  </button>
+                ) : (
+                  <span
+                    className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide"
+                    style={{
+                      backgroundColor: getThemedBadge(colors, isLight),
+                      color: colors.text,
+                      border: `1px solid ${colors.border}40`,
+                    }}
+                  >
+                    {displayMemberName(member.name)}
+                  </span>
+                )}
+                {roleLabel ? (
+                  <span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+                    {roleLabel}
+                  </span>
+                ) : null}
+                <span
+                  className={`min-w-0 flex-1 truncate text-[10px] ${isRetrying ? 'text-amber-300' : ''}`}
+                  style={isRetrying ? undefined : { color: CARD_ICON_MUTED }}
+                  title={advisoryTitle ?? 'Message sent, awaiting reply'}
+                >
+                  {advisoryLabel ?? 'awaiting reply'}
+                </span>
+                {isRetrying ? (
+                  <Loader2 className="size-3 shrink-0 animate-spin text-amber-400" />
+                ) : null}
+                <span className="shrink-0 text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+                  {since}
+                </span>
+              </div>
+            </article>
+          );
+        }
+
+        if (entry.kind === 'team') {
+          const teamDisplayName = teamByName[entry.teamName]?.displayName || entry.teamName;
+          const colors = nameColorSet(teamDisplayName, isLight);
+          return (
+            <article
+              key={`pending-reply:team:${entry.teamName}:${entry.sentAtMs}`}
+              className="activity-card-enter-animate overflow-hidden rounded-md"
+              style={{
+                backgroundColor: CARD_BG,
+                border: CARD_BORDER_STYLE,
+                borderLeft: `3px solid ${colors.border}`,
+              }}
+            >
+              <div className="flex items-center gap-2 px-3 py-2">
+                <span className="relative inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-raised)] p-1">
+                  <Users size={12} style={{ color: colors.border }} />
+                  <span className="absolute -bottom-0.5 -right-0.5 flex size-2.5">
+                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-70" />
+                    <span className="relative inline-flex size-full rounded-full bg-emerald-500" />
+                  </span>
+                </span>
+                <span
+                  className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide"
+                  style={{
+                    backgroundColor: getThemedBadge(colors, isLight),
+                    color: colors.text,
+                    border: `1px solid ${colors.border}40`,
+                  }}
+                  title={entry.teamName}
+                >
+                  {teamDisplayName}
+                </span>
+                <span className="text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+                  external team
+                </span>
+                <span
+                  className="min-w-0 flex-1 truncate text-[10px]"
+                  style={{ color: CARD_ICON_MUTED }}
+                  title="Cross-team message sent, awaiting reply"
+                >
+                  awaiting reply
+                </span>
+                <span className="shrink-0 text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+                  {since}
+                </span>
+              </div>
+            </article>
+          );
+        }
+
+        // User tool approval pending
+        return (
+          <article
+            key={`pending-reply:user:${entry.sentAtMs}`}
+            className="activity-card-enter-animate overflow-hidden rounded-md"
+            style={{
+              backgroundColor: CARD_BG,
+              border: CARD_BORDER_STYLE,
+              borderLeft: '3px solid var(--color-text-muted)',
+            }}
+          >
+            <div className="flex items-center gap-2 px-3 py-2">
+              <span className="relative inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-raised)] p-1">
+                <ShieldQuestion size={12} style={{ color: 'var(--color-text-muted)' }} />
+                <span className="absolute -bottom-0.5 -right-0.5 flex size-2.5">
+                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-amber-400 opacity-70" />
+                  <span className="relative inline-flex size-full rounded-full bg-amber-500" />
+                </span>
+              </span>
+              <span
+                className="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wide"
+                style={{
+                  backgroundColor: 'var(--color-surface-raised)',
+                  color: 'var(--color-text-secondary)',
+                  border: '1px solid var(--color-border-emphasis)',
+                }}
+              >
+                user
+              </span>
+              <span
+                className="min-w-0 flex-1 truncate text-[10px]"
+                style={{ color: CARD_ICON_MUTED }}
+                title={`Tool approval: ${entry.toolName}`}
+              >
+                awaiting approval
+              </span>
+              <span className="shrink-0 text-[10px]" style={{ color: CARD_ICON_MUTED }}>
+                {since}
+              </span>
+            </div>
+          </article>
+        );
+      })}
+    </div>
+  );
+};

package/src/renderer/components/team/activity/ReplyQuoteBlock.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+
+import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
+import { MemberBadge } from '@renderer/components/team/MemberBadge';
+import { linkifyTaskIdsInMarkdown } from '@renderer/utils/taskReferenceUtils';
+
+import type { ParsedMessageReply } from '@renderer/utils/agentMessageFormatting';
+import type { TaskRef } from '@shared/types';
+
+interface ReplyQuoteBlockProps {
+  reply: ParsedMessageReply;
+  /** Color name for the quoted agent (resolved from memberColorMap). */
+  memberColor?: string;
+  /** When set, limits height of the reply body (e.g. "max-h-56"). Omit to show full content. */
+  bodyMaxHeight?: string;
+  /** Structured task refs for the reply body, when available. */
+  replyTaskRefs?: TaskRef[];
+}
+
+/** Threshold (characters) above which the "more/less" toggle is shown. */
+const LONG_QUOTE_THRESHOLD = 200;
+
+export const ReplyQuoteBlock = ({
+  reply,
+  memberColor,
+  bodyMaxHeight = 'max-h-56',
+  replyTaskRefs,
+}: ReplyQuoteBlockProps): React.JSX.Element => {
+  const isLong = reply.originalText.length > LONG_QUOTE_THRESHOLD;
+  const [expanded, setExpanded] = useState(false);
+
+  const quoteMaxHeight = expanded ? 'max-h-48' : 'max-h-[3.75rem]';
+
+  return (
+    <div className="space-y-2">
+      {/* Quote block — styled like SendMessageDialog */}
+      <div className="relative overflow-hidden rounded-md border border-blue-400/20 bg-blue-100/40 py-2 pl-3 pr-2 dark:border-blue-500/20 dark:bg-blue-950/20">
+        {/* Decorative quotation mark */}
+        <span className="pointer-events-none absolute -right-1 top-1/2 -translate-y-1/2 select-none font-serif text-[48px] leading-none text-blue-600/[0.08] dark:text-blue-400/[0.08]">
+          &ldquo;
+        </span>
+
+        {/* "Replying to" + MemberBadge */}
+        <div className="mb-1 flex items-center gap-1.5">
+          <span className="text-[10px] text-blue-600/60 dark:text-blue-300/60">Replying to</span>
+          <MemberBadge name={reply.agentName} color={memberColor} size="sm" />
+        </div>
+
+        {/* Quote text */}
+        <div className={`pr-5 opacity-50 ${expanded ? '' : 'max-h-[3.75rem] overflow-hidden'}`}>
+          <MarkdownViewer
+            content={linkifyTaskIdsInMarkdown(reply.originalText)}
+            bare
+            maxHeight={quoteMaxHeight}
+          />
+        </div>
+
+        {/* More/less toggle */}
+        {isLong ? (
+          <button
+            type="button"
+            className="mt-0.5 text-[10px] text-blue-600/60 hover:text-blue-700 dark:text-blue-400/60 dark:hover:text-blue-300"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            {expanded ? 'less' : 'more'}
+          </button>
+        ) : null}
+      </div>
+
+      {/* Reply text */}
+      <MarkdownViewer
+        content={linkifyTaskIdsInMarkdown(reply.replyText, replyTaskRefs)}
+        maxHeight={bodyMaxHeight}
+        copyable
+        bare
+      />
+    </div>
+  );
+};