@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/SessionContextPanel/items/ClaudeMdItem.tsx

@@ -0,0 +1,76 @@
+/**
+ * ClaudeMdItem - Single CLAUDE.md file item display.
+ */
+
+import React from 'react';
+
+import { CopyablePath } from '@renderer/components/common/CopyablePath';
+import { resolveAbsolutePath, shortenDisplayPath } from '@renderer/utils/pathDisplay';
+
+import { formatTokens } from '../utils/formatting';
+import { formatFirstSeen, parseTurnIndex } from '../utils/pathParsing';
+
+import type { ClaudeMdContextInjection } from '@renderer/types/contextInjection';
+
+interface ClaudeMdItemProps {
+  injection: ClaudeMdContextInjection;
+  projectRoot?: string;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const ClaudeMdItem = ({
+  injection,
+  projectRoot,
+  onNavigateToTurn,
+}: Readonly<ClaudeMdItemProps>): React.ReactElement => {
+  const turnIndex = parseTurnIndex(injection.firstSeenInGroup);
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+  const displayPath = shortenDisplayPath(injection.path, projectRoot);
+  const absolutePath = resolveAbsolutePath(injection.path, projectRoot);
+
+  return (
+    <div className="rounded px-2 py-1">
+      <CopyablePath
+        displayText={displayPath}
+        copyText={absolutePath}
+        className="text-xs"
+        style={{ color: 'var(--color-text-secondary)' }}
+      />
+      <div className="mt-0.5 flex items-center gap-2">
+        <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          ~{formatTokens(injection.estimatedTokens)} tokens
+        </span>
+        {isClickable ? (
+          <button
+            type="button"
+            className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+            style={{
+              color: '#93c5fd',
+              textDecoration: 'underline',
+              textDecorationStyle: 'dotted' as const,
+              textUnderlineOffset: '2px',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              font: 'inherit',
+              fontSize: '12px',
+            }}
+            onClick={() => onNavigateToTurn(turnIndex)}
+          >
+            @{formatFirstSeen(injection.firstSeenInGroup)}
+          </button>
+        ) : (
+          <span
+            className="text-xs"
+            style={{
+              color: 'var(--color-text-muted)',
+              opacity: 0.7,
+            }}
+          >
+            @{formatFirstSeen(injection.firstSeenInGroup)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/MentionedFileItem.tsx

@@ -0,0 +1,91 @@
+/**
+ * MentionedFileItem - Single mentioned file item display.
+ */
+
+import React from 'react';
+
+import { CopyablePath } from '@renderer/components/common/CopyablePath';
+import { resolveAbsolutePath, shortenDisplayPath } from '@renderer/utils/pathDisplay';
+import { File } from 'lucide-react';
+
+import { formatTokens } from '../utils/formatting';
+
+import type { MentionedFileInjection } from '@renderer/types/contextInjection';
+
+interface MentionedFileItemProps {
+  injection: MentionedFileInjection;
+  projectRoot?: string;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const MentionedFileItem = ({
+  injection,
+  projectRoot,
+  onNavigateToTurn,
+}: Readonly<MentionedFileItemProps>): React.ReactElement => {
+  const turnIndex = injection.firstSeenTurnIndex;
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+  const displayPath = shortenDisplayPath(injection.path, projectRoot);
+  const absolutePath = resolveAbsolutePath(injection.path, projectRoot);
+
+  return (
+    <div className="rounded px-2 py-1.5">
+      <div className="flex items-center gap-1.5">
+        <File size={12} style={{ color: 'var(--color-text-muted)', flexShrink: 0 }} />
+        <CopyablePath
+          displayText={displayPath}
+          copyText={absolutePath}
+          className="text-xs"
+          style={{ color: 'var(--color-text-secondary)' }}
+        />
+        {!injection.exists && (
+          <span
+            className="rounded px-1 py-0.5 text-xs"
+            style={{
+              backgroundColor: 'var(--color-error-subtle)',
+              color: 'var(--color-error)',
+            }}
+          >
+            missing
+          </span>
+        )}
+      </div>
+      <div className="ml-4 mt-0.5 flex items-center gap-2">
+        <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          ~{formatTokens(injection.estimatedTokens)} tokens
+        </span>
+        {isClickable ? (
+          <span
+            role="link"
+            tabIndex={0}
+            className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+            style={{
+              color: '#93c5fd',
+              textDecoration: 'underline',
+              textDecorationStyle: 'dotted' as const,
+              textUnderlineOffset: '2px',
+            }}
+            onClick={() => onNavigateToTurn(turnIndex)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                onNavigateToTurn(turnIndex);
+              }
+            }}
+          >
+            @Turn {turnIndex + 1}
+          </span>
+        ) : (
+          <span
+            className="text-xs"
+            style={{
+              color: 'var(--color-text-muted)',
+              opacity: 0.7,
+            }}
+          >
+            @Turn {turnIndex + 1}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/TaskCoordinationItem.tsx

@@ -0,0 +1,116 @@
+/**
+ * TaskCoordinationItem - Single task coordination injection with expandable breakdown.
+ */
+
+import React, { useState } from 'react';
+
+import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
+import { ChevronRight, Users } from 'lucide-react';
+
+import { formatTokens } from '../utils/formatting';
+
+import type { TaskCoordinationInjection } from '@renderer/types/contextInjection';
+
+interface TaskCoordinationItemProps {
+  injection: TaskCoordinationInjection;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const TaskCoordinationItem = ({
+  injection,
+  onNavigateToTurn,
+}: Readonly<TaskCoordinationItemProps>): React.ReactElement => {
+  const [expanded, setExpanded] = useState(false);
+  const turnIndex = injection.turnIndex;
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+  const hasBreakdown = injection.breakdown.length > 0;
+
+  const containerContent = (
+    <>
+      {hasBreakdown && (
+        <ChevronRight
+          className={`size-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+          style={{ color: COLOR_TEXT_MUTED }}
+        />
+      )}
+      <Users size={12} style={{ color: COLOR_TEXT_MUTED, flexShrink: 0 }} />
+      {isClickable ? (
+        <span
+          role="link"
+          tabIndex={0}
+          className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+          style={{
+            color: '#93c5fd',
+            textDecoration: 'underline',
+            textDecorationStyle: 'dotted' as const,
+            textUnderlineOffset: '2px',
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onNavigateToTurn(turnIndex);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.stopPropagation();
+              onNavigateToTurn(turnIndex);
+            }
+          }}
+        >
+          @Turn {turnIndex + 1}
+        </span>
+      ) : (
+        <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
+          @Turn {turnIndex + 1}
+        </span>
+      )}
+      <span className="text-xs" style={{ color: COLOR_TEXT_MUTED }}>
+        ~{formatTokens(injection.estimatedTokens)} tokens
+      </span>
+      <span
+        className="rounded px-1 py-0.5 text-xs"
+        style={{
+          backgroundColor: 'var(--color-surface-overlay)',
+          color: COLOR_TEXT_MUTED,
+        }}
+      >
+        {injection.breakdown.length} item{injection.breakdown.length !== 1 ? 's' : ''}
+      </span>
+    </>
+  );
+
+  return (
+    <div className="rounded px-2 py-1.5">
+      {hasBreakdown ? (
+        <button
+          type="button"
+          className="flex w-full cursor-pointer items-center gap-1.5 hover:opacity-80"
+          style={{
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            font: 'inherit',
+            textAlign: 'left',
+          }}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {containerContent}
+        </button>
+      ) : (
+        <div className="flex items-center gap-1.5">{containerContent}</div>
+      )}
+
+      {expanded && hasBreakdown && (
+        <div className="ml-6 mt-1 space-y-0.5">
+          {injection.breakdown.map((item, idx) => (
+            <div key={`${item.label}-${idx}`} className="flex items-center justify-between text-xs">
+              <span style={{ color: COLOR_TEXT_SECONDARY }}>{item.label}</span>
+              <span className="tabular-nums" style={{ color: COLOR_TEXT_MUTED }}>
+                ~{formatTokens(item.tokenCount)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/ThinkingTextItem.tsx

@@ -0,0 +1,96 @@
+/**
+ * ThinkingTextItem - Single thinking text item with expandable breakdown.
+ */
+
+import React, { useState } from 'react';
+
+import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
+import { Brain, ChevronRight } from 'lucide-react';
+
+import { formatTokens } from '../utils/formatting';
+
+import type { ThinkingTextInjection } from '@renderer/types/contextInjection';
+
+interface ThinkingTextItemProps {
+  injection: ThinkingTextInjection;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const ThinkingTextItem = ({
+  injection,
+  onNavigateToTurn,
+}: Readonly<ThinkingTextItemProps>): React.ReactElement => {
+  const [expanded, setExpanded] = useState(false);
+  const turnIndex = injection.turnIndex;
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+
+  return (
+    <div className="rounded px-2 py-1.5">
+      <button
+        type="button"
+        className="flex w-full cursor-pointer items-center gap-1.5 hover:opacity-80"
+        style={{
+          background: 'none',
+          border: 'none',
+          padding: 0,
+          font: 'inherit',
+          textAlign: 'left',
+        }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <ChevronRight
+          className={`size-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+          style={{ color: COLOR_TEXT_MUTED }}
+        />
+        <Brain size={12} style={{ color: COLOR_TEXT_MUTED, flexShrink: 0 }} />
+        {isClickable ? (
+          <span
+            role="link"
+            tabIndex={0}
+            className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+            style={{
+              color: '#93c5fd',
+              textDecoration: 'underline',
+              textDecorationStyle: 'dotted' as const,
+              textUnderlineOffset: '2px',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onNavigateToTurn(turnIndex);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.stopPropagation();
+                onNavigateToTurn(turnIndex);
+              }
+            }}
+          >
+            @Turn {turnIndex + 1}
+          </span>
+        ) : (
+          <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
+            @Turn {turnIndex + 1}
+          </span>
+        )}
+        <span className="text-xs" style={{ color: COLOR_TEXT_MUTED }}>
+          ~{formatTokens(injection.estimatedTokens)} tokens
+        </span>
+      </button>
+
+      {expanded && injection.breakdown.length > 0 && (
+        <div className="ml-6 mt-1 space-y-0.5">
+          {injection.breakdown.map((item, idx) => (
+            <div key={`${item.type}-${idx}`} className="flex items-center gap-2 py-0.5 text-xs">
+              <span style={{ color: COLOR_TEXT_MUTED }}>
+                {item.type === 'thinking' ? '思考' : '文本'}
+              </span>
+              <span style={{ color: COLOR_TEXT_MUTED, opacity: 0.7 }}>
+                ~{formatTokens(item.tokenCount)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/ToolBreakdownItem.tsx

@@ -0,0 +1,38 @@
+/**
+ * ToolBreakdownItem - Single tool breakdown item display.
+ */
+
+import React from 'react';
+
+import { formatTokens } from '../utils/formatting';
+
+import type { ToolTokenBreakdown } from '@renderer/types/contextInjection';
+
+interface ToolBreakdownItemProps {
+  tool: ToolTokenBreakdown;
+}
+
+export const ToolBreakdownItem = ({
+  tool,
+}: Readonly<ToolBreakdownItemProps>): React.ReactElement => {
+  return (
+    <div className="flex items-center gap-2 py-0.5 text-xs">
+      <span style={{ color: 'var(--color-text-muted)' }}>{tool.toolName}</span>
+      <span style={{ color: 'var(--color-text-muted)', opacity: 0.7 }}>
+        ~{formatTokens(tool.tokenCount)}
+      </span>
+      {tool.isError && (
+        <span
+          className="rounded px-1 py-0.5"
+          style={{
+            backgroundColor: 'var(--color-error-subtle)',
+            color: 'var(--color-error)',
+            fontSize: '10px',
+          }}
+        >
+          error
+        </span>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/ToolOutputItem.tsx

@@ -0,0 +1,113 @@
+/**
+ * ToolOutputItem - Single tool output item with expandable breakdown.
+ */
+
+import React, { useState } from 'react';
+
+import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
+import { ChevronRight, Wrench } from 'lucide-react';
+
+import { formatTokens } from '../utils/formatting';
+
+import { ToolBreakdownItem } from './ToolBreakdownItem';
+
+import type { ToolOutputInjection } from '@renderer/types/contextInjection';
+
+interface ToolOutputItemProps {
+  injection: ToolOutputInjection;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const ToolOutputItem = ({
+  injection,
+  onNavigateToTurn,
+}: Readonly<ToolOutputItemProps>): React.ReactElement => {
+  const [expanded, setExpanded] = useState(false);
+  const turnIndex = injection.turnIndex;
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+  const hasBreakdown = injection.toolBreakdown.length > 0;
+
+  const containerContent = (
+    <>
+      {hasBreakdown && (
+        <ChevronRight
+          className={`size-3 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+          style={{ color: COLOR_TEXT_MUTED }}
+        />
+      )}
+      <Wrench size={12} style={{ color: COLOR_TEXT_MUTED, flexShrink: 0 }} />
+      {isClickable ? (
+        <span
+          role="link"
+          tabIndex={0}
+          className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+          style={{
+            color: '#93c5fd',
+            textDecoration: 'underline',
+            textDecorationStyle: 'dotted' as const,
+            textUnderlineOffset: '2px',
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onNavigateToTurn(turnIndex);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.stopPropagation();
+              onNavigateToTurn(turnIndex);
+            }
+          }}
+        >
+          @Turn {turnIndex + 1}
+        </span>
+      ) : (
+        <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
+          @Turn {turnIndex + 1}
+        </span>
+      )}
+      <span className="text-xs" style={{ color: COLOR_TEXT_MUTED }}>
+        ~{formatTokens(injection.estimatedTokens)} tokens
+      </span>
+      <span
+        className="rounded px-1 py-0.5 text-xs"
+        style={{
+          backgroundColor: 'var(--color-surface-overlay)',
+          color: COLOR_TEXT_MUTED,
+        }}
+      >
+        {injection.toolCount} tool{injection.toolCount !== 1 ? 's' : ''}
+      </span>
+    </>
+  );
+
+  return (
+    <div className="rounded px-2 py-1.5">
+      {hasBreakdown ? (
+        <button
+          type="button"
+          className="flex w-full cursor-pointer items-center gap-1.5 hover:opacity-80"
+          style={{
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            font: 'inherit',
+            textAlign: 'left',
+          }}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {containerContent}
+        </button>
+      ) : (
+        <div className="flex items-center gap-1.5">{containerContent}</div>
+      )}
+
+      {expanded && hasBreakdown && (
+        <div className="ml-6 mt-1 space-y-0.5">
+          {injection.toolBreakdown.map((tool, idx) => (
+            <ToolBreakdownItem key={`${tool.toolName}-${idx}`} tool={tool} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/chat/SessionContextPanel/items/UserMessageItem.tsx

@@ -0,0 +1,69 @@
+/**
+ * UserMessageItem - Single user message item showing turn link, tokens, and preview.
+ */
+
+import React from 'react';
+
+import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
+import { MessageSquare } from 'lucide-react';
+
+import { formatTokens } from '../utils/formatting';
+
+import type { UserMessageInjection } from '@renderer/types/contextInjection';
+
+interface UserMessageItemProps {
+  injection: UserMessageInjection;
+  onNavigateToTurn?: (turnIndex: number) => void;
+}
+
+export const UserMessageItem = ({
+  injection,
+  onNavigateToTurn,
+}: Readonly<UserMessageItemProps>): React.ReactElement => {
+  const turnIndex = injection.turnIndex;
+  const isClickable = onNavigateToTurn && turnIndex >= 0;
+
+  return (
+    <div className="rounded px-2 py-1.5">
+      <div className="flex w-full items-center gap-1.5">
+        <MessageSquare size={12} style={{ color: COLOR_TEXT_MUTED, flexShrink: 0 }} />
+        {isClickable ? (
+          <span
+            role="link"
+            tabIndex={0}
+            className="cursor-pointer text-xs transition-opacity hover:opacity-80"
+            style={{
+              color: '#93c5fd',
+              textDecoration: 'underline',
+              textDecorationStyle: 'dotted' as const,
+              textUnderlineOffset: '2px',
+            }}
+            onClick={() => onNavigateToTurn(turnIndex)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                onNavigateToTurn(turnIndex);
+              }
+            }}
+          >
+            @Turn {turnIndex + 1}
+          </span>
+        ) : (
+          <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
+            @Turn {turnIndex + 1}
+          </span>
+        )}
+        <span className="text-xs" style={{ color: COLOR_TEXT_MUTED }}>
+          ~{formatTokens(injection.estimatedTokens)} tokens
+        </span>
+      </div>
+      {injection.textPreview && (
+        <div
+          className="mt-0.5 truncate pl-5 text-xs italic"
+          style={{ color: COLOR_TEXT_MUTED, opacity: 0.7 }}
+        >
+          {injection.textPreview}
+        </div>
+      )}
+    </div>
+  );
+};