@yancyyu/openhermit 1.6.42 → 1.6.43

package/src/renderer/components/layout/TabBarActions.tsx

@@ -6,10 +6,9 @@
 
 import { useMemo, useState } from 'react';
 
-import { api } from '@renderer/api';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useStore } from '@renderer/store';
-import { ListTodo, PanelRight, Puzzle, Users } from 'lucide-react';
+import { ListTodo, MessageCircle, PanelRight, Puzzle, Users } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { MoreMenu } from './MoreMenu';
@@ -17,6 +16,7 @@ import { MoreMenu } from './MoreMenu';
 export const TabBarActions = (): React.JSX.Element => {
   const {
     unreadCount,
+    openChatTab,
     openExtensionsTab,
     openTasksTab,
     openTeamsTab,
@@ -28,6 +28,7 @@ export const TabBarActions = (): React.JSX.Element => {
   } = useStore(
     useShallow((s) => ({
       unreadCount: s.unreadCount,
+      openChatTab: s.openChatTab,
       openExtensionsTab: s.openExtensionsTab,
       openTasksTab: s.openTasksTab,
       openTeamsTab: s.openTeamsTab,
@@ -43,7 +44,7 @@ export const TabBarActions = (): React.JSX.Element => {
   const [teamsHover, setTeamsHover] = useState(false);
   const [extensionsHover, setExtensionsHover] = useState(false);
   const [tasksHover, setTasksHover] = useState(false);
-  const [githubHover, setGithubHover] = useState(false);
+  const [chatHover, setChatHover] = useState(false);
   const [expandHover, setExpandHover] = useState(false);
 
   // Derive active tab and session detail for MoreMenu
@@ -118,28 +119,24 @@ export const TabBarActions = (): React.JSX.Element => {
         <TooltipContent side="bottom">任务</TooltipContent>
       </Tooltip>
 
-      {/* GitHub link */}
+      {/* Feishu group QR */}
       <Tooltip>
         <TooltipTrigger asChild>
           <button
-            onClick={async () => {
-              await api.openExternal('https://github.com/yancyuu/Hermit');
-            }}
-            onMouseEnter={() => setGithubHover(true)}
-            onMouseLeave={() => setGithubHover(false)}
+            onClick={openChatTab}
+            onMouseEnter={() => setChatHover(true)}
+            onMouseLeave={() => setChatHover(false)}
             className="rounded-md p-2 transition-colors"
             style={{
-              color: githubHover ? 'var(--color-text)' : 'var(--color-text-muted)',
-              backgroundColor: githubHover ? 'var(--color-surface-raised)' : 'transparent',
+              color: chatHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+              backgroundColor: chatHover ? 'var(--color-surface-raised)' : 'transparent',
             }}
-            aria-label="GitHub"
+            aria-label="加入飞书群"
           >
-            <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z" />
-            </svg>
+            <MessageCircle className="size-4" />
           </button>
         </TooltipTrigger>
-        <TooltipContent side="bottom">GitHub</TooltipContent>
+        <TooltipContent side="bottom">加入飞书群</TooltipContent>
       </Tooltip>
 
       {/* More menu (Notifications, Settings, Search, Export, Analyze) */}

package/src/renderer/components/runtime/ProviderRuntimeSettingsDialog.tsx

@@ -16,12 +16,11 @@ import {
 import { Input } from '@renderer/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs';
 import { emitOpenHermitEvent, OPEN_HERMIT_EVENTS } from '@renderer/utils/openHermitEvents';
-import { CheckCircle2, Download, Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { Loader2, Pencil, Plus, RefreshCw, Trash2 } from 'lucide-react';
 
 import type { CliProviderId, CliProviderStatus } from '@shared/types';
 import type {
   AgentType,
-  CCSwitchProvider,
   GlobalProvider,
   ProviderModelEntry,
   ProviderPreset,
@@ -214,23 +213,6 @@ function formFromPreset(preset: ProviderPreset, fallbackAgentType: AgentType): P
   };
 }
 
-function formFromCCSwitch(
-  provider: CCSwitchProvider,
-  fallbackAgentType: AgentType
-): ProviderFormState {
-  const agentType = normalizeAgentType(provider.app_type) ?? fallbackAgentType;
-  return {
-    ...emptyForm(agentType),
-    name: provider.name,
-    apiKey: provider.api_key ?? '',
-    baseUrl: provider.base_url ?? '',
-    model: provider.model ?? '',
-    agentTypes: [agentType],
-    agentModels: provider.model ? { [agentType]: provider.model } : {},
-    endpoints: provider.base_url ? { [agentType]: provider.base_url } : {},
-  };
-}
-
 function formToProvider(form: ProviderFormState, originalName?: string): GlobalProvider {
   const agentTypes = form.agentTypes.length > 0 ? form.agentTypes : undefined;
   const endpoints = Object.fromEntries(
@@ -271,11 +253,8 @@ export const ProviderRuntimeSettingsDialog = ({
   const harnessLabel = CLI_PROVIDER_LABELS[initialProviderId] ?? initialProviderId;
   const [providers, setProviders] = useState<GlobalProvider[]>([]);
   const [presets, setPresets] = useState<ProviderPreset[]>([]);
-  const [ccSwitchProviders, setCcSwitchProviders] = useState<CCSwitchProvider[]>([]);
-  const [ccSwitchAvailable, setCcSwitchAvailable] = useState<boolean | null>(null);
   const [loading, setLoading] = useState(false);
   const [presetsLoading, setPresetsLoading] = useState(false);
-  const [ccSwitchLoading, setCcSwitchLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
@@ -313,20 +292,6 @@ export const ProviderRuntimeSettingsDialog = ({
     }
   }, []);
 
-  const refreshCCSwitch = useCallback(async (): Promise<void> => {
-    setCcSwitchLoading(true);
-    try {
-      const result = await providersApi.listCCSwitch();
-      setCcSwitchProviders(result.providers ?? []);
-      setCcSwitchAvailable(result.available);
-    } catch {
-      setCcSwitchProviders([]);
-      setCcSwitchAvailable(false);
-    } finally {
-      setCcSwitchLoading(false);
-    }
-  }, []);
-
   useEffect(() => {
     if (!open) return;
     setForm(emptyForm(agentType));
@@ -334,8 +299,7 @@ export const ProviderRuntimeSettingsDialog = ({
     setFormError(null);
     void refreshProviders();
     void refreshPresets();
-    void refreshCCSwitch();
-  }, [agentType, open, refreshCCSwitch, refreshPresets, refreshProviders]);
+  }, [agentType, open, refreshPresets, refreshProviders]);
 
   const updateForm = (patch: Partial<ProviderFormState>): void => {
     setForm((prev) => ({ ...prev, ...patch }));
@@ -410,19 +374,6 @@ export const ProviderRuntimeSettingsDialog = ({
     }
   };
 
-  const handleImportCCSwitch = async (providerName: string): Promise<void> => {
-    setSaving(true);
-    try {
-      await providersApi.importCCSwitch([providerName]);
-      await refreshProviders();
-      emitOpenHermitEvent(OPEN_HERMIT_EVENTS.providersChanged);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : '导入 cc-switch Provider 失败');
-    } finally {
-      setSaving(false);
-    }
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[88vh] w-[min(96vw,1120px)] max-w-[min(96vw,1120px)] flex-col overflow-hidden">
@@ -439,7 +390,6 @@ export const ProviderRuntimeSettingsDialog = ({
               <TabsList className="mb-3">
                 <TabsTrigger value="providers">Provider 库</TabsTrigger>
                 <TabsTrigger value="presets">预设</TabsTrigger>
-                <TabsTrigger value="cc-switch">cc-switch</TabsTrigger>
               </TabsList>
 
               <TabsContent value="providers" className="mt-0 space-y-3">
@@ -479,7 +429,7 @@ export const ProviderRuntimeSettingsDialog = ({
                   </div>
                 ) : providers.length === 0 ? (
                   <div className="rounded-xl border border-dashed border-[var(--color-border)] p-6 text-center text-sm text-[var(--color-text-muted)]">
-                    还没有全局 Provider。可以从右侧新建，或从预设/cc-switch 导入。
+                    还没有全局 Provider。可以从右侧新建，或从预设导入。
                   </div>
                 ) : (
                   <div className="space-y-2">
@@ -565,7 +515,7 @@ export const ProviderRuntimeSettingsDialog = ({
                   <div>
                     <div className="text-sm font-medium text-[var(--color-text)]">从预设开始</div>
                     <div className="text-xs text-[var(--color-text-muted)]">
-                      参考 cc-switch 的交互：先选网关预设，再补 Key、模型和适用 Harness。
+                      先选网关预设，再补 Key、模型和适用 Harness。
                     </div>
                   </div>
                   <Button
@@ -625,87 +575,6 @@ export const ProviderRuntimeSettingsDialog = ({
                   ))}
                 </div>
               </TabsContent>
-
-              <TabsContent value="cc-switch" className="mt-0 space-y-3">
-                <div className="flex items-center justify-between gap-3">
-                  <div>
-                    <div className="text-sm font-medium text-[var(--color-text)]">
-                      从 cc-switch 导入
-                    </div>
-                    <div className="text-xs text-[var(--color-text-muted)]">
-                      可导入已有 cc-switch Provider，再在右侧按 Hermit 字段调整。
-                    </div>
-                  </div>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    disabled={ccSwitchLoading}
-                    onClick={() => void refreshCCSwitch()}
-                  >
-                    <RefreshCw
-                      className={ccSwitchLoading ? 'mr-1 size-3.5 animate-spin' : 'mr-1 size-3.5'}
-                    />
-                    刷新
-                  </Button>
-                </div>
-                {ccSwitchAvailable === false ? (
-                  <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-300">
-                    没有检测到可导入的 Provider，或服务未返回导入数据。
-                  </div>
-                ) : null}
-                <div className="space-y-2">
-                  {ccSwitchProviders.map((provider) => (
-                    <div
-                      key={`${provider.app_type}:${provider.name}`}
-                      className="rounded-xl border border-[var(--color-border-subtle)] bg-white/[0.025] px-3 py-3"
-                    >
-                      <div className="flex flex-wrap items-start justify-between gap-2">
-                        <div className="min-w-0">
-                          <div className="flex items-center gap-2 text-sm font-medium text-[var(--color-text)]">
-                            {provider.is_current ? (
-                              <CheckCircle2 className="size-3.5 text-emerald-400" />
-                            ) : null}
-                            {provider.name}
-                          </div>
-                          <div className="mt-1 text-[11px] text-[var(--color-text-muted)]">
-                            {provider.app_type} · {provider.base_url || '默认端点'} ·{' '}
-                            {provider.model || '未指定模型'}
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-1">
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-7 px-2 text-xs"
-                            onClick={() => {
-                              setEditingName(null);
-                              setForm(formFromCCSwitch(provider, agentType));
-                              setFormError(null);
-                            }}
-                          >
-                            填入表单
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="h-7 px-2 text-xs"
-                            disabled={saving}
-                            onClick={() => void handleImportCCSwitch(provider.name)}
-                          >
-                            <Download className="mr-1 size-3" />
-                            直接导入
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                  {ccSwitchProviders.length === 0 && !ccSwitchLoading ? (
-                    <div className="rounded-xl border border-dashed border-[var(--color-border)] p-5 text-center text-xs text-[var(--color-text-muted)]">
-                      暂无 cc-switch Provider 可导入。
-                    </div>
-                  ) : null}
-                </div>
-              </TabsContent>
             </Tabs>
           </div>
 

package/src/renderer/components/schedules/SchedulesView.tsx

@@ -14,13 +14,7 @@ import { CcCronScheduleDialog } from '../team/schedule/CcCronScheduleDialog';
 import type { Schedule } from '@shared/types';
 
 export const SchedulesView = (): React.JSX.Element => {
-  const {
-    schedules,
-    schedulesLoading,
-    fetchSchedules,
-    openTeamTab,
-    teamByName,
-  } = useStore(
+  const { schedules, schedulesLoading, fetchSchedules, openTeamTab, teamByName } = useStore(
     useShallow((s) => ({
       schedules: s.schedules,
       schedulesLoading: s.schedulesLoading,
@@ -93,14 +87,20 @@ export const SchedulesView = (): React.JSX.Element => {
   return (
     <div className="flex h-full flex-col bg-[var(--color-surface)]">
       {/* Minimal header */}
-      <div className="flex shrink-0 items-center justify-between px-4 pt-4 pb-2">
+      <div className="flex shrink-0 items-center justify-between px-4 pb-2 pt-4">
         <div className="flex items-center gap-2">
-          <h1 className="flex items-center gap-2 text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
+          <h1
+            className="flex items-center gap-2 text-xs font-medium uppercase tracking-wider"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
             <span className="text-cyan-400/40">#</span>
             定时任务
           </h1>
           {schedules.length > 0 && (
-            <span className="rounded-full px-2 py-0.5 text-[10px]" style={{ color: 'var(--color-text-muted)', background: 'rgba(148,163,184,0.06)' }}>
+            <span
+              className="rounded-full px-2 py-0.5 text-[10px]"
+              style={{ color: 'var(--color-text-muted)', background: 'rgba(148,163,184,0.06)' }}
+            >
               {schedules.filter((s) => s.status === 'active').length} 运行中
             </span>
           )}
@@ -112,18 +112,26 @@ export const SchedulesView = (): React.JSX.Element => {
       </div>
 
       {/* Content — fills remaining space */}
-      <div className="flex-1 min-h-0 overflow-auto px-2 pb-4">
+      <div className="min-h-0 flex-1 overflow-auto px-2 pb-4">
         {schedulesLoading && schedules.length === 0 ? (
           <div className="flex items-center justify-center py-24 text-sm text-[var(--color-text-muted)]">
             正在加载计划...
           </div>
         ) : schedules.length === 0 ? (
           <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-[var(--color-border)] py-20 text-center">
-            <Calendar className="size-6" style={{ color: 'var(--color-text-muted)', opacity: 0.4 }} />
+            <Calendar
+              className="size-6"
+              style={{ color: 'var(--color-text-muted)', opacity: 0.4 }}
+            />
             <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
-              暂无定时任务。在团队中创建计划即可自动运行。
+              暂无定时任务。在 Loop workspace 中创建计划即可自动运行。
             </p>
-            <Button size="sm" variant="ghost" className="mt-1 gap-1.5 text-xs" onClick={handleCreate}>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="mt-1 gap-1.5 text-xs"
+              onClick={handleCreate}
+            >
               <Plus className="size-3.5" />
               创建计划
             </Button>

package/src/renderer/components/schedules/calendar/CalendarEventBlock.tsx

@@ -37,12 +37,15 @@ export const CalendarEventBlock = React.memo(function CalendarEventBlock({
         type="button"
         className={cn(
           'flex w-full items-center gap-1 overflow-hidden rounded px-1 py-[1px] text-left transition-opacity hover:opacity-80',
-          className,
+          className
         )}
         style={{ backgroundColor: hexToRgba(occurrence.color, 0.12), ...style }}
         onClick={onClick}
       >
-        <span className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: occurrence.color }} />
+        <span
+          className="size-1.5 shrink-0 rounded-full"
+          style={{ backgroundColor: occurrence.color }}
+        />
         <span className="truncate text-[10px] leading-tight" style={{ color: occurrence.color }}>
           {label}
         </span>
@@ -57,7 +60,7 @@ export const CalendarEventBlock = React.memo(function CalendarEventBlock({
       className={cn(
         'group relative flex w-full flex-col overflow-hidden rounded-[3px] px-1.5 py-0.5 text-left transition-opacity hover:opacity-90 focus:outline-none',
         occurrence.status === 'paused' && 'opacity-50',
-        className,
+        className
       )}
       style={{
         backgroundColor: occurrence.color,
@@ -68,9 +71,7 @@ export const CalendarEventBlock = React.memo(function CalendarEventBlock({
       onClick={onClick}
       title={`${label} · ${occurrence.teamDisplayName}\n${timeStr}`}
     >
-      <span className="truncate text-[11px] font-medium leading-tight text-white/95">
-        {label}
-      </span>
+      <span className="truncate text-[11px] font-medium leading-tight text-white/95">{label}</span>
       {variant === 'day' && (
         <span className="truncate text-[10px] leading-tight text-white/70">
           {occurrence.teamDisplayName}

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

@@ -59,8 +59,14 @@ export const SettingsTabs = ({
 
   return (
     <TooltipProvider>
-      <div className="flex items-center" style={{ backgroundColor: 'var(--color-surface-raised)' }}>
-        {visibleTabs.map((tab, index) => {
+      <div
+        className="inline-flex items-center gap-1 rounded-xl border p-1 shadow-inner shadow-black/10"
+        style={{
+          backgroundColor: 'var(--color-surface-raised)',
+          borderColor: 'var(--color-border-subtle)',
+        }}
+      >
+        {visibleTabs.map((tab) => {
           const Icon = tab.icon;
           const isActive = activeSection === tab.id;
 
@@ -68,33 +74,30 @@ export const SettingsTabs = ({
             <button
               key={tab.id}
               onClick={() => onSectionChange(tab.id)}
-              className={`flex items-center gap-1.5 px-3 py-2 text-xs transition-colors ${
+              className={`group relative flex h-8 w-[112px] items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 text-xs transition-all duration-200 ${
                 isActive
-                  ? 'font-medium'
-                  : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
+                  ? 'shadow-[var(--color-accent-glow)]/20 font-medium text-[var(--color-accent)] shadow-sm'
+                  : 'text-[var(--color-text-muted)] hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-text-secondary)]'
               }`}
-              style={{
-                borderLeft: index > 0 ? '1px solid var(--color-border-subtle)' : undefined,
-                color: isActive ? '#818cf8' : undefined,
-              }}
+              style={
+                isActive
+                  ? {
+                      backgroundColor: 'var(--color-accent-muted)',
+                      border: '1px solid var(--color-accent-border)',
+                    }
+                  : { border: '1px solid transparent' }
+              }
             >
-              <Icon className={`size-3 ${isActive ? 'opacity-90' : 'opacity-40'}`} />
+              <Icon
+                className={`size-3 transition-opacity ${isActive ? 'opacity-95' : 'opacity-45 group-hover:opacity-70'}`}
+              />
               {tab.label}
 
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
-                    role="button"
-                    tabIndex={0}
-                    aria-label={`What is ${tab.label}?`}
-                    onClick={(event) => event.stopPropagation()}
-                    onMouseDown={(event) => event.stopPropagation()}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.stopPropagation();
-                      }
-                    }}
-                    className="ml-0.5 inline-flex items-center justify-center rounded-full text-[var(--color-text-muted)] opacity-0 transition-opacity hover:opacity-100"
+                    aria-hidden="true"
+                    className="ml-0.5 inline-flex items-center justify-center rounded-full text-[var(--color-text-muted)] opacity-0 transition-opacity hover:text-[var(--color-accent)] group-hover:opacity-100 group-focus-visible:opacity-100"
                   >
                     <Info className="size-2.5" />
                   </span>

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

@@ -6,7 +6,7 @@
 import { useEffect, useState } from 'react';
 
 import { useStore } from '@renderer/store';
-import { Loader2 } from 'lucide-react';
+import { Loader2, SlidersHorizontal } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { useSettingsConfig, useSettingsHandlers } from './hooks';
@@ -100,28 +100,37 @@ export const SettingsView = (): React.JSX.Element | null => {
 
   return (
     <div className="flex-1 overflow-auto" style={{ backgroundColor: 'var(--color-surface)' }}>
-      {/* Clean container */}
+      {/* Control-console settings shell */}
       <div
-        className="mx-auto flex min-h-full max-w-3xl flex-col"
+        className="mx-auto flex min-h-full max-w-4xl flex-col px-6 py-6"
         style={{
           backgroundColor: 'var(--color-surface)',
         }}
       >
-        {/* Tabs area */}
         <div
-          className="border-b"
-          style={{
-            borderColor: 'var(--color-border-subtle)',
-          }}
+          className="bg-[var(--color-surface-raised)]/60 mb-5 overflow-hidden rounded-2xl border shadow-sm shadow-black/10"
+          style={{ borderColor: 'var(--color-border-subtle)' }}
         >
-          <SettingsTabs activeSection={activeSection} onSectionChange={setActiveSection} />
-          {error && (
-            <div className="px-4 pb-2 text-[10px] text-red-400">{error}</div>
-          )}
+          <div className="pointer-events-none h-px bg-gradient-to-r from-transparent via-[var(--color-accent-border)] to-transparent" />
+          <div className="flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-start gap-3">
+              <div className="shadow-[var(--color-accent-glow)]/20 flex size-9 shrink-0 items-center justify-center rounded-xl border border-[var(--color-accent-border)] bg-[var(--color-accent-soft)] text-[var(--color-accent)] shadow-sm">
+                <SlidersHorizontal className="size-4" />
+              </div>
+              <div>
+                <h2 className="text-base font-semibold text-[var(--color-text)]">设置 Helm Loop</h2>
+                <p className="mt-1 text-xs leading-relaxed text-[var(--color-text-muted)]">
+                  配置 Hermit 运行时、外观、数字员工渠道和本地控制行为。
+                </p>
+              </div>
+            </div>
+            <SettingsTabs activeSection={activeSection} onSectionChange={setActiveSection} />
+          </div>
+          {error && <div className="px-4 pb-3 text-[10px] text-red-400">{error}</div>}
         </div>
 
         {/* Content */}
-        <div className="flex-1 overflow-y-auto px-6 py-5">
+        <div className="flex-1 overflow-y-auto duration-200 animate-in fade-in slide-in-from-bottom-1">
           {activeSection === 'general' && (
             <GeneralSection
               safeConfig={safeConfig}

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

@@ -18,12 +18,15 @@ export const SettingRow = ({
 }: SettingRowProps): React.JSX.Element => {
   return (
     <div
-      className="flex items-center justify-between border-b py-3"
+      className="group flex items-center justify-between border-b px-3 py-3.5 transition-colors duration-150 last:border-b-0 hover:bg-[var(--color-accent-soft)]"
       style={{ borderColor: 'var(--color-border-subtle)' }}
     >
-      <div className="flex items-start gap-2.5">
+      <div className="flex items-start gap-3">
         {icon ? (
-          <div className="mt-0.5 shrink-0" style={{ color: 'var(--color-text-muted)' }}>
+          <div
+            className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded transition-colors duration-150 group-hover:text-[var(--color-text)]"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
             {icon}
           </div>
         ) : null}
@@ -32,13 +35,18 @@ export const SettingRow = ({
             {label}
           </div>
           {description && (
-            <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+            <div
+              className="mt-0.5 text-xs leading-relaxed"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
               {description}
             </div>
           )}
         </div>
       </div>
-      <div className="shrink-0">{children}</div>
+      <div className="shrink-0 transition-transform duration-100 group-active:scale-[0.97]">
+        {children}
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,53 @@
+/**
+ * SettingsSectionCard - Premium settings panel surface.
+ * Adds a subtle accent hairline and glow while preserving Hermit's dense control-console feel.
+ */
+
+interface SettingsSectionCardProps {
+  readonly title: string;
+  readonly description?: string;
+  readonly icon?: React.ReactNode;
+  readonly children: React.ReactNode;
+  readonly className?: string;
+}
+
+export const SettingsSectionCard = ({
+  title,
+  description,
+  icon,
+  children,
+  className = '',
+}: SettingsSectionCardProps): React.JSX.Element => {
+  return (
+    <section
+      className={`bg-[var(--color-surface-raised)]/55 group relative overflow-hidden rounded-2xl border shadow-sm shadow-black/10 transition-all duration-200 hover:border-[var(--color-border-emphasis)] ${className}`}
+      style={{ borderColor: 'var(--color-border-subtle)' }}
+    >
+      <div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-accent-border)] to-transparent opacity-80" />
+      <div className="pointer-events-none absolute -right-20 -top-24 size-48 rounded-full bg-[var(--color-accent-soft)] blur-3xl transition-opacity duration-300 group-hover:opacity-80" />
+
+      <div
+        className="relative border-b px-4 py-3"
+        style={{ borderColor: 'var(--color-border-subtle)' }}
+      >
+        <div className="flex items-start gap-3">
+          {icon && (
+            <div className="shadow-[var(--color-accent-glow)]/20 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg border border-[var(--color-accent-border)] bg-[var(--color-accent-soft)] text-[var(--color-accent)] shadow-sm">
+              {icon}
+            </div>
+          )}
+          <div className="min-w-0">
+            <h3 className="text-sm font-semibold text-[var(--color-text)]">{title}</h3>
+            {description && (
+              <p className="mt-0.5 text-xs leading-relaxed text-[var(--color-text-muted)]">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="relative px-1">{children}</div>
+    </section>
+  );
+};

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>
   );
 };