@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/items/TeammateMessageItem.tsx

@@ -0,0 +1,261 @@
+import React, { useMemo } from 'react';
+
+import {
+  CARD_BG,
+  CARD_BORDER_STYLE,
+  CARD_HEADER_BG,
+  CARD_ICON_MUTED,
+  CARD_TEXT_LIGHT,
+} from '@renderer/constants/cssVariables';
+import { getTeamColorSet, getThemedBadge } from '@renderer/constants/teamColors';
+import { useTheme } from '@renderer/hooks/useTheme';
+import { useStore } from '@renderer/store';
+import { selectResolvedMembersForTeamName } from '@renderer/store/slices/teamSlice';
+import { detectOperationalNoise } from '@renderer/utils/agentMessageFormatting';
+import { formatTokensCompact } from '@renderer/utils/formatters';
+import { buildMemberColorMap } from '@renderer/utils/memberHelpers';
+import { linkifyAllMentionsInMarkdown } from '@renderer/utils/mentionLinkify';
+import { stripAgentBlocks } from '@shared/constants/agentBlocks';
+import { extractMarkdownPlainText } from '@shared/utils/markdownTextSearch';
+import { format } from 'date-fns';
+import { ChevronRight, CornerDownLeft, MessageSquare, RefreshCw } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { MarkdownViewer } from '../viewers/MarkdownViewer';
+
+import type { TeammateMessage } from '@renderer/types/groups';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface TeammateMessageItemProps {
+  teammateMessage: TeammateMessage;
+  onClick: () => void;
+  isExpanded: boolean;
+  /** Callback to spotlight the reply link: pass toolId on hover, null on leave */
+  onReplyHover?: (toolId: string | null) => void;
+  /** Additional classes for highlighting (e.g., error deep linking) */
+  highlightClasses?: string;
+  /** Inline styles for highlighting (used by custom hex colors) */
+  highlightStyle?: React.CSSProperties;
+}
+
+// =============================================================================
+// Resend Detection
+// =============================================================================
+
+const RESEND_PATTERNS = [
+  /\bresend/i,
+  /\bre-send/i,
+  /\bsent\b.{0,20}\bearlier/i,
+  /\balready\s+sent/i,
+  /\bsent\s+in\s+my\s+previous/i,
+];
+
+function isResendMessage(message: TeammateMessage): boolean {
+  // Check summary first (cheaper)
+  if (RESEND_PATTERNS.some((p) => p.test(message.summary))) return true;
+  // Check first 300 chars of content
+  const contentSnippet = message.content.slice(0, 300);
+  return RESEND_PATTERNS.some((p) => p.test(contentSnippet));
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * TeammateMessageItem - Card component for teammate messages.
+ *
+ * Visual distinction from SubagentItem:
+ * - Left color accent border (3px)
+ * - "Message" type label after name badge
+ * - No metrics pill, no duration, no model info
+ *
+ * Operational noise (idle/shutdown/terminated) renders as minimal inline text.
+ */
+export const TeammateMessageItem: React.FC<TeammateMessageItemProps> = ({
+  teammateMessage,
+  onClick,
+  isExpanded,
+  onReplyHover,
+  highlightClasses = '',
+  highlightStyle,
+}) => {
+  const colors = getTeamColorSet(teammateMessage.color);
+  const { isLight } = useTheme();
+
+  // Get team members for @mention highlighting
+  const members = useStore(
+    useShallow((s) => selectResolvedMembersForTeamName(s, s.selectedTeamName))
+  );
+  const memberColorMap = useMemo(
+    () => (members ? buildMemberColorMap(members) : new Map<string, string>()),
+    [members]
+  );
+
+  // Get team names for @team linkification
+  const teams = useStore(useShallow((s) => s.teams));
+  const teamNames = useMemo(
+    () => teams.filter((t) => !t.deletedAt).map((t) => t.teamName),
+    [teams]
+  );
+
+  // Detect operational noise
+  const noiseLabel = useMemo(
+    () => detectOperationalNoise(teammateMessage.content, teammateMessage.teammateId),
+    [teammateMessage.content, teammateMessage.teammateId]
+  );
+
+  // Detect resent/duplicate messages
+  const isResend = useMemo(() => isResendMessage(teammateMessage), [teammateMessage]);
+
+  const plainSummary = useMemo(
+    () => extractMarkdownPlainText(teammateMessage.summary),
+    [teammateMessage.summary]
+  );
+  const plainReplyToSummary = useMemo(
+    () =>
+      teammateMessage.replyToSummary
+        ? extractMarkdownPlainText(teammateMessage.replyToSummary)
+        : undefined,
+    [teammateMessage.replyToSummary]
+  );
+
+  const displayContent = useMemo(() => {
+    const stripped = stripAgentBlocks(teammateMessage.content);
+    return linkifyAllMentionsInMarkdown(stripped, memberColorMap, teamNames);
+  }, [teammateMessage.content, memberColorMap, teamNames]);
+
+  // Noise: minimal inline row (no card, no expand)
+  if (noiseLabel) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-1" style={{ opacity: 0.45 }}>
+        <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: colors.border }} />
+        <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
+          {teammateMessage.teammateId}
+        </span>
+        <span className="text-[11px]" style={{ color: CARD_ICON_MUTED }}>
+          {noiseLabel}
+        </span>
+      </div>
+    );
+  }
+
+  const truncatedSummary =
+    plainSummary.length > 80 ? plainSummary.slice(0, 80) + '...' : plainSummary;
+
+  return (
+    <div
+      className={`overflow-hidden rounded-md transition-[background-color,box-shadow] duration-300 ${highlightClasses}`}
+      style={{
+        backgroundColor: CARD_BG,
+        border: CARD_BORDER_STYLE,
+        borderLeft: `3px solid ${colors.border}`,
+        opacity: isResend ? 0.6 : undefined,
+        ...highlightStyle,
+      }}
+    >
+      {/* Header */}
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+          }
+        }}
+        className="flex cursor-pointer items-center gap-2 px-3 py-2 transition-colors"
+        style={{
+          backgroundColor: isExpanded ? CARD_HEADER_BG : 'transparent',
+          borderBottom: isExpanded ? CARD_BORDER_STYLE : 'none',
+        }}
+      >
+        <ChevronRight
+          className={`size-3.5 shrink-0 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+          style={{ color: CARD_ICON_MUTED }}
+        />
+
+        {/* Message icon — distinguishes from SubagentItem's Bot/dot icon */}
+        <MessageSquare className="size-3.5 shrink-0" style={{ color: colors.border }} />
+
+        {/* Teammate name badge */}
+        <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`,
+          }}
+        >
+          {teammateMessage.teammateId}
+        </span>
+
+        {/* "Message" type label — parallels SubagentItem's model info */}
+        <span className="text-[10px] uppercase tracking-wide" style={{ color: CARD_ICON_MUTED }}>
+          Message
+        </span>
+
+        {/* Reply indicator — shows which SendMessage triggered this response */}
+        {plainReplyToSummary && (
+          <span
+            role="presentation"
+            className="flex cursor-default items-center gap-1 text-[10px]"
+            style={{ color: CARD_ICON_MUTED }}
+            onMouseEnter={() => onReplyHover?.(teammateMessage.replyToToolId ?? null)}
+            onMouseLeave={() => onReplyHover?.(null)}
+          >
+            <CornerDownLeft className="size-2.5" />
+            <span className="truncate" style={{ maxWidth: '180px' }}>
+              {plainReplyToSummary}
+            </span>
+          </span>
+        )}
+
+        {/* Resend badge — marks duplicate/resent messages */}
+        {isResend && (
+          <span
+            className="flex items-center gap-0.5 text-[10px]"
+            style={{ color: CARD_ICON_MUTED }}
+          >
+            <RefreshCw className="size-2.5" />
+            Resent
+          </span>
+        )}
+
+        {/* Summary */}
+        <span className="flex-1 truncate text-xs" style={{ color: CARD_TEXT_LIGHT }}>
+          {truncatedSummary || 'Teammate message'}
+        </span>
+
+        {/* Context impact — tokens injected into main session */}
+        {teammateMessage.tokenCount != null && teammateMessage.tokenCount > 0 && (
+          <span
+            className="shrink-0 font-mono text-[11px] tabular-nums"
+            style={{ color: CARD_ICON_MUTED }}
+          >
+            ~{formatTokensCompact(teammateMessage.tokenCount)} tokens
+          </span>
+        )}
+
+        {/* Timestamp — rightmost info element */}
+        <span
+          className="shrink-0 font-mono text-[11px] tabular-nums"
+          style={{ color: CARD_ICON_MUTED }}
+        >
+          {format(teammateMessage.timestamp, 'HH:mm:ss')}
+        </span>
+      </div>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="p-3">
+          <MarkdownViewer content={displayContent} copyable />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/items/TextItem.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { MessageSquare } from 'lucide-react';
+
+import { highlightQueryInText } from '../searchHighlightUtils';
+import { MarkdownViewer } from '../viewers';
+
+import { BaseItem } from './BaseItem';
+
+import type { SemanticStep } from '@renderer/types/data';
+import type { TriggerColor } from '@shared/constants/triggerColors';
+
+interface TextItemProps {
+  step: SemanticStep;
+  preview: string;
+  onClick: () => void;
+  isExpanded: boolean;
+  /** Timestamp for display */
+  timestamp?: Date;
+  timestampFormat?: string;
+  /** Optional local search query for inline highlighting */
+  searchQueryOverride?: string;
+  /** Optional stable item id for search highlighting */
+  markdownItemId?: string;
+  /** Additional classes for highlighting (e.g., error deep linking) */
+  highlightClasses?: string;
+  /** Inline styles for highlighting (used by custom hex colors) */
+  highlightStyle?: React.CSSProperties;
+  /** Notification dot color for custom triggers */
+  notificationDotColor?: TriggerColor;
+  titleText?: string;
+}
+
+export const TextItem: React.FC<TextItemProps> = ({
+  step,
+  preview,
+  onClick,
+  isExpanded,
+  timestamp,
+  timestampFormat,
+  searchQueryOverride,
+  markdownItemId,
+  highlightClasses,
+  highlightStyle,
+  notificationDotColor,
+  titleText,
+}) => {
+  const fullContent = step.content.outputText ?? preview;
+  const summary = searchQueryOverride
+    ? highlightQueryInText(preview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
+        forceAllActive: true,
+      })
+    : preview;
+
+  // Get token count from step.tokens.output or step.content.tokenCount
+  const tokenCount = step.tokens?.output ?? step.content.tokenCount ?? 0;
+
+  return (
+    <BaseItem
+      icon={<MessageSquare className="size-4" />}
+      label="输出"
+      summary={summary}
+      tokenCount={tokenCount}
+      timestamp={timestamp}
+      timestampFormat={timestampFormat}
+      titleText={titleText}
+      onClick={onClick}
+      isExpanded={isExpanded}
+      highlightClasses={highlightClasses}
+      highlightStyle={highlightStyle}
+      notificationDotColor={notificationDotColor}
+    >
+      <MarkdownViewer
+        content={fullContent}
+        maxHeight="max-h-96"
+        copyable
+        itemId={markdownItemId}
+        searchQueryOverride={searchQueryOverride}
+      />
+    </BaseItem>
+  );
+};

package/src/renderer/components/chat/items/ThinkingItem.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Brain } from 'lucide-react';
+
+import { highlightQueryInText } from '../searchHighlightUtils';
+import { MarkdownViewer } from '../viewers';
+
+import { BaseItem } from './BaseItem';
+
+import type { SemanticStep } from '@renderer/types/data';
+import type { TriggerColor } from '@shared/constants/triggerColors';
+
+interface ThinkingItemProps {
+  step: SemanticStep;
+  preview: string;
+  onClick: () => void;
+  isExpanded: boolean;
+  /** Timestamp for display */
+  timestamp?: Date;
+  timestampFormat?: string;
+  /** Optional local search query for inline highlighting */
+  searchQueryOverride?: string;
+  /** Optional stable item id for search highlighting */
+  markdownItemId?: string;
+  /** Additional classes for highlighting (e.g., error deep linking) */
+  highlightClasses?: string;
+  /** Inline styles for highlighting (used by custom hex colors) */
+  highlightStyle?: React.CSSProperties;
+  /** Notification dot color for custom triggers */
+  notificationDotColor?: TriggerColor;
+  titleText?: string;
+}
+
+export const ThinkingItem: React.FC<ThinkingItemProps> = ({
+  step,
+  preview,
+  onClick,
+  isExpanded,
+  timestamp,
+  timestampFormat,
+  searchQueryOverride,
+  markdownItemId,
+  highlightClasses,
+  highlightStyle,
+  notificationDotColor,
+  titleText,
+}) => {
+  const fullContent = step.content.thinkingText ?? preview;
+  const summary = searchQueryOverride
+    ? highlightQueryInText(preview, searchQueryOverride, `${markdownItemId ?? step.id}:summary`, {
+        forceAllActive: true,
+      })
+    : preview;
+
+  // Get token count from step.tokens.output or step.content.tokenCount
+  const tokenCount = step.tokens?.output ?? step.content.tokenCount ?? 0;
+
+  return (
+    <BaseItem
+      icon={<Brain className="size-4" />}
+      label="Thinking"
+      summary={summary}
+      tokenCount={tokenCount}
+      timestamp={timestamp}
+      timestampFormat={timestampFormat}
+      titleText={titleText}
+      onClick={onClick}
+      isExpanded={isExpanded}
+      highlightClasses={highlightClasses}
+      highlightStyle={highlightStyle}
+      notificationDotColor={notificationDotColor}
+    >
+      <MarkdownViewer
+        content={fullContent}
+        maxHeight="max-h-96"
+        copyable
+        itemId={markdownItemId}
+        searchQueryOverride={searchQueryOverride}
+      />
+    </BaseItem>
+  );
+};

package/src/renderer/components/chat/items/baseItemHelpers.ts

@@ -0,0 +1,42 @@
+/**
+ * Helper functions for BaseItem component.
+ * Extracted to a separate file to comply with react-refresh/only-export-components.
+ */
+
+import { formatTokens } from '@shared/utils/tokenFormatting';
+
+import type { ItemStatus } from './BaseItem';
+
+// Re-export for backwards compatibility
+export { formatTokens };
+
+/**
+ * Formats duration in milliseconds to a human-readable string.
+ */
+export function formatDuration(ms: number | undefined): string {
+  if (ms === undefined) return '...';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+/**
+ * Truncates text to a maximum length with ellipsis.
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+}
+
+/**
+ * Get background color for status dot.
+ * Returns CSS value (hex for semantic colors, CSS variable for neutral).
+ */
+export function getStatusDotColor(status: ItemStatus): string {
+  const colors: Record<ItemStatus, string> = {
+    ok: '#22c55e', // green-500 - semantic success
+    error: '#ef4444', // red-500 - semantic error
+    pending: '#eab308', // yellow-500 - semantic pending
+    orphaned: 'var(--tool-item-muted)', // theme-aware neutral
+  };
+  return colors[status];
+}

package/src/renderer/components/chat/items/linkedTool/CollapsibleOutputSection.tsx

@@ -0,0 +1,57 @@
+/**
+ * CollapsibleOutputSection
+ *
+ * Reusable component that wraps tool output in a collapsed-by-default section.
+ * Shows a clickable header with label, StatusDot, and chevron toggle.
+ */
+
+import React, { useState } from 'react';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import { type ItemStatus, StatusDot } from '../BaseItem';
+
+interface CollapsibleOutputSectionProps {
+  status: ItemStatus;
+  children: React.ReactNode;
+  /** Label shown in the header (default: "Output") */
+  label?: string;
+}
+
+export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> = ({
+  status,
+  children,
+  label = 'Output',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="mb-1 flex items-center gap-2 text-xs"
+        style={{ color: 'var(--tool-item-muted)', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+        {label}
+        <StatusDot status={status} />
+      </button>
+      {isExpanded && (
+        <div
+          className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
+          style={{
+            backgroundColor: 'var(--code-bg)',
+            border: '1px solid var(--code-border)',
+            color:
+              status === 'error'
+                ? 'var(--tool-result-error-text)'
+                : 'var(--color-text-secondary)',
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/items/linkedTool/DefaultToolViewer.tsx

@@ -0,0 +1,56 @@
+/**
+ * DefaultToolViewer
+ *
+ * Default rendering for tools that don't have specialized viewers.
+ */
+
+import React from 'react';
+
+import { type ItemStatus } from '../BaseItem';
+
+import { CollapsibleOutputSection } from './CollapsibleOutputSection';
+import { extractOutputText, renderInput, renderOutput } from './renderHelpers';
+
+import type { LinkedToolItem } from '@renderer/types/groups';
+
+interface DefaultToolViewerProps {
+  linkedTool: LinkedToolItem;
+  status: ItemStatus;
+}
+
+export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool, status }) => {
+  const hasMeaningfulOutput =
+    linkedTool.result &&
+    (() => {
+      const text = extractOutputText(linkedTool.result.content).trim();
+      return text.length > 0 && text !== '[]' && text !== '{}';
+    })();
+
+  return (
+    <>
+      {/* Input Section */}
+      <div>
+        <div className="mb-1 text-xs" style={{ color: 'var(--tool-item-muted)' }}>
+          Input
+        </div>
+        <div
+          className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
+          style={{
+            backgroundColor: 'var(--code-bg)',
+            border: '1px solid var(--code-border)',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {renderInput(linkedTool.name, linkedTool.input)}
+        </div>
+      </div>
+
+      {/* Output Section — Collapsed by default */}
+      {!linkedTool.isOrphaned && linkedTool.result && hasMeaningfulOutput && (
+        <CollapsibleOutputSection status={status}>
+          {renderOutput(linkedTool.result.content)}
+        </CollapsibleOutputSection>
+      )}
+    </>
+  );
+};

package/src/renderer/components/chat/items/linkedTool/EditToolViewer.tsx

@@ -0,0 +1,74 @@
+/**
+ * EditToolViewer
+ *
+ * Renders the Edit tool with DiffViewer.
+ */
+
+import React from 'react';
+
+import { DiffViewer } from '@renderer/components/chat/viewers';
+
+import { type ItemStatus, StatusDot } from '../BaseItem';
+import { formatTokens } from '../baseItemHelpers';
+
+import { renderOutput } from './renderHelpers';
+
+import type { LinkedToolItem } from '@renderer/types/groups';
+
+interface EditToolViewerProps {
+  linkedTool: LinkedToolItem;
+  status: ItemStatus;
+}
+
+export const EditToolViewer: React.FC<EditToolViewerProps> = ({ linkedTool, status }) => {
+  const toolUseResult = linkedTool.result?.toolUseResult as Record<string, unknown> | undefined;
+
+  const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
+  const oldString =
+    (toolUseResult?.oldString as string) || (linkedTool.input.old_string as string) || '';
+  const newString =
+    (toolUseResult?.newString as string) || (linkedTool.input.new_string as string) || '';
+
+  return (
+    <div className="space-y-3">
+      <DiffViewer
+        fileName={filePath}
+        oldString={oldString}
+        newString={newString}
+        tokenCount={linkedTool.callTokens}
+        syntaxHighlight
+      />
+
+      {/* Show result status if available */}
+      {!linkedTool.isOrphaned && linkedTool.result != null && (
+        <div>
+          <div
+            className="mb-1 flex items-center gap-2 text-xs"
+            style={{ color: 'var(--tool-item-muted)' }}
+          >
+            Result
+            <StatusDot status={status} />
+            {linkedTool.result?.tokenCount !== undefined && linkedTool.result.tokenCount > 0 && (
+              <span style={{ color: 'var(--color-text-muted)' }}>
+                ~{formatTokens(linkedTool.result.tokenCount)} tokens
+              </span>
+            )}
+          </div>
+          <div
+            className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
+            style={{
+              backgroundColor: 'var(--code-bg)',
+              border: '1px solid var(--code-border)',
+              color:
+                status === 'error'
+                  ? 'var(--tool-result-error-text)'
+                  : 'var(--color-text-secondary)',
+            }}
+          >
+            {renderOutput(linkedTool.result.content)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};