@yancyyu/openhermit 1.5.8

package/src/renderer/components/chat/SessionContextPanel/types.ts

@@ -0,0 +1,96 @@
+/**
+ * Type definitions for SessionContextPanel components.
+ */
+
+import type { ClaudeMdSource } from '@renderer/types/claudeMd';
+import type { ContextInjection, ContextPhaseInfo } from '@renderer/types/contextInjection';
+import type { SessionMetrics } from '@shared/types';
+import type { DerivedContextMetrics } from '@shared/utils/contextMetrics';
+
+// =============================================================================
+// Props Interface
+// =============================================================================
+
+export interface SessionContextPanelProps {
+  /** All accumulated context injections */
+  injections: ContextInjection[];
+  /** Close button handler */
+  onClose?: () => void;
+  /** Project root for relative path display */
+  projectRoot?: string;
+  /** Click Turn N to navigate to that turn */
+  onNavigateToTurn?: (turnIndex: number) => void;
+  /** Navigate to a specific tool within a turn by toolUseId */
+  onNavigateToTool?: (turnIndex: number, toolUseId: string) => void;
+  /** Navigate to the user message group preceding the AI group at turnIndex */
+  onNavigateToUserGroup?: (turnIndex: number) => void;
+  /** Unified context metrics for the selected AI group */
+  contextMetrics?: DerivedContextMetrics;
+  /** Full session metrics (input, output, cache tokens, cost) */
+  sessionMetrics?: SessionMetrics;
+  /** Combined cost of all subagent processes */
+  subagentCostUsd?: number;
+  /** Open the Session Report to see full cost breakdown */
+  onViewReport?: () => void;
+  /** Phase information for phase selector */
+  phaseInfo?: ContextPhaseInfo;
+  /** Currently selected phase (null = current/latest) */
+  selectedPhase: number | null;
+  /** Callback to change selected phase */
+  onPhaseChange: (phase: number | null) => void;
+  /** Which side of the content the panel is on: left → borderRight, right → borderLeft */
+  side?: 'left' | 'right';
+}
+
+// =============================================================================
+// Section Types
+// =============================================================================
+
+/** Section type constants */
+export const SECTION_CLAUDE_MD = 'claude-md' as const;
+export const SECTION_MENTIONED_FILES = 'mentioned-files' as const;
+export const SECTION_TOOL_OUTPUTS = 'tool-outputs' as const;
+export const SECTION_THINKING_TEXT = 'thinking-text' as const;
+export const SECTION_TASK_COORDINATION = 'task-coordination' as const;
+export const SECTION_USER_MESSAGES = 'user-messages' as const;
+
+/** Section identifiers for collapsible panels */
+export type SectionType =
+  | typeof SECTION_CLAUDE_MD
+  | typeof SECTION_MENTIONED_FILES
+  | typeof SECTION_TOOL_OUTPUTS
+  | typeof SECTION_THINKING_TEXT
+  | typeof SECTION_TASK_COORDINATION
+  | typeof SECTION_USER_MESSAGES;
+
+/** View mode for the context panel */
+export type ContextViewMode = 'category' | 'ranked';
+
+// =============================================================================
+// CLAUDE.md Group Types
+// =============================================================================
+
+/** Group category for CLAUDE.md files */
+export type ClaudeMdGroupCategory = 'global' | 'project' | 'directory';
+
+interface ClaudeMdGroupConfig {
+  label: string;
+  sources: ClaudeMdSource[];
+}
+
+export const CLAUDE_MD_GROUP_CONFIG: Record<ClaudeMdGroupCategory, ClaudeMdGroupConfig> = {
+  global: {
+    label: 'Global',
+    sources: ['enterprise', 'user-memory', 'user-rules', 'auto-memory'],
+  },
+  project: {
+    label: 'Project',
+    sources: ['project-memory', 'project-rules', 'project-local'],
+  },
+  directory: {
+    label: 'Directory',
+    sources: ['directory'],
+  },
+};
+
+export const CLAUDE_MD_GROUP_ORDER: ClaudeMdGroupCategory[] = ['global', 'project', 'directory'];

package/src/renderer/components/chat/SessionContextPanel/utils/formatting.ts

@@ -0,0 +1,6 @@
+/**
+ * Formatting utilities for SessionContextPanel.
+ */
+
+// Re-export from shared module for backwards compatibility
+export { formatTokensCompact as formatTokens } from '@shared/utils/tokenFormatting';

package/src/renderer/components/chat/SessionContextPanel/utils/pathParsing.ts

@@ -0,0 +1,23 @@
+/**
+ * Path parsing utilities for SessionContextPanel.
+ */
+
+/**
+ * Format the firstSeenInGroup value into a human-readable string.
+ * Converts "ai-0" -> "Turn 1", "ai-1" -> "Turn 2", etc.
+ */
+export function formatFirstSeen(groupId: string): string {
+  const turnIndex = parseTurnIndex(groupId);
+  if (turnIndex < 0) return groupId;
+  return `Turn ${turnIndex + 1}`;
+}
+
+/**
+ * Extract turn index from groupId. Returns -1 if invalid.
+ * "ai-0" -> 0, "ai-1" -> 1, etc.
+ */
+export function parseTurnIndex(groupId: string): number {
+  const match = /^ai-(\d+)$/.exec(groupId);
+  if (!match) return -1;
+  return parseInt(match[1], 10);
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { format } from 'date-fns';
+import { Terminal } from 'lucide-react';
+
+import type { SystemGroup } from '@renderer/types/groups';
+
+// Module-level constant - safe because .replace() resets lastIndex on g-flagged regexes
+const ANSI_ESCAPE_REGEX = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*m', 'g');
+
+interface SystemChatGroupProps {
+  systemGroup: SystemGroup;
+}
+
+/**
+ * SystemChatGroup displays command output (e.g., /model response).
+ * Renders on LEFT side like AI, but with neutral/gray styling.
+ */
+const SystemChatGroupInner = ({
+  systemGroup,
+}: Readonly<SystemChatGroupProps>): React.JSX.Element => {
+  const { commandOutput, timestamp } = systemGroup;
+
+  // Clean ANSI escape codes from output
+  const cleanOutput = commandOutput.replace(ANSI_ESCAPE_REGEX, '');
+
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[85%] space-y-2">
+        {/* Header - system icon */}
+        <div
+          className="flex items-center gap-2 text-xs"
+          style={{ color: 'var(--color-text-muted)' }}
+        >
+          <Terminal className="size-3.5" style={{ color: 'var(--color-text-muted)' }} />
+          <span className="font-medium" style={{ color: 'var(--color-text-secondary)' }}>
+            System
+          </span>
+          <span>·</span>
+          <span>{format(timestamp, 'h:mm:ss a')}</span>
+        </div>
+
+        {/* Content - theme-aware neutral styling */}
+        <div
+          className="rounded-2xl rounded-bl-sm px-4 py-3"
+          style={{ backgroundColor: 'var(--chat-system-bg)' }}
+        >
+          <pre
+            className="whitespace-pre-wrap font-mono text-sm"
+            style={{ color: 'var(--chat-system-text)' }}
+          >
+            {cleanOutput}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SystemChatGroup = React.memo(SystemChatGroupInner);