@yancyyu/openhermit 1.5.8

package/src/renderer/components/sidebar/SessionContextMenu.tsx

@@ -0,0 +1,182 @@
+/**
+ * SessionContextMenu - Right-click context menu for sidebar session items.
+ * Supports opening in current pane, new tab, and split right.
+ * Shows keyboard shortcut hints for actions that have them.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { MAX_PANES } from '@renderer/types/panes';
+import { formatShortcut } from '@renderer/utils/stringUtils';
+import { Check, ClipboardCopy, Eye, EyeOff, Pin, PinOff, Terminal } from 'lucide-react';
+
+interface SessionContextMenuProps {
+  x: number;
+  y: number;
+  sessionId: string;
+  projectId: string;
+  sessionLabel: string;
+  paneCount: number;
+  isPinned: boolean;
+  isHidden: boolean;
+  onClose: () => void;
+  onOpenInCurrentPane: () => void;
+  onOpenInNewTab: () => void;
+  onSplitRightAndOpen: () => void;
+  onTogglePin: () => void;
+  onToggleHide: () => void;
+}
+
+export const SessionContextMenu = ({
+  x,
+  y,
+  sessionId,
+  paneCount,
+  isPinned,
+  isHidden,
+  onClose,
+  onOpenInCurrentPane,
+  onOpenInNewTab,
+  onSplitRightAndOpen,
+  onTogglePin,
+  onToggleHide,
+}: SessionContextMenuProps): React.JSX.Element => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [copiedField, setCopiedField] = useState<'id' | 'command' | null>(null);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent): void => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  const menuWidth = 240;
+  const menuHeight = 290;
+  const clampedX = Math.min(x, window.innerWidth - menuWidth - 8);
+  const clampedY = Math.min(y, window.innerHeight - menuHeight - 8);
+
+  const handleClick = (action: () => void) => () => {
+    action();
+    onClose();
+  };
+
+  const handleCopy = (text: string, field: 'id' | 'command') => async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedField(field);
+      setTimeout(() => {
+        setCopiedField(null);
+        onClose();
+      }, 600);
+    } catch {
+      // Silently fail
+    }
+  };
+
+  const atMaxPanes = paneCount >= MAX_PANES;
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 min-w-[220px] overflow-hidden rounded-md border py-1 shadow-lg"
+      style={{
+        left: clampedX,
+        top: clampedY,
+        backgroundColor: 'var(--color-surface-overlay)',
+        borderColor: 'var(--color-border-emphasis)',
+        color: 'var(--color-text)',
+      }}
+    >
+      <MenuItem label="Open in Current Pane" onClick={handleClick(onOpenInCurrentPane)} />
+      <MenuItem
+        label="Open in New Tab"
+        shortcut={`${formatShortcut('')}Click`}
+        onClick={handleClick(onOpenInNewTab)}
+      />
+      <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+      <MenuItem
+        label="Split Right and Open"
+        onClick={handleClick(onSplitRightAndOpen)}
+        disabled={atMaxPanes}
+      />
+      <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+      <MenuItem
+        label={isPinned ? 'Unpin Session' : 'Pin Session'}
+        icon={isPinned ? <PinOff className="size-4" /> : <Pin className="size-4" />}
+        onClick={handleClick(onTogglePin)}
+      />
+      <MenuItem
+        label={isHidden ? 'Unhide Session' : 'Hide Session'}
+        icon={isHidden ? <Eye className="size-4" /> : <EyeOff className="size-4" />}
+        onClick={handleClick(onToggleHide)}
+      />
+      <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+      <MenuItem
+        label={copiedField === 'id' ? 'Copied!' : 'Copy Session ID'}
+        icon={
+          copiedField === 'id' ? (
+            <Check className="size-4 text-green-400" />
+          ) : (
+            <ClipboardCopy className="size-4" />
+          )
+        }
+        onClick={handleCopy(sessionId, 'id')}
+      />
+      <MenuItem
+        label={copiedField === 'command' ? 'Copied!' : 'Copy Resume Command'}
+        icon={
+          copiedField === 'command' ? (
+            <Check className="size-4 text-green-400" />
+          ) : (
+            <Terminal className="size-4" />
+          )
+        }
+        onClick={handleCopy(`claude --resume ${sessionId}`, 'command')}
+      />
+    </div>
+  );
+};
+
+const MenuItem = ({
+  label,
+  shortcut,
+  icon,
+  onClick,
+  disabled,
+}: {
+  label: string;
+  shortcut?: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}): React.JSX.Element => {
+  return (
+    <button
+      className="flex w-full items-center justify-between px-3 py-1.5 text-left text-sm transition-colors hover:bg-[var(--color-surface-raised)]"
+      onClick={onClick}
+      disabled={disabled}
+      style={{ opacity: disabled ? 0.4 : 1 }}
+    >
+      <span className="flex items-center gap-2">
+        {icon}
+        {label}
+      </span>
+      {shortcut && (
+        <span className="ml-4 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          {shortcut}
+        </span>
+      )}
+    </button>
+  );
+};

package/src/renderer/components/sidebar/SessionFiltersPopover.tsx

@@ -0,0 +1,115 @@
+import { useMemo } from 'react';
+
+import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
+import { Button } from '@renderer/components/ui/button';
+import { Checkbox } from '@renderer/components/ui/checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { getTeamProviderLabel } from '@renderer/utils/teamModelCatalog';
+import { Filter } from 'lucide-react';
+
+import type { TeamProviderId } from '@shared/types';
+
+export const SESSION_PROVIDER_IDS = [
+  'anthropic',
+  'codex',
+  'gemini',
+  'opencode',
+] as const satisfies readonly TeamProviderId[];
+
+interface SessionFiltersPopoverProps {
+  selectedProviderIds: Set<TeamProviderId>;
+  providerCounts: Record<TeamProviderId, number>;
+  onProviderIdsChange: (next: Set<TeamProviderId>) => void;
+}
+
+export const SessionFiltersPopover = ({
+  selectedProviderIds,
+  providerCounts,
+  onProviderIdsChange,
+}: SessionFiltersPopoverProps): React.JSX.Element => {
+  const activeCount = useMemo(
+    () => (selectedProviderIds.size === SESSION_PROVIDER_IDS.length ? 0 : 1),
+    [selectedProviderIds]
+  );
+
+  const toggleProvider = (providerId: TeamProviderId): void => {
+    const next = new Set(selectedProviderIds);
+    if (next.has(providerId)) {
+      if (next.size === 1) {
+        return;
+      }
+      next.delete(providerId);
+    } else {
+      next.add(providerId);
+    }
+    onProviderIdsChange(next);
+  };
+
+  const handleReset = (): void => {
+    onProviderIdsChange(new Set<TeamProviderId>(SESSION_PROVIDER_IDS));
+  };
+
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="relative h-7 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+              aria-label="筛选会话"
+            >
+              <Filter size={14} />
+              {activeCount > 0 && (
+                <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
+                  {activeCount}
+                </span>
+              )}
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">筛选会话</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="end" className="w-72 p-0">
+        <div className="border-b border-[var(--color-border)] p-3">
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+              Provider
+            </p>
+            <button
+              type="button"
+              className="text-[10px] text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text)]"
+              disabled={activeCount === 0}
+              onClick={handleReset}
+            >
+              Reset
+            </button>
+          </div>
+          <div className="space-y-1">
+            {SESSION_PROVIDER_IDS.map((providerId) => (
+              <label
+                key={providerId}
+                className="flex cursor-pointer items-center gap-2 rounded-md p-1 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+              >
+                <Checkbox
+                  checked={selectedProviderIds.has(providerId)}
+                  onCheckedChange={() => toggleProvider(providerId)}
+                />
+                <ProviderBrandLogo providerId={providerId} className="size-3.5 shrink-0" />
+                <span className="flex-1 truncate">
+                  {getTeamProviderLabel(providerId) ?? providerId}
+                </span>
+                <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">
+                  {providerCounts[providerId]}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/renderer/components/sidebar/SessionItem.tsx

@@ -0,0 +1,393 @@
+/**
+ * SessionItem - Compact session row in the session list.
+ * Shows title, message count, and time ago.
+ * Supports right-click context menu for pane management.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
+import { useStore } from '@renderer/store';
+import { formatSessionLabel, parseSessionTitle } from '@renderer/utils/sessionTitleParser';
+import { getProviderScopedTeamModelLabel } from '@renderer/utils/teamModelCatalog';
+import { inferTeamProviderIdFromModel } from '@shared/utils/teamProvider';
+import { formatTokensCompact } from '@shared/utils/tokenFormatting';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { EyeOff, MessageSquare, Pin, Play, RotateCw, Users } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { OngoingIndicator } from '../common/OngoingIndicator';
+
+import { SessionContextMenu } from './SessionContextMenu';
+
+import type { PhaseTokenBreakdown, Session } from '@renderer/types/data';
+
+interface SessionItemProps {
+  session: Session;
+  isActive?: boolean;
+  isPinned?: boolean;
+  isHidden?: boolean;
+  multiSelectActive?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: () => void;
+}
+
+/**
+ * Format time distance in short form (e.g., "4m", "2h", "1d")
+ */
+function formatShortTime(date: Date): string {
+  const distance = formatDistanceToNowStrict(date, { addSuffix: false });
+  return distance
+    .replace(' seconds', 's')
+    .replace(' second', 's')
+    .replace(' minutes', 'm')
+    .replace(' minute', 'm')
+    .replace(' hours', 'h')
+    .replace(' hour', 'h')
+    .replace(' days', 'd')
+    .replace(' day', 'd')
+    .replace(' weeks', 'w')
+    .replace(' week', 'w')
+    .replace(' months', 'mo')
+    .replace(' month', 'mo')
+    .replace(' years', 'y')
+    .replace(' year', 'y');
+}
+
+/**
+ * Consumption badge with hover popover showing phase breakdown.
+ */
+const ConsumptionBadge = ({
+  contextConsumption,
+  phaseBreakdown,
+}: Readonly<{
+  contextConsumption: number;
+  phaseBreakdown?: PhaseTokenBreakdown[];
+}>): React.JSX.Element => {
+  const [popoverPosition, setPopoverPosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const badgeRef = useRef<HTMLSpanElement>(null);
+  const isHigh = contextConsumption > 150_000;
+
+  const showPopover = popoverPosition !== null;
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- tooltip trigger via hover, not interactive
+    <span
+      ref={badgeRef}
+      className="tabular-nums"
+      style={{ color: isHigh ? 'rgb(251, 191, 36)' : undefined }}
+      onMouseEnter={() => {
+        const rect = badgeRef.current?.getBoundingClientRect();
+        if (rect) {
+          setPopoverPosition({
+            top: rect.top - 6,
+            left: rect.left + rect.width / 2,
+          });
+        }
+      }}
+      onMouseLeave={() => setPopoverPosition(null)}
+    >
+      {formatTokensCompact(contextConsumption)}
+      {showPopover &&
+        popoverPosition &&
+        phaseBreakdown &&
+        phaseBreakdown.length > 0 &&
+        createPortal(
+          <div
+            className="pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full whitespace-nowrap rounded-lg px-3 py-2 text-[10px] shadow-xl"
+            style={{
+              top: popoverPosition.top,
+              left: popoverPosition.left,
+              backgroundColor: 'var(--color-surface-overlay)',
+              border: '1px solid var(--color-border-emphasis)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            <div className="mb-1 font-medium" style={{ color: 'var(--color-text)' }}>
+              Total Context: {formatTokensCompact(contextConsumption)} tokens
+            </div>
+            {phaseBreakdown.length === 1 ? (
+              <div>Context: {formatTokensCompact(phaseBreakdown[0].peakTokens)}</div>
+            ) : (
+              phaseBreakdown.map((phase) => (
+                <div key={phase.phaseNumber} className="flex items-center gap-1">
+                  <span style={{ color: 'var(--color-text-muted)' }}>
+                    Phase {phase.phaseNumber}:
+                  </span>
+                  <span className="tabular-nums">{formatTokensCompact(phase.contribution)}</span>
+                  {phase.postCompaction != null && (
+                    <span style={{ color: 'var(--color-text-muted)' }}>
+                      (compacted to {formatTokensCompact(phase.postCompaction)})
+                    </span>
+                  )}
+                </div>
+              ))
+            )}
+          </div>,
+          document.body
+        )}
+    </span>
+  );
+};
+
+const SessionRuntimeBadge = ({
+  model,
+}: Readonly<{
+  model: string | undefined;
+}>): React.JSX.Element | null => {
+  const providerId = inferTeamProviderIdFromModel(model);
+  if (!providerId) {
+    return null;
+  }
+
+  const modelLabel = getProviderScopedTeamModelLabel(providerId, model) ?? model?.trim();
+  return (
+    <span
+      className="flex min-w-0 shrink items-center gap-1"
+      title={modelLabel ? `${providerId} · ${modelLabel}` : providerId}
+    >
+      <ProviderBrandLogo providerId={providerId} className="size-3 shrink-0" />
+      {modelLabel && <span className="truncate">{modelLabel}</span>}
+    </span>
+  );
+};
+
+export const SessionItem = ({
+  session,
+  isActive,
+  isPinned,
+  isHidden,
+  multiSelectActive,
+  isSelected,
+  onToggleSelect,
+}: Readonly<SessionItemProps>): React.JSX.Element => {
+  const {
+    openTab,
+    activeProjectId,
+    selectSession,
+    paneCount,
+    splitPane,
+    togglePinSession,
+    toggleHideSession,
+  } = useStore(
+    useShallow((s) => ({
+      openTab: s.openTab,
+      activeProjectId: s.activeProjectId,
+      selectSession: s.selectSession,
+      paneCount: s.paneLayout.panes.length,
+      splitPane: s.splitPane,
+      togglePinSession: s.togglePinSession,
+      toggleHideSession: s.toggleHideSession,
+    }))
+  );
+
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+
+  const handleClick = (event: React.MouseEvent): void => {
+    if (!activeProjectId) return;
+
+    // In multi-select mode, clicks toggle selection
+    if (multiSelectActive && onToggleSelect) {
+      onToggleSelect();
+      return;
+    }
+
+    // Cmd/Ctrl+click: open in new tab; plain click: replace current tab
+    const forceNewTab = event.ctrlKey || event.metaKey;
+
+    openTab(
+      {
+        type: 'session',
+        sessionId: session.id,
+        projectId: activeProjectId,
+        label: formatSessionLabel(session.firstMessage),
+      },
+      forceNewTab ? { forceNewTab } : { replaceActiveTab: true }
+    );
+
+    selectSession(session.id);
+  };
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const sessionLabel = formatSessionLabel(session.firstMessage);
+
+  const handleOpenInCurrentPane = useCallback(() => {
+    if (!activeProjectId) return;
+    openTab(
+      {
+        type: 'session',
+        sessionId: session.id,
+        projectId: activeProjectId,
+        label: sessionLabel,
+      },
+      { replaceActiveTab: true }
+    );
+    selectSession(session.id);
+  }, [activeProjectId, openTab, selectSession, session.id, sessionLabel]);
+
+  const handleOpenInNewTab = useCallback(() => {
+    if (!activeProjectId) return;
+    openTab(
+      {
+        type: 'session',
+        sessionId: session.id,
+        projectId: activeProjectId,
+        label: sessionLabel,
+      },
+      { forceNewTab: true }
+    );
+    selectSession(session.id);
+  }, [activeProjectId, openTab, selectSession, session.id, sessionLabel]);
+
+  const handleSplitRightAndOpen = useCallback(() => {
+    if (!activeProjectId) return;
+    // First open the tab in the focused pane
+    openTab({
+      type: 'session',
+      sessionId: session.id,
+      projectId: activeProjectId,
+      label: sessionLabel,
+    });
+    selectSession(session.id);
+    // Then split it to the right
+    const state = useStore.getState();
+    const focusedPaneId = state.paneLayout.focusedPaneId;
+    const activeTabId = state.activeTabId;
+    if (activeTabId) {
+      splitPane(focusedPaneId, activeTabId, 'right');
+    }
+  }, [activeProjectId, openTab, selectSession, session.id, sessionLabel, splitPane]);
+
+  // Height must match SESSION_HEIGHT (54px) in DateGroupedSessions.tsx for virtual scroll
+  return (
+    <>
+      <button
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+        className={`flex h-[54px] w-full flex-col justify-center overflow-hidden border-b px-2 py-1.5 text-left transition-colors ${isActive ? '' : 'bg-transparent hover:bg-surface-raised'}`}
+        style={{
+          borderColor: 'var(--color-border)',
+          ...(isActive ? { backgroundColor: 'var(--color-surface-raised)' } : {}),
+          ...(isHidden ? { opacity: 0.5 } : {}),
+        }}
+      >
+        {(() => {
+          const parsed = parseSessionTitle(session.firstMessage);
+          const isTeam = parsed.kind !== 'regular';
+          return (
+            <>
+              {/* First line: title + ongoing indicator + pin/hidden icons */}
+              <div className="flex items-center gap-1.5">
+                {multiSelectActive && (
+                  <input
+                    type="checkbox"
+                    checked={isSelected ?? false}
+                    onChange={() => onToggleSelect?.()}
+                    onClick={(e) => e.stopPropagation()}
+                    className="size-3.5 shrink-0 accent-blue-500"
+                  />
+                )}
+                {session.isOngoing && <OngoingIndicator />}
+                {isPinned && <Pin className="size-2.5 shrink-0 text-blue-400" />}
+                {isHidden && <EyeOff className="size-2.5 shrink-0 text-zinc-500" />}
+                {isTeam ? (
+                  <span
+                    className="flex items-center gap-1.5 truncate text-[13px] font-medium leading-tight"
+                    style={{ color: isActive ? 'var(--color-text)' : 'var(--color-text-muted)' }}
+                  >
+                    <Users className="size-3 shrink-0 text-blue-400" />
+                    <span className="truncate">{parsed.displayText}</span>
+                  </span>
+                ) : (
+                  <span
+                    className="line-clamp-2 text-[13px] font-medium leading-tight"
+                    style={{ color: isActive ? 'var(--color-text)' : 'var(--color-text-muted)' }}
+                  >
+                    {parsed.displayText}
+                  </span>
+                )}
+              </div>
+
+              {/* Second line: metadata */}
+              <div
+                className="mt-0.5 flex items-center gap-2 text-[10px] leading-tight"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {isTeam && parsed.projectName && (
+                  <>
+                    <span className="truncate">{parsed.projectName}</span>
+                    <span style={{ opacity: 0.5 }}>·</span>
+                  </>
+                )}
+                {isTeam && (
+                  <>
+                    <span className="flex shrink-0 items-center gap-0.5">
+                      {parsed.kind === 'team-resume' ? (
+                        <RotateCw className="size-2.5" />
+                      ) : (
+                        <Play className="size-2.5" />
+                      )}
+                      {parsed.kind === 'team-resume' ? 'resume' : 'new'}
+                    </span>
+                    <span style={{ opacity: 0.5 }}>·</span>
+                  </>
+                )}
+                <span className="flex shrink-0 items-center gap-0.5">
+                  <MessageSquare className="size-2.5" />
+                  {session.messageCount}
+                </span>
+                <span style={{ opacity: 0.5 }}>·</span>
+                <span className="tabular-nums">{formatShortTime(new Date(session.createdAt))}</span>
+                {session.model && (
+                  <>
+                    <span style={{ opacity: 0.5 }}>·</span>
+                    <SessionRuntimeBadge model={session.model} />
+                  </>
+                )}
+                {session.contextConsumption != null && session.contextConsumption > 0 && (
+                  <>
+                    <span style={{ opacity: 0.5 }}>·</span>
+                    <ConsumptionBadge
+                      contextConsumption={session.contextConsumption}
+                      phaseBreakdown={session.phaseBreakdown}
+                    />
+                  </>
+                )}
+              </div>
+            </>
+          );
+        })()}
+      </button>
+
+      {contextMenu &&
+        activeProjectId &&
+        createPortal(
+          <SessionContextMenu
+            x={contextMenu.x}
+            y={contextMenu.y}
+            sessionId={session.id}
+            projectId={activeProjectId}
+            sessionLabel={sessionLabel}
+            paneCount={paneCount}
+            isPinned={isPinned ?? false}
+            isHidden={isHidden ?? false}
+            onClose={() => setContextMenu(null)}
+            onOpenInCurrentPane={handleOpenInCurrentPane}
+            onOpenInNewTab={handleOpenInNewTab}
+            onSplitRightAndOpen={handleSplitRightAndOpen}
+            onTogglePin={() => void togglePinSession(session.id)}
+            onToggleHide={() => void toggleHideSession(session.id)}
+          />,
+          document.body
+        )}
+    </>
+  );
+};