@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/SessionContextPanel/components/SessionContextHelpTooltip.tsx

@@ -0,0 +1,165 @@
+/**
+ * SessionContextHelpTooltip - Help tooltip explaining context metrics.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { HelpCircle } from 'lucide-react';
+
+export const SessionContextHelpTooltip = (): React.ReactElement => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});
+  const [arrowStyle, setArrowStyle] = useState<React.CSSProperties>({});
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearHideTimeout = (): void => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  };
+
+  const handleMouseEnter = (): void => {
+    clearHideTimeout();
+    setShowTooltip(true);
+  };
+
+  const handleMouseLeave = (): void => {
+    clearHideTimeout();
+    hideTimeoutRef.current = setTimeout(() => setShowTooltip(false), 150);
+  };
+
+  useEffect(() => {
+    return () => clearHideTimeout();
+  }, []);
+
+  // Close tooltip on scroll
+  useEffect(() => {
+    if (!showTooltip) return;
+
+    const handleScroll = (): void => {
+      setShowTooltip(false);
+    };
+
+    window.addEventListener('scroll', handleScroll, true);
+    return () => window.removeEventListener('scroll', handleScroll, true);
+  }, [showTooltip]);
+
+  // Calculate tooltip position based on trigger element
+  useEffect(() => {
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const tooltipWidth = 288; // w-72 = 18rem = 288px
+
+      setTooltipStyle({
+        position: 'fixed',
+        top: rect.bottom + 8,
+        left: rect.right - tooltipWidth,
+        width: tooltipWidth,
+        zIndex: 99999,
+      });
+
+      setArrowStyle({
+        position: 'absolute',
+        top: -4,
+        right: 12,
+        width: 8,
+        height: 8,
+        transform: 'rotate(45deg)',
+        backgroundColor: 'var(--color-surface-raised)',
+        borderLeft: '1px solid var(--color-border)',
+        borderTop: '1px solid var(--color-border)',
+      });
+    }
+  }, [showTooltip]);
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      ref={containerRef}
+      className="relative inline-flex"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setShowTooltip(!showTooltip);
+        }
+      }}
+    >
+      <HelpCircle
+        size={14}
+        className="cursor-help transition-colors hover:opacity-80"
+        style={{ color: 'var(--color-text-muted)' }}
+      />
+
+      {showTooltip &&
+        createPortal(
+          <div
+            ref={tooltipRef}
+            role="tooltip"
+            className="rounded-lg p-3 shadow-xl"
+            style={{
+              ...tooltipStyle,
+              backgroundColor: 'var(--color-surface-raised)',
+              border: '1px solid var(--color-border)',
+              boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.3)',
+            }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {/* Arrow */}
+            <div style={arrowStyle} />
+
+            <div className="space-y-3 text-xs">
+              {/* Metric definitions */}
+              <div>
+                <div className="mb-1 font-semibold" style={{ color: 'var(--color-text)' }}>
+                  Context Used
+                </div>
+                <p style={{ color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
+                  Prompt input plus output tokens currently occupying the model&apos;s context
+                  window.
+                </p>
+              </div>
+
+              <div className="pt-2" style={{ borderTop: '1px solid var(--color-border-subtle)' }}>
+                <div className="mb-1 font-semibold" style={{ color: 'var(--color-text)' }}>
+                  Prompt Input
+                </div>
+                <p style={{ color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
+                  Tokens sent to the model before generation. For Claude this includes `input_tokens
+                  + cache_creation_input_tokens + cache_read_input_tokens`.
+                </p>
+              </div>
+
+              <div className="pt-2" style={{ borderTop: '1px solid var(--color-border-subtle)' }}>
+                <div className="mb-1 font-semibold" style={{ color: 'var(--color-text)' }}>
+                  Visible Context
+                </div>
+                <p style={{ color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
+                  The inspectable subset of prompt input: files, CLAUDE.md, tool outputs, user
+                  messages, and similar injections that you can optimize directly.
+                </p>
+              </div>
+
+              <div className="pt-2" style={{ borderTop: '1px solid var(--color-border-subtle)' }}>
+                <div className="mb-1 font-semibold" style={{ color: 'var(--color-text)' }}>
+                  Availability
+                </div>
+                <p style={{ color: 'var(--color-text-secondary)', lineHeight: 1.5 }}>
+                  If a provider runtime does not expose prompt-side usage yet, the panel shows
+                  metrics as unavailable instead of pretending they are zero.
+                </p>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/components/TaskCoordinationSection.tsx

@@ -0,0 +1,47 @@
+/**
+ * TaskCoordinationSection - Section for displaying task coordination injections.
+ */
+
+import React from 'react';
+
+import { TaskCoordinationItem } from '../items/TaskCoordinationItem';
+
+import { CollapsibleSection } from './CollapsibleSection';
+
+import type { TaskCoordinationInjection } from '@renderer/types/contextInjection';
+
+interface TaskCoordinationSectionProps {
+  injections: TaskCoordinationInjection[];
+  tokenCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const TaskCoordinationSection = ({
+  injections,
+  tokenCount,
+  isExpanded,
+  onToggle,
+  onNavigateToTurn,
+}: Readonly<TaskCoordinationSectionProps>): React.ReactElement | null => {
+  if (injections.length === 0) return null;
+
+  return (
+    <CollapsibleSection
+      title="任务协作"
+      count={injections.length}
+      tokenCount={tokenCount}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      {injections.map((injection) => (
+        <TaskCoordinationItem
+          key={injection.id}
+          injection={injection}
+          onNavigateToTurn={onNavigateToTurn}
+        />
+      ))}
+    </CollapsibleSection>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/components/ThinkingTextSection.tsx

@@ -0,0 +1,47 @@
+/**
+ * ThinkingTextSection - Section for displaying thinking text.
+ */
+
+import React from 'react';
+
+import { ThinkingTextItem } from '../items/ThinkingTextItem';
+
+import { CollapsibleSection } from './CollapsibleSection';
+
+import type { ThinkingTextInjection } from '@renderer/types/contextInjection';
+
+interface ThinkingTextSectionProps {
+  injections: ThinkingTextInjection[];
+  tokenCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const ThinkingTextSection = ({
+  injections,
+  tokenCount,
+  isExpanded,
+  onToggle,
+  onNavigateToTurn,
+}: Readonly<ThinkingTextSectionProps>): React.ReactElement | null => {
+  if (injections.length === 0) return null;
+
+  return (
+    <CollapsibleSection
+      title="思考 + 文本"
+      count={injections.length}
+      tokenCount={tokenCount}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      {injections.map((injection) => (
+        <ThinkingTextItem
+          key={injection.id}
+          injection={injection}
+          onNavigateToTurn={onNavigateToTurn}
+        />
+      ))}
+    </CollapsibleSection>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/components/ToolOutputsSection.tsx

@@ -0,0 +1,47 @@
+/**
+ * ToolOutputsSection - Section for displaying tool outputs.
+ */
+
+import React from 'react';
+
+import { ToolOutputItem } from '../items/ToolOutputItem';
+
+import { CollapsibleSection } from './CollapsibleSection';
+
+import type { ToolOutputInjection } from '@renderer/types/contextInjection';
+
+interface ToolOutputsSectionProps {
+  injections: ToolOutputInjection[];
+  tokenCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const ToolOutputsSection = ({
+  injections,
+  tokenCount,
+  isExpanded,
+  onToggle,
+  onNavigateToTurn,
+}: Readonly<ToolOutputsSectionProps>): React.ReactElement | null => {
+  if (injections.length === 0) return null;
+
+  return (
+    <CollapsibleSection
+      title="工具输出"
+      count={injections.length}
+      tokenCount={tokenCount}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      {injections.map((injection) => (
+        <ToolOutputItem
+          key={injection.id}
+          injection={injection}
+          onNavigateToTurn={onNavigateToTurn}
+        />
+      ))}
+    </CollapsibleSection>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/components/UserMessagesSection.tsx

@@ -0,0 +1,47 @@
+/**
+ * UserMessagesSection - Section for displaying user message injections.
+ */
+
+import React from 'react';
+
+import { UserMessageItem } from '../items/UserMessageItem';
+
+import { CollapsibleSection } from './CollapsibleSection';
+
+import type { UserMessageInjection } from '@renderer/types/contextInjection';
+
+interface UserMessagesSectionProps {
+  injections: UserMessageInjection[];
+  tokenCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const UserMessagesSection = ({
+  injections,
+  tokenCount,
+  isExpanded,
+  onToggle,
+  onNavigateToTurn,
+}: Readonly<UserMessagesSectionProps>): React.ReactElement | null => {
+  if (injections.length === 0) return null;
+
+  return (
+    <CollapsibleSection
+      title="用户消息"
+      count={injections.length}
+      tokenCount={tokenCount}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
+    >
+      {injections.map((injection) => (
+        <UserMessageItem
+          key={injection.id}
+          injection={injection}
+          onNavigateToTurn={onNavigateToTurn}
+        />
+      ))}
+    </CollapsibleSection>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/index.tsx

@@ -0,0 +1,314 @@
+/**
+ * SessionContextPanel - Panel showing all context injections for a session.
+ * Displays CLAUDE.md files, mentioned files, and tool outputs in collapsible sections.
+ */
+
+import React, { useMemo, useState } from 'react';
+
+import {
+  COLOR_BORDER,
+  COLOR_SURFACE,
+  COLOR_SURFACE_OVERLAY,
+  COLOR_TEXT_MUTED,
+} from '@renderer/constants/cssVariables';
+import { sumContextInjectionTokens } from '@renderer/utils/contextMath';
+
+import { ClaudeMdFilesSection } from './components/ClaudeMdFilesSection';
+import { FlatInjectionList } from './components/FlatInjectionList';
+import { MentionedFilesSection } from './components/MentionedFilesSection';
+import { RankedInjectionList } from './components/RankedInjectionList';
+import { SessionContextHeader } from './components/SessionContextHeader';
+import { TaskCoordinationSection } from './components/TaskCoordinationSection';
+import { ThinkingTextSection } from './components/ThinkingTextSection';
+import { ToolOutputsSection } from './components/ToolOutputsSection';
+import { UserMessagesSection } from './components/UserMessagesSection';
+import {
+  SECTION_CLAUDE_MD,
+  SECTION_MENTIONED_FILES,
+  SECTION_TASK_COORDINATION,
+  SECTION_THINKING_TEXT,
+  SECTION_TOOL_OUTPUTS,
+  SECTION_USER_MESSAGES,
+} from './types';
+
+import type { ContextViewMode, SectionType, SessionContextPanelProps } from './types';
+import type {
+  ClaudeMdContextInjection,
+  MentionedFileInjection,
+  TaskCoordinationInjection,
+  ThinkingTextInjection,
+  ToolOutputInjection,
+  UserMessageInjection,
+} from '@renderer/types/contextInjection';
+
+export const SessionContextPanel = ({
+  injections,
+  onClose,
+  projectRoot,
+  onNavigateToTurn,
+  onNavigateToTool,
+  onNavigateToUserGroup,
+  contextMetrics,
+  sessionMetrics,
+  subagentCostUsd,
+  onViewReport,
+  phaseInfo,
+  selectedPhase,
+  onPhaseChange,
+  side = 'left',
+}: Readonly<SessionContextPanelProps>): React.ReactElement => {
+  // View mode: category sections or ranked list
+  const [viewMode, setViewMode] = useState<ContextViewMode>('category');
+  // Flat sub-toggle within "By Size" view
+  const [flatMode, setFlatMode] = useState(false);
+
+  // Track which main sections are expanded
+  const [expandedSections, setExpandedSections] = useState<Set<SectionType>>(
+    new Set([
+      SECTION_USER_MESSAGES,
+      SECTION_CLAUDE_MD,
+      SECTION_MENTIONED_FILES,
+      SECTION_TOOL_OUTPUTS,
+      SECTION_TASK_COORDINATION,
+      SECTION_THINKING_TEXT,
+    ])
+  );
+
+  // Separate injections by category
+  const {
+    claudeMdInjections,
+    mentionedFileInjections,
+    toolOutputInjections,
+    thinkingTextInjections,
+    taskCoordinationInjections,
+    userMessageInjections,
+  } = useMemo(() => {
+    const claudeMd: ClaudeMdContextInjection[] = [];
+    const mentionedFiles: MentionedFileInjection[] = [];
+    const toolOutputs: ToolOutputInjection[] = [];
+    const thinkingText: ThinkingTextInjection[] = [];
+    const taskCoordination: TaskCoordinationInjection[] = [];
+    const userMessages: UserMessageInjection[] = [];
+
+    for (const injection of injections) {
+      switch (injection.category) {
+        case 'claude-md':
+          claudeMd.push(injection);
+          break;
+        case 'mentioned-file':
+          mentionedFiles.push(injection);
+          break;
+        case 'tool-output':
+          toolOutputs.push(injection);
+          break;
+        case 'thinking-text':
+          thinkingText.push(injection);
+          break;
+        case 'task-coordination':
+          taskCoordination.push(injection);
+          break;
+        case 'user-message':
+          userMessages.push(injection);
+          break;
+      }
+    }
+
+    // Sort mentioned files and tool outputs by tokens descending
+    mentionedFiles.sort((a, b) => b.estimatedTokens - a.estimatedTokens);
+    toolOutputs.sort((a, b) => b.estimatedTokens - a.estimatedTokens);
+    // Sort task coordination by tokens descending
+    taskCoordination.sort((a, b) => b.estimatedTokens - a.estimatedTokens);
+    // Sort thinking-text by turn index ascending
+    thinkingText.sort((a, b) => a.turnIndex - b.turnIndex);
+    // Sort user messages by turn index ascending
+    userMessages.sort((a, b) => a.turnIndex - b.turnIndex);
+
+    return {
+      claudeMdInjections: claudeMd,
+      mentionedFileInjections: mentionedFiles,
+      toolOutputInjections: toolOutputs,
+      thinkingTextInjections: thinkingText,
+      taskCoordinationInjections: taskCoordination,
+      userMessageInjections: userMessages,
+    };
+  }, [injections]);
+
+  // Calculate total tokens
+  const totalTokens = useMemo(() => sumContextInjectionTokens(injections), [injections]);
+
+  // Section token counts
+  const claudeMdTokens = useMemo(
+    () => claudeMdInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [claudeMdInjections]
+  );
+
+  const mentionedFilesTokens = useMemo(
+    () => mentionedFileInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [mentionedFileInjections]
+  );
+
+  const toolOutputsTokens = useMemo(
+    () => toolOutputInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [toolOutputInjections]
+  );
+
+  const thinkingTextTokens = useMemo(
+    () => thinkingTextInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [thinkingTextInjections]
+  );
+
+  const taskCoordinationTokens = useMemo(
+    () => taskCoordinationInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [taskCoordinationInjections]
+  );
+
+  const userMessagesTokens = useMemo(
+    () => userMessageInjections.reduce((sum, inj) => sum + inj.estimatedTokens, 0),
+    [userMessageInjections]
+  );
+
+  // Toggle section expansion
+  const toggleSection = (section: SectionType): void => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div
+      className="flex h-full flex-col"
+      style={{
+        backgroundColor: COLOR_SURFACE,
+        ...(side === 'left'
+          ? { borderRight: `1px solid ${COLOR_BORDER}` }
+          : { borderLeft: `1px solid ${COLOR_BORDER}` }),
+      }}
+    >
+      <SessionContextHeader
+        injectionCount={injections.length}
+        totalTokens={totalTokens}
+        contextMetrics={contextMetrics}
+        sessionMetrics={sessionMetrics}
+        subagentCostUsd={subagentCostUsd}
+        onClose={onClose}
+        onViewReport={onViewReport}
+        phaseInfo={phaseInfo}
+        selectedPhase={selectedPhase}
+        onPhaseChange={onPhaseChange}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+      />
+
+      {/* Content */}
+      <div className="flex-1 space-y-2 overflow-y-auto p-3">
+        {injections.length === 0 ? (
+          <div
+            className="flex h-full items-center justify-center text-sm"
+            style={{ color: COLOR_TEXT_MUTED }}
+          >
+            No context injections detected in this session
+          </div>
+        ) : viewMode === 'category' ? (
+          <>
+            <UserMessagesSection
+              injections={userMessageInjections}
+              tokenCount={userMessagesTokens}
+              isExpanded={expandedSections.has(SECTION_USER_MESSAGES)}
+              onToggle={() => toggleSection(SECTION_USER_MESSAGES)}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+
+            <ClaudeMdFilesSection
+              injections={claudeMdInjections}
+              tokenCount={claudeMdTokens}
+              isExpanded={expandedSections.has(SECTION_CLAUDE_MD)}
+              onToggle={() => toggleSection(SECTION_CLAUDE_MD)}
+              projectRoot={projectRoot ?? ''}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+
+            <MentionedFilesSection
+              injections={mentionedFileInjections}
+              tokenCount={mentionedFilesTokens}
+              isExpanded={expandedSections.has(SECTION_MENTIONED_FILES)}
+              onToggle={() => toggleSection(SECTION_MENTIONED_FILES)}
+              projectRoot={projectRoot}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+
+            <ToolOutputsSection
+              injections={toolOutputInjections}
+              tokenCount={toolOutputsTokens}
+              isExpanded={expandedSections.has(SECTION_TOOL_OUTPUTS)}
+              onToggle={() => toggleSection(SECTION_TOOL_OUTPUTS)}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+
+            <TaskCoordinationSection
+              injections={taskCoordinationInjections}
+              tokenCount={taskCoordinationTokens}
+              isExpanded={expandedSections.has(SECTION_TASK_COORDINATION)}
+              onToggle={() => toggleSection(SECTION_TASK_COORDINATION)}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+
+            <ThinkingTextSection
+              injections={thinkingTextInjections}
+              tokenCount={thinkingTextTokens}
+              isExpanded={expandedSections.has(SECTION_THINKING_TEXT)}
+              onToggle={() => toggleSection(SECTION_THINKING_TEXT)}
+              onNavigateToTurn={onNavigateToTurn}
+            />
+          </>
+        ) : (
+          <>
+            {/* Grouped / Flat sub-toggle */}
+            <div className="flex items-center gap-1 pb-1">
+              <button
+                onClick={() => setFlatMode(false)}
+                className="rounded px-1.5 py-0.5 text-[10px] transition-colors"
+                style={{
+                  backgroundColor: !flatMode ? 'rgba(99, 102, 241, 0.2)' : COLOR_SURFACE_OVERLAY,
+                  color: !flatMode ? '#818cf8' : COLOR_TEXT_MUTED,
+                }}
+              >
+                Grouped
+              </button>
+              <button
+                onClick={() => setFlatMode(true)}
+                className="rounded px-1.5 py-0.5 text-[10px] transition-colors"
+                style={{
+                  backgroundColor: flatMode ? 'rgba(99, 102, 241, 0.2)' : COLOR_SURFACE_OVERLAY,
+                  color: flatMode ? '#818cf8' : COLOR_TEXT_MUTED,
+                }}
+              >
+                Flat
+              </button>
+            </div>
+            {flatMode ? (
+              <FlatInjectionList
+                injections={injections}
+                onNavigateToTurn={onNavigateToTurn}
+                onNavigateToTool={onNavigateToTool}
+                onNavigateToUserGroup={onNavigateToUserGroup}
+              />
+            ) : (
+              <RankedInjectionList
+                injections={injections}
+                onNavigateToTurn={onNavigateToTurn}
+                onNavigateToTool={onNavigateToTool}
+                onNavigateToUserGroup={onNavigateToUserGroup}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};