@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/useTeamProvisioningPresentation.ts

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+
+import { useStore } from '@renderer/store';
+import {
+  getCurrentProvisioningProgressForTeam,
+  selectTeamMemberSnapshotsForName,
+} from '@renderer/store/slices/teamSlice';
+import { buildTeamProvisioningPresentation } from '@renderer/utils/teamProvisioningPresentation';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { TeamProvisioningPresentation } from '@renderer/utils/teamProvisioningPresentation';
+
+export function useTeamProvisioningPresentation(teamName: string): {
+  presentation: TeamProvisioningPresentation | null;
+  cancelProvisioning: ((runId: string) => Promise<void>) | null;
+  cancelCurrentProvisioning: ((teamName: string, runIdHint?: string) => Promise<void>) | null;
+  runInstanceKey: string | null;
+} {
+  const {
+    progress,
+    cancelProvisioning,
+    cancelCurrentProvisioning,
+    teamMembers,
+    memberSpawnStatuses,
+    memberSpawnSnapshot,
+  } = useStore(
+    useShallow((s) => ({
+      progress: getCurrentProvisioningProgressForTeam(s, teamName),
+      cancelProvisioning: s.cancelProvisioning,
+      cancelCurrentProvisioning: s.cancelCurrentProvisioning,
+      teamMembers: selectTeamMemberSnapshotsForName(s, teamName),
+      memberSpawnStatuses: s.memberSpawnStatusesByTeam[teamName],
+      memberSpawnSnapshot: s.memberSpawnSnapshotsByTeam[teamName],
+    }))
+  );
+
+  const presentation = useMemo(
+    () =>
+      buildTeamProvisioningPresentation({
+        progress,
+        members: teamMembers,
+        memberSpawnStatuses,
+        memberSpawnSnapshot,
+      }),
+    [memberSpawnSnapshot, memberSpawnStatuses, progress, teamMembers]
+  );
+
+  return {
+    presentation,
+    cancelProvisioning,
+    cancelCurrentProvisioning,
+    runInstanceKey: progress ? `${teamName}:${progress.runId}:${progress.startedAt}` : null,
+  };
+}

package/src/renderer/components/terminal/TerminalLogPanel.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+interface TerminalLogPanelProps {
+  chunks: string[];
+  className?: string;
+}
+
+export const TerminalLogPanel = ({
+  chunks,
+  className,
+}: TerminalLogPanelProps): React.JSX.Element => {
+  const preRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (preRef.current) {
+      preRef.current.scrollTop = preRef.current.scrollHeight;
+    }
+  }, [chunks]);
+
+  return (
+    <pre
+      ref={preRef}
+      className={`mt-2 overflow-auto rounded border p-2 text-xs ${className ?? ''}`}
+      style={{
+        backgroundColor: '#141416',
+        color: '#fafafa',
+        borderColor: 'var(--color-border)',
+        height: '120px',
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all',
+      }}
+    >
+      {chunks.join('')}
+    </pre>
+  );
+};

package/src/renderer/components/ui/ChipInteractionLayer.tsx

@@ -0,0 +1,255 @@
+/**
+ * Interactive overlay layer (z-20) for inline code chips.
+ *
+ * Positioned above the textarea, provides:
+ * - Hover tooltip with code preview (first ~12 lines, CodeMirror syntax highlighting)
+ * - X button to remove a chip
+ *
+ * Uses mirror div technique (calculateChipPositions) to position elements
+ * exactly over the corresponding chip tokens in the textarea.
+ */
+
+import * as React from 'react';
+
+import { syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+import { EditorView } from '@codemirror/view';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { chipDisplayLabel } from '@renderer/types/inlineChip';
+import { calculateChipPositions } from '@renderer/utils/chipUtils';
+import { getSyncLanguageExtension } from '@renderer/utils/codemirrorLanguages';
+import { ExternalLink, X } from 'lucide-react';
+
+import type { InlineChip } from '@renderer/types/inlineChip';
+import type { ChipPosition } from '@renderer/utils/chipUtils';
+
+// =============================================================================
+// Compact read-only CodeMirror theme for tooltip preview
+// =============================================================================
+
+const chipPreviewTheme = EditorView.theme({
+  '&': {
+    fontSize: '11px',
+    backgroundColor: 'var(--code-bg, #1e1e2e)',
+    color: 'var(--color-text)',
+  },
+  '.cm-content': {
+    padding: '8px 10px',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+    lineHeight: '1.6',
+  },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { overflow: 'auto' },
+  '.cm-gutters': { display: 'none' },
+  '.cm-activeLine': { backgroundColor: 'transparent' },
+  '.cm-selectionBackground': { backgroundColor: 'transparent' },
+  '.cm-cursor': { display: 'none' },
+});
+
+// =============================================================================
+// Code preview subcomponent (CodeMirror read-only)
+// =============================================================================
+
+const MAX_PREVIEW_LINES = 12;
+
+/** Simple tooltip for file-level mention chips (no code preview). */
+const ChipFilePreview = ({
+  chip,
+  onOpenInEditor,
+  onRevealFolder,
+}: {
+  chip: InlineChip;
+  onOpenInEditor?: (filePath: string) => void;
+  onRevealFolder?: (folderPath: string) => void;
+}): React.JSX.Element => {
+  const displayPath = chip.displayPath ?? chip.filePath;
+  const isFolder = chip.isFolder === true;
+  return (
+    <div className="max-w-md overflow-hidden rounded-md">
+      <div className="flex items-center gap-2 bg-[var(--code-bg,#1e1e2e)] px-2.5 py-2">
+        <span className="text-[11px] font-medium text-[var(--color-text)]">{chip.fileName}</span>
+        <span className="flex-1 text-[10px] text-[var(--color-text-muted)]">{displayPath}</span>
+        {isFolder && onRevealFolder ? (
+          <button
+            type="button"
+            className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRevealFolder(chip.filePath);
+            }}
+          >
+            <ExternalLink size={10} />
+            显示
+          </button>
+        ) : !isFolder && onOpenInEditor ? (
+          <button
+            type="button"
+            className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOpenInEditor(chip.filePath);
+            }}
+          >
+            <ExternalLink size={10} />
+            打开
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const ChipCodePreview = ({ chip }: { chip: InlineChip }): React.JSX.Element => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const allLines = chip.codeText.split('\n');
+  const truncated = allLines.length > MAX_PREVIEW_LINES;
+  const visibleCode = truncated ? allLines.slice(0, MAX_PREVIEW_LINES).join('\n') : chip.codeText;
+  const label = chipDisplayLabel(chip);
+  const lineRef =
+    chip.fromLine === chip.toLine
+      ? `line ${String(chip.fromLine)}`
+      : `lines ${String(chip.fromLine)}-${String(chip.toLine)}`;
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const langExt = getSyncLanguageExtension(chip.fileName);
+
+    const state = EditorState.create({
+      doc: visibleCode,
+      extensions: [
+        chipPreviewTheme,
+        syntaxHighlighting(oneDarkHighlightStyle),
+        EditorView.editable.of(false),
+        EditorState.readOnly.of(true),
+        ...(langExt ? [langExt] : []),
+      ],
+    });
+
+    const view = new EditorView({ state, parent: container });
+
+    return () => {
+      view.destroy();
+    };
+  }, [visibleCode, chip.fileName]);
+
+  return (
+    <div className="max-w-md overflow-hidden rounded-md">
+      <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--code-bg,#1e1e2e)] px-2.5 py-1.5">
+        <span className="text-[11px] font-medium text-[var(--color-text)]">{label}</span>
+        <span className="text-[10px] text-[var(--color-text-muted)]">{lineRef}</span>
+      </div>
+      <div ref={containerRef} />
+      {truncated ? (
+        <div className="border-t border-[var(--color-border)] bg-[var(--code-bg,#1e1e2e)] px-2.5 py-1">
+          <span className="text-[10px] text-[var(--color-text-muted)]">
+            ({allLines.length - MAX_PREVIEW_LINES} more lines...)
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+// =============================================================================
+// Interaction layer
+// =============================================================================
+
+interface ChipInteractionLayerProps {
+  chips: InlineChip[];
+  value: string;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  scrollTop: number;
+  onRemove: (chipId: string) => void;
+}
+
+export const ChipInteractionLayer = ({
+  chips,
+  value,
+  textareaRef,
+  scrollTop,
+  onRemove,
+}: ChipInteractionLayerProps): React.JSX.Element | null => {
+  const [positions, setPositions] = React.useState<ChipPosition[]>([]);
+  const revealFileInEditor = useStore((s) => s.revealFileInEditor);
+  const revealFolderInEditor = useStore((s) => s.revealFolderInEditor);
+
+  React.useLayoutEffect(() => {
+    if (chips.length === 0) {
+      setPositions([]);
+      return;
+    }
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    setPositions(calculateChipPositions(textarea, value, chips));
+  }, [chips, value, textareaRef]);
+
+  if (positions.length === 0) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-20 overflow-hidden">
+      <div style={{ transform: `translateY(-${scrollTop}px)` }}>
+        {positions.map((pos) => {
+          const isFileChip = pos.chip.fromLine == null;
+          const isFolderChip = pos.chip.isFolder === true;
+          return (
+            <Tooltip key={pos.chip.id}>
+              <TooltipTrigger asChild>
+                <div
+                  className={`group pointer-events-auto absolute ${isFileChip ? 'cursor-pointer' : 'cursor-default'}`}
+                  style={{
+                    top: pos.top,
+                    left: pos.left,
+                    width: pos.width,
+                    height: pos.height,
+                  }}
+                  onClick={
+                    isFileChip
+                      ? (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          if (isFolderChip) {
+                            revealFolderInEditor(pos.chip.filePath);
+                          } else {
+                            revealFileInEditor(pos.chip.filePath);
+                          }
+                        }
+                      : undefined
+                  }
+                >
+                  <button
+                    type="button"
+                    className="pointer-events-none absolute -right-1 -top-1.5 z-30 flex size-3.5 items-center justify-center rounded-full border border-[var(--color-border-emphasis)] bg-[var(--color-surface-raised)] opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onRemove(pos.chip.id);
+                    }}
+                  >
+                    <X size={8} className="text-[var(--color-text-muted)]" />
+                  </button>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="max-w-md p-0">
+                {isFileChip ? (
+                  <ChipFilePreview
+                    chip={pos.chip}
+                    onOpenInEditor={revealFileInEditor}
+                    onRevealFolder={revealFolderInEditor}
+                  />
+                ) : (
+                  <ChipCodePreview chip={pos.chip} />
+                )}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/ui/CodeChipBadge.tsx

@@ -0,0 +1,37 @@
+/**
+ * Styled span for rendering inline code chip tokens in the backdrop overlay.
+ * Uses the same text as the textarea (transparent) to maintain pixel-perfect alignment.
+ *
+ * Purple color scheme to distinguish from @mention badges (blue).
+ * Folder chips use a teal color scheme to distinguish from file chips.
+ */
+
+import type { InlineChip } from '@renderer/types/inlineChip';
+
+const CHIP_BG = 'rgba(139, 92, 246, 0.15)';
+const CHIP_TEXT = '#a78bfa';
+const FOLDER_CHIP_BG = 'rgba(45, 212, 191, 0.15)';
+const FOLDER_CHIP_TEXT = '#5eead4';
+
+interface CodeChipBadgeProps {
+  chip: InlineChip;
+  /** The full chip token text (e.g. "📄auth.ts:10-15") */
+  tokenText: string;
+}
+
+export const CodeChipBadge = ({ chip, tokenText }: CodeChipBadgeProps): React.JSX.Element => {
+  const bg = chip.isFolder ? FOLDER_CHIP_BG : CHIP_BG;
+  const text = chip.isFolder ? FOLDER_CHIP_TEXT : CHIP_TEXT;
+  return (
+    <span
+      style={{
+        backgroundColor: bg,
+        color: text,
+        borderRadius: '4px',
+        boxShadow: `0 0 0 1.5px ${bg}`,
+      }}
+    >
+      {tokenText}
+    </span>
+  );
+};

package/src/renderer/components/ui/ExpandableContent.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+const DEFAULT_COLLAPSED_HEIGHT = 200; // px
+
+interface ExpandableContentProps {
+  /** Content to render inside the expandable container. */
+  children: React.ReactNode;
+  /** Maximum height (px) before truncation kicks in. Default: 200. */
+  collapsedHeight?: number;
+  /** Extra className applied to the outermost wrapper. */
+  className?: string;
+  /** Called when the user clicks "Show more" to expand the content. */
+  onExpand?: () => void;
+}
+
+/**
+ * Generic expand/collapse wrapper with:
+ * - Collapsed: content clipped at `collapsedHeight`, mask-image fade, "Show more" button
+ * - Expanded: full content, sticky "Show less" button at viewport bottom
+ *
+ * Uses CSS `mask-image` for the fade so it works on any background color
+ * (zebra stripes, card backgrounds, etc.) without needing to know the bg color.
+ */
+export const ExpandableContent = ({
+  children,
+  collapsedHeight = DEFAULT_COLLAPSED_HEIGHT,
+  className,
+  onExpand,
+}: ExpandableContentProps): React.JSX.Element => {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [needsTruncation, setNeedsTruncation] = useState(false);
+
+  // Measure content height via callback ref — re-runs when children change
+  const measureRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        requestAnimationFrame(() => {
+          setNeedsTruncation(node.scrollHeight > collapsedHeight);
+        });
+      }
+    },
+    // Re-measure when children identity changes (content prop in callers)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- children identity triggers re-measure
+    [children, collapsedHeight]
+  );
+
+  const handleCollapse = useCallback(() => {
+    setExpanded(false);
+    anchorRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, []);
+
+  return (
+    <div ref={anchorRef} className={className}>
+      <div
+        ref={measureRef}
+        className="relative"
+        style={
+          !expanded && needsTruncation
+            ? {
+                maxHeight: collapsedHeight,
+                overflow: 'hidden',
+                WebkitMaskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)',
+                maskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)',
+              }
+            : undefined
+        }
+      >
+        {children}
+      </div>
+
+      {/* Show more */}
+      {!expanded && needsTruncation ? (
+        <div className="relative flex justify-center" style={{ marginTop: -15 }}>
+          <button
+            type="button"
+            className="flex items-center gap-1 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 text-[11px] text-[var(--color-text-secondary)] shadow-sm transition-colors hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)]"
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(true);
+              onExpand?.();
+            }}
+          >
+            <ChevronDown size={12} />
+            Show more
+          </button>
+        </div>
+      ) : null}
+
+      {/* Sticky Show less */}
+      {expanded && needsTruncation ? (
+        <div className="sticky bottom-0 z-10 flex justify-center pb-1 pt-2">
+          <button
+            type="button"
+            className="flex items-center gap-1 rounded-md border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-2.5 py-1 text-[11px] text-[var(--color-text-muted)] shadow-sm transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-secondary)]"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCollapse();
+            }}
+          >
+            <ChevronUp size={12} />
+            Show less
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+};