@yancyyu/openhermit 1.6.41 → 1.6.43

package/src/renderer/components/settings/components/SettingsSectionHeader.tsx

@@ -14,15 +14,19 @@ export const SettingsSectionHeader = ({
 }: SettingsSectionHeaderProps): React.JSX.Element => {
   return (
     <h3
-      className="mb-3 mt-7 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] first:mt-0"
+      className="mb-3 mt-8 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] first:mt-0"
       style={{ color: 'var(--color-text-muted)' }}
     >
-      {icon}
+      {icon && (
+        <span
+          className="flex size-4 items-center justify-center rounded opacity-70"
+          style={{ backgroundColor: 'var(--color-border-subtle)' }}
+        >
+          {icon}
+        </span>
+      )}
       {title}
-      <div
-        className="ml-1 h-px flex-1"
-        style={{ backgroundColor: 'var(--color-border-subtle)' }}
-      />
+      <div className="ml-1 h-px flex-1" style={{ backgroundColor: 'var(--color-border-subtle)' }} />
     </h3>
   );
 };

package/src/renderer/components/settings/components/SettingsSelect.tsx

@@ -57,15 +57,15 @@ export const SettingsSelect = <T extends string | number>({
         type="button"
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
-        className={`flex h-8 items-center justify-between gap-2 rounded-md border bg-transparent px-2 text-sm transition-all duration-150 focus:outline-none focus:ring-1 focus:ring-[var(--color-border-emphasis)] ${fullWidth ? 'w-full' : 'min-w-[140px]'} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${isOpen ? 'ring-1 ring-[var(--color-border-emphasis)]' : ''} `}
+        className={`flex h-8 items-center justify-between gap-2 rounded-lg border bg-transparent px-2.5 text-sm transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-border)] ${fullWidth ? 'w-full' : 'min-w-[140px]'} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:border-[var(--color-border)]'} ${isOpen ? 'border-[var(--color-accent-border)] ring-1 ring-[var(--color-accent-border)]' : ''} `}
         style={{
           color: 'var(--color-text-secondary)',
-          borderColor: isOpen ? 'var(--color-border)' : 'var(--color-border-subtle)',
+          borderColor: isOpen ? undefined : 'var(--color-border-subtle)',
         }}
       >
         <span className="truncate">{currentLabel}</span>
         <ChevronDown
-          className={`size-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          className={`size-3.5 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
           style={{ color: 'var(--color-text-muted)' }}
         />
       </button>
@@ -73,26 +73,29 @@ export const SettingsSelect = <T extends string | number>({
       {/* Dropdown Menu */}
       {isOpen && (
         <div
-          className={`absolute z-50 min-w-max overflow-hidden rounded-md border py-1 shadow-xl shadow-black/20 ${fullWidth ? 'inset-x-0' : 'right-0'} ${dropUp ? 'bottom-full mb-1' : 'top-full mt-1'}`}
+          className={`absolute z-50 min-w-max overflow-hidden rounded-lg border py-1 shadow-xl shadow-black/30 duration-150 animate-in fade-in zoom-in-95 ${fullWidth ? 'inset-x-0' : 'right-0'} ${dropUp ? 'bottom-full mb-1' : 'top-full mt-1.5'}`}
           style={{
             backgroundColor: 'var(--color-surface-raised)',
             borderColor: 'var(--color-border-subtle)',
+            boxShadow: '0 10px 30px rgba(0,0,0,0.3), 0 0 18px var(--color-accent-glow)',
           }}
         >
+          <div className="pointer-events-none absolute inset-x-4 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-accent-border)] to-transparent" />
           {options.map((option) => (
             <button
               key={String(option.value)}
               type="button"
               onClick={() => handleSelect(option.value)}
-              className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors duration-100 ${
+              className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors duration-150 ${
                 value === option.value
-                  ? 'bg-indigo-500/10 text-indigo-300'
-                  : 'hover:bg-white/5'
+                  ? 'bg-[var(--color-accent-muted)] text-[var(--color-accent)]'
+                  : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-accent-soft)]'
               } `}
-              style={value !== option.value ? { color: 'var(--color-text-secondary)' } : undefined}
             >
               <span className="whitespace-nowrap">{option.label}</span>
-              {value === option.value && <Check className="size-4 shrink-0 text-indigo-400" />}
+              {value === option.value && (
+                <Check className="size-3.5 shrink-0 text-[var(--color-accent)]" />
+              )}
             </button>
           ))}
         </div>

package/src/renderer/components/settings/components/SettingsToggle.tsx

@@ -27,17 +27,18 @@ export const SettingsToggle = ({
       aria-checked={enabled}
       disabled={disabled}
       onClick={handleClick}
-      className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[var(--color-text)]/20 focus:ring-offset-2 focus:ring-offset-[var(--color-surface)]"
+      className="relative inline-flex h-[22px] w-[40px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-border)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)] active:scale-95"
       style={{
-        backgroundColor: enabled ? '#6366f1' : '#3f3f46',
-        opacity: disabled ? 0.5 : 1,
+        backgroundColor: enabled ? 'var(--color-accent)' : '#3f3f46',
+        opacity: disabled ? 0.4 : 1,
         cursor: disabled ? 'not-allowed' : 'pointer',
+        boxShadow: enabled ? '0 0 10px var(--color-accent-glow)' : 'none',
       }}
     >
       <span
-        className="pointer-events-none inline-block size-4 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+        className="pointer-events-none inline-block size-[18px] rounded-full bg-white shadow-sm ring-0 transition-all duration-200 ease-out"
         style={{
-          transform: enabled ? 'translateX(1rem)' : 'translateX(0)',
+          transform: enabled ? 'translateX(18px)' : 'translateX(0)',
         }}
       />
     </button>

package/src/renderer/components/settings/components/index.ts

@@ -3,6 +3,7 @@
  */
 
 export { SettingRow } from './SettingRow';
+export { SettingsSectionCard } from './SettingsSectionCard';
 export { SettingsSectionHeader } from './SettingsSectionHeader';
 export { SettingsSelect } from './SettingsSelect';
 export { SettingsToggle } from './SettingsToggle';

package/src/renderer/components/settings/sections/AdvancedSection.tsx

@@ -12,9 +12,9 @@ import {
 import { Textarea } from '@renderer/components/ui/textarea';
 import { emitOpenHermitEvent, OPEN_HERMIT_EVENTS } from '@renderer/utils/openHermitEvents';
 import appIcon from '@renderer/favicon.png';
-import { Check, FileEdit, Loader2, RotateCcw, X } from 'lucide-react';
+import { Check, FileEdit, Info, Loader2, RotateCcw, ServerCog, X } from 'lucide-react';
 
-import { SettingsSectionHeader } from '../components';
+import { SettingsSectionCard } from '../components';
 
 interface CcConnectConfigRawDialogProps {
   open: boolean;
@@ -105,8 +105,7 @@ const CcConnectConfigRawDialog = ({
             </div>
           )}
           <p className="text-xs text-[var(--color-text-muted)]">
-            保存后将直接覆盖 Hermit 管理的配置文件。若修改了端口或
-            token，请点击”重启服务”生效。
+            保存后将直接覆盖 Hermit 管理的配置文件。若修改了端口或 token，请点击”重启服务”生效。
           </p>
         </div>
         <DialogFooter>
@@ -133,13 +132,20 @@ interface AdvancedSectionProps {
 }
 
 export const AdvancedSection = ({}: AdvancedSectionProps): React.JSX.Element => {
-  const [version, setVersion] = useState<string>('');
+  const [version, setVersion] = useState<string>(__APP_VERSION__);
   const [ccConfigOpen, setCcConfigOpen] = useState(false);
   const [restarting, setRestarting] = useState(false);
   const [restartMsg, setRestartMsg] = useState<string | null>(null);
 
   useEffect(() => {
-    api.getAppVersion().then(setVersion).catch(console.error);
+    api
+      .getAppVersion()
+      .then((nextVersion) => {
+        if (typeof nextVersion === 'string' && nextVersion.trim()) {
+          setVersion(nextVersion);
+        }
+      })
+      .catch(console.error);
   }, []);
 
   const handleRestart = useCallback(async () => {
@@ -158,61 +164,74 @@ export const AdvancedSection = ({}: AdvancedSectionProps): React.JSX.Element =>
   }, []);
 
   return (
-    <div>
-      <SettingsSectionHeader title="服务配置" />
-      <div className="flex flex-wrap gap-2 py-2">
-        <button
-          onClick={() => setCcConfigOpen(true)}
-          className="flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-all duration-150 hover:bg-indigo-500/5"
-          style={{
-            borderColor: 'rgba(99, 102, 241, 0.3)',
-            color: '#818cf8',
-          }}
-        >
-          <FileEdit className="size-4" />
-          编辑 配置
-        </button>
-        <button
-          onClick={() => void handleRestart()}
-          disabled={restarting}
-          className="flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-all duration-150 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50"
-          style={{
-            borderColor: 'var(--color-border)',
-            color: 'var(--color-text-muted)',
-          }}
-        >
-          {restarting ? (
-            <Loader2 className="size-4 animate-spin" />
-          ) : (
-            <RotateCcw className="size-4" />
-          )}
-          重启服务
-        </button>
-      </div>
-      {restartMsg && (
-        <p
-          className="mb-2 text-xs"
-          style={{ color: restartMsg.includes('失败') ? '#f87171' : '#4ade80' }}
-        >
-          {restartMsg}
-        </p>
-      )}
-
-      <SettingsSectionHeader title="关于" />
-      <div className="flex items-start gap-4 py-3">
-        <img src={appIcon} alt="应用图标" className="size-10 rounded-lg" />
-        <div>
-          <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
-            Hermit
-          </p>
-          <p className="mt-0.5 text-xs" style={{ color: 'var(--color-text-muted)' }}>
-            Version {version || '...'}
-          </p>
-          <p className="mt-2 text-xs leading-relaxed" style={{ color: 'var(--color-text-muted)' }}>
-            本地优先的 AI Agent 团队工作台。支持多模型供应商接入、自主任务管理和跨团队协作。
+    <div className="space-y-5">
+      <SettingsSectionCard
+        title="服务配置"
+        description="编辑 Hermit 运行配置，或在配置变更后重启本地服务。"
+        icon={<ServerCog className="size-3.5" />}
+      >
+        <div className="flex flex-wrap gap-2 px-3 py-3">
+          <button
+            onClick={() => setCcConfigOpen(true)}
+            className="flex h-8 items-center gap-1.5 rounded-lg border px-3 text-xs font-medium transition-all duration-150 hover:bg-[var(--color-accent-soft)]"
+            style={{
+              borderColor: 'var(--color-accent-border)',
+              color: 'var(--color-accent)',
+            }}
+          >
+            <FileEdit className="size-3.5" />
+            编辑配置
+          </button>
+          <button
+            onClick={() => void handleRestart()}
+            disabled={restarting}
+            className="flex h-8 items-center gap-1.5 rounded-lg border px-3 text-xs font-medium transition-all duration-150 hover:bg-[var(--color-accent-soft)] disabled:cursor-not-allowed disabled:opacity-50"
+            style={{
+              borderColor: 'var(--color-border-subtle)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {restarting ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <RotateCcw className="size-3.5" />
+            )}
+            重启服务
+          </button>
+        </div>
+        {restartMsg && (
+          <p
+            className="px-3 pb-3 text-xs"
+            style={{ color: restartMsg.includes('失败') ? '#f87171' : 'var(--color-accent)' }}
+          >
+            {restartMsg}
           </p>
+        )}
+      </SettingsSectionCard>
+
+      <SettingsSectionCard
+        title="关于"
+        description="当前应用版本和产品信息。"
+        icon={<Info className="size-3.5" />}
+      >
+        <div className="flex items-start gap-4 px-3 py-3">
+          <img src={appIcon} alt="应用图标" className="size-10 rounded-lg" />
+          <div>
+            <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+              Hermit
+            </p>
+            <p className="mt-0.5 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              Version {version || '...'}
+            </p>
+            <p
+              className="mt-2 text-xs leading-relaxed"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              本地优先的 AI Agent 团队工作台。支持多模型供应商接入、自主任务管理和跨团队协作。
+            </p>
+          </div>
         </div>
-      </div>
+      </SettingsSectionCard>
 
       <CcConnectConfigRawDialog open={ccConfigOpen} onClose={() => setCcConfigOpen(false)} />
     </div>

package/src/renderer/components/settings/sections/CliStatusSection.tsx

@@ -7,15 +7,16 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { providersApi } from '@renderer/api/providers';
 import { confirm } from '@renderer/components/common/ConfirmDialog';
-import { ProviderBrandLogo } from '@renderer/components/common/ProviderBrandLogo';
 import {
   getProviderConnectLabel,
   getProviderDisconnectAction,
   shouldShowProviderConnectAction,
 } from '@renderer/components/runtime/providerConnectionUi';
 import { ProviderRuntimeSettingsDialog } from '@renderer/components/runtime/ProviderRuntimeSettingsDialog';
-import { ALL_AGENT_TYPES, AGENT_TYPE_LABELS } from '@renderer/components/team/HarnessCards';
+import { AGENT_TYPE_LABELS, ALL_AGENT_TYPES } from '@renderer/components/team/HarnessCards';
+import { HarnessIcon } from '@renderer/components/team/HarnessSelect';
 import {
   Dialog,
   DialogContent,
@@ -25,7 +26,6 @@ import {
 } from '@renderer/components/ui/dialog';
 import { Input } from '@renderer/components/ui/input';
 import { useCliInstaller } from '@renderer/hooks/useCliInstaller';
-import { providersApi } from '@renderer/api/providers';
 import { useStore } from '@renderer/store';
 import { createLoadingMultimodelCliStatus } from '@renderer/store/slices/cliInstallerSlice';
 import { getMainScreenCliProviders } from '@renderer/utils/claudeCodeOnlyProviders';
@@ -41,7 +41,6 @@ import {
   Loader2,
   LogIn,
   LogOut,
-  Puzzle,
   RefreshCw,
   SlidersHorizontal,
   Terminal,
@@ -153,7 +152,6 @@ export const CliStatusSection = ({
   const selectedProjectId = useStore((s) => s.selectedProjectId);
   const projects = useStore((s) => s.projects);
   const repositoryGroups = useStore((s) => s.repositoryGroups);
-  const openExtensionsTab = useStore((s) => s.openExtensionsTab);
   const updateConfig = useStore((s) => s.updateConfig);
   const {
     cliStatus,
@@ -196,7 +194,6 @@ export const CliStatusSection = ({
     () => getMainScreenCliProviders(effectiveCliStatus),
     [effectiveCliStatus]
   );
-  const canOpenExtensions = effectiveCliStatus?.installed === true;
   const showInstalledControls =
     effectiveCliStatus !== null && (installerState === 'idle' || installerState === 'completed');
 
@@ -400,21 +397,6 @@ export const CliStatusSection = ({
                   {runtimeLabel && (
                     <span style={{ color: 'var(--color-text)' }}>{runtimeLabel}</span>
                   )}
-                  {/* Extensions button — right-aligned */}
-                  {canOpenExtensions && (
-                    <button
-                      type="button"
-                      onClick={openExtensionsTab}
-                      className="ml-auto flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-white/5"
-                      style={{
-                        borderColor: 'var(--color-border)',
-                        color: 'var(--color-text-secondary)',
-                      }}
-                    >
-                      <Puzzle className="size-3.5" />
-                      扩展
-                    </button>
-                  )}
                 </div>
                 {effectiveCliStatus.showBinaryPath && effectiveCliStatus.binaryPath && (
                   <p
@@ -436,24 +418,17 @@ export const CliStatusSection = ({
                         key={agentType}
                         className="flex items-center gap-3 rounded-lg border px-3.5 py-2.5 transition-colors"
                         style={{
-                          borderColor: hasProviders ? 'var(--color-border-emphasis)' : 'var(--color-border-subtle)',
+                          borderColor: hasProviders
+                            ? 'var(--color-border-emphasis)'
+                            : 'var(--color-border-subtle)',
                           backgroundColor: 'var(--color-surface-raised)',
                           borderLeftWidth: hasProviders ? '2px' : '1px',
-                          borderLeftColor: hasProviders ? 'var(--color-accent)' : 'var(--color-border-subtle)',
-                          opacity: hasProviders ? 1 : 0.5,
+                          borderLeftColor: hasProviders
+                            ? 'var(--color-accent)'
+                            : 'var(--color-border-subtle)',
                         }}
                       >
-                        {provider ? (
-                          <ProviderBrandLogo
-                            providerId={provider.providerId}
-                            className="size-4 shrink-0"
-                          />
-                        ) : (
-                          <Terminal
-                            className="size-4 shrink-0"
-                            style={{ color: 'var(--color-text-muted)' }}
-                          />
-                        )}
+                        <HarnessIcon type={agentType} className="size-4 shrink-0" />
                         <div className="min-w-0 flex-1">
                           <div className="flex items-center gap-1.5">
                             <span
@@ -465,7 +440,10 @@ export const CliStatusSection = ({
                             {provider?.providerId === 'codex' ? <ProviderBetaBadge /> : null}
                           </div>
                           {hasProviders && (
-                            <span className="text-[10px]" style={{ color: 'var(--color-text-muted)' }}>
+                            <span
+                              className="text-[10px]"
+                              style={{ color: 'var(--color-text-muted)' }}
+                            >
                               {harnessProviders.length} provider
                             </span>
                           )}
@@ -811,7 +789,7 @@ const GenericHarnessProviderDialog = ({
 
           {loading && providers.length === 0 ? (
             <div
-              className="flex items-center gap-2 rounded-md border px-3 py-3 text-xs"
+              className="flex items-center gap-2 rounded-md border p-3 text-xs"
               style={{
                 borderColor: 'var(--color-border-subtle)',
                 color: 'var(--color-text-muted)',
@@ -845,10 +823,14 @@ const GenericHarnessProviderDialog = ({
                     key={provider.name}
                     className="rounded-lg border px-3.5 py-2.5"
                     style={{
-                      borderColor: provider.api_key ? 'var(--color-border)' : 'var(--color-border-subtle)',
+                      borderColor: provider.api_key
+                        ? 'var(--color-border)'
+                        : 'var(--color-border-subtle)',
                       backgroundColor: 'var(--color-surface-raised)',
                       borderLeftWidth: provider.api_key ? '2px' : '1px',
-                      borderLeftColor: provider.api_key ? 'var(--color-accent)' : 'var(--color-border-subtle)',
+                      borderLeftColor: provider.api_key
+                        ? 'var(--color-accent)'
+                        : 'var(--color-border-subtle)',
                     }}
                   >
                     <div className="flex items-center justify-between gap-2">
@@ -859,13 +841,19 @@ const GenericHarnessProviderDialog = ({
                             backgroundColor: provider.api_key ? 'var(--color-accent)' : '#fbbf24',
                           }}
                         />
-                        <span className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                        <span
+                          className="text-sm font-medium"
+                          style={{ color: 'var(--color-text)' }}
+                        >
                           {provider.name}
                         </span>
                       </div>
-                      <span className="text-[10px]" style={{
-                        color: provider.api_key ? 'var(--color-accent)' : '#fbbf24',
-                      }}>
+                      <span
+                        className="text-[10px]"
+                        style={{
+                          color: provider.api_key ? 'var(--color-accent)' : '#fbbf24',
+                        }}
+                      >
                         {provider.api_key ? 'Key 已配置' : '未配置'}
                       </span>
                     </div>
@@ -883,7 +871,7 @@ const GenericHarnessProviderDialog = ({
             </div>
           ) : (
             <div
-              className="rounded-md border px-3 py-3 text-xs"
+              className="rounded-md border p-3 text-xs"
               style={{
                 borderColor: 'var(--color-border-subtle)',
                 color: 'var(--color-text-muted)',

package/src/renderer/components/settings/sections/ConfigEditorDialog.tsx

@@ -346,7 +346,7 @@ const SaveStatusBadge = ({
     return (
       <span
         className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px]"
-        style={{ backgroundColor: 'rgba(129, 140, 248, 0.15)', color: '#818cf8' }}
+        style={{ backgroundColor: 'var(--color-accent-muted)', color: 'var(--color-accent)' }}
       >
         <Loader2 className="size-3 animate-spin" />
         保存中...