@yancyyu/openhermit 1.6.38 → 1.6.39

package/src/renderer/components/schedules/calendar/computeOccurrences.ts

@@ -0,0 +1,234 @@
+import { Cron } from 'croner';
+import {
+  addDays,
+  endOfDay,
+  endOfWeek,
+  isBefore,
+  startOfDay,
+  startOfWeek,
+} from 'date-fns';
+
+import type { Schedule } from '@shared/types';
+
+import type { CalendarOccurrence, CalendarViewMode, WeekRange } from './types';
+
+// =============================================================================
+// Config
+// =============================================================================
+
+/** Max cron hits to enumerate per schedule per range */
+const MAX_OCCURRENCES_PER_SCHEDULE = 200;
+
+/** Default visual duration for each event block (minutes) */
+const DEFAULT_DURATION_MINUTES = 30;
+
+/** Week starts on Monday */
+const WEEK_STARTS_ON = 1 as const;
+
+// =============================================================================
+// Date range computation
+// =============================================================================
+
+export function getViewRange(mode: CalendarViewMode, referenceDate: Date): { start: Date; end: Date } {
+  const base = startOfDay(referenceDate);
+  switch (mode) {
+    case 'day':
+      return { start: base, end: endOfDay(referenceDate) };
+    case 'week':
+      return {
+        start: startOfWeek(base, { weekStartsOn: WEEK_STARTS_ON }),
+        end: endOfWeek(base, { weekStartsOn: WEEK_STARTS_ON }),
+      };
+    case 'month': {
+      const monthStart = new Date(base.getFullYear(), base.getMonth(), 1);
+      const gridStart = startOfWeek(monthStart, { weekStartsOn: WEEK_STARTS_ON });
+      const nextMonth = new Date(base.getFullYear(), base.getMonth() + 1, 1);
+      const lastDay = addDays(nextMonth, -1);
+      const gridEnd = endOfWeek(lastDay, { weekStartsOn: WEEK_STARTS_ON });
+      return { start: gridStart, end: gridEnd };
+    }
+  }
+}
+
+export function getWeekRange(referenceDate: Date): WeekRange {
+  const base = startOfDay(referenceDate);
+  return {
+    start: startOfWeek(base, { weekStartsOn: WEEK_STARTS_ON }),
+    end: endOfWeek(base, { weekStartsOn: WEEK_STARTS_ON }),
+  };
+}
+
+// =============================================================================
+// Core occurrence computation
+// =============================================================================
+
+interface TeamColorResolver {
+  getTeamColor: (teamName: string) => string;
+  getTeamDisplayName: (teamName: string) => string;
+}
+
+export function computeCalendarOccurrences(
+  schedules: Schedule[],
+  rangeStart: Date,
+  rangeEnd: Date,
+  resolvers: TeamColorResolver,
+): CalendarOccurrence[] {
+  if (schedules.length === 0) return [];
+
+  const allOccurrences: CalendarOccurrence[] = [];
+
+  for (const schedule of schedules) {
+    if (schedule.status === 'disabled') continue;
+
+    const rawDates = enumerateCronInRange(
+      schedule.cronExpression,
+      schedule.timezone,
+      rangeStart,
+      rangeEnd,
+    );
+
+    for (const date of rawDates) {
+      allOccurrences.push({
+        scheduleId: schedule.id,
+        teamName: schedule.teamName,
+        label: schedule.label || '',
+        cronDescription: '',
+        status: schedule.status,
+        date,
+        hour: date.getHours(),
+        minute: date.getMinutes(),
+        durationMinutes: DEFAULT_DURATION_MINUTES,
+        color: resolvers.getTeamColor(schedule.teamName),
+        teamDisplayName: resolvers.getTeamDisplayName(schedule.teamName),
+        column: 0,
+        totalColumns: 1,
+      });
+    }
+  }
+
+  resolveOverlaps(allOccurrences);
+  return allOccurrences;
+}
+
+// =============================================================================
+// Cron enumeration
+// =============================================================================
+
+function enumerateCronInRange(
+  cronExpression: string,
+  timezone: string,
+  rangeStart: Date,
+  rangeEnd: Date,
+): Date[] {
+  try {
+    const job = new Cron(cronExpression.trim(), { timezone, paused: true });
+    const raw = job.nextRuns(MAX_OCCURRENCES_PER_SCHEDULE, rangeStart);
+    const results: Date[] = [];
+    for (const d of raw) {
+      const dt = d instanceof Date ? d : new Date(d);
+      if (isBefore(rangeEnd, dt)) break;
+      if (!isBefore(dt, rangeStart)) {
+        results.push(dt);
+      }
+    }
+    return results;
+  } catch {
+    return [];
+  }
+}
+
+// =============================================================================
+// Overlap resolution — greedy column assignment within each day
+// =============================================================================
+
+function resolveOverlaps(occurrences: CalendarOccurrence[]): void {
+  // Group by day key (YYYY-MM-DD)
+  const byDay = new Map<string, CalendarOccurrence[]>();
+  for (const occ of occurrences) {
+    const key = dayKey(occ.date);
+    const list = byDay.get(key);
+    if (list) list.push(occ);
+    else byDay.set(key, [occ]);
+  }
+
+  for (const dayOccurrences of byDay.values()) {
+    if (dayOccurrences.length > 1) {
+      resolveOverlapsInDay(dayOccurrences);
+    }
+  }
+}
+
+function resolveOverlapsInDay(occurrences: CalendarOccurrence[]): void {
+  const sorted = [...occurrences].sort(
+    (a, b) => a.hour * 60 + a.minute - (b.hour * 60 + b.minute),
+  );
+
+  // --- Pass 1: greedy column assignment ---
+  // columnEndTimes[col] = minute-of-day when that column becomes free
+  const columnEndTimes: number[] = [];
+
+  for (const occ of sorted) {
+    const startMin = occ.hour * 60 + occ.minute;
+    const endMin = startMin + occ.durationMinutes;
+
+    let assignedCol = -1;
+    for (let col = 0; col < columnEndTimes.length; col++) {
+      if (columnEndTimes[col] <= startMin) {
+        assignedCol = col;
+        break;
+      }
+    }
+    if (assignedCol === -1) {
+      assignedCol = columnEndTimes.length;
+      columnEndTimes.push(0);
+    }
+    columnEndTimes[assignedCol] = endMin;
+    occ.column = assignedCol;
+  }
+
+  // --- Pass 2: propagate max totalColumns to all events in each overlap group ---
+  // Build overlap graph, then for each connected component set totalColumns = max column + 1
+  const visited = new Set<CalendarOccurrence>();
+
+  for (const occ of sorted) {
+    if (visited.has(occ)) continue;
+
+    // BFS to find all transitively overlapping events
+    const component: CalendarOccurrence[] = [];
+    const queue = [occ];
+    visited.add(occ);
+
+    while (queue.length > 0) {
+      const current = queue.pop()!;
+      component.push(current);
+      const curStart = current.hour * 60 + current.minute;
+      const curEnd = curStart + current.durationMinutes;
+
+      for (const other of sorted) {
+        if (visited.has(other)) continue;
+        const otherStart = other.hour * 60 + other.minute;
+        const otherEnd = otherStart + other.durationMinutes;
+        if (otherStart < curEnd && otherEnd > curStart) {
+          visited.add(other);
+          queue.push(other);
+        }
+      }
+    }
+
+    const maxCol = Math.max(...component.map((o) => o.column));
+    for (const o of component) {
+      o.totalColumns = maxCol + 1;
+    }
+  }
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function dayKey(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}

package/src/renderer/components/schedules/calendar/index.ts

@@ -0,0 +1,2 @@
+export { ScheduleCalendarBoard } from './ScheduleCalendarBoard';
+export type { CalendarViewMode, CalendarOccurrence, WeekRange } from './types';

package/src/renderer/components/schedules/calendar/types.ts

@@ -0,0 +1,44 @@
+import type { ScheduleStatus } from '@shared/types';
+
+// =============================================================================
+// Calendar view mode
+// =============================================================================
+
+export type CalendarViewMode = 'day' | 'week' | 'month';
+
+// =============================================================================
+// Calendar occurrence — a single cron fire event on the calendar
+// =============================================================================
+
+export interface CalendarOccurrence {
+  scheduleId: string;
+  teamName: string;
+  label: string;
+  cronDescription: string;
+  status: ScheduleStatus;
+  /** The Date of this specific cron occurrence */
+  date: Date;
+  /** Hour of day (0-23) for positioning */
+  hour: number;
+  /** Minute within the hour (0-59) */
+  minute: number;
+  /** Visual block height in minutes — defaults to 30 */
+  durationMinutes: number;
+  /** Team color (CSS color string) */
+  color: string;
+  /** Team display name */
+  teamDisplayName: string;
+  /** Column index for side-by-side stacking (computed by overlap algorithm) */
+  column: number;
+  /** Total number of overlapping columns in this slot */
+  totalColumns: number;
+}
+
+// =============================================================================
+// Date range helpers
+// =============================================================================
+
+export interface WeekRange {
+  start: Date;
+  end: Date;
+}

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

@@ -6,11 +6,11 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@renderer/components/ui/tooltip';
-import { Bot, Info, PlugZap, Settings, Share2, Wrench } from 'lucide-react';
+import { Bot, Info, Settings, Share2, Wrench } from 'lucide-react';
 
 import type { LucideIcon } from 'lucide-react';
 
-export type SettingsSection = 'general' | 'channels' | 'harness' | 'task-bus' | 'advanced';
+export type SettingsSection = 'general' | 'harness' | 'task-bus' | 'advanced';
 
 interface SettingsTabsProps {
   activeSection: SettingsSection;
@@ -31,30 +31,23 @@ const tabs: TabConfig[] = [
     icon: Settings,
     description: '主题、语言、显示密度和启动行为等核心应用偏好。',
   },
-  {
-    id: 'channels',
-    label: '渠道',
-    icon: PlugZap,
-    description:
-      '管理飞书、微信、Telegram 等消息平台的接入配置。每个 cc-connect 项目可绑定一个或多个渠道。',
-  },
   {
     id: 'harness',
     label: 'Harness',
     icon: Bot,
-    description: '管理 AI Agent 运行时（12 种）的 Provider 配置、API Key、端点和 CLI 安装状态。',
+    description: '管理 AI Agent 运行时的 Provider 配置、API Key、端点和 CLI 安装状态。',
   },
   {
     id: 'task-bus',
     label: '团队总线',
     icon: Share2,
-    description: '配置 Redis 消息总线实现跨主机团队协作，以及团队使用数据的采集和上报。',
+    description: '配置 Redis 消息总线实现跨主机团队协作，以及使用数据采集和上报。',
   },
   {
     id: 'advanced',
     label: '高级',
     icon: Wrench,
-    description: '高级选项：导出/导入配置、重置默认值和编辑原始配置。',
+    description: '导出/导入配置、重置默认值和编辑原始配置。',
   },
 ];
 
@@ -66,51 +59,53 @@ export const SettingsTabs = ({
 
   return (
     <TooltipProvider>
-      <div className="border-b border-border pb-0">
-        <div className="inline-flex h-9 items-center gap-1 rounded-t-lg bg-[var(--color-surface-raised)] p-1 text-[var(--color-text-muted)]">
-          {visibleTabs.map((tab) => {
-            const Icon = tab.icon;
-            const isActive = activeSection === tab.id;
+      <div className="flex items-center" style={{ backgroundColor: 'var(--color-surface-raised)' }}>
+        {visibleTabs.map((tab, index) => {
+          const Icon = tab.icon;
+          const isActive = activeSection === tab.id;
 
-            return (
-              <button
-                key={tab.id}
-                onClick={() => onSectionChange(tab.id)}
-                className={`relative inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 pr-7 text-sm font-medium transition-all ${
-                  isActive
-                    ? 'bg-[var(--color-surface)] text-[var(--color-text)] shadow-sm'
-                    : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
-                }`}
-              >
-                <Icon className="size-3.5" />
-                {tab.label}
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onSectionChange(tab.id)}
+              className={`flex items-center gap-1.5 px-3 py-2 text-xs transition-colors ${
+                isActive
+                  ? 'font-medium'
+                  : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
+              }`}
+              style={{
+                borderLeft: index > 0 ? '1px solid var(--color-border-subtle)' : undefined,
+                color: isActive ? '#67e8f9' : undefined,
+              }}
+            >
+              <Icon className={`size-3 ${isActive ? 'opacity-90' : 'opacity-40'}`} />
+              {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="size-4.5 absolute right-1.5 top-0.5 z-10 inline-flex items-center justify-center rounded-full text-text-muted transition-colors hover:bg-[var(--color-surface-raised)] hover:text-text"
-                    >
-                      <Info className="size-3" />
-                    </span>
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-64 text-pretty text-xs leading-relaxed">
-                    {tab.description}
-                  </TooltipContent>
-                </Tooltip>
-              </button>
-            );
-          })}
-        </div>
+              <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"
+                  >
+                    <Info className="size-2.5" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-64 text-xs leading-relaxed">
+                  {tab.description}
+                </TooltipContent>
+              </Tooltip>
+            </button>
+          );
+        })}
       </div>
     </TooltipProvider>
   );

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

@@ -1,6 +1,6 @@
 /**
- * SettingsView - Main settings panel with all app configuration options.
- * Provides UI for managing runtime, channels, and advanced options.
+ * SettingsView - Main settings panel.
+ * Terminal-style layout matching the control console aesthetic.
  */
 
 import { useEffect, useState } from 'react';
@@ -10,7 +10,7 @@ import { Loader2 } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { useSettingsConfig, useSettingsHandlers } from './hooks';
-import { AdvancedSection, GeneralSection, HarnessSection, PlatformsSection } from './sections';
+import { AdvancedSection, GeneralSection, HarnessSection } from './sections';
 import { TaskBusSection } from './sections/TaskBusSection';
 import { type SettingsSection, SettingsTabs } from './SettingsTabs';
 
@@ -23,17 +23,15 @@ export const SettingsView = (): React.JSX.Element | null => {
     }))
   );
 
-  // Consume pending section (avoid setState during render)
   useEffect(() => {
     if (pendingSettingsSection) {
       const nextSection: SettingsSection =
-        pendingSettingsSection === 'channels' ||
         pendingSettingsSection === 'harness' ||
         pendingSettingsSection === 'task-bus' ||
         pendingSettingsSection === 'advanced'
           ? pendingSettingsSection
           : 'general';
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional sync on prop change
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setActiveSection(nextSection);
       clearPendingSettingsSection();
     }
@@ -61,39 +59,37 @@ export const SettingsView = (): React.JSX.Element | null => {
     updateConfig,
   });
 
-  // Loading state
   if (loading) {
     return (
       <div
-        className="flex flex-1 items-center justify-center"
+        className="flex flex-1 items-center justify-center font-mono"
         style={{ backgroundColor: 'var(--color-surface)' }}
       >
         <div className="flex items-center gap-3" style={{ color: 'var(--color-text-muted)' }}>
-          <Loader2 className="size-5 animate-spin" />
-          <span>正在加载设置...</span>
+          <Loader2 className="size-4 animate-spin" />
+          <span className="text-xs">loading settings...</span>
         </div>
       </div>
     );
   }
 
-  // Error state
   if (error && !config) {
     return (
       <div
-        className="flex flex-1 items-center justify-center"
+        className="flex flex-1 items-center justify-center font-mono"
         style={{ backgroundColor: 'var(--color-surface)' }}
       >
         <div className="text-center">
-          <p className="mb-4 text-red-400">{error}</p>
+          <p className="mb-4 text-xs text-red-400">{error}</p>
           <button
             onClick={() => window.location.reload()}
-            className="rounded-md px-4 py-2 transition-colors"
+            className="rounded border px-3 py-1.5 text-xs transition-colors"
             style={{
-              backgroundColor: 'var(--color-surface-raised)',
-              color: 'var(--color-text-secondary)',
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text-muted)',
             }}
           >
-            重试
+            retry
           </button>
         </div>
       </div>
@@ -104,27 +100,28 @@ export const SettingsView = (): React.JSX.Element | null => {
 
   return (
     <div className="flex-1 overflow-auto" style={{ backgroundColor: 'var(--color-surface)' }}>
-      <div className="mx-auto max-w-2xl px-6 py-8">
-        {/* Header */}
-        <div className="mb-6">
-          <h1 className="text-lg font-medium" style={{ color: 'var(--color-text)' }}>
-            设置
-          </h1>
-          <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>
-            管理应用偏好设置
-          </p>
+      {/* Clean container */}
+      <div
+        className="mx-auto flex min-h-full max-w-3xl flex-col"
+        style={{
+          backgroundColor: 'var(--color-surface)',
+        }}
+      >
+        {/* Tabs area */}
+        <div
+          className="border-b"
+          style={{
+            borderColor: 'var(--color-border-subtle)',
+          }}
+        >
+          <SettingsTabs activeSection={activeSection} onSectionChange={setActiveSection} />
           {error && (
-            <div className="mt-4 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2">
-              <p className="text-sm text-red-400">{error}</p>
-            </div>
+            <div className="px-4 pb-2 text-[10px] text-red-400">{error}</div>
           )}
         </div>
 
-        {/* Tabs */}
-        <SettingsTabs activeSection={activeSection} onSectionChange={setActiveSection} />
-
         {/* Content */}
-        <div className="mt-4">
+        <div className="flex-1 overflow-y-auto px-6 py-5">
           {activeSection === 'general' && (
             <GeneralSection
               safeConfig={safeConfig}
@@ -135,8 +132,6 @@ export const SettingsView = (): React.JSX.Element | null => {
             />
           )}
 
-          {activeSection === 'channels' && <PlatformsSection />}
-
           {activeSection === 'harness' && <HarnessSection />}
 
           {activeSection === 'task-bus' && <TaskBusSection />}

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

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

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

@@ -57,7 +57,7 @@ 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-zinc-700 ${fullWidth ? 'w-full' : 'min-w-[140px]'} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${isOpen ? 'ring-1 ring-zinc-700' : ''} `}
+        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)]' : ''} `}
         style={{
           color: 'var(--color-text-secondary)',
           borderColor: isOpen ? 'var(--color-border)' : 'var(--color-border-subtle)',
@@ -85,12 +85,14 @@ export const SettingsSelect = <T extends string | number>({
               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 ${
-                value === option.value ? 'bg-indigo-500/10 text-indigo-400' : 'hover:bg-white/5'
+                value === option.value
+                  ? 'bg-cyan-500/10 text-cyan-300'
+                  : 'hover:bg-white/5'
               } `}
               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-4 shrink-0 text-cyan-400" />}
             </button>
           ))}
         </div>

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

@@ -27,9 +27,9 @@ 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-indigo-500 focus:ring-offset-2 focus:ring-offset-[#141416]"
+      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)]"
       style={{
-        backgroundColor: enabled ? '#6366f1' : '#3f3f46',
+        backgroundColor: enabled ? '#0891b2' : '#3f3f46',
         opacity: disabled ? 0.5 : 1,
         cursor: disabled ? 'not-allowed' : 'pointer',
       }}