@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/DisplayItemList.tsx

@@ -0,0 +1,431 @@
+import React, { useCallback, useState } from 'react';
+
+import {
+  CODE_BG,
+  CODE_BORDER,
+  COLOR_TEXT_MUTED,
+  TOOL_CALL_BG,
+  TOOL_CALL_BORDER,
+  TOOL_CALL_TEXT,
+} from '@renderer/constants/cssVariables';
+import { formatTokensCompact } from '@renderer/utils/formatters';
+import { getToolContextTokens } from '@renderer/utils/toolRendering';
+import { format } from 'date-fns';
+import { ChevronRight, Layers, MailOpen } from 'lucide-react';
+
+import { BaseItem } from './items/BaseItem';
+import { LinkedToolItem } from './items/LinkedToolItem';
+import { SlashItem } from './items/SlashItem';
+import { SubagentItem } from './items/SubagentItem';
+import { TeammateMessageItem } from './items/TeammateMessageItem';
+import { TextItem } from './items/TextItem';
+import { ThinkingItem } from './items/ThinkingItem';
+import { MarkdownViewer } from './viewers/MarkdownViewer';
+
+import type { AIGroupDisplayItem } from '@renderer/types/groups';
+import type { TriggerColor } from '@shared/constants/triggerColors';
+
+interface DisplayItemListProps {
+  items: AIGroupDisplayItem[];
+  onItemClick: (itemId: string) => void;
+  expandedItemIds: Set<string>;
+  aiGroupId: string;
+  /** Render order for display items (visual only). */
+  order?: 'chronological' | 'newest-first';
+  /** Optional local search query override for markdown highlighting */
+  searchQueryOverride?: string;
+  /** Tool use ID to highlight for error deep linking */
+  highlightToolUseId?: string;
+  /** Custom highlight color from trigger */
+  highlightColor?: TriggerColor;
+  /** Map of tool use ID to trigger color for notification dots */
+  notificationColorMap?: Map<string, TriggerColor>;
+  /** Optional callback to register tool element refs for scroll targeting */
+  registerToolRef?: (toolId: string, el: HTMLDivElement | null) => void;
+  /** Max characters for preview text in item headers (default: 150 for thinking/output, 80 for input) */
+  previewMaxLength?: number;
+  /** Optional timestamp format override for all items in this list. */
+  timestampFormat?: string;
+  /** Whether to include compact item metadata in a hover tooltip. */
+  showItemMetaTooltip?: boolean;
+}
+
+function buildItemMetaTooltip(
+  timestamp: Date | undefined,
+  tokenCount: number | undefined,
+  tokenLabel = 'tokens'
+): string | undefined {
+  const parts: string[] = [];
+  if (timestamp) {
+    parts.push(`Time: ${format(timestamp, 'HH:mm')}`);
+  }
+  if (tokenCount != null && tokenCount > 0) {
+    parts.push(`Tokens: ~${formatTokensCompact(tokenCount)} ${tokenLabel}`);
+  }
+  return parts.length > 0 ? parts.join(' • ') : undefined;
+}
+
+/**
+ * Truncates text to a maximum length and adds ellipsis if needed.
+ */
+function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.substring(0, maxLength) + '...';
+}
+
+/**
+ * Renders a flat list of AIGroupDisplayItem[] into the appropriate components.
+ *
+ * This component maps each display item to its corresponding component based on type:
+ * - thinking -> ThinkingItem
+ * - output -> TextItem
+ * - tool -> LinkedToolItem
+ * - subagent -> SubagentItem
+ * - slash -> SlashItem
+ *
+ * The list is completely flat with no nested toggles or hierarchies.
+ */
+export const DisplayItemList = ({
+  items,
+  onItemClick,
+  expandedItemIds,
+  aiGroupId,
+  order = 'chronological',
+  searchQueryOverride,
+  highlightToolUseId,
+  highlightColor,
+  notificationColorMap,
+  registerToolRef,
+  previewMaxLength,
+  timestampFormat,
+  showItemMetaTooltip = false,
+}: Readonly<DisplayItemListProps>): React.JSX.Element => {
+  // Reply-link highlight: when hovering a reply badge, dim everything except the linked pair
+  const [replyLinkToolId, setReplyLinkToolId] = useState<string | null>(null);
+
+  const handleReplyHover = useCallback((toolId: string | null) => {
+    setReplyLinkToolId(toolId);
+  }, []);
+
+  /** Check if an item is part of the currently highlighted reply link */
+  const isItemInReplyLink = (item: AIGroupDisplayItem): boolean => {
+    if (!replyLinkToolId) return false;
+    if (item.type === 'tool' && item.tool.id === replyLinkToolId) return true;
+    if (item.type === 'teammate_message' && item.teammateMessage.replyToToolId === replyLinkToolId)
+      return true;
+    return false;
+  };
+
+  if (!items || items.length === 0) {
+    return (
+      <div className="px-3 py-2 text-sm italic text-claude-dark-text-secondary">
+        No items to display
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={
+        order === 'newest-first' ? 'flex min-w-0 flex-col-reverse gap-2' : 'min-w-0 space-y-2'
+      }
+    >
+      {items.map((item, index) => {
+        let itemKey = '';
+        let element: React.ReactNode = null;
+
+        switch (item.type) {
+          case 'thinking': {
+            itemKey = `thinking-${index}`;
+            const thinkingStep = {
+              id: itemKey,
+              type: 'thinking' as const,
+              startTime: item.timestamp,
+              endTime: item.timestamp,
+              durationMs: 0,
+              content: { thinkingText: item.content, tokenCount: item.tokenCount },
+              tokens: { input: 0, output: item.tokenCount ?? 0 },
+              context: 'main' as const,
+            };
+            element = (
+              <ThinkingItem
+                step={thinkingStep}
+                preview={truncateText(item.content, previewMaxLength ?? 150)}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                timestamp={item.timestamp}
+                timestampFormat={timestampFormat}
+                titleText={
+                  showItemMetaTooltip
+                    ? buildItemMetaTooltip(item.timestamp, item.tokenCount, 'tokens')
+                    : undefined
+                }
+                markdownItemId={searchQueryOverride ? `${aiGroupId}:${itemKey}` : undefined}
+                searchQueryOverride={searchQueryOverride}
+              />
+            );
+            break;
+          }
+
+          case 'output': {
+            itemKey = `output-${index}`;
+            const textStep = {
+              id: itemKey,
+              type: 'output' as const,
+              startTime: item.timestamp,
+              endTime: item.timestamp,
+              durationMs: 0,
+              content: { outputText: item.content, tokenCount: item.tokenCount },
+              tokens: { input: 0, output: item.tokenCount ?? 0 },
+              context: 'main' as const,
+            };
+            element = (
+              <TextItem
+                step={textStep}
+                preview={truncateText(item.content, previewMaxLength ?? 150)}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                timestamp={item.timestamp}
+                timestampFormat={timestampFormat}
+                titleText={
+                  showItemMetaTooltip
+                    ? buildItemMetaTooltip(item.timestamp, item.tokenCount, 'tokens')
+                    : undefined
+                }
+                markdownItemId={searchQueryOverride ? `${aiGroupId}:${itemKey}` : undefined}
+                searchQueryOverride={searchQueryOverride}
+              />
+            );
+            break;
+          }
+
+          case 'tool': {
+            itemKey = `tool-${item.tool.id}-${index}`;
+            element = (
+              <LinkedToolItem
+                linkedTool={item.tool}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                timestamp={item.tool.startTime}
+                timestampFormat={timestampFormat}
+                titleText={
+                  showItemMetaTooltip
+                    ? buildItemMetaTooltip(
+                        item.tool.startTime,
+                        getToolContextTokens(item.tool),
+                        'tokens'
+                      )
+                    : undefined
+                }
+                searchQueryOverride={searchQueryOverride}
+                isHighlighted={highlightToolUseId === item.tool.id}
+                highlightColor={highlightColor}
+                notificationDotColor={notificationColorMap?.get(item.tool.id)}
+                registerRef={
+                  registerToolRef ? (el) => registerToolRef(item.tool.id, el) : undefined
+                }
+              />
+            );
+            break;
+          }
+
+          case 'subagent': {
+            itemKey = `subagent-${item.subagent.id}-${index}`;
+            const subagentStep = {
+              id: itemKey,
+              type: 'subagent' as const,
+              startTime: item.subagent.startTime,
+              endTime: item.subagent.endTime,
+              durationMs: item.subagent.durationMs,
+              content: {
+                subagentId: item.subagent.id,
+                subagentDescription: item.subagent.description,
+              },
+              isParallel: item.subagent.isParallel,
+              context: 'main' as const,
+            };
+            element = (
+              <SubagentItem
+                step={subagentStep}
+                subagent={item.subagent}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                aiGroupId={aiGroupId}
+                highlightToolUseId={highlightToolUseId}
+                highlightColor={highlightColor}
+                notificationColorMap={notificationColorMap}
+                registerToolRef={registerToolRef}
+              />
+            );
+            break;
+          }
+
+          case 'slash': {
+            itemKey = `slash-${item.slash.name}-${index}`;
+            element = (
+              <SlashItem
+                slash={item.slash}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                timestamp={item.slash.timestamp}
+                timestampFormat={timestampFormat}
+                titleText={
+                  showItemMetaTooltip
+                    ? buildItemMetaTooltip(
+                        item.slash.timestamp,
+                        item.slash.instructionsTokenCount,
+                        'tokens'
+                      )
+                    : undefined
+                }
+              />
+            );
+            break;
+          }
+
+          case 'teammate_message': {
+            itemKey = `teammate-${item.teammateMessage.id}-${index}`;
+            element = (
+              <TeammateMessageItem
+                teammateMessage={item.teammateMessage}
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+                onReplyHover={handleReplyHover}
+              />
+            );
+            break;
+          }
+
+          case 'subagent_input': {
+            itemKey = `input-${index}`;
+            const inputContent = item.content;
+            const inputTokenCount = item.tokenCount;
+            element = (
+              <BaseItem
+                icon={<MailOpen className="size-4" />}
+                label="Input"
+                summary={truncateText(inputContent, previewMaxLength ?? 80)}
+                tokenCount={inputTokenCount}
+                timestamp={item.timestamp}
+                timestampFormat={timestampFormat}
+                titleText={
+                  showItemMetaTooltip
+                    ? buildItemMetaTooltip(item.timestamp, inputTokenCount, 'tokens')
+                    : undefined
+                }
+                onClick={() => onItemClick(itemKey)}
+                isExpanded={expandedItemIds.has(itemKey)}
+              >
+                <MarkdownViewer
+                  content={inputContent}
+                  copyable
+                  itemId={searchQueryOverride ? `${aiGroupId}:${itemKey}` : undefined}
+                  searchQueryOverride={searchQueryOverride}
+                />
+              </BaseItem>
+            );
+            break;
+          }
+
+          case 'compact_boundary': {
+            itemKey = `compact-${index}`;
+            const compactContent = item.content;
+            const compactExpanded = expandedItemIds.has(itemKey);
+            element = (
+              <div>
+                <button
+                  onClick={() => onItemClick(itemKey)}
+                  className="group flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 transition-all duration-200"
+                  style={{
+                    backgroundColor: TOOL_CALL_BG,
+                    border: `1px solid ${TOOL_CALL_BORDER}`,
+                  }}
+                  aria-expanded={compactExpanded}
+                >
+                  <div
+                    className="flex shrink-0 items-center gap-1.5"
+                    style={{ color: TOOL_CALL_TEXT }}
+                  >
+                    <ChevronRight
+                      size={14}
+                      className={`transition-transform duration-200 ${compactExpanded ? 'rotate-90' : ''}`}
+                    />
+                    <Layers size={14} />
+                  </div>
+                  <span className="shrink-0 text-xs font-medium" style={{ color: TOOL_CALL_TEXT }}>
+                    Compacted
+                  </span>
+                  {item.tokenDelta && (
+                    <span
+                      className="min-w-0 truncate text-[11px] tabular-nums"
+                      style={{ color: COLOR_TEXT_MUTED }}
+                    >
+                      {formatTokensCompact(item.tokenDelta.preCompactionTokens)} →{' '}
+                      {formatTokensCompact(item.tokenDelta.postCompactionTokens)}
+                      <span style={{ color: '#4ade80' }}>
+                        {' '}
+                        ({formatTokensCompact(Math.abs(item.tokenDelta.delta))} freed)
+                      </span>
+                    </span>
+                  )}
+                  <span
+                    className="shrink-0 rounded px-1.5 py-0.5 text-[10px]"
+                    style={{
+                      backgroundColor: 'rgba(99, 102, 241, 0.15)',
+                      color: '#818cf8',
+                    }}
+                  >
+                    Phase {item.phaseNumber}
+                  </span>
+                  <span
+                    className="ml-auto shrink-0 text-[11px]"
+                    style={{ color: COLOR_TEXT_MUTED }}
+                  >
+                    {format(new Date(item.timestamp), 'h:mm:ss a')}
+                  </span>
+                </button>
+                {compactExpanded && compactContent && (
+                  <div
+                    className="mt-1 overflow-hidden rounded-lg"
+                    style={{
+                      backgroundColor: CODE_BG,
+                      border: `1px solid ${CODE_BORDER}`,
+                    }}
+                  >
+                    <div
+                      className="max-h-64 overflow-y-auto border-l-2 px-3 py-2"
+                      style={{ borderColor: 'var(--chat-ai-border)' }}
+                    >
+                      <MarkdownViewer content={compactContent} copyable />
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+            break;
+          }
+
+          default:
+            return null;
+        }
+
+        // Apply reply-link spotlight: dim items not in the highlighted pair
+        const isDimmed = replyLinkToolId !== null && !isItemInReplyLink(item);
+        return (
+          <div
+            key={itemKey}
+            style={
+              replyLinkToolId !== null
+                ? { opacity: isDimmed ? 0.2 : 1, transition: 'opacity 150ms ease' }
+                : undefined
+            }
+          >
+            {element}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/renderer/components/chat/LastOutputDisplay.tsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { useStore } from '@renderer/store';
+import { REHYPE_PLUGINS } from '@renderer/utils/markdownPlugins';
+import { AlertTriangle, CheckCircle, FileCheck, XCircle } from 'lucide-react';
+import remarkGfm from 'remark-gfm';
+import { useShallow } from 'zustand/react/shallow';
+
+import { CopyButton } from '../common/CopyButton';
+import { OngoingBanner } from '../common/OngoingIndicator';
+
+import { createMarkdownComponents, markdownComponentsWithCodeCopy } from './markdownComponents';
+import { createSearchContext, EMPTY_SEARCH_MATCHES } from './searchHighlightUtils';
+
+import type { AIGroupLastOutput } from '@renderer/types/groups';
+
+interface LastOutputDisplayProps {
+  lastOutput: AIGroupLastOutput | null;
+  aiGroupId: string;
+  /** Whether this is the last AI group in the conversation */
+  isLastGroup?: boolean;
+  /** Whether the session is ongoing (from sessions array, same source as sidebar) */
+  isSessionOngoing?: boolean;
+}
+
+/**
+ * LastOutputDisplay shows the always-visible last text output OR last tool result.
+ * This is what the user sees as "the answer" from the AI.
+ *
+ * Features:
+ * - Shows text output with elegant prose styling
+ * - Shows tool result with tool name and icon
+ * - Handles error states for tool results
+ * - Shows timestamp
+ * - Expandable for long content
+ */
+export const LastOutputDisplay = ({
+  lastOutput,
+  aiGroupId,
+  isLastGroup = false,
+  isSessionOngoing = false,
+}: Readonly<LastOutputDisplayProps>): React.JSX.Element | null => {
+  // Only re-render if THIS AI group has search matches
+  const { searchQuery, searchMatches, currentSearchIndex } = useStore(
+    useShallow((s) => {
+      const hasMatch = s.searchMatchItemIds.has(aiGroupId);
+      return {
+        searchQuery: hasMatch ? s.searchQuery : '',
+        searchMatches: hasMatch ? s.searchMatches : EMPTY_SEARCH_MATCHES,
+        currentSearchIndex: hasMatch ? s.currentSearchIndex : -1,
+      };
+    })
+  );
+  const isTextOutput = lastOutput?.type === 'text' && Boolean(lastOutput.text);
+
+  // Create search context (fresh each render so counter starts at 0)
+  const searchCtx =
+    searchQuery && isTextOutput
+      ? createSearchContext(searchQuery, aiGroupId, searchMatches, currentSearchIndex)
+      : null;
+
+  // Create markdown components with optional search highlighting
+  // When search is active, create fresh each render (match counter is stateful and must start at 0)
+  // useMemo would cache stale closures when parent re-renders without search deps changing
+  const mdComponents = searchCtx
+    ? createMarkdownComponents(searchCtx, { copyCodeBlocks: true })
+    : markdownComponentsWithCodeCopy;
+
+  // Show ongoing banner if this is the last AI group and session is ongoing
+  // This uses the same source (sessions array) as the sidebar green dot for consistency
+  if (isLastGroup && isSessionOngoing) {
+    return <OngoingBanner />;
+  }
+
+  if (!lastOutput) {
+    return null;
+  }
+
+  const { type } = lastOutput;
+
+  // Render text output
+  if (type === 'text' && lastOutput.text) {
+    const textContent = lastOutput.text || '';
+
+    return (
+      <div
+        className="group relative overflow-hidden rounded-lg"
+        style={{
+          backgroundColor: 'var(--code-bg)',
+          border: '1px solid var(--code-border)',
+        }}
+      >
+        <CopyButton text={textContent} />
+
+        {/* Content - scrollable */}
+        <div className="max-h-96 overflow-y-auto px-4 py-3" data-search-content>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={REHYPE_PLUGINS}
+            components={mdComponents}
+          >
+            {textContent}
+          </ReactMarkdown>
+        </div>
+      </div>
+    );
+  }
+
+  // Render tool result
+  if (type === 'tool_result' && lastOutput.toolResult) {
+    const isError = lastOutput.isError ?? false;
+    const Icon = isError ? XCircle : CheckCircle;
+
+    return (
+      <div
+        className="overflow-hidden rounded-lg"
+        style={{
+          backgroundColor: isError
+            ? 'var(--tool-result-error-bg)'
+            : 'var(--tool-result-success-bg)',
+          border: `1px solid ${isError ? 'var(--tool-result-error-border)' : 'var(--tool-result-success-border)'}`,
+        }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center gap-2 px-4 py-2"
+          style={{
+            borderBottom: `1px solid ${isError ? 'var(--tool-result-error-border)' : 'var(--tool-result-success-border)'}`,
+          }}
+        >
+          <Icon
+            className="size-4"
+            style={{
+              color: isError ? 'var(--tool-result-error-text)' : 'var(--tool-result-success-text)',
+            }}
+          />
+          {lastOutput.toolName && (
+            <code
+              className="rounded px-1.5 py-0.5 text-xs"
+              style={{
+                backgroundColor: 'var(--tag-bg)',
+                color: 'var(--tag-text)',
+                border: '1px solid var(--tag-border)',
+              }}
+            >
+              {lastOutput.toolName}
+            </code>
+          )}
+          {isError && (
+            <span
+              className="text-xs font-medium"
+              style={{ color: 'var(--tool-result-error-text)' }}
+            >
+              Error
+            </span>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="px-4 py-3">
+          <pre
+            className="max-h-96 overflow-y-auto whitespace-pre-wrap break-words font-mono text-sm"
+            style={{ color: 'var(--color-text)' }}
+          >
+            {lastOutput.toolResult}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+
+  // Render interruption as a simple horizontal banner
+  if (type === 'interruption') {
+    return (
+      <div
+        className="flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2"
+        style={{
+          backgroundColor: 'var(--warning-bg, rgba(245, 158, 11, 0.1))',
+          border: '1px solid var(--warning-border, rgba(245, 158, 11, 0.3))',
+        }}
+      >
+        <AlertTriangle
+          className="size-4 shrink-0"
+          style={{ color: 'var(--warning-text, #f59e0b)' }}
+        />
+        <span className="text-sm" style={{ color: 'var(--warning-text, #f59e0b)' }}>
+          Request interrupted by user
+        </span>
+      </div>
+    );
+  }
+
+  // Render plan_exit (ExitPlanMode) with plan content in markdown
+  if (type === 'plan_exit' && lastOutput.planContent) {
+    const planContent = lastOutput.planContent || '';
+    const planPreamble = lastOutput.planPreamble;
+
+    return (
+      <div className="space-y-3">
+        {/* Preamble text (e.g., "The plan is complete. Let me exit plan mode...") */}
+        {planPreamble && (
+          <div
+            className="overflow-hidden rounded-lg"
+            style={{
+              backgroundColor: 'var(--code-bg)',
+              border: '1px solid var(--code-border)',
+            }}
+          >
+            <div className="px-4 py-3">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+                {planPreamble}
+              </ReactMarkdown>
+            </div>
+          </div>
+        )}
+
+        {/* Plan content block */}
+        <div
+          className="overflow-hidden rounded-lg"
+          style={{
+            backgroundColor: 'var(--plan-exit-bg)',
+            border: '1px solid var(--plan-exit-border)',
+          }}
+        >
+          {/* Header */}
+          <div
+            className="flex items-center justify-between px-4 py-2"
+            style={{
+              borderBottom: '1px solid var(--plan-exit-border)',
+              backgroundColor: 'var(--plan-exit-header-bg)',
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <FileCheck className="size-4" style={{ color: 'var(--plan-exit-text)' }} />
+              <span className="text-sm font-medium" style={{ color: 'var(--plan-exit-text)' }}>
+                Plan Ready for Approval
+              </span>
+            </div>
+            <CopyButton text={planContent} inline />
+          </div>
+
+          {/* Plan content - scrollable */}
+          <div className="max-h-96 overflow-y-auto px-4 py-3">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={REHYPE_PLUGINS}
+              components={mdComponents}
+            >
+              {planContent}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};