@yancyyu/openhermit 1.5.8

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

@@ -0,0 +1,316 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { formatProviderStatusText } from '@renderer/components/runtime/providerConnectionUi';
+
+import type { CliInstallationStatus } from '@shared/types';
+
+// Stubs for removed codex-account feature
+function useCodexAccountSnapshot(_opts: { enabled: boolean; includeRateLimits?: boolean }) {
+  return { snapshot: null, loading: false };
+}
+function mergeCodexCliStatusWithSnapshot(
+  cliStatus: CliInstallationStatus | null | undefined,
+  _snapshot: unknown
+): CliInstallationStatus | null {
+  return cliStatus ?? null;
+}
+
+import { useStore } from '@renderer/store';
+import { createLoadingMultimodelCliStatus } from '@renderer/store/slices/cliInstallerSlice';
+import { filterMainScreenCliProviders } from '@renderer/utils/claudeCodeOnlyProviders';
+import { AlertTriangle, CheckCircle2, Loader2 } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { ProviderBrandLogo } from './ProviderBrandLogo';
+
+import type { CliProviderId, CliProviderStatus } from '@shared/types';
+
+interface ProviderActivityState {
+  provider: CliProviderStatus;
+  loading: boolean;
+  error: boolean;
+}
+
+function isProviderCardLoading(provider: CliProviderStatus, providerLoading: boolean): boolean {
+  return (
+    providerLoading ||
+    (!provider.authenticated &&
+      provider.statusMessage === 'Checking...' &&
+      provider.models.length === 0 &&
+      provider.backend == null)
+  );
+}
+
+function shouldMaskCodexNegativeBootstrapState(
+  sourceProvider: CliProviderStatus | null,
+  mergedProvider: CliProviderStatus
+): boolean {
+  return (
+    sourceProvider?.providerId === 'codex' &&
+    sourceProvider.statusMessage === 'Checking...' &&
+    mergedProvider.providerId === 'codex' &&
+    mergedProvider.connection?.codex?.launchReadinessState === 'missing_auth' &&
+    mergedProvider.connection.codex.login.status === 'idle'
+  );
+}
+
+function getActivityToneStyles(tone: 'loading' | 'checked' | 'error'): {
+  borderColor: string;
+  backgroundColor: string;
+  textColor: string;
+  statusColor: string;
+} {
+  switch (tone) {
+    case 'checked':
+      return {
+        borderColor: 'rgba(34, 197, 94, 0.22)',
+        backgroundColor: 'rgba(34, 197, 94, 0.08)',
+        textColor: '#dcfce7',
+        statusColor: '#86efac',
+      };
+    case 'error':
+      return {
+        borderColor: 'rgba(239, 68, 68, 0.28)',
+        backgroundColor: 'rgba(239, 68, 68, 0.08)',
+        textColor: '#fee2e2',
+        statusColor: '#fca5a5',
+      };
+    case 'loading':
+    default:
+      return {
+        borderColor: 'var(--color-border-emphasis)',
+        backgroundColor: 'rgba(255, 255, 255, 0.03)',
+        textColor: 'var(--color-text-secondary)',
+        statusColor: 'var(--color-text-muted)',
+      };
+  }
+}
+
+function areProviderIdListsEqual(nextIds: CliProviderId[], prevIds: CliProviderId[]): boolean {
+  return nextIds.length === prevIds.length && nextIds.every((id, index) => prevIds[index] === id);
+}
+
+export const GlobalProviderStatusHeader = (): React.JSX.Element | null => {
+  const {
+    cliStatus,
+    cliStatusLoading,
+    cliProviderStatusLoading,
+    multimodelEnabled,
+    isDashboardFocused,
+  } = useStore(
+    useShallow((state) => {
+      const focusedPane = state.paneLayout.panes.find(
+        (pane) => pane.id === state.paneLayout.focusedPaneId
+      );
+      const activeTab = focusedPane?.tabs.find((tab) => tab.id === focusedPane.activeTabId) ?? null;
+
+      return {
+        cliStatus: state.cliStatus,
+        cliStatusLoading: state.cliStatusLoading,
+        cliProviderStatusLoading: state.cliProviderStatusLoading,
+        multimodelEnabled: state.appConfig?.general?.multimodelEnabled ?? false,
+        isDashboardFocused:
+          !focusedPane || focusedPane.tabs.length === 0 || activeTab?.type === 'dashboard',
+      };
+    })
+  );
+  const [cycleProviderIds, setCycleProviderIds] = useState<CliProviderId[]>([]);
+
+  const loadingCliStatus = useMemo(
+    () =>
+      !cliStatus && cliStatusLoading && multimodelEnabled
+        ? createLoadingMultimodelCliStatus()
+        : cliStatus,
+    [cliStatus, cliStatusLoading, multimodelEnabled]
+  );
+
+  const codexAccount = useCodexAccountSnapshot({
+    enabled:
+      multimodelEnabled &&
+      loadingCliStatus?.flavor === 'agent_teams_orchestrator' &&
+      Boolean(loadingCliStatus?.providers.some((provider) => provider.providerId === 'codex')),
+    includeRateLimits: false,
+  });
+
+  const effectiveCliStatus = useMemo(
+    () => mergeCodexCliStatusWithSnapshot(loadingCliStatus, codexAccount.snapshot),
+    [codexAccount.snapshot, loadingCliStatus]
+  );
+  const codexSnapshotPending =
+    codexAccount.loading &&
+    Boolean(loadingCliStatus?.providers.some((provider) => provider.providerId === 'codex')) &&
+    !codexAccount.snapshot;
+
+  const sourceProviderMap = useMemo(
+    () =>
+      new Map(
+        (loadingCliStatus?.providers ?? []).map((provider) => [provider.providerId, provider])
+      ),
+    [loadingCliStatus?.providers]
+  );
+
+  const providerStates = useMemo<ProviderActivityState[]>(() => {
+    const visibleProviders = filterMainScreenCliProviders(effectiveCliStatus?.providers ?? []);
+
+    return visibleProviders.map((provider) => {
+      const sourceProvider = sourceProviderMap.get(provider.providerId) ?? null;
+      const loading =
+        isProviderCardLoading(provider, cliProviderStatusLoading[provider.providerId] === true) ||
+        (provider.providerId === 'codex' && codexSnapshotPending) ||
+        shouldMaskCodexNegativeBootstrapState(sourceProvider, provider);
+
+      return {
+        provider,
+        loading,
+        error: !loading && provider.verificationState === 'error',
+      };
+    });
+  }, [
+    cliProviderStatusLoading,
+    codexSnapshotPending,
+    effectiveCliStatus?.providers,
+    sourceProviderMap,
+  ]);
+
+  const visibleProviderIds = useMemo(
+    () => providerStates.map((state) => state.provider.providerId),
+    [providerStates]
+  );
+  const loadingProviderIds = useMemo(
+    () => providerStates.filter((state) => state.loading).map((state) => state.provider.providerId),
+    [providerStates]
+  );
+  const errorProviderIds = useMemo(
+    () => providerStates.filter((state) => state.error).map((state) => state.provider.providerId),
+    [providerStates]
+  );
+  const providerStateMap = useMemo(
+    () => new Map(providerStates.map((state) => [state.provider.providerId, state])),
+    [providerStates]
+  );
+
+  useEffect(() => {
+    setCycleProviderIds((previousIds) => {
+      const visiblePreviousIds = previousIds.filter((providerId) =>
+        visibleProviderIds.includes(providerId)
+      );
+
+      if (loadingProviderIds.length > 0) {
+        const nextIds = [...visiblePreviousIds];
+        for (const providerId of loadingProviderIds) {
+          if (!nextIds.includes(providerId)) {
+            nextIds.push(providerId);
+          }
+        }
+
+        return areProviderIdListsEqual(nextIds, previousIds) ? previousIds : nextIds;
+      }
+
+      if (errorProviderIds.length > 0) {
+        return areProviderIdListsEqual(errorProviderIds, previousIds)
+          ? previousIds
+          : errorProviderIds;
+      }
+
+      return previousIds.length === 0 ? previousIds : [];
+    });
+  }, [errorProviderIds, loadingProviderIds, visibleProviderIds]);
+
+  const displayProviderIds = useMemo(() => {
+    if (loadingProviderIds.length > 0) {
+      const activeCycleIds = (
+        cycleProviderIds.length > 0 ? cycleProviderIds : loadingProviderIds
+      ).filter((providerId) => providerStateMap.has(providerId));
+      return Array.from(new Set([...activeCycleIds, ...errorProviderIds]));
+    }
+
+    if (errorProviderIds.length > 0) {
+      return errorProviderIds;
+    }
+
+    return [];
+  }, [cycleProviderIds, errorProviderIds, loadingProviderIds, providerStateMap]);
+
+  if (
+    isDashboardFocused ||
+    !multimodelEnabled ||
+    effectiveCliStatus?.flavor !== 'agent_teams_orchestrator' ||
+    !effectiveCliStatus.installed ||
+    displayProviderIds.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex shrink-0 flex-wrap items-center gap-2 border-b px-4 py-2"
+      style={{
+        backgroundColor: 'var(--color-surface-sidebar)',
+        borderColor: 'var(--color-border)',
+      }}
+    >
+      <span
+        className="shrink-0 text-[11px] font-medium uppercase tracking-[0.08em]"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        Provider Activity
+      </span>
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        {displayProviderIds.map((providerId) => {
+          const providerState = providerStateMap.get(providerId);
+          if (!providerState) {
+            return null;
+          }
+
+          const tone = providerState.loading
+            ? 'loading'
+            : providerState.error
+              ? 'error'
+              : 'checked';
+          const styles = getActivityToneStyles(tone);
+          const statusText =
+            tone === 'loading'
+              ? 'Checking...'
+              : tone === 'error'
+                ? formatProviderStatusText(providerState.provider)
+                : 'Checked';
+
+          return (
+            <div
+              key={providerId}
+              data-testid={`global-provider-status-${providerId}`}
+              className="flex min-w-0 items-center gap-1.5 rounded-md border px-2 py-1 text-[11px]"
+              style={{
+                borderColor: styles.borderColor,
+                backgroundColor: styles.backgroundColor,
+                color: styles.textColor,
+              }}
+            >
+              {tone === 'loading' ? (
+                <Loader2
+                  className="size-3 shrink-0 animate-spin"
+                  style={{ color: styles.statusColor }}
+                />
+              ) : tone === 'error' ? (
+                <AlertTriangle className="size-3 shrink-0" style={{ color: styles.statusColor }} />
+              ) : (
+                <CheckCircle2 className="size-3 shrink-0" style={{ color: styles.statusColor }} />
+              )}
+              <ProviderBrandLogo providerId={providerId} className="size-3.5 shrink-0" />
+              <span className="shrink-0 font-medium" style={{ color: styles.textColor }}>
+                {providerState.provider.displayName}
+              </span>
+              <span
+                className="max-w-[280px] truncate"
+                style={{ color: styles.statusColor }}
+                title={statusText}
+              >
+                {statusText}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+/**
+ * OngoingIndicator - Pulsing green dot for sessions/groups in progress.
+ * Shared across SessionItem (sidebar) and LastOutputDisplay (chat).
+ */
+
+import React from 'react';
+
+import { Loader2 } from 'lucide-react';
+
+interface OngoingIndicatorProps {
+  /** Size variant */
+  size?: 'sm' | 'md';
+  /** Whether to show text label */
+  showLabel?: boolean;
+  /** Custom label text */
+  label?: string;
+  /** Accessible title/tooltip text */
+  title?: string;
+}
+
+/**
+ * Pulsing green dot indicator for ongoing sessions.
+ * Use size="sm" for compact displays (sidebar), size="md" for larger displays (chat).
+ */
+export const OngoingIndicator = ({
+  size = 'sm',
+  showLabel = false,
+  label = 'Session in progress...',
+  title = label,
+}: Readonly<OngoingIndicatorProps>): React.JSX.Element => {
+  const dotSize = size === 'sm' ? 'h-2 w-2' : 'h-2.5 w-2.5';
+
+  return (
+    <span className="inline-flex items-center gap-2" title={title}>
+      <span className={`relative flex ${dotSize} shrink-0`}>
+        <span className="absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75" />
+        <span className={`relative inline-flex rounded-full ${dotSize} bg-green-500`} />
+      </span>
+      {showLabel && (
+        <span className="text-sm" style={{ color: 'var(--info-text)' }}>
+          {label}
+        </span>
+      )}
+    </span>
+  );
+};
+
+/**
+ * OngoingBanner - Full-width banner variant for the LastOutputDisplay.
+ * Shows animated spinner and text.
+ */
+export const OngoingBanner = (): React.JSX.Element => {
+  return (
+    <div
+      className="flex w-full items-center justify-center gap-2 rounded-lg px-4 py-3"
+      style={{
+        backgroundColor: 'var(--info-bg)',
+        border: '1px solid var(--info-border)',
+      }}
+    >
+      <Loader2 className="size-4 shrink-0 animate-spin" style={{ color: 'var(--info-text)' }} />
+      <span className="text-sm font-medium" style={{ color: 'var(--info-text)' }}>
+        Session is in progress...
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,206 @@
+import { useId } from 'react';
+
+import type { CliProviderId } from '@shared/types';
+
+type ProviderBrandLogoId = CliProviderId | 'opencode';
+
+type BrandLogoProps = Readonly<{
+  className?: string;
+}>;
+
+interface ProviderBrandLogoProps {
+  readonly providerId: ProviderBrandLogoId;
+  readonly className?: string;
+}
+
+const AnthropicBrandLogo = ({ className }: BrandLogoProps): React.JSX.Element => {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <g fill="#D97757">
+        {Array.from({ length: 10 }).map((_, index) => (
+          <rect
+            key={index}
+            x="10.75"
+            y="1.8"
+            width="2.5"
+            height="7.7"
+            rx="1.2"
+            transform={`rotate(${index * 36} 12 12)`}
+          />
+        ))}
+        <circle cx="12" cy="12" r="3.1" />
+      </g>
+    </svg>
+  );
+};
+
+const CodexBrandLogo = ({ className }: BrandLogoProps): React.JSX.Element => {
+  const gradientId = useId();
+
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <rect x="1.25" y="1.25" width="21.5" height="21.5" rx="6.5" fill="#F8FAFC" />
+      <path
+        d="M17.6 10.2a4.95 4.95 0 0 0-8.58-2.43 3.7 3.7 0 0 0-4.25 5.73A3.46 3.46 0 0 0 6.34 20h10.12a3.65 3.65 0 0 0 1.14-7.14Z"
+        fill={`url(#${gradientId})`}
+      />
+      <path
+        d="M9.05 9.55 11.4 12l-2.35 2.45"
+        fill="none"
+        stroke="#FFFFFF"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.1 14.45h3.05"
+        fill="none"
+        stroke="#FFFFFF"
+        strokeWidth="1.7"
+        strokeLinecap="round"
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="12"
+          y1="6.4"
+          x2="12"
+          y2="20"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#A5B4FC" />
+          <stop offset="0.55" stopColor="#6F8CFF" />
+          <stop offset="1" stopColor="#3B46FF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const GeminiBrandLogo = ({ className }: BrandLogoProps): React.JSX.Element => {
+  const gradientId = useId();
+
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <path
+        d="M12 2.25c.62 3.9 1.6 6.57 3.18 8.15 1.58 1.58 4.25 2.56 8.15 3.18-3.9.62-6.57 1.6-8.15 3.18-1.58 1.58-2.56 4.25-3.18 8.15-.62-3.9-1.6-6.57-3.18-8.15-1.58-1.58-4.25-2.56-8.15-3.18 3.9-.62 6.57-1.6 8.15-3.18C10.4 8.82 11.38 6.15 12 2.25Z"
+        fill={`url(#${gradientId})`}
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1="4"
+          y1="4"
+          x2="20"
+          y2="20"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#9F7AEA" />
+          <stop offset="1" stopColor="#60A5FA" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+const OpenCodeBrandLogo = ({ className }: BrandLogoProps): React.JSX.Element => {
+  const backgroundId = useId();
+  const frameId = useId();
+  const frameStrokeId = useId();
+  const coreId = useId();
+  const coreStrokeId = useId();
+
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <defs>
+        <linearGradient
+          id={backgroundId}
+          x1="4"
+          y1="3"
+          x2="20"
+          y2="21"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#303030" />
+          <stop offset="1" stopColor="#161616" />
+        </linearGradient>
+        <linearGradient
+          id={frameId}
+          x1="7"
+          y1="4.5"
+          x2="17"
+          y2="19.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#f4f4f4" />
+          <stop offset="0.35" stopColor="#d9d9d9" />
+          <stop offset="0.68" stopColor="#a8a8a8" />
+          <stop offset="1" stopColor="#ececec" />
+        </linearGradient>
+        <linearGradient
+          id={frameStrokeId}
+          x1="7"
+          y1="4.5"
+          x2="17"
+          y2="19.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#ffffff" stopOpacity="0.9" />
+          <stop offset="1" stopColor="#5a5a5a" stopOpacity="0.9" />
+        </linearGradient>
+        <linearGradient id={coreId} x1="12" y1="7" x2="12" y2="17" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#121212" />
+          <stop offset="0.42" stopColor="#3e3b33" />
+          <stop offset="1" stopColor="#16140f" />
+        </linearGradient>
+        <linearGradient
+          id={coreStrokeId}
+          x1="9"
+          y1="7"
+          x2="15"
+          y2="17"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#f2f2f2" stopOpacity="0.95" />
+          <stop offset="1" stopColor="#6e6e6e" stopOpacity="0.85" />
+        </linearGradient>
+      </defs>
+      <rect x="1.5" y="1.5" width="21" height="21" rx="5.2" fill={`url(#${backgroundId})`} />
+      <path
+        d="M7 4.25h10c.3 0 .55.25.55.55v14.4c0 .3-.25.55-.55.55H7c-.3 0-.55-.25-.55-.55V4.8c0-.3.25-.55.55-.55Z"
+        fill={`url(#${frameId})`}
+        stroke={`url(#${frameStrokeId})`}
+        strokeWidth="0.55"
+      />
+      <path
+        d="M8.95 7.25h6.1c.22 0 .4.18.4.4v8.7c0 .22-.18.4-.4.4h-6.1a.4.4 0 0 1-.4-.4v-8.7c0-.22.18-.4.4-.4Z"
+        fill={`url(#${coreId})`}
+        stroke={`url(#${coreStrokeId})`}
+        strokeWidth="0.45"
+      />
+      <path
+        d="M9.25 7.6h5.5"
+        stroke="#ffffff"
+        strokeOpacity="0.18"
+        strokeWidth="0.45"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export const ProviderBrandLogo = ({
+  providerId,
+  className,
+}: ProviderBrandLogoProps): React.JSX.Element => {
+  switch (providerId) {
+    case 'anthropic':
+      return <AnthropicBrandLogo className={className} />;
+    case 'codex':
+      return <CodexBrandLogo className={className} />;
+    case 'gemini':
+      return <GeminiBrandLogo className={className} />;
+    case 'opencode':
+      return <OpenCodeBrandLogo className={className} />;
+  }
+};