@yancyyu/openhermit 1.5.8

package/src/renderer/components/common/ErrorBoundary.tsx

@@ -0,0 +1,211 @@
+import React, { Component, type ErrorInfo, type ReactNode } from 'react';
+
+import { captureRendererException, isSentryRendererActive } from '@renderer/sentry';
+import { useStore } from '@renderer/store';
+import {
+  type BugReportContext,
+  buildBugReportText,
+  buildGitHubBugReportUrl,
+} from '@renderer/utils/bugReportUtils';
+import { createLogger } from '@shared/utils/logger';
+import { api } from '@renderer/api';
+import { AlertTriangle, Bug, Check, Copy, RefreshCw } from 'lucide-react';
+
+const logger = createLogger('Component:ErrorBoundary');
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  copiedReport: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  private copyResetTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      copiedReport: false,
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    logger.error('ErrorBoundary caught an error:', error, errorInfo);
+    this.setState({ errorInfo });
+
+    // Report to Sentry when telemetry is active
+    if (isSentryRendererActive()) {
+      captureRendererException(error, {
+        componentStack: errorInfo.componentStack,
+        ...this.getBugReportContext(),
+      });
+    }
+  }
+
+  handleReload = (): void => {
+    window.location.reload();
+  };
+
+  handleReset = (): void => {
+    if (this.copyResetTimeout) {
+      clearTimeout(this.copyResetTimeout);
+      this.copyResetTimeout = null;
+    }
+
+    this.setState({
+      hasError: false,
+      copiedReport: false,
+      error: null,
+      errorInfo: null,
+    });
+  };
+
+  componentWillUnmount(): void {
+    if (this.copyResetTimeout) {
+      clearTimeout(this.copyResetTimeout);
+      this.copyResetTimeout = null;
+    }
+  }
+
+  getBugReportContext = (): BugReportContext => {
+    const state = useStore.getState();
+    const activeTab = state.getActiveTab();
+
+    return {
+      activeTabType: activeTab?.type ?? null,
+      activeTabLabel: activeTab?.label ?? null,
+      activeTeamName: activeTab?.teamName ?? null,
+      selectedTeamName: state.selectedTeamName,
+      taskId: state.globalTaskDetail?.taskId ?? state.pendingReviewRequest?.taskId ?? null,
+      sessionId: activeTab?.sessionId ?? null,
+      projectId: activeTab?.projectId ?? state.activeProjectId,
+    };
+  };
+
+  handleCreateGitHubIssue = (): void => {
+    const issueUrl = buildGitHubBugReportUrl({
+      error: this.state.error,
+      componentStack: this.state.errorInfo?.componentStack ?? null,
+      context: this.getBugReportContext(),
+    });
+
+    void api.openExternal(issueUrl);
+  };
+
+  handleCopyErrorDetails = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(
+        buildBugReportText({
+          error: this.state.error,
+          componentStack: this.state.errorInfo?.componentStack ?? null,
+          context: this.getBugReportContext(),
+        })
+      );
+
+      if (this.copyResetTimeout) {
+        clearTimeout(this.copyResetTimeout);
+      }
+
+      this.setState({ copiedReport: true });
+      this.copyResetTimeout = setTimeout(() => {
+        this.setState({ copiedReport: false });
+        this.copyResetTimeout = null;
+      }, 2000);
+    } catch (error) {
+      logger.warn('Failed to copy error details:', error);
+    }
+  };
+
+  // eslint-disable-next-line sonarjs/function-return-type -- Error boundaries inherently return different content based on error state
+  render(): ReactNode {
+    const { hasError, copiedReport, error, errorInfo } = this.state;
+    const { children, fallback } = this.props;
+
+    if (hasError) {
+      if (fallback) {
+        return fallback;
+      }
+
+      return (
+        <div className="flex h-screen flex-col items-center justify-center bg-claude-dark-bg p-8 text-claude-dark-text">
+          <div className="mb-6 flex items-center gap-3">
+            <AlertTriangle className="size-10 text-red-500" />
+            <h1 className="text-2xl font-semibold">出错了</h1>
+          </div>
+
+          <p className="mb-6 max-w-md text-center text-claude-dark-text-secondary">
+            应用发生了意外错误。你可以尝试重新加载页面，或重置错误状态。
+          </p>
+
+          {error && (
+            <div className="mb-6 w-full max-w-2xl overflow-auto rounded-lg border border-claude-dark-border bg-claude-dark-surface p-4">
+              <p className="mb-2 font-mono text-sm text-red-400">{error.message}</p>
+              {errorInfo?.componentStack && (
+                <details className="mt-2">
+                  <summary className="cursor-pointer text-xs text-claude-dark-text-secondary hover:text-claude-dark-text">
+                    组件堆栈
+                  </summary>
+                  <pre className="mt-2 whitespace-pre-wrap text-xs text-claude-dark-text-secondary">
+                    {errorInfo.componentStack}
+                  </pre>
+                </details>
+              )}
+            </div>
+          )}
+
+          <div className="flex flex-wrap justify-center gap-4">
+            <button
+              onClick={this.handleReset}
+              className="flex items-center gap-2 rounded-lg border border-claude-dark-border bg-claude-dark-surface px-4 py-2 transition-colors hover:bg-claude-dark-border"
+            >
+              重试
+            </button>
+            <button
+              onClick={() => void this.handleCopyErrorDetails()}
+              className="flex items-center gap-2 rounded-lg border border-claude-dark-border bg-claude-dark-surface px-4 py-2 transition-colors hover:bg-claude-dark-border"
+            >
+              {copiedReport ? (
+                <Check className="size-4 text-green-400" />
+              ) : (
+                <Copy className="size-4" />
+              )}
+              {copiedReport ? '已复制' : '复制错误详情'}
+            </button>
+            <button
+              onClick={this.handleCreateGitHubIssue}
+              className="flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-2 text-red-300 transition-colors hover:bg-red-500/20"
+            >
+              <Bug className="size-4" />在 GitHub 上报告问题
+            </button>
+            <button
+              onClick={this.handleReload}
+              className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 transition-colors hover:bg-blue-700"
+            >
+              <RefreshCw className="size-4" />
+              重新加载应用
+            </button>
+          </div>
+          <p className="mt-4 max-w-md text-center text-xs text-claude-dark-text-secondary">
+            GitHub
+            问题报告和复制的诊断信息会包含错误消息、堆栈、应用版本、当前标签页、所选团队、任务上下文和环境详情。
+          </p>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}

package/src/renderer/components/common/ExportDropdown.tsx

@@ -0,0 +1,142 @@
+/**
+ * ExportDropdown - Download icon button with dropdown for exporting session data.
+ *
+ * Supports three formats: Markdown (.md), JSON (.json), Plain Text (.txt).
+ * Follows the same close-on-outside-click / Escape patterns as RepositoryDropdown.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { triggerDownload } from '@renderer/utils/sessionExporter';
+import { Braces, Download, FileText, Type } from 'lucide-react';
+
+import type { SessionDetail } from '@renderer/types/data';
+import type { ExportFormat } from '@renderer/utils/sessionExporter';
+
+interface ExportDropdownProps {
+  sessionDetail: SessionDetail;
+}
+
+interface FormatOption {
+  format: ExportFormat;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  ext: string;
+}
+
+const FORMAT_OPTIONS: FormatOption[] = [
+  { format: 'markdown', label: 'Markdown', icon: FileText, ext: '.md' },
+  { format: 'json', label: 'JSON', icon: Braces, ext: '.json' },
+  { format: 'plaintext', label: 'Plain Text', icon: Type, ext: '.txt' },
+];
+
+export const ExportDropdown = ({
+  sessionDetail,
+}: Readonly<ExportDropdownProps>): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [buttonHover, setButtonHover] = useState(false);
+  const [hoveredFormat, setHoveredFormat] = useState<ExportFormat | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleEscape = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+
+  const handleExport = useCallback(
+    (format: ExportFormat) => {
+      triggerDownload(sessionDetail, format);
+      setIsOpen(false);
+    },
+    [sessionDetail]
+  );
+
+  return (
+    <div ref={containerRef} className="relative">
+      {/* Trigger button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        onMouseEnter={() => setButtonHover(true)}
+        onMouseLeave={() => setButtonHover(false)}
+        className="rounded-md p-2 transition-colors"
+        style={{
+          color: buttonHover || isOpen ? 'var(--color-text)' : 'var(--color-text-muted)',
+          backgroundColor: buttonHover || isOpen ? 'var(--color-surface-raised)' : 'transparent',
+        }}
+        title="Export session"
+      >
+        <Download className="size-4" />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full z-50 mt-1 w-48 overflow-hidden rounded-md border shadow-lg"
+          style={{
+            backgroundColor: 'var(--color-surface-overlay)',
+            borderColor: 'var(--color-border)',
+          }}
+        >
+          {/* Header */}
+          <div
+            className="px-3 py-2 text-xs font-medium"
+            style={{
+              color: 'var(--color-text-secondary)',
+              borderBottom: '1px solid var(--color-border)',
+            }}
+          >
+            Export Session
+          </div>
+
+          {/* Format options */}
+          {FORMAT_OPTIONS.map((option) => (
+            <button
+              key={option.format}
+              onClick={() => handleExport(option.format)}
+              onMouseEnter={() => setHoveredFormat(option.format)}
+              onMouseLeave={() => setHoveredFormat(null)}
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-xs transition-colors"
+              style={{
+                color:
+                  hoveredFormat === option.format
+                    ? 'var(--color-text)'
+                    : 'var(--color-text-secondary)',
+                backgroundColor:
+                  hoveredFormat === option.format ? 'var(--color-surface-raised)' : 'transparent',
+              }}
+            >
+              <option.icon className="size-3.5" />
+              <span className="flex-1">{option.label}</span>
+              <span className="text-[10px]" style={{ color: 'var(--color-text-muted)' }}>
+                {option.ext}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/common/FileTree.tsx

@@ -0,0 +1,182 @@
+/**
+ * Generic file tree component with render-props for customization.
+ *
+ * Used by EditorFileTree (FileTreeEntry) and ReviewFileTree (FileChangeSummary).
+ * ARIA: role="tree", role="treeitem", aria-expanded, role="group".
+ */
+
+import React, { useCallback } from 'react';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import type { TreeNode } from '@renderer/utils/fileTreeBuilder';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface FileTreeProps<T> {
+  nodes: TreeNode<T>[];
+  activeNodePath: string | null;
+  onNodeClick: (node: TreeNode<T>) => void;
+  expandedPaths: Record<string, boolean>;
+  onToggleExpand: (fullPath: string) => void;
+  renderLeafNode?: (node: TreeNode<T>, isSelected: boolean, depth: number) => React.ReactNode;
+  renderFolderLabel?: (node: TreeNode<T>, isOpen: boolean, depth: number) => React.ReactNode;
+  renderNodeIcon?: (node: TreeNode<T>) => React.ReactNode;
+  /** Optional data attributes placed on each <li> for event delegation (e.g. context menu) */
+  getNodeDataAttrs?: (node: TreeNode<T>) => Record<string, string>;
+  maxDepth?: number;
+}
+
+const MAX_VISUAL_DEPTH = 12;
+const INDENT_PX = 12;
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const FileTree = <T,>(props: Readonly<FileTreeProps<T>>): React.ReactElement => {
+  const { nodes, maxDepth = MAX_VISUAL_DEPTH } = props;
+
+  return (
+    <ul role="tree" className="select-none text-sm">
+      {nodes.map((node) => (
+        <TreeItem key={node.fullPath} node={node} depth={0} maxDepth={maxDepth} {...props} />
+      ))}
+    </ul>
+  );
+};
+
+// =============================================================================
+// TreeItem (recursive)
+// =============================================================================
+
+interface TreeItemProps<T> extends FileTreeProps<T> {
+  node: TreeNode<T>;
+  depth: number;
+}
+
+const TreeItemInner = <T,>({
+  node,
+  depth,
+  activeNodePath,
+  onNodeClick,
+  expandedPaths,
+  onToggleExpand,
+  renderLeafNode,
+  renderFolderLabel,
+  renderNodeIcon,
+  getNodeDataAttrs,
+  maxDepth = MAX_VISUAL_DEPTH,
+  nodes: _nodes,
+  ...rest
+}: Readonly<TreeItemProps<T>>): React.ReactElement => {
+  const visualDepth = Math.min(depth, maxDepth);
+  const isSelected = activeNodePath === node.fullPath;
+  const dataAttrs = getNodeDataAttrs?.(node);
+
+  const handleClick = useCallback(() => {
+    if (node.isFile) {
+      onNodeClick(node);
+    } else {
+      onToggleExpand(node.fullPath);
+    }
+  }, [node, onNodeClick, onToggleExpand]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
+
+  // Leaf node (file)
+  if (node.isFile) {
+    if (renderLeafNode) {
+      return (
+        // eslint-disable-next-line react/jsx-props-no-spreading -- data attributes from getNodeDataAttrs require spreading
+        <li role="treeitem" aria-selected={isSelected} {...dataAttrs}>
+          {renderLeafNode(node, isSelected, visualDepth)}
+        </li>
+      );
+    }
+
+    return (
+      <li
+        role="treeitem"
+        aria-selected={isSelected}
+        className={`flex cursor-pointer items-center gap-1 truncate px-2 py-0.5 hover:bg-surface-raised ${
+          isSelected ? 'bg-surface-raised text-text' : 'text-text-secondary'
+        }`}
+        style={{ paddingLeft: `${visualDepth * INDENT_PX + 8}px` }}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        title={node.fullPath}
+        // eslint-disable-next-line react/jsx-props-no-spreading -- data attributes from getNodeDataAttrs require spreading
+        {...dataAttrs}
+      >
+        {renderNodeIcon?.(node)}
+        <span className="truncate">{node.name}</span>
+      </li>
+    );
+  }
+
+  // Folder node
+  const isExpanded = expandedPaths[node.fullPath] === true;
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading -- data attributes from getNodeDataAttrs require spreading
+    <li role="treeitem" aria-expanded={isExpanded} aria-selected={isSelected} {...dataAttrs}>
+      {renderFolderLabel ? (
+        renderFolderLabel(node, isExpanded, visualDepth)
+      ) : (
+        <div
+          className="flex cursor-pointer items-center gap-1 truncate px-2 py-0.5 text-text-secondary hover:bg-surface-raised"
+          style={{ paddingLeft: `${visualDepth * INDENT_PX + 8}px` }}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          role="button"
+          tabIndex={0}
+          title={depth >= maxDepth ? node.fullPath : undefined}
+        >
+          {isExpanded ? (
+            <ChevronDown className="size-3.5 shrink-0 text-text-muted" />
+          ) : (
+            <ChevronRight className="size-3.5 shrink-0 text-text-muted" />
+          )}
+          {renderNodeIcon?.(node)}
+          <span className="truncate">{node.name}</span>
+        </div>
+      )}
+      {isExpanded && node.children.length > 0 && (
+        <ul role="group">
+          {node.children.map((child) => (
+            <TreeItemInner
+              key={child.fullPath}
+              node={child}
+              depth={depth + 1}
+              activeNodePath={activeNodePath}
+              onNodeClick={onNodeClick}
+              expandedPaths={expandedPaths}
+              onToggleExpand={onToggleExpand}
+              renderLeafNode={renderLeafNode}
+              renderFolderLabel={renderFolderLabel}
+              renderNodeIcon={renderNodeIcon}
+              getNodeDataAttrs={getNodeDataAttrs}
+              maxDepth={maxDepth}
+              nodes={[]}
+              {...rest}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+const TreeItem = React.memo(TreeItemInner) as typeof TreeItemInner;