@yancyyu/openhermit 1.6.29 → 1.6.31

package/src/renderer/components/team/dialogs/useTeamEditForm.ts

@@ -0,0 +1,283 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { useStore } from '@renderer/store';
+import { isTeamProvisioningActive } from '@renderer/store/slices/teamSlice';
+import { useShallow } from 'zustand/react/shallow';
+
+import type { GlobalProvider } from '@shared/types';
+import type { CcAgentType } from '@shared/types/ccConnect';
+
+type SavePhase = 'idle' | 'saving' | 'restarting' | 'done';
+
+export interface UseTeamEditFormReturn {
+  loading: boolean;
+  isProvisioning: boolean;
+  name: string;
+  setName: (v: string) => void;
+  description: string;
+  setDescription: (v: string) => void;
+  agentType: string;
+  setAgentType: (v: string) => void;
+  permissionMode: string;
+  setPermissionMode: (v: string) => void;
+  workDir: string;
+  setWorkDir: (v: string) => void;
+  language: string;
+  setLanguage: (v: string) => void;
+  managedSources: string;
+  setManagedSources: (v: string) => void;
+  feishuAllowFrom: string;
+  setFeishuAllowFrom: (v: string) => void;
+  disabledCommandsInput: string;
+  setDisabledCommandsInput: (v: string) => void;
+  providerRef: string;
+  setProviderRef: (v: string) => void;
+  showContextIndicator: boolean;
+  setShowContextIndicator: (v: boolean) => void;
+  replyFooter: boolean;
+  setReplyFooter: (v: boolean) => void;
+  injectSender: boolean;
+  setInjectSender: (v: boolean) => void;
+  color: string;
+  compatibleProviders: GlobalProvider[];
+  canDelete: boolean;
+  /** Current phase of the save+restart lifecycle */
+  savePhase: SavePhase;
+  /** true while saving or restarting (button spinner / disable) */
+  saving: boolean;
+  error: string | null;
+  clearError: () => void;
+  handleSave: () => void;
+}
+
+const PERMISSION_MODE_OPTIONS = [
+  { value: 'default', label: '默认' },
+  { value: 'acceptEdits', label: '自动接受编辑' },
+  { value: 'bypassPermissions', label: '跳过权限确认' },
+  { value: 'plan', label: '计划模式' },
+] as const;
+
+export { PERMISSION_MODE_OPTIONS };
+
+export function useTeamEditForm(teamName: string, open: boolean): UseTeamEditFormReturn {
+  // ── Store reads ──────────────────────────────────────────────
+  const { data, fetchTeams, selectTeam } = useStore(
+    useShallow((s) => ({
+      data: s.selectedTeamName === teamName ? s.selectedTeamData : null,
+      fetchTeams: s.fetchTeams,
+      selectTeam: s.selectTeam,
+    }))
+  );
+  const isProvisioning = useStore((s) => isTeamProvisioningActive(s, teamName));
+
+  // ── Derived defaults ─────────────────────────────────────────
+  const rawSettings = useMemo(
+    () => (data?.settings ?? {}) as Record<string, unknown>,
+    [data?.settings]
+  );
+
+  const defaults = useMemo(() => {
+    const cfg = data?.config;
+    const d = data as Record<string, unknown> | null;
+    return {
+      name: cfg?.name ?? '',
+      description: cfg?.description ?? '',
+      color: cfg?.color ?? '',
+      agentType: cfg?.agentType ?? (d?.harness as string | undefined) ?? 'cursor',
+      workDir: (d?.workDir as string | undefined) ?? cfg?.projectPath ?? '',
+      permissionMode: cfg?.permissionMode ?? (d?.permissionMode as string | undefined) ?? 'default',
+      language:
+        cfg?.language ?? (typeof rawSettings.language === 'string' ? rawSettings.language : 'zh'),
+      managedSources:
+        cfg?.managedSources ??
+        (typeof rawSettings.admin_from === 'string' ? rawSettings.admin_from : '*'),
+      disabledCommands: Array.isArray(cfg?.disabledCommands)
+        ? cfg.disabledCommands
+        : Array.isArray(rawSettings.disabled_commands)
+          ? (rawSettings.disabled_commands as unknown[]).filter(
+              (entry): entry is string => typeof entry === 'string' && entry.trim().length > 0
+            )
+          : [],
+      platformAllowFrom:
+        cfg?.platformAllowFrom ??
+        (typeof rawSettings.platform_allow_from === 'object' &&
+        rawSettings.platform_allow_from !== null &&
+        !Array.isArray(rawSettings.platform_allow_from)
+          ? (rawSettings.platform_allow_from as Record<string, string>)
+          : {}),
+      providerRefs: data?.providerRefs ?? [],
+      globalProviders: data?.globalProviders ?? [],
+      showContextIndicator:
+        cfg?.showContextIndicator ??
+        (typeof rawSettings.show_context_indicator === 'boolean'
+          ? rawSettings.show_context_indicator
+          : true),
+      replyFooter:
+        cfg?.replyFooter ??
+        (typeof rawSettings.reply_footer === 'boolean' ? rawSettings.reply_footer : true),
+      injectSender:
+        cfg?.injectSender ??
+        (typeof rawSettings.inject_sender === 'boolean' ? rawSettings.inject_sender : false),
+    };
+  }, [data, rawSettings]);
+
+  // ── Local form state ─────────────────────────────────────────
+  const [name, setName] = useState(defaults.name);
+  const [description, setDescription] = useState(defaults.description);
+  const [agentType, setAgentType] = useState(defaults.agentType);
+  const [permissionMode, setPermissionMode] = useState(defaults.permissionMode);
+  const [workDir, setWorkDir] = useState(defaults.workDir);
+  const [language, setLanguage] = useState(defaults.language);
+  const [managedSources, setManagedSources] = useState(defaults.managedSources);
+  const [disabledCommandsInput, setDisabledCommandsInput] = useState(
+    defaults.disabledCommands.join(', ')
+  );
+  const [feishuAllowFrom, setFeishuAllowFrom] = useState(defaults.platformAllowFrom.feishu ?? '*');
+  const [providerRef, setProviderRef] = useState(defaults.providerRefs[0] ?? '');
+  const [showContextIndicator, setShowContextIndicator] = useState(defaults.showContextIndicator);
+  const [replyFooter, setReplyFooter] = useState(defaults.replyFooter);
+  const [injectSender, setInjectSender] = useState(defaults.injectSender);
+
+  // ── Single async lifecycle state ─────────────────────────────
+  const [savePhase, setSavePhase] = useState<SavePhase>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const saving = savePhase === 'saving' || savePhase === 'restarting';
+
+  // ── Refs ─────────────────────────────────────────────────────
+  const defaultsRef = useRef(defaults);
+  if (defaults.name) {
+    defaultsRef.current = defaults;
+  }
+
+  // ── Reset form when dialog opens ─────────────────────────────
+  const prevOpenRef = useRef(false);
+  useEffect(() => {
+    if (!open || prevOpenRef.current) {
+      prevOpenRef.current = open;
+      return;
+    }
+    prevOpenRef.current = true;
+    const d = defaultsRef.current;
+    setSavePhase('idle');
+    setError(null);
+    setName(d.name);
+    setDescription(d.description);
+    setAgentType(d.agentType);
+    setPermissionMode(d.permissionMode);
+    setWorkDir(d.workDir);
+    setLanguage(d.language);
+    setManagedSources(d.managedSources);
+    setDisabledCommandsInput(d.disabledCommands.join(', '));
+    setFeishuAllowFrom(d.platformAllowFrom.feishu ?? '*');
+    setProviderRef(d.providerRefs[0] ?? '');
+    setShowContextIndicator(d.showContextIndicator);
+    setReplyFooter(d.replyFooter);
+    setInjectSender(d.injectSender);
+  }, [open]);
+
+  // ── Computed values ──────────────────────────────────────────
+  const compatibleProviders = useMemo(
+    () =>
+      defaults.globalProviders.filter(
+        (p) =>
+          !p.agent_types ||
+          p.agent_types.length === 0 ||
+          (p.agent_types as string[]).includes(agentType)
+      ),
+    [defaults.globalProviders, agentType]
+  );
+  const canDelete = teamName !== 'default' && teamName !== 'my-project';
+
+  // ── Actions ──────────────────────────────────────────────────
+  const clearError = (): void => setError(null);
+
+  const handleSave = (): void => {
+    if (!name.trim()) {
+      setError('团队名称不能为空');
+      return;
+    }
+    if (savePhase !== 'idle') return;
+
+    const disabledCommands = disabledCommandsInput
+      .split(',')
+      .map((e) => e.trim())
+      .filter((e) => e.length > 0);
+    const feishu = feishuAllowFrom.trim();
+
+    setSavePhase('saving');
+    setError(null);
+
+    void (async () => {
+      try {
+        await api.teams.updateConfig(teamName, {
+          name: name.trim(),
+          description: description.trim(),
+          color: defaultsRef.current.color,
+          agentType: agentType.trim() || undefined,
+          workDir: workDir.trim() || undefined,
+          permissionMode: permissionMode.trim() || undefined,
+          showContextIndicator,
+          replyFooter,
+          injectSender,
+          language: language.trim() || undefined,
+          managedSources: managedSources.trim() || undefined,
+          disabledCommands,
+          platformAllowFrom: feishu ? { feishu } : {},
+          providerRefs: providerRef ? [providerRef] : [],
+        });
+
+        setSavePhase('restarting');
+        await api.ccSettings.restart();
+
+        // Small grace period so the user sees "restarting" feedback
+        await new Promise((r) => setTimeout(r, 800));
+
+        await Promise.all([fetchTeams(), selectTeam(teamName)]);
+        setSavePhase('done');
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '保存失败');
+        setSavePhase('idle');
+      }
+    })();
+  };
+
+  return {
+    loading: !data,
+    isProvisioning,
+    name,
+    setName,
+    description,
+    setDescription,
+    agentType,
+    setAgentType,
+    permissionMode,
+    setPermissionMode,
+    workDir,
+    setWorkDir,
+    language,
+    setLanguage,
+    managedSources,
+    setManagedSources,
+    feishuAllowFrom,
+    setFeishuAllowFrom,
+    disabledCommandsInput,
+    setDisabledCommandsInput,
+    providerRef,
+    setProviderRef,
+    showContextIndicator,
+    setShowContextIndicator,
+    replyFooter,
+    setReplyFooter,
+    injectSender,
+    setInjectSender,
+    color: defaults.color,
+    compatibleProviders,
+    canDelete,
+    savePhase,
+    saving,
+    error,
+    clearError,
+    handleSave,
+  };
+}

package/src/renderer/components/team/kanban/KanbanBoard.tsx

@@ -361,49 +361,26 @@ export const KanbanBoard = ({
     columnTasks: TeamTask[],
     compact?: boolean
   ): React.JSX.Element => {
-    const addHandler =
-      onAddTask && columnId === 'todo'
-        ? () => onAddTask(false)
-        : onAddTask && columnId === 'in_progress'
-          ? () => onAddTask(true)
-          : undefined;
-
-    const addButton = addHandler ? (
-      <button
-        type="button"
-        onClick={addHandler}
-        className="flex w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-[var(--color-border)] p-3 text-xs text-[var(--color-text-muted)] transition-colors hover:border-[var(--color-border-emphasis)] hover:text-[var(--color-text-secondary)]"
-      >
-        <Plus size={13} />
-        Add task
-      </button>
-    ) : null;
-
     if (columnTasks.length === 0) {
       return (
-        addButton ?? (
-          <div className="rounded-md border border-dashed border-[var(--color-border)] p-3 text-xs text-[var(--color-text-muted)]">
-            No tasks
-          </div>
-        )
+        <div className="rounded-md border border-dashed border-[var(--color-border)] p-3 text-xs text-[var(--color-text-muted)]">
+          No tasks
+        </div>
       );
     }
     if (enableTaskSorting) {
       const itemIds = columnTasks.map((t) => t.id);
       return (
-        <>
-          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
-            {columnTasks.map((task) => (
-              <SortableKanbanTaskCard
-                key={task.id}
-                task={task}
-                columnId={columnId}
-                memberColorMap={memberColorMap}
-              />
-            ))}
-          </SortableContext>
-          {addButton}
-        </>
+        <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+          {columnTasks.map((task) => (
+            <SortableKanbanTaskCard
+              key={task.id}
+              task={task}
+              columnId={columnId}
+              memberColorMap={memberColorMap}
+            />
+          ))}
+        </SortableContext>
       );
     }
     return (
@@ -432,7 +409,6 @@ export const KanbanBoard = ({
             onDeleteTask={onDeleteTask}
           />
         ))}
-        {addButton}
       </>
     );
   };
@@ -614,36 +590,22 @@ export const KanbanBoard = ({
         </div>
       ) : (
         <div className="w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden px-1 pb-6 pr-4 pt-2">
-          <div className="flex min-w-max items-start pr-1">
-            {visibleColumns.map((column, index) => {
+          <div className="flex w-full items-start gap-3">
+            {visibleColumns.map((column) => {
               const columnTasks = groupedOrdered.get(column.id) ?? [];
               const accent = COLUMN_ACCENTS[column.id as 'todo' | 'in_progress' | 'done'];
-              const width = columnWidths.get(column.id) ?? 256;
-              const handleProps = getHandleProps(column.id);
               return (
-                <div key={column.id} className="flex shrink-0">
-                  <div style={{ width }}>
-                    <KanbanColumn
-                      title={column.title}
-                      count={columnTasks.length}
-                      icon={accent.icon}
-                      headerBg={accent.headerBg}
-                      bodyBg={accent.bodyBg}
-                      bodyClassName="max-h-none overflow-visible"
-                    >
-                      {renderCards(column.id, columnTasks, true)}
-                    </KanbanColumn>
-                  </div>
-                  {index < visibleColumns.length - 1 ? (
-                    <div
-                      className="group relative mx-0.5 flex items-center justify-center"
-                      onPointerDown={handleProps.onPointerDown}
-                      style={handleProps.style}
-                      aria-label={handleProps['aria-label']}
-                    >
-                      <div className="h-full w-px bg-[var(--color-border)] transition-colors group-hover:bg-blue-500/50 group-active:bg-blue-500" />
-                    </div>
-                  ) : null}
+                <div key={column.id} className="min-w-0 flex-1">
+                  <KanbanColumn
+                    title={column.title}
+                    count={columnTasks.length}
+                    icon={accent.icon}
+                    headerBg={accent.headerBg}
+                    bodyBg={accent.bodyBg}
+                    bodyClassName="max-h-none overflow-visible"
+                  >
+                    {renderCards(column.id, columnTasks, true)}
+                  </KanbanColumn>
                 </div>
               );
             })}

package/src/renderer/components/team/messages/MessagesPanel.tsx

@@ -208,7 +208,8 @@ export const MessagesPanel = memo(function MessagesPanel({
     teams,
     openTeamTab,
     messages,
-    messagesState,
+    hasMore,
+    loadingOlderMessages,
     loadOlderTeamMessages,
     refreshTeamMessagesHead,
     addOptimisticTeamMessage,
@@ -224,7 +225,13 @@ export const MessagesPanel = memo(function MessagesPanel({
       teams: s.teams,
       openTeamTab: s.openTeamTab,
       messages: selectTeamMessages(s, teamName),
-      messagesState: teamName ? s.teamMessagesByName[teamName] : undefined,
+      // Subscribe to only the primitive flags the panel renders. The full
+      // cache entry object is rebuilt on every (even no-op) head refresh —
+      // selecting it wholesale would re-render this heavy panel every poll.
+      hasMore: teamName ? (s.teamMessagesByName[teamName]?.hasMore ?? false) : false,
+      loadingOlderMessages: teamName
+        ? (s.teamMessagesByName[teamName]?.loadingOlder ?? false)
+        : false,
       loadOlderTeamMessages: s.loadOlderTeamMessages,
       refreshTeamMessagesHead: s.refreshTeamMessagesHead,
       addOptimisticTeamMessage: s.addOptimisticTeamMessage,
@@ -233,16 +240,15 @@ export const MessagesPanel = memo(function MessagesPanel({
   const bootstrapHeadRefreshAttemptedForTeamRef = useRef<string | null>(null);
 
   const loadOlderMessages = useCallback(async () => {
-    if (!messagesState?.hasMore || messagesState.loadingHead || messagesState.loadingOlder) {
+    // Read the live cache entry instead of subscribing to it — loadingHead
+    // toggles on every background head refresh and must not re-render us.
+    const entry = useStore.getState().teamMessagesByName[teamName];
+    if (!entry?.hasMore || entry.loadingHead || entry.loadingOlder) {
       return;
     }
     await loadOlderTeamMessages(teamName);
-  }, [loadOlderTeamMessages, messagesState, teamName]);
+  }, [loadOlderTeamMessages, teamName]);
 
-  const messagesLoading =
-    (messagesState?.loadingHead ?? false) || (messagesState?.loadingOlder ?? false);
-  const loadingOlderMessages = messagesState?.loadingOlder ?? false;
-  const hasMore = messagesState?.hasMore ?? false;
   const effectiveMessages = messages;
   const loadedMessageCount = effectiveMessages.length;
   const autoLoadOlderLockRef = useRef(false);
@@ -271,12 +277,11 @@ export const MessagesPanel = memo(function MessagesPanel({
 
   const maybeAutoLoadOlderMessages = useCallback(
     (scrollTop: number) => {
-      if (
-        scrollTop > AUTO_LOAD_OLDER_SCROLL_TOP_PX ||
-        !hasMore ||
-        messagesState?.loadingHead ||
-        loadingOlderMessages
-      ) {
+      if (scrollTop > AUTO_LOAD_OLDER_SCROLL_TOP_PX || !hasMore || loadingOlderMessages) {
+        return;
+      }
+      // loadingHead is read live (not subscribed) to avoid per-poll re-renders.
+      if (useStore.getState().teamMessagesByName[teamName]?.loadingHead) {
         return;
       }
       if (autoLoadOlderLockRef.current) {
@@ -285,7 +290,7 @@ export const MessagesPanel = memo(function MessagesPanel({
       autoLoadOlderLockRef.current = true;
       void loadOlderMessages();
     },
-    [hasMore, loadOlderMessages, loadingOlderMessages, messagesState?.loadingHead]
+    [hasMore, loadOlderMessages, loadingOlderMessages, teamName]
   );
 
   useEffect(() => {
@@ -379,7 +384,9 @@ export const MessagesPanel = memo(function MessagesPanel({
     return () => {
       cancelled = true;
     };
-  }, [teamName]);
+    // Refetch when the lead session id changes (e.g. a new session is spawned)
+    // so the session list/selector reflects the updated id without a remount.
+  }, [teamName, currentLeadSessionId]);
 
   const selectedSession = useMemo(
     () => teamSessions.find((session) => session.sessionKey === selectedSessionKey) ?? null,
@@ -455,7 +462,10 @@ export const MessagesPanel = memo(function MessagesPanel({
       bootstrapHeadRefreshAttemptedForTeamRef.current = null;
       return;
     }
-    if (messagesState?.loadingHead || messagesState?.loadingOlder) {
+    // Read loading flags live rather than subscribing — they toggle on every
+    // background head refresh and must not drive this bootstrap effect.
+    const entry = useStore.getState().teamMessagesByName[teamName];
+    if (entry?.loadingHead || entry?.loadingOlder) {
       return;
     }
     if (bootstrapHeadRefreshAttemptedForTeamRef.current === teamName) {
@@ -463,13 +473,7 @@ export const MessagesPanel = memo(function MessagesPanel({
     }
     bootstrapHeadRefreshAttemptedForTeamRef.current = teamName;
     void refreshTeamMessagesHead(teamName).catch(() => undefined);
-  }, [
-    effectiveMessages.length,
-    messagesState?.loadingHead,
-    messagesState?.loadingOlder,
-    refreshTeamMessagesHead,
-    teamName,
-  ]);
+  }, [effectiveMessages.length, refreshTeamMessagesHead, teamName]);
 
   useLayoutEffect(() => {
     if (position !== 'sidebar') return;

package/src/renderer/components/terminal/TerminalPanel.tsx

@@ -0,0 +1,156 @@
+/**
+ * TerminalPanel — a good-looking, read-only terminal-style panel for rendering
+ * command / CLI output faithfully.
+ *
+ * Unlike the structured markdown renderers, this preserves the raw terminal feel:
+ *   - full ANSI color / decoration fidelity (via `anser`)
+ *   - monospace, whitespace-exact output
+ *   - carriage-return (\r) overwrite handling so progress bars settle to their
+ *     final frame instead of dumping every intermediate line
+ *   - optional `$ command` prompt line so a Bash call reads like a real terminal
+ *
+ * It is intentionally lightweight (no xterm.js / node-pty): the session view is a
+ * read-only viewer of recorded output, so we only need faithful rendering, not a
+ * live PTY.
+ */
+
+import { useMemo, useState } from 'react';
+
+import Anser, { type AnserJsonEntry } from 'anser';
+import { Check, Copy } from 'lucide-react';
+
+interface TerminalPanelProps {
+  /** Raw output text, may contain ANSI escape sequences. */
+  text: string;
+  /** Optional command to render as a `$ command` prompt line above the output. */
+  command?: string;
+  /** Optional label shown in the header bar (e.g. a short description). */
+  title?: string;
+  /** Max body height in px before scrolling. Defaults to 384. */
+  maxHeight?: number;
+  className?: string;
+}
+
+/**
+ * Collapse carriage-return overwrites within each line and strip non-color
+ * escape sequences (cursor moves, screen clears, OSC) that would otherwise
+ * render as garbage. SGR color codes are left intact for `anser`.
+ */
+function normalizeTerminalText(raw: string): string {
+  // Strip OSC sequences: ESC ] ... BEL  or  ESC ] ... ESC \
+  let out = raw.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+  // Strip CSI sequences that are NOT SGR ("m"): cursor movement, erase, etc.
+  out = out.replace(/\x1b\[[0-9;?]*[A-Za-ln-z]/g, '');
+  // Collapse \r overwrites per line: later segments overwrite earlier from col 0.
+  out = out
+    .split('\n')
+    .map((line) => {
+      if (!line.includes('\r')) return line;
+      let acc = '';
+      for (const seg of line.split('\r')) {
+        acc = seg.length >= acc.length ? seg : seg + acc.slice(seg.length);
+      }
+      return acc;
+    })
+    .join('\n');
+  return out;
+}
+
+function styleForSegment(seg: AnserJsonEntry): React.CSSProperties {
+  const style: React.CSSProperties = {};
+  if (seg.fg) style.color = `rgb(${seg.fg})`;
+  if (seg.bg) style.backgroundColor = `rgb(${seg.bg})`;
+  const decorations = seg.decorations ?? [];
+  if (decorations.includes('bold')) style.fontWeight = 600;
+  if (decorations.includes('italic')) style.fontStyle = 'italic';
+  if (decorations.includes('underline')) style.textDecoration = 'underline';
+  if (decorations.includes('dim')) style.opacity = 0.6;
+  return style;
+}
+
+const MONO_FONT =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+
+export const TerminalPanel = ({
+  text,
+  command,
+  title,
+  maxHeight = 384,
+  className,
+}: TerminalPanelProps): React.JSX.Element => {
+  const [copied, setCopied] = useState(false);
+
+  const segments = useMemo<AnserJsonEntry[]>(
+    () =>
+      Anser.ansiToJson(normalizeTerminalText(text ?? ''), {
+        json: true,
+        use_classes: false,
+        remove_empty: false,
+      }),
+    [text]
+  );
+
+  const handleCopy = (): void => {
+    const payload = command ? `$ ${command}\n${text ?? ''}` : (text ?? '');
+    void navigator.clipboard?.writeText(payload).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <div
+      className={`overflow-hidden rounded-lg border ${className ?? ''}`}
+      style={{ borderColor: 'rgba(255,255,255,0.08)', backgroundColor: '#0c0c0f' }}
+    >
+      {/* Header / window chrome */}
+      <div
+        className="flex items-center gap-2 px-3 py-1.5"
+        style={{
+          backgroundColor: '#16161b',
+          borderBottom: '1px solid rgba(255,255,255,0.06)',
+        }}
+      >
+        <span className="flex items-center gap-1.5">
+          <span className="size-2.5 rounded-full" style={{ backgroundColor: '#ff5f57' }} />
+          <span className="size-2.5 rounded-full" style={{ backgroundColor: '#febc2e' }} />
+          <span className="size-2.5 rounded-full" style={{ backgroundColor: '#28c840' }} />
+        </span>
+        <span
+          className="ml-1 flex-1 truncate text-[11px]"
+          style={{ color: 'rgba(255,255,255,0.45)', fontFamily: MONO_FONT }}
+        >
+          {title ?? (command ? command : 'terminal')}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors"
+          style={{ color: 'rgba(255,255,255,0.45)' }}
+          title="复制"
+        >
+          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+          {copied ? '已复制' : '复制'}
+        </button>
+      </div>
+
+      {/* Body */}
+      <pre
+        className="overflow-auto whitespace-pre-wrap break-all px-3 py-2.5 text-xs leading-relaxed"
+        style={{ maxHeight, fontFamily: MONO_FONT, color: '#d4d4d4', margin: 0 }}
+      >
+        {command && (
+          <div className="mb-1">
+            <span style={{ color: '#28c840' }}>$ </span>
+            <span style={{ color: '#e8e8e8' }}>{command}</span>
+          </div>
+        )}
+        {segments.map((seg, i) => (
+          <span key={i} style={styleForSegment(seg)}>
+            {seg.content}
+          </span>
+        ))}
+      </pre>
+    </div>
+  );
+};

package/src/renderer/hooks/useExtensionsTabState.ts

@@ -16,7 +16,7 @@ import type {
   PluginSortField,
 } from '@shared/types/extensions';
 
-export type ExtensionsSubTab = 'plugins' | 'mcp-servers' | 'skills' | 'api-keys';
+export type ExtensionsSubTab = 'plugins' | 'mcp-servers' | 'skills' | 'env-vars';
 export type SkillsSortState = 'name-asc' | 'recent-desc';
 
 interface PluginSortState {
@@ -33,7 +33,7 @@ const DEFAULT_FILTERS: PluginFilters = {
 
 export function useExtensionsTabState() {
   // ── Sub-tab navigation ──
-  const [activeSubTab, setActiveSubTab] = useState<ExtensionsSubTab>('mcp-servers');
+  const [activeSubTab, setActiveSubTab] = useState<ExtensionsSubTab>('plugins');
 
   // ── Plugin filters & sort ──
   const [pluginFilters, setPluginFilters] = useState<PluginFilters>(DEFAULT_FILTERS);