@yancyyu/openhermit 1.5.8

package/src/renderer/components/team/schedule/ScheduleStatusBadge.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import type { ScheduleRunStatus, ScheduleStatus } from '@shared/types';
+
+// =============================================================================
+// Schedule Status Badge
+// =============================================================================
+
+const SCHEDULE_STATUS_CONFIG: Record<ScheduleStatus, { label: string; className: string }> = {
+  active: {
+    label: '启用',
+    className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
+  },
+  paused: { label: '已停止', className: 'bg-amber-500/15 text-amber-400 border-amber-500/20' },
+  disabled: { label: '已禁用', className: 'bg-zinc-500/15 text-zinc-400 border-zinc-500/20' },
+};
+
+interface ScheduleStatusBadgeProps {
+  status: ScheduleStatus;
+}
+
+export const ScheduleStatusBadge = ({ status }: ScheduleStatusBadgeProps): React.JSX.Element => {
+  const config = SCHEDULE_STATUS_CONFIG[status];
+  return (
+    <span
+      className={`inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium ${config.className}`}
+    >
+      {config.label}
+    </span>
+  );
+};
+
+// =============================================================================
+// Run Status Badge
+// =============================================================================
+
+const RUN_STATUS_CONFIG: Record<ScheduleRunStatus, { label: string; className: string }> = {
+  pending: { label: '等待中', className: 'text-zinc-400' },
+  warming_up: { label: '预热中', className: 'text-blue-400' },
+  warm: { label: '已预热', className: 'text-cyan-400' },
+  running: { label: '运行中', className: 'text-emerald-400' },
+  completed: { label: '已完成', className: 'text-emerald-400' },
+  failed: { label: '失败', className: 'text-red-400' },
+  failed_interrupted: { label: '已中断', className: 'text-amber-400' },
+  cancelled: { label: '已取消', className: 'text-zinc-400' },
+};
+
+interface RunStatusBadgeProps {
+  status: ScheduleRunStatus;
+}
+
+export const RunStatusBadge = ({ status }: RunStatusBadgeProps): React.JSX.Element => {
+  const config = RUN_STATUS_CONFIG[status];
+  return <span className={`text-[10px] font-medium ${config.className}`}>{config.label}</span>;
+};

package/src/renderer/components/team/sidebar/TeamSidebarHost.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useId, useLayoutEffect, useState } from 'react';
+
+import { useStore } from '@renderer/store';
+import { useShallow } from 'zustand/react/shallow';
+
+import {
+  removeTeamSidebarHost,
+  upsertTeamSidebarHost,
+  useTeamSidebarPortalSnapshot,
+} from './TeamSidebarPortalManager';
+
+import type { TeamSidebarSurface } from './TeamSidebarPortalManager';
+
+const TeamSidebarHostContext = createContext<string | null>(null);
+
+interface TeamSidebarHostProps {
+  teamName: string;
+  surface: TeamSidebarSurface;
+  isActive: boolean;
+  isFocused: boolean;
+  children?: React.ReactNode;
+}
+
+export function useTeamSidebarHostId(): string | null {
+  return useContext(TeamSidebarHostContext);
+}
+
+export const TeamSidebarHost = ({
+  teamName,
+  surface,
+  isActive,
+  isFocused,
+  children,
+}: TeamSidebarHostProps): React.JSX.Element => {
+  const hostId = useId();
+  const [element, setElement] = useState<HTMLDivElement | null>(null);
+  const { messagesPanelMode, messagesPanelWidth } = useStore(
+    useShallow((s) => ({
+      messagesPanelMode: s.messagesPanelMode,
+      messagesPanelWidth: s.messagesPanelWidth,
+    }))
+  );
+  const snapshot = useTeamSidebarPortalSnapshot();
+  const isVisible = messagesPanelMode === 'sidebar';
+  const isOwner = isVisible && snapshot.activeHostIdByTeam[teamName] === hostId;
+
+  useLayoutEffect(() => {
+    upsertTeamSidebarHost(hostId, {
+      teamName,
+      surface,
+      element,
+      isActive,
+      isFocused,
+    });
+    return () => {
+      removeTeamSidebarHost(hostId);
+    };
+  }, [element, hostId, isActive, isFocused, surface, teamName]);
+
+  return (
+    <TeamSidebarHostContext.Provider value={hostId}>
+      <div
+        ref={setElement}
+        data-team-sidebar-host={surface}
+        data-team-name={teamName}
+        className={`relative shrink-0 overflow-hidden ${isOwner ? 'border-r border-[var(--color-border)]' : ''}`}
+        style={{
+          width: isOwner ? messagesPanelWidth : 0,
+          minWidth: isOwner ? messagesPanelWidth : 0,
+        }}
+      >
+        {children}
+      </div>
+    </TeamSidebarHostContext.Provider>
+  );
+};

package/src/renderer/components/team/sidebar/TeamSidebarPortalManager.ts

@@ -0,0 +1,173 @@
+import { useSyncExternalStore } from 'react';
+
+export type TeamSidebarSurface = 'team' | 'graph-tab' | 'graph-overlay';
+
+interface TeamSidebarHostEntry {
+  id: string;
+  teamName: string;
+  surface: TeamSidebarSurface;
+  element: HTMLElement | null;
+  isActive: boolean;
+  isFocused: boolean;
+  order: number;
+}
+
+interface TeamSidebarSourceEntry {
+  id: string;
+  teamName: string;
+  isActive: boolean;
+  isFocused: boolean;
+  order: number;
+}
+
+interface TeamSidebarSnapshot {
+  version: number;
+  activeHostIdByTeam: Record<string, string>;
+  activeSourceIdByTeam: Record<string, string>;
+}
+
+const SURFACE_PRIORITY: Record<TeamSidebarSurface, number> = {
+  team: 1,
+  'graph-tab': 2,
+  'graph-overlay': 3,
+};
+
+const hostById = new Map<string, TeamSidebarHostEntry>();
+const sourceById = new Map<string, TeamSidebarSourceEntry>();
+const listeners = new Set<() => void>();
+let version = 0;
+let nextOrder = 1;
+
+function emit(): void {
+  version += 1;
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function sortHosts(a: TeamSidebarHostEntry, b: TeamSidebarHostEntry): number {
+  const focusedDiff = Number(b.isFocused) - Number(a.isFocused);
+  if (focusedDiff !== 0) return focusedDiff;
+  const activeDiff = Number(b.isActive) - Number(a.isActive);
+  if (activeDiff !== 0) return activeDiff;
+  const priorityDiff = SURFACE_PRIORITY[b.surface] - SURFACE_PRIORITY[a.surface];
+  if (priorityDiff !== 0) return priorityDiff;
+  return b.order - a.order;
+}
+
+function sortSources(a: TeamSidebarSourceEntry, b: TeamSidebarSourceEntry): number {
+  const focusedDiff = Number(b.isFocused) - Number(a.isFocused);
+  if (focusedDiff !== 0) return focusedDiff;
+  const activeDiff = Number(b.isActive) - Number(a.isActive);
+  if (activeDiff !== 0) return activeDiff;
+  return b.order - a.order;
+}
+
+function buildSnapshot(): TeamSidebarSnapshot {
+  const activeHostIdByTeam: Record<string, string> = {};
+  const activeSourceIdByTeam: Record<string, string> = {};
+
+  const hostsByTeam = new Map<string, TeamSidebarHostEntry[]>();
+  for (const host of hostById.values()) {
+    if (!host.element) continue;
+    const list = hostsByTeam.get(host.teamName) ?? [];
+    list.push(host);
+    hostsByTeam.set(host.teamName, list);
+  }
+  for (const [teamName, hosts] of hostsByTeam.entries()) {
+    const winner = [...hosts].sort(sortHosts)[0];
+    if (winner) activeHostIdByTeam[teamName] = winner.id;
+  }
+
+  const sourcesByTeam = new Map<string, TeamSidebarSourceEntry[]>();
+  for (const source of sourceById.values()) {
+    const list = sourcesByTeam.get(source.teamName) ?? [];
+    list.push(source);
+    sourcesByTeam.set(source.teamName, list);
+  }
+  for (const [teamName, sources] of sourcesByTeam.entries()) {
+    const winner = [...sources].sort(sortSources)[0];
+    if (winner) activeSourceIdByTeam[teamName] = winner.id;
+  }
+
+  return {
+    version,
+    activeHostIdByTeam,
+    activeSourceIdByTeam,
+  };
+}
+
+let cachedSnapshot = buildSnapshot();
+
+function refreshSnapshot(): void {
+  cachedSnapshot = buildSnapshot();
+  emit();
+}
+
+export function upsertTeamSidebarHost(
+  id: string,
+  entry: Omit<TeamSidebarHostEntry, 'id' | 'order'>
+): void {
+  const existing = hostById.get(id);
+  hostById.set(id, {
+    id,
+    order: existing?.order ?? nextOrder++,
+    ...entry,
+  });
+  refreshSnapshot();
+}
+
+export function removeTeamSidebarHost(id: string): void {
+  if (!hostById.delete(id)) return;
+  refreshSnapshot();
+}
+
+export function upsertTeamSidebarSource(
+  id: string,
+  entry: Omit<TeamSidebarSourceEntry, 'id' | 'order'>
+): void {
+  const existing = sourceById.get(id);
+  sourceById.set(id, {
+    id,
+    order: existing?.order ?? nextOrder++,
+    ...entry,
+  });
+  refreshSnapshot();
+}
+
+export function removeTeamSidebarSource(id: string): void {
+  if (!sourceById.delete(id)) return;
+  refreshSnapshot();
+}
+
+export function getTeamSidebarHostElement(hostId: string): HTMLElement | null {
+  return hostById.get(hostId)?.element ?? null;
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot(): TeamSidebarSnapshot {
+  return cachedSnapshot;
+}
+
+export function useTeamSidebarPortalSnapshot(): TeamSidebarSnapshot {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export function getTeamSidebarPortalSnapshotForTests(): TeamSidebarSnapshot {
+  return cachedSnapshot;
+}
+
+export function resetTeamSidebarPortalManagerForTests(): void {
+  hostById.clear();
+  sourceById.clear();
+  listeners.clear();
+  version = 0;
+  nextOrder = 1;
+  cachedSnapshot = buildSnapshot();
+}

package/src/renderer/components/team/sidebar/TeamSidebarPortalSource.tsx

@@ -0,0 +1,66 @@
+import { useId, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useStore } from '@renderer/store';
+
+import { useTeamSidebarHostId } from './TeamSidebarHost';
+import {
+  getTeamSidebarHostElement,
+  removeTeamSidebarSource,
+  upsertTeamSidebarSource,
+  useTeamSidebarPortalSnapshot,
+} from './TeamSidebarPortalManager';
+
+interface TeamSidebarPortalSourceProps {
+  teamName: string;
+  isActive: boolean;
+  isFocused: boolean;
+  children: React.ReactNode;
+}
+
+export const TeamSidebarPortalSource = ({
+  teamName,
+  isActive,
+  isFocused,
+  children,
+}: TeamSidebarPortalSourceProps): React.JSX.Element | null => {
+  const sourceId = useId();
+  const hostId = useTeamSidebarHostId();
+  const messagesPanelMode = useStore((s) => s.messagesPanelMode);
+  const snapshot = useTeamSidebarPortalSnapshot();
+
+  useLayoutEffect(() => {
+    upsertTeamSidebarSource(sourceId, {
+      teamName,
+      isActive,
+      isFocused,
+    });
+    return () => {
+      removeTeamSidebarSource(sourceId);
+    };
+  }, [isActive, isFocused, sourceId, teamName]);
+
+  if (!hostId || messagesPanelMode !== 'sidebar') {
+    return null;
+  }
+
+  if (snapshot.activeSourceIdByTeam[teamName] !== sourceId) {
+    return null;
+  }
+
+  const activeHostId = snapshot.activeHostIdByTeam[teamName];
+  if (!activeHostId) {
+    return null;
+  }
+
+  if (activeHostId === hostId) {
+    return <>{children}</>;
+  }
+
+  const target = getTeamSidebarHostElement(activeHostId);
+  if (!target) {
+    return null;
+  }
+
+  return createPortal(children, target);
+};

package/src/renderer/components/team/sidebar/TeamSidebarRail.tsx

@@ -0,0 +1,68 @@
+import { memo, useState } from 'react';
+
+import { ClaudeLogsSection } from '../ClaudeLogsSection';
+import { MessagesPanel } from '../messages/MessagesPanel';
+
+import type { MouseEventHandler } from 'react';
+import type { ComponentProps } from 'react';
+
+type SharedMessagesPanelProps = Omit<ComponentProps<typeof MessagesPanel>, 'position'>;
+
+interface TeamSidebarRailProps {
+  teamName: string;
+  messagesPanelProps: SharedMessagesPanelProps;
+  isResizing: boolean;
+  onResizeMouseDown: MouseEventHandler<HTMLDivElement>;
+  logsHeight: number;
+  isLogsResizing: boolean;
+  onLogsResizeMouseDown: MouseEventHandler<HTMLDivElement>;
+}
+
+export const TeamSidebarRail = memo(function TeamSidebarRail({
+  teamName,
+  messagesPanelProps,
+  isResizing,
+  onResizeMouseDown,
+  logsHeight,
+  isLogsResizing,
+  onLogsResizeMouseDown,
+}: TeamSidebarRailProps): React.JSX.Element {
+  const [logsOpen, setLogsOpen] = useState(false);
+  const logsSeparator = logsOpen ? (
+    <div
+      className={`group relative h-3 shrink-0 cursor-row-resize ${isLogsResizing ? 'bg-blue-500/10' : ''}`}
+      onMouseDown={onLogsResizeMouseDown}
+    >
+      <div
+        className={`absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 transition-colors ${
+          isLogsResizing
+            ? 'bg-blue-500'
+            : 'bg-[var(--color-text-muted)]/35 group-hover:bg-blue-500/90'
+        }`}
+      />
+    </div>
+  ) : (
+    <div className="bg-[var(--color-text-muted)]/35 h-px shrink-0" />
+  );
+
+  return (
+    <div className="flex size-full min-h-0 flex-col overflow-hidden bg-[var(--color-surface)]">
+      <div className="shrink-0 overflow-hidden px-3">
+        <ClaudeLogsSection
+          teamName={teamName}
+          position="sidebar"
+          sidebarViewerMaxHeight={logsHeight}
+          onOpenChange={setLogsOpen}
+        />
+      </div>
+      {logsSeparator}
+      <div className="min-h-0 flex-1">
+        <MessagesPanel position="sidebar" {...messagesPanelProps} />
+      </div>
+      <div
+        className={`absolute inset-y-0 right-0 z-20 w-1 cursor-col-resize transition-colors hover:bg-blue-500/30 ${isResizing ? 'bg-blue-500/40' : ''}`}
+        onMouseDown={onResizeMouseDown}
+      />
+    </div>
+  );
+});

package/src/renderer/components/team/sidebar/teamSidebarUiState.ts

@@ -0,0 +1,136 @@
+import { DEFAULT_CLAUDE_LOGS_FILTER } from '../ClaudeLogsFilterPopover';
+
+import type { ClaudeLogsFilterState } from '../ClaudeLogsFilterPopover';
+import type { ClaudeLogsViewerState } from '../CliLogsRichView';
+import type { MessagesFilterState } from '../messages/MessagesFilterPopover';
+
+export interface TeamMessagesSidebarUiState {
+  messagesSearchQuery: string;
+  messagesFilter: MessagesFilterState;
+  messagesFilterOpen: boolean;
+  messagesCollapsed: boolean;
+  messagesSearchBarVisible: boolean;
+  expandedItemKey: string | null;
+  messagesScrollTop: number;
+  bottomSheetSnapIndex: number;
+}
+
+export interface TeamClaudeLogsSidebarUiState {
+  searchQuery: string;
+  filter: ClaudeLogsFilterState;
+  filterOpen: boolean;
+  viewerState: ClaudeLogsViewerState;
+}
+
+const messagesStateByTeam = new Map<string, TeamMessagesSidebarUiState>();
+const pendingRepliesStateByTeam = new Map<string, Record<string, number>>();
+const claudeLogsStateByTeam = new Map<string, TeamClaudeLogsSidebarUiState>();
+
+function cloneMessagesFilter(filter: MessagesFilterState): MessagesFilterState {
+  return {
+    from: new Set(filter.from),
+    to: new Set(filter.to),
+    showNoise: filter.showNoise,
+  };
+}
+
+function cloneClaudeLogsFilter(filter: ClaudeLogsFilterState): ClaudeLogsFilterState {
+  return {
+    streams: new Set(filter.streams),
+    kinds: new Set(filter.kinds),
+  };
+}
+
+function cloneViewerState(viewerState: ClaudeLogsViewerState): ClaudeLogsViewerState {
+  return {
+    collapsedGroupIds: new Set(viewerState.collapsedGroupIds),
+    expandedItemIds: new Set(viewerState.expandedItemIds),
+    expandedSubagentIds: new Set(viewerState.expandedSubagentIds),
+    viewport: { ...viewerState.viewport },
+  };
+}
+
+export function createDefaultMessagesSidebarUiState(): TeamMessagesSidebarUiState {
+  return {
+    messagesSearchQuery: '',
+    messagesFilter: {
+      from: new Set(),
+      to: new Set(),
+      showNoise: false,
+    },
+    messagesFilterOpen: false,
+    messagesCollapsed: true,
+    messagesSearchBarVisible: false,
+    expandedItemKey: null,
+    messagesScrollTop: 0,
+    bottomSheetSnapIndex: 2,
+  };
+}
+
+export function createDefaultClaudeLogsSidebarUiState(): TeamClaudeLogsSidebarUiState {
+  return {
+    searchQuery: '',
+    filter: {
+      streams: new Set(DEFAULT_CLAUDE_LOGS_FILTER.streams),
+      kinds: new Set(DEFAULT_CLAUDE_LOGS_FILTER.kinds),
+    },
+    filterOpen: false,
+    viewerState: {
+      collapsedGroupIds: new Set(),
+      expandedItemIds: new Set(),
+      expandedSubagentIds: new Set(),
+      viewport: { mode: 'edge', edge: 'newest' },
+    },
+  };
+}
+
+export function getTeamMessagesSidebarUiState(teamName: string): TeamMessagesSidebarUiState {
+  const state = messagesStateByTeam.get(teamName) ?? createDefaultMessagesSidebarUiState();
+  return {
+    ...state,
+    messagesFilter: cloneMessagesFilter(state.messagesFilter),
+  };
+}
+
+export function setTeamMessagesSidebarUiState(
+  teamName: string,
+  state: TeamMessagesSidebarUiState
+): void {
+  messagesStateByTeam.set(teamName, {
+    ...state,
+    messagesFilter: cloneMessagesFilter(state.messagesFilter),
+  });
+}
+
+export function getTeamPendingRepliesState(teamName: string): Record<string, number> {
+  return { ...(pendingRepliesStateByTeam.get(teamName) ?? {}) };
+}
+
+export function setTeamPendingRepliesState(
+  teamName: string,
+  pendingRepliesByMember: Record<string, number>
+): void {
+  pendingRepliesStateByTeam.set(teamName, { ...pendingRepliesByMember });
+}
+
+export function getTeamClaudeLogsSidebarUiState(teamName: string): TeamClaudeLogsSidebarUiState {
+  const state = claudeLogsStateByTeam.get(teamName) ?? createDefaultClaudeLogsSidebarUiState();
+  return {
+    searchQuery: state.searchQuery,
+    filter: cloneClaudeLogsFilter(state.filter),
+    filterOpen: state.filterOpen,
+    viewerState: cloneViewerState(state.viewerState),
+  };
+}
+
+export function setTeamClaudeLogsSidebarUiState(
+  teamName: string,
+  state: TeamClaudeLogsSidebarUiState
+): void {
+  claudeLogsStateByTeam.set(teamName, {
+    searchQuery: state.searchQuery,
+    filter: cloneClaudeLogsFilter(state.filter),
+    filterOpen: state.filterOpen,
+    viewerState: cloneViewerState(state.viewerState),
+  });
+}