@yancyyu/openhermit 1.6.38 → 1.6.40

package/src/renderer/components/extensions/skills/SkillsLibraryPanel.tsx

@@ -0,0 +1,335 @@
+/**
+ * SkillsLibraryPanel — global user skills library management.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { confirm } from '@renderer/components/common/ConfirmDialog';
+import { Badge } from '@renderer/components/ui/badge';
+import { Button } from '@renderer/components/ui/button';
+import { useStore } from '@renderer/store';
+import { formatSkillRootKind, getSkillAudienceLabel } from '@shared/utils/skillRoots';
+import { AlertCircle, Edit, FileText, Plus, RefreshCw, Trash2 } from 'lucide-react';
+
+import { SearchInput } from '../common/SearchInput';
+
+import { SkillEditorDialog } from './SkillEditorDialog';
+
+import type { SkillCatalogItem, SkillDetail } from '@shared/types/extensions';
+
+interface SkillsLibraryPanelProps {
+  projectPath: string | null;
+  projectLabel: string | null;
+}
+
+type EditorState =
+  | { mode: 'create'; detail: null }
+  | { mode: 'edit'; detail: SkillDetail | null; skillId: string };
+
+function formatScope(scope: SkillCatalogItem['scope']): string {
+  return scope === 'project' ? '项目' : '个人';
+}
+
+function formatInvocationMode(mode: SkillCatalogItem['invocationMode']): string {
+  return mode === 'manual-only' ? '手动调用' : '自动触发';
+}
+
+function matchesSearch(skill: SkillCatalogItem, query: string): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return true;
+
+  return [skill.name, skill.description, skill.folderName, skill.rootKind, skill.scope]
+    .filter(Boolean)
+    .some((value) => value.toLowerCase().includes(normalizedQuery));
+}
+
+interface SkillLibraryCardProps {
+  skill: SkillCatalogItem;
+  isLoadingDetail: boolean;
+  isDeleting: boolean;
+  onEdit: (skill: SkillCatalogItem) => void;
+  onDelete: (skill: SkillCatalogItem) => void;
+}
+
+const SkillLibraryCard = ({
+  skill,
+  isLoadingDetail,
+  isDeleting,
+  onEdit,
+  onDelete,
+}: SkillLibraryCardProps): React.JSX.Element => {
+  const statusBadge = skill.isValid ? (
+    <Badge className="border-emerald-500/30 bg-emerald-500/10 text-emerald-400" variant="outline">
+      可用
+    </Badge>
+  ) : (
+    <Badge className="border-amber-500/30 bg-amber-500/10 text-amber-300" variant="outline">
+      需检查
+    </Badge>
+  );
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-border bg-white/[0.025] p-4 transition-colors hover:border-border-emphasis hover:bg-white/[0.045]">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <FileText className="size-4 shrink-0 text-text-muted" />
+            <h3 className="truncate text-sm font-semibold text-text">{skill.name}</h3>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <Badge variant="secondary" className="text-[11px]">
+              {formatSkillRootKind(skill.rootKind)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="bg-surface-raised/60 border-border text-[11px] text-text-secondary"
+            >
+              {formatScope(skill.scope)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="bg-surface-raised/60 border-border text-[11px] text-text-secondary"
+            >
+              {getSkillAudienceLabel(skill.rootKind)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="bg-surface-raised/60 border-border text-[11px] text-text-secondary"
+            >
+              {formatInvocationMode(skill.invocationMode)}
+            </Badge>
+            {statusBadge}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={() => onEdit(skill)}
+            disabled={isLoadingDetail || isDeleting}
+            title="编辑 Skill"
+          >
+            <Edit className="size-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8 text-red-300 hover:text-red-200"
+            onClick={() => onDelete(skill)}
+            disabled={isDeleting || isLoadingDetail}
+            title="删除 Skill"
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      <p className="line-clamp-3 min-h-[3.75rem] text-xs leading-5 text-text-secondary">
+        {skill.description || '没有描述。'}
+      </p>
+
+      <div className="flex flex-wrap items-center gap-2 text-[11px] text-text-muted">
+        <span className="truncate">{skill.folderName}</span>
+        {skill.flags.hasScripts ? <Badge variant="outline">脚本</Badge> : null}
+        {skill.flags.hasReferences ? <Badge variant="outline">参考资料</Badge> : null}
+        {skill.flags.hasAssets ? <Badge variant="outline">资源</Badge> : null}
+        {skill.issues.length > 0 ? (
+          <span className="inline-flex items-center gap-1 text-amber-300">
+            <AlertCircle className="size-3" />
+            {skill.issues.length} 个提示
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export const SkillsLibraryPanel = ({
+  projectPath,
+  projectLabel,
+}: SkillsLibraryPanelProps): React.JSX.Element => {
+  const fetchSkillDetail = useStore((s) => s.fetchSkillDetail);
+  const deleteSkill = useStore((s) => s.deleteSkill);
+  const skillDetailsById = useStore((s) => s.skillsDetailsById);
+  const skillDetailLoadingById = useStore((s) => s.skillsDetailLoadingById);
+
+  const [skills, setSkills] = useState<SkillCatalogItem[]>([]);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [editorState, setEditorState] = useState<EditorState | null>(null);
+  const [openingSkillId, setOpeningSkillId] = useState<string | null>(null);
+  const [deletingSkillId, setDeletingSkillId] = useState<string | null>(null);
+
+  const loadSkills = useCallback(async (): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const nextSkills = (await api.skills?.list()) ?? [];
+      setSkills(nextSkills);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '加载全局 Skill 失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadSkills();
+  }, [loadSkills]);
+
+  const filteredSkills = useMemo(
+    () => skills.filter((skill) => matchesSearch(skill, search)),
+    [skills, search]
+  );
+
+  const openCreateDialog = useCallback(() => {
+    setEditorState({ mode: 'create', detail: null });
+  }, []);
+
+  const openEditDialog = useCallback(
+    (skill: SkillCatalogItem) => {
+      const cachedDetail = skillDetailsById[skill.id];
+      if (cachedDetail) {
+        setEditorState({ mode: 'edit', skillId: skill.id, detail: cachedDetail });
+        return;
+      }
+
+      setOpeningSkillId(skill.id);
+      setError(null);
+      void fetchSkillDetail(skill.id)
+        .then(() => {
+          setEditorState({ mode: 'edit', skillId: skill.id, detail: null });
+        })
+        .catch((err) => {
+          setError(err instanceof Error ? err.message : '加载 Skill 详情失败');
+        })
+        .finally(() => {
+          setOpeningSkillId((current) => (current === skill.id ? null : current));
+        });
+    },
+    [fetchSkillDetail, skillDetailsById]
+  );
+
+  const handleDelete = useCallback(
+    (skill: SkillCatalogItem) => {
+      void (async () => {
+        const confirmed = await confirm({
+          title: '删除 Skill',
+          message: `确认删除全局 Skill「${skill.name}」？此操作会删除对应的 Skill 文件。`,
+          confirmLabel: '删除',
+          cancelLabel: '取消',
+          variant: 'danger',
+        });
+        if (!confirmed) return;
+
+        setDeletingSkillId(skill.id);
+        setError(null);
+        try {
+          await deleteSkill({ skillId: skill.id });
+          await loadSkills();
+        } catch (err) {
+          setError(err instanceof Error ? err.message : '删除 Skill 失败');
+        } finally {
+          setDeletingSkillId(null);
+        }
+      })();
+    },
+    [deleteSkill, loadSkills]
+  );
+
+  const handleSaved = useCallback(
+    (_skillId: string | null) => {
+      setEditorState(null);
+      void loadSkills();
+    },
+    [loadSkills]
+  );
+
+  const editorDetail = useMemo(() => {
+    if (!editorState) return null;
+    if (editorState.mode === 'create') return null;
+    return skillDetailsById[editorState.skillId] ?? editorState.detail;
+  }, [editorState, skillDetailsById]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h2 className="text-sm font-semibold text-text">全局 Skill 库</h2>
+          <p className="text-xs text-text-muted">
+            管理个人范围 Skill。创建和编辑会保存到全局用户范围，不会写入当前项目。
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="secondary" className="font-normal">
+            {skills.length} 个 Skill
+          </Badge>
+          {projectPath ? (
+            <Badge variant="outline" className="font-normal text-text-muted">
+              当前项目：{projectLabel ?? projectPath}
+            </Badge>
+          ) : null}
+          <Button variant="outline" size="sm" onClick={() => void loadSkills()} disabled={loading}>
+            <RefreshCw className={loading ? 'mr-2 size-3.5 animate-spin' : 'mr-2 size-3.5'} />
+            刷新
+          </Button>
+          <Button size="sm" onClick={openCreateDialog}>
+            <Plus className="mr-2 size-3.5" />
+            新建 Skill
+          </Button>
+        </div>
+      </div>
+
+      <SearchInput
+        value={search}
+        onChange={setSearch}
+        placeholder="搜索 Skill..."
+        debounceMs={120}
+      />
+
+      {error ? (
+        <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-sm text-amber-300">
+          {error}
+        </div>
+      ) : null}
+
+      {loading && skills.length === 0 ? (
+        <div className="rounded-xl border border-border bg-white/[0.025] px-4 py-8 text-center text-sm text-text-muted">
+          正在加载全局 Skill...
+        </div>
+      ) : filteredSkills.length > 0 ? (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {filteredSkills.map((skill) => (
+            <SkillLibraryCard
+              key={skill.id}
+              skill={skill}
+              isLoadingDetail={
+                openingSkillId === skill.id || Boolean(skillDetailLoadingById[skill.id])
+              }
+              isDeleting={deletingSkillId === skill.id}
+              onEdit={openEditDialog}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-xl border border-border bg-white/[0.025] px-4 py-8 text-center text-sm text-text-muted">
+          {search ? '没有匹配的 Skill。' : '全局 Skill 库为空，点击“新建 Skill”创建第一个 Skill。'}
+        </div>
+      )}
+
+      <SkillEditorDialog
+        open={Boolean(editorState)}
+        mode={editorState?.mode ?? 'create'}
+        projectPath={null}
+        projectLabel={projectLabel}
+        detail={editorDetail}
+        onClose={() => setEditorState(null)}
+        onSaved={handleSaved}
+      />
+    </div>
+  );
+};

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

@@ -5,6 +5,7 @@
 
 import { TeamGraphTab } from '@features/agent-graph/renderer';
 import { TabUIProvider } from '@renderer/contexts/TabUIContext';
+import { SYSTEM_MANAGER_TEAM_NAME } from '@shared/types/team';
 
 import { DashboardView } from '../dashboard/DashboardView';
 import { ExtensionStoreView } from '../extensions/ExtensionStoreView';
@@ -13,6 +14,7 @@ import { SessionReportTab } from '../report/SessionReportTab';
 import { SchedulesView } from '../schedules/SchedulesView';
 import { SettingsView } from '../settings/SettingsView';
 import { TasksView } from '../tasks/TasksView';
+import { SystemManagerView } from '../system-manager/SystemManagerView';
 import { TeamDetailView } from '../team/TeamDetailView';
 import { TeamListView } from '../team/TeamListView';
 
@@ -51,7 +53,12 @@ export const PaneContent = ({ pane, isPaneFocused }: PaneContentProps): React.JS
             {tab.type === 'notifications' && <NotificationsView />}
             {tab.type === 'settings' && <SettingsView />}
             {tab.type === 'teams' && <TeamListView />}
-            {tab.type === 'team' && (
+            {tab.type === 'team' && tab.teamName === SYSTEM_MANAGER_TEAM_NAME && (
+              <TabUIProvider tabId={tab.id}>
+                <SystemManagerView isPaneFocused={isPaneFocused} />
+              </TabUIProvider>
+            )}
+            {tab.type === 'team' && tab.teamName !== SYSTEM_MANAGER_TEAM_NAME && (
               <TabUIProvider tabId={tab.id}>
                 <TeamDetailView teamName={tab.teamName ?? ''} isPaneFocused={isPaneFocused} />
               </TabUIProvider>

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

@@ -73,8 +73,8 @@ export const PaneResizeHandle = ({ leftPaneId }: PaneResizeHandleProps): React.J
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- resize handle requires mouse interaction
     <div
-      className={`flex w-1 shrink-0 cursor-col-resize items-center justify-center transition-colors hover:bg-blue-500/50 ${
-        isResizing ? 'bg-blue-500/50' : ''
+      className={`flex w-1 shrink-0 cursor-col-resize items-center justify-center transition-colors hover:bg-indigo-500/50 ${
+        isResizing ? 'bg-indigo-500/50' : ''
       }`}
       style={{
         backgroundColor: isResizing ? undefined : 'var(--color-border)',

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

@@ -2,8 +2,8 @@
  * Sidebar - Navigation with task list and session list.
  *
  * Structure:
- * - Tab bar: Collapse button + Tasks | Sessions
- * - Scrollable Body: Task list or date-grouped session list
+ * - Tab bar: Collapse button + Workspace
+ * - Scrollable Body: workspace browser
  * - Resizable: Drag right edge to resize
  * - Collapsible: Cmd+B to toggle (Notion-style)
  */
@@ -15,11 +15,9 @@ import { formatShortcut } from '@renderer/utils/stringUtils';
 import { PanelLeft } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
-import { DateGroupedSessions } from '../sidebar/DateGroupedSessions';
-import { SidebarSessions } from '../sidebar/SidebarSessions';
 import { WorkspaceBrowser } from '../sidebar/WorkspaceBrowser';
 
-type SidebarTab = 'workspace' | 'sessions';
+type SidebarTab = 'workspace';
 
 const MIN_WIDTH = 200;
 const MAX_WIDTH = 500;
@@ -34,7 +32,7 @@ export const Sidebar = (): React.JSX.Element => {
   );
   const [width, setWidth] = useState(DEFAULT_WIDTH);
   const [isResizing, setIsResizing] = useState(false);
-  const [sidebarTab, setSidebarTab] = useState<SidebarTab>('workspace');
+  const [sidebarTab] = useState<SidebarTab>('workspace');
   const [isCollapseHovered, setIsCollapseHovered] = useState(false);
   const sidebarRef = useRef<HTMLDivElement>(null);
 
@@ -123,54 +121,22 @@ export const Sidebar = (): React.JSX.Element => {
             <button
               type="button"
               role="tab"
-              aria-selected={sidebarTab === 'workspace'}
+              aria-selected
               aria-controls="sidebar-workspace-panel"
               id="sidebar-tab-workspace"
-              className={`relative px-3 py-1.5 text-[11px] font-medium transition-colors ${
-                sidebarTab === 'workspace'
-                  ? 'text-text'
-                  : 'text-text-muted hover:text-text-secondary'
-              }`}
-              style={
-                sidebarTab === 'workspace'
-                  ? {
-                      borderBottom: '2px solid var(--color-text)',
-                      marginBottom: '-1px',
-                    }
-                  : undefined
-              }
-              onClick={() => setSidebarTab('workspace')}
+              className="relative px-3 py-1.5 text-[11px] font-medium text-text transition-colors"
+              style={{
+                borderBottom: '2px solid var(--color-text)',
+                marginBottom: '-1px',
+              }}
             >
               工作空间
             </button>
-            <button
-              type="button"
-              role="tab"
-              aria-selected={sidebarTab === 'sessions'}
-              aria-controls="sidebar-sessions-panel"
-              id="sidebar-tab-sessions"
-              className={`relative px-3 py-1.5 text-[11px] font-medium transition-colors ${
-                sidebarTab === 'sessions'
-                  ? 'text-text'
-                  : 'text-text-muted hover:text-text-secondary'
-              }`}
-              style={
-                sidebarTab === 'sessions'
-                  ? {
-                      borderBottom: '2px solid var(--color-text)',
-                      marginBottom: '-1px',
-                    }
-                  : undefined
-              }
-              onClick={() => setSidebarTab('sessions')}
-            >
-              会话
-            </button>
           </div>
           <div className="flex-1" />
         </div>
 
-        {/* Content: Workspace or Sessions list */}
+        {/* Content: Workspace browser */}
         <div
           id="sidebar-workspace-panel"
           role="tabpanel"
@@ -180,15 +146,6 @@ export const Sidebar = (): React.JSX.Element => {
         >
           <WorkspaceBrowser />
         </div>
-        <div
-          id="sidebar-sessions-panel"
-          role="tabpanel"
-          aria-labelledby="sidebar-tab-sessions"
-          hidden={sidebarTab !== 'sessions'}
-          className="min-w-0 flex-1 overflow-hidden"
-        >
-          <SidebarSessions />
-        </div>
       </div>
 
       {/* Resize handle - only interactive when expanded */}
@@ -196,8 +153,8 @@ export const Sidebar = (): React.JSX.Element => {
         <button
           type="button"
           aria-label="调整侧栏宽度"
-          className={`absolute left-0 top-0 z-20 h-full w-1 cursor-col-resize border-0 bg-transparent p-0 transition-colors hover:bg-blue-500/50 ${
-            isResizing ? 'bg-blue-500/50' : ''
+          className={`absolute left-0 top-0 z-20 h-full w-1 cursor-col-resize border-0 bg-transparent p-0 transition-colors hover:bg-indigo-500/50 ${
+            isResizing ? 'bg-indigo-500/50' : ''
           }`}
           onMouseDown={handleResizeStart}
         />

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

@@ -8,12 +8,7 @@ import { useCallback, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
-import {
-  getTeamColorSet,
-  getThemedBadge,
-  getThemedBorder,
-  getThemedText,
-} from '@renderer/constants/teamColors';
+import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { useTheme } from '@renderer/hooks/useTheme';
 import { useStore } from '@renderer/store';
 import { nameColorSet } from '@renderer/utils/projectColor';
@@ -91,15 +86,11 @@ export const SortableTab = ({
         team?.color ??
         (s.selectedTeamName === tab.teamName ? s.selectedTeamData?.config.color : undefined);
       if (explicitColor) return getTeamColorSet(explicitColor);
-      // Fallback: deterministic color derived from display name
       const displayName = team?.displayName ?? tab.label;
       return nameColorSet(displayName, isLight);
     })
   );
-  const activeBorderColor = teamColorSet
-    ? getThemedBorder(teamColorSet, isLight)
-    : 'var(--color-accent, #6366f1)';
-  const inactiveTeamTextColor = teamColorSet ? getThemedText(teamColorSet, isLight) : null;
+  const accentColor = teamColorSet?.text ?? null;
 
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: tab.id,
@@ -116,33 +107,25 @@ export const SortableTab = ({
     transition: isDragging ? 'none' : transition,
     opacity: isDragging ? 0.3 : 1,
     backgroundColor: isActive
-      ? teamColorSet
-        ? getThemedBadge(teamColorSet, isLight)
-        : 'var(--color-surface-raised)'
+      ? 'var(--color-surface-raised)'
       : isHovered
-        ? teamColorSet
-          ? getThemedBadge(teamColorSet, isLight)
-          : 'var(--color-surface-overlay)'
-        : teamColorSet
-          ? getThemedBadge(teamColorSet, isLight)
-          : 'transparent',
+        ? 'var(--color-surface-overlay)'
+        : 'transparent',
     color: isActive
       ? 'var(--color-text)'
-      : inactiveTeamTextColor
-        ? inactiveTeamTextColor
-        : isHovered
-          ? 'var(--color-text)'
-          : 'var(--color-text-muted)',
+      : isHovered
+        ? 'var(--color-text)'
+        : 'var(--color-text-muted)',
     outline: isSelected ? '1px solid var(--color-border-emphasis)' : 'none',
     outlineOffset: '-1px',
-    borderTop: isActive ? `1px solid ${activeBorderColor}` : '1px solid transparent',
-    borderLeft: '1px solid transparent',
-    borderRight: '1px solid transparent',
+    borderTop: isActive ? '1px solid var(--color-border)' : '1px solid transparent',
+    borderLeft: '1px solid var(--color-border-subtle)',
+    borderRight: isActive ? '1px solid var(--color-border)' : '1px solid transparent',
     borderBottom: isActive ? '1px solid var(--color-surface-raised)' : '1px solid transparent',
-    borderTopLeftRadius: '8px',
-    borderTopRightRadius: '8px',
-    borderBottomLeftRadius: isActive ? 0 : '8px',
-    borderBottomRightRadius: isActive ? 0 : '8px',
+    borderTopLeftRadius: '0',
+    borderTopRightRadius: '0',
+    borderBottomLeftRadius: '0',
+    borderBottomRightRadius: '0',
     marginBottom: isActive ? '-1px' : 0,
     position: 'relative' as const,
     zIndex: isActive ? 1 : 0,
@@ -184,6 +167,12 @@ export const SortableTab = ({
         }
       }}
     >
+      {isActive && accentColor && (
+        <div
+          className="absolute bottom-0 left-2 right-2 h-[2px] rounded-full"
+          style={{ backgroundColor: accentColor, opacity: 0.6 }}
+        />
+      )}
       <Icon className="size-4 shrink-0" />
       {tab.fromSearch && (
         <span title="从搜索打开">
@@ -192,7 +181,7 @@ export const SortableTab = ({
       )}
       {isPinned && (
         <span title="已固定会话">
-          <Pin className="size-3 shrink-0 text-blue-400" />
+          <Pin className="size-3 shrink-0 text-indigo-400" />
         </span>
       )}
       <span

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

@@ -264,7 +264,7 @@ export const TabBar = ({ paneId }: TabBarProps): React.JSX.Element => {
             scrollContainerRef.current = el;
             setDroppableRef(el);
           }}
-          className="scrollbar-none flex min-w-0 flex-1 items-center gap-1"
+          className="scrollbar-none flex min-w-0 flex-1 items-center"
           style={{
             outline: isDroppableOver ? '1px dashed var(--color-accent, #6366f1)' : 'none',
             outlineOffset: '-1px',

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

@@ -87,7 +87,7 @@ export const TabContextMenu = ({
   return (
     <div
       ref={menuRef}
-      className="fixed z-50 min-w-[220px] overflow-hidden rounded-md border py-1 shadow-lg"
+      className="fixed z-50 min-w-[220px] overflow-hidden border py-1 shadow-lg"
       style={{
         left: clampedX,
         top: clampedY,

package/src/renderer/components/report/sections/CostSection.tsx

@@ -97,7 +97,7 @@ export const CostSection = ({
           <div className="mb-1.5 flex h-3 w-full overflow-hidden rounded-full">
             <div
               className="h-full"
-              style={{ width: `${parentPct}%`, backgroundColor: '#60a5fa' }}
+              style={{ width: `${parentPct}%`, backgroundColor: '#818cf8' }}
             />
             <div
               className="h-full"
@@ -108,7 +108,7 @@ export const CostSection = ({
             <div className="flex items-center gap-1.5">
               <span
                 className="inline-block size-2 rounded-full"
-                style={{ backgroundColor: '#60a5fa' }}
+                style={{ backgroundColor: '#818cf8' }}
               />
               <span className="text-text-secondary">主会话：{fmt(data.parentCostUsd)}</span>
             </div>

package/src/renderer/components/report/sections/InsightsSection.tsx

@@ -153,7 +153,7 @@ export const InsightsSection = ({
           <div className="mb-2 text-xs font-medium text-text-muted">
             Agent Tree ({agentTree.agentCount} agent{agentTree.agentCount !== 1 ? 's' : ''})
             {agentTree.hasTeamMode && (
-              <span className="ml-2 rounded px-1.5 py-0.5 text-xs" style={{ color: '#60a5fa' }}>
+              <span className="ml-2 rounded px-1.5 py-0.5 text-xs" style={{ color: '#818cf8' }}>
                 Team Mode
               </span>
             )}

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

@@ -191,7 +191,7 @@ export const ProviderRuntimeBackendSelector = ({
                       className="shrink-0 rounded-full px-1.5 py-0.5 text-[10px]"
                       style={{
                         color: '#93c5fd',
-                        backgroundColor: 'rgba(59, 130, 246, 0.14)',
+                        backgroundColor: 'rgba(99, 102, 241, 0.14)',
                       }}
                     >
                       {getProviderRuntimeBackendAudienceLabel(option)}
@@ -259,7 +259,7 @@ export const ProviderRuntimeBackendSelector = ({
                 className="rounded-full px-1.5 py-0.5 text-[10px]"
                 style={{
                   color: '#93c5fd',
-                  backgroundColor: 'rgba(59, 130, 246, 0.14)',
+                  backgroundColor: 'rgba(99, 102, 241, 0.14)',
                 }}
               >
                 {selectedAudienceLabel}