@yancyyu/openhermit 1.5.8

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

@@ -0,0 +1,176 @@
+/**
+ * TabBarActions - Right-side action buttons for the tab bar row.
+ * Extracted from TabBar to render once (not per-pane).
+ * Reads focused pane data from root store selectors (auto-synced via syncRootState).
+ */
+
+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 { Calendar, PanelRight, Puzzle, Users } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { MoreMenu } from './MoreMenu';
+
+export const TabBarActions = (): React.JSX.Element => {
+  const {
+    unreadCount,
+    openExtensionsTab,
+    openSchedulesTab,
+    openTeamsTab,
+    activeTabId,
+    openTabs,
+    tabSessionData,
+    sidebarCollapsed,
+    toggleSidebar,
+  } = useStore(
+    useShallow((s) => ({
+      unreadCount: s.unreadCount,
+      openExtensionsTab: s.openExtensionsTab,
+      openSchedulesTab: s.openSchedulesTab,
+      openTeamsTab: s.openTeamsTab,
+      activeTabId: s.activeTabId,
+      openTabs: s.openTabs,
+      tabSessionData: s.tabSessionData,
+      sidebarCollapsed: s.sidebarCollapsed,
+      toggleSidebar: s.toggleSidebar,
+    }))
+  );
+
+  // Hover states for buttons
+  const [teamsHover, setTeamsHover] = useState(false);
+  const [extensionsHover, setExtensionsHover] = useState(false);
+  const [schedulesHover, setSchedulesHover] = useState(false);
+  const [githubHover, setGithubHover] = useState(false);
+  const [expandHover, setExpandHover] = useState(false);
+
+  // Derive active tab and session detail for MoreMenu
+  const activeTab = useMemo(
+    () => openTabs.find((t) => t.id === activeTabId),
+    [openTabs, activeTabId]
+  );
+  const activeTabSessionDetail = activeTabId
+    ? (tabSessionData[activeTabId]?.sessionDetail ?? null)
+    : null;
+
+  return (
+    <div
+      className="ml-2 flex shrink-0 items-center gap-1"
+      style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+    >
+      {/* Primary app areas */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={openTeamsTab}
+            onMouseEnter={() => setTeamsHover(true)}
+            onMouseLeave={() => setTeamsHover(false)}
+            className="rounded-md p-2 transition-colors"
+            style={{
+              color: teamsHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+              backgroundColor: teamsHover ? 'var(--color-surface-raised)' : 'transparent',
+            }}
+            aria-label="团队"
+          >
+            <Users className="size-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">团队</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={openExtensionsTab}
+            onMouseEnter={() => setExtensionsHover(true)}
+            onMouseLeave={() => setExtensionsHover(false)}
+            className="rounded-md p-2 transition-colors"
+            style={{
+              color: extensionsHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+              backgroundColor: extensionsHover ? 'var(--color-surface-raised)' : 'transparent',
+            }}
+            aria-label="扩展"
+          >
+            <Puzzle className="size-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">扩展</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={openSchedulesTab}
+            onMouseEnter={() => setSchedulesHover(true)}
+            onMouseLeave={() => setSchedulesHover(false)}
+            className="rounded-md p-2 transition-colors"
+            style={{
+              color: schedulesHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+              backgroundColor: schedulesHover ? 'var(--color-surface-raised)' : 'transparent',
+            }}
+            aria-label="定时任务"
+          >
+            <Calendar className="size-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">定时任务</TooltipContent>
+      </Tooltip>
+
+      {/* GitHub link */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={async () => {
+              await api.openExternal('https://github.com/yancyuu/Hermit');
+            }}
+            onMouseEnter={() => setGithubHover(true)}
+            onMouseLeave={() => setGithubHover(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',
+            }}
+            aria-label="GitHub"
+          >
+            <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>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">GitHub</TooltipContent>
+      </Tooltip>
+
+      {/* More menu (Notifications, Settings, Search, Export, Analyze) */}
+      <MoreMenu
+        activeTab={activeTab}
+        activeTabSessionDetail={activeTabSessionDetail}
+        activeTabId={activeTabId}
+        unreadCount={unreadCount}
+      />
+
+      {/* Expand sidebar — rightmost, only when collapsed */}
+      {sidebarCollapsed && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={toggleSidebar}
+              onMouseEnter={() => setExpandHover(true)}
+              onMouseLeave={() => setExpandHover(false)}
+              className="mr-1 rounded-md p-2 transition-colors"
+              style={{
+                color: expandHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+                backgroundColor: expandHover ? 'var(--color-surface-raised)' : 'transparent',
+              }}
+              aria-label="展开侧边栏"
+            >
+              <PanelRight className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">展开侧边栏</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,99 @@
+/**
+ * TabBarRow - Full-width tab bar row rendered above the sidebar + content area.
+ * Renders pane-specific TabBars proportionally + new tab button on the right.
+ * Handles window drag region and focus indicator for multi-pane layouts.
+ */
+
+import { Fragment, useState } from 'react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { HEADER_ROW1_HEIGHT } from '@renderer/constants/layout';
+import { useStore } from '@renderer/store';
+import { Plus } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { TabBar } from './TabBar';
+import { TabBarActions } from './TabBarActions';
+
+export const TabBarRow = (): React.JSX.Element => {
+  const { panes, focusedPaneId, openDashboard } = useStore(
+    useShallow((s) => ({
+      panes: s.paneLayout.panes,
+      focusedPaneId: s.paneLayout.focusedPaneId,
+      openDashboard: s.openDashboard,
+    }))
+  );
+
+  const [newTabHover, setNewTabHover] = useState(false);
+
+  const isMacElectron = false;
+
+  return (
+    <div
+      className="flex shrink-0 items-center"
+      style={
+        {
+          height: `${HEADER_ROW1_HEIGHT}px`,
+          backgroundColor: 'var(--color-surface-sidebar)',
+          borderBottom: '1px solid var(--color-border)',
+          WebkitAppRegion: isMacElectron ? 'drag' : undefined,
+        } as React.CSSProperties
+      }
+    >
+      {/* Pane TabBars — proportional width, side by side */}
+      <div className="flex min-w-0 flex-1 self-stretch">
+        {panes.map((pane, i) => (
+          <Fragment key={pane.id}>
+            {/* Separator between pane TabBars */}
+            {i > 0 && (
+              <div
+                className="w-px shrink-0 self-stretch"
+                style={{ backgroundColor: 'var(--color-border-emphasis)' }}
+              />
+            )}
+
+            {/* Pane TabBar segment with focus indicator */}
+            <div
+              className="min-w-0"
+              style={{
+                width: `${pane.widthFraction * 100}%`,
+                borderTop:
+                  focusedPaneId === pane.id && panes.length > 1
+                    ? '2px solid var(--color-accent, #6366f1)'
+                    : '2px solid transparent',
+              }}
+            >
+              <TabBar paneId={pane.id} />
+            </div>
+          </Fragment>
+        ))}
+
+        {/* New tab button — right after last tab */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={openDashboard}
+              onMouseEnter={() => setNewTabHover(true)}
+              onMouseLeave={() => setNewTabHover(false)}
+              className="shrink-0 self-stretch px-2 transition-colors"
+              style={
+                {
+                  WebkitAppRegion: 'no-drag',
+                  color: newTabHover ? 'var(--color-text)' : 'var(--color-text-muted)',
+                  backgroundColor: newTabHover ? 'var(--color-surface-raised)' : 'transparent',
+                } as React.CSSProperties
+              }
+              aria-label="新建标签页"
+            >
+              <Plus className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">新建标签页（首页）</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Action buttons — right side */}
+      <TabBarActions />
+    </div>
+  );
+};

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

@@ -0,0 +1,171 @@
+/**
+ * TabContextMenu - Right-click context menu for tab actions.
+ * Supports close, close others, close all, bulk close for multi-select,
+ * and split left/right for pane management.
+ * Shows keyboard shortcut hints for actions that have them.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { formatShortcut } from '@renderer/utils/stringUtils';
+
+interface TabContextMenuProps {
+  x: number;
+  y: number;
+  tabId: string;
+  paneId: string;
+  selectedCount: number;
+  onClose: () => void;
+  onCloseTab: () => void;
+  onCloseOtherTabs: () => void;
+  onCloseAllTabs: () => void;
+  onCloseSelectedTabs?: () => void;
+  onSplitRight: () => void;
+  onSplitLeft: () => void;
+  disableSplit: boolean;
+  /** Whether this tab is a session tab (pin only applies to sessions) */
+  isSessionTab?: boolean;
+  /** Whether this session is currently pinned in the sidebar */
+  isPinned?: boolean;
+  /** Callback to toggle pin state */
+  onTogglePin?: () => void;
+  /** Whether this session is currently hidden from the sidebar */
+  isHidden?: boolean;
+  /** Callback to toggle hide state */
+  onToggleHide?: () => void;
+}
+
+export const TabContextMenu = ({
+  x,
+  y,
+  selectedCount,
+  onClose,
+  onCloseTab,
+  onCloseOtherTabs,
+  onCloseAllTabs,
+  onCloseSelectedTabs,
+  onSplitRight,
+  onSplitLeft,
+  disableSplit,
+  isSessionTab,
+  isPinned,
+  onTogglePin,
+  isHidden,
+  onToggleHide,
+}: TabContextMenuProps): React.JSX.Element => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on click-outside and Escape
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent): void => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  // Viewport clamping
+  const menuWidth = 240;
+  const menuHeight = selectedCount > 1 ? 220 : 196;
+  const clampedX = Math.min(x, window.innerWidth - menuWidth - 8);
+  const clampedY = Math.min(y, window.innerHeight - menuHeight - 8);
+
+  const handleClick = (action: () => void) => () => {
+    action();
+    onClose();
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 min-w-[220px] overflow-hidden rounded-md border py-1 shadow-lg"
+      style={{
+        left: clampedX,
+        top: clampedY,
+        backgroundColor: 'var(--color-surface-overlay)',
+        borderColor: 'var(--color-border-emphasis)',
+        color: 'var(--color-text)',
+      }}
+    >
+      {selectedCount > 1 && onCloseSelectedTabs ? (
+        <MenuItem
+          label={`关闭 ${selectedCount} 个标签页`}
+          onClick={handleClick(onCloseSelectedTabs)}
+        />
+      ) : (
+        <MenuItem
+          label="关闭标签页"
+          shortcut={formatShortcut('W')}
+          onClick={handleClick(onCloseTab)}
+        />
+      )}
+      <MenuItem label="关闭其他标签页" onClick={handleClick(onCloseOtherTabs)} />
+      <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+      <MenuItem
+        label="向右拆分"
+        shortcut={formatShortcut('\\')}
+        onClick={handleClick(onSplitRight)}
+        disabled={disableSplit}
+      />
+      <MenuItem label="向左拆分" onClick={handleClick(onSplitLeft)} disabled={disableSplit} />
+      {isSessionTab && onTogglePin && (
+        <>
+          <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+          <MenuItem
+            label={isPinned ? '从侧边栏取消固定' : '固定到侧边栏'}
+            onClick={handleClick(onTogglePin)}
+          />
+        </>
+      )}
+      {isSessionTab && onToggleHide && (
+        <MenuItem
+          label={isHidden ? '在侧边栏显示' : '从侧边栏隐藏'}
+          onClick={handleClick(onToggleHide)}
+        />
+      )}
+      <div className="mx-2 my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+      <MenuItem
+        label="关闭全部标签页"
+        shortcut={formatShortcut('W', { shift: true })}
+        onClick={handleClick(onCloseAllTabs)}
+      />
+    </div>
+  );
+};
+
+const MenuItem = ({
+  label,
+  shortcut,
+  onClick,
+  disabled,
+}: {
+  label: string;
+  shortcut?: string;
+  onClick: () => void;
+  disabled?: boolean;
+}): React.JSX.Element => {
+  return (
+    <button
+      className="flex w-full items-center justify-between px-3 py-1.5 text-left text-sm transition-colors hover:bg-[var(--color-surface-raised)]"
+      onClick={onClick}
+      disabled={disabled}
+      style={{ opacity: disabled ? 0.4 : 1 }}
+    >
+      <span>{label}</span>
+      {shortcut && (
+        <span className="ml-4 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+          {shortcut}
+        </span>
+      )}
+    </button>
+  );
+};

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

@@ -0,0 +1,186 @@
+/**
+ * TabbedLayout - Main layout with full-width tab bar, sidebar, and multi-pane content.
+ *
+ * Layout structure:
+ * - TabBarRow (full width): Pane TabBars + action buttons
+ * - Sidebar (280px): Task list / date-grouped sessions
+ * - Main content: PaneContainer with one or more panes
+ *
+ * Owns the DndContext for tab drag-and-drop across the entire layout
+ * (TabBarRow tabs + PaneContainer split zones).
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  pointerWithin,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
+import { useStore } from '@renderer/store';
+import { useShallow } from 'zustand/react/shallow';
+
+import { CliInstallWarningBanner } from '../common/CliInstallWarningBanner';
+import { GlobalProviderStatusHeader } from '../common/GlobalProviderStatusHeader';
+import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
+import { CommandPalette } from '../search/CommandPalette';
+import { GlobalTaskDetailDialog } from '../team/dialogs/GlobalTaskDetailDialog';
+
+import { PaneContainer } from './PaneContainer';
+import { Sidebar } from './Sidebar';
+import { DragOverlayTab } from './SortableTab';
+import { TabBarRow } from './TabBarRow';
+
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import type { Tab } from '@renderer/types/tabs';
+
+export const TabbedLayout = (): React.JSX.Element => {
+  useKeyboardShortcuts();
+
+  // --- DnD state (lifted from PaneContainer) ---
+  const { panes, activeTabId } = useStore(
+    useShallow((s) => ({
+      panes: s.paneLayout.panes,
+      activeTabId: s.activeTabId,
+    }))
+  );
+  const [activeTab, setActiveTab] = useState<Tab | null>(null);
+  const activeTabType = useMemo(() => {
+    if (!activeTabId) return null;
+    for (const pane of panes) {
+      const tab = pane.tabs.find((item) => item.id === activeTabId);
+      if (tab) return tab.type;
+    }
+    return null;
+  }, [activeTabId, panes]);
+  const showSidebar = activeTabType === 'team';
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      const data = active.data.current;
+
+      if (data?.type === 'tab') {
+        const sourcePaneId = data.paneId as string;
+        const tabId = data.tabId as string;
+
+        const pane = panes.find((p) => p.id === sourcePaneId);
+        const tab = pane?.tabs.find((t) => t.id === tabId);
+        if (tab) {
+          setActiveTab(tab);
+        }
+      }
+    },
+    [panes]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      setActiveTab(null);
+
+      if (!over || !active.data.current) return;
+
+      const activeData = active.data.current;
+      const overData = over.data.current;
+
+      if (activeData.type !== 'tab') return;
+
+      const draggedTabId = activeData.tabId as string;
+      const sourcePaneId = activeData.paneId as string;
+      const state = useStore.getState();
+
+      // Case 1: Drop on a split-zone (edge of pane) → create new pane
+      if (overData?.type === 'split-zone') {
+        const targetPaneId = overData.paneId as string;
+        const side = overData.side as 'left' | 'right';
+        state.moveTabToNewPane(draggedTabId, sourcePaneId, targetPaneId, side);
+        return;
+      }
+
+      // Case 2: Drop on a tabbar (different pane) → move tab to that pane
+      if (overData?.type === 'tabbar') {
+        const targetPaneId = overData.paneId as string;
+        if (sourcePaneId !== targetPaneId) {
+          state.moveTabToPane(draggedTabId, sourcePaneId, targetPaneId);
+        }
+        return;
+      }
+
+      // Case 3: Drop on another sortable tab
+      if (overData?.type === 'tab') {
+        const overTabId = overData.tabId as string;
+        const overPaneId = overData.paneId as string;
+
+        if (sourcePaneId === overPaneId) {
+          const pane = panes.find((p) => p.id === sourcePaneId);
+          if (!pane) return;
+
+          const fromIndex = pane.tabs.findIndex((t) => t.id === draggedTabId);
+          const toIndex = pane.tabs.findIndex((t) => t.id === overTabId);
+
+          if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+            state.reorderTabInPane(sourcePaneId, fromIndex, toIndex);
+          }
+        } else {
+          const targetPane = panes.find((p) => p.id === overPaneId);
+          if (!targetPane) return;
+
+          const insertIndex = targetPane.tabs.findIndex((t) => t.id === overTabId);
+          state.moveTabToPane(draggedTabId, sourcePaneId, overPaneId, insertIndex);
+        }
+      }
+    },
+    [panes]
+  );
+
+  return (
+    <div className="flex h-screen flex-col bg-claude-dark-bg text-claude-dark-text">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={pointerWithin}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <TabBarRow />
+        <CliInstallWarningBanner />
+        <GlobalProviderStatusHeader />
+        <div className="flex flex-1 overflow-hidden">
+          {/* Command Palette (Cmd+K) */}
+          <CommandPalette />
+
+          {/* Content area */}
+          <div
+            className="relative flex min-w-0 flex-1 flex-col overflow-hidden"
+            style={{ background: 'transparent' }}
+          >
+            <PaneContainer />
+          </div>
+
+          {/* Sidebar - only for team detail tabs */}
+          {showSidebar ? <Sidebar /> : null}
+        </div>
+
+        {/* Drag overlay - semi-transparent ghost of the dragged tab */}
+        <DragOverlay dropAnimation={null}>
+          {activeTab ? <DragOverlayTab tab={activeTab} /> : null}
+        </DragOverlay>
+      </DndContext>
+      <GlobalTaskDetailDialog />
+      <WorkspaceIndicator />
+    </div>
+  );
+};