@yancyyu/openhermit 1.5.8

package/src/renderer/components/extensions/apikeys/ApiKeyCard.tsx

@@ -0,0 +1,143 @@
+/**
+ * ApiKeyCard — displays a single API key entry with edit/delete controls.
+ */
+
+import { useState } from 'react';
+
+import { Badge } from '@renderer/components/ui/badge';
+import { Button } from '@renderer/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { Check, Copy, Pencil, Trash2 } from 'lucide-react';
+
+import type { ApiKeyEntry } from '@shared/types/extensions';
+
+interface ApiKeyCardProps {
+  apiKey: ApiKeyEntry;
+  onEdit: (key: ApiKeyEntry) => void;
+}
+
+export const ApiKeyCard = ({ apiKey, onEdit }: ApiKeyCardProps): React.JSX.Element => {
+  const deleteApiKey = useStore((s) => s.deleteApiKey);
+  const [copied, setCopied] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const handleCopyEnvVar = async (): Promise<void> => {
+    await navigator.clipboard.writeText(apiKey.envVarName);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const handleDelete = (): void => {
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      setTimeout(() => setConfirmDelete(false), 3000);
+      return;
+    }
+    void deleteApiKey(apiKey.id).catch(() => undefined);
+    setConfirmDelete(false);
+  };
+
+  const createdDate = new Date(apiKey.createdAt).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <div className="flex flex-col gap-2.5 rounded-lg border border-border bg-surface p-4 transition-colors hover:border-border-emphasis">
+      {/* Name + scope badge */}
+      <div className="flex items-start justify-between gap-2">
+        <h3 className="truncate text-sm font-medium text-text">{apiKey.name}</h3>
+        <Badge
+          variant="outline"
+          className={
+            apiKey.scope === 'user'
+              ? 'border-blue-500/30 bg-blue-500/10 text-blue-400'
+              : 'border-purple-500/30 bg-purple-500/10 text-purple-400'
+          }
+        >
+          {apiKey.scope}
+        </Badge>
+      </div>
+
+      {apiKey.scope === 'project' && apiKey.projectPath && (
+        <p className="truncate text-xs text-text-muted" title={apiKey.projectPath}>
+          {apiKey.projectPath}
+        </p>
+      )}
+
+      {/* Env var name */}
+      <div className="flex items-center gap-1.5">
+        <code className="rounded bg-surface-raised px-1.5 py-0.5 text-xs text-blue-400">
+          {apiKey.envVarName}
+        </code>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-5"
+                onClick={() => void handleCopyEnvVar()}
+              >
+                {copied ? (
+                  <Check className="size-3 text-emerald-400" />
+                ) : (
+                  <Copy className="size-3 text-text-muted" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{copied ? 'Copied!' : 'Copy env var name'}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Masked value */}
+      <p className="font-mono text-xs text-text-muted">{apiKey.maskedValue}</p>
+
+      {/* Footer: date + actions */}
+      <div className="flex items-center justify-between pt-1">
+        <span className="text-xs text-text-muted">{createdDate}</span>
+        <div className="flex items-center gap-1">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  onClick={() => onEdit(apiKey)}
+                >
+                  <Pencil className="size-3.5 text-text-muted" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Edit</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={`size-7 ${confirmDelete ? 'text-red-400 hover:bg-red-500/10' : 'text-text-muted'}`}
+                  onClick={handleDelete}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{confirmDelete ? 'Click again to confirm' : 'Delete'}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/renderer/components/extensions/apikeys/ApiKeyFormDialog.tsx

@@ -0,0 +1,282 @@
+/**
+ * ApiKeyFormDialog — create or edit an API key entry.
+ * Edit mode pre-fills all fields except the value (which must be re-entered).
+ */
+
+import { useEffect, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@renderer/components/ui/dialog';
+import { Input } from '@renderer/components/ui/input';
+import { Label } from '@renderer/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@renderer/components/ui/select';
+import { useStore } from '@renderer/store';
+import { AlertTriangle, Key } from 'lucide-react';
+
+import type { ApiKeyEntry } from '@shared/types/extensions';
+
+const ENV_KEY_RE = /^[A-Z_][A-Z0-9_]{0,100}$/i;
+
+interface ApiKeyFormDialogProps {
+  open: boolean;
+  editingKey: ApiKeyEntry | null;
+  currentProjectPath: string | null;
+  currentProjectLabel: string | null;
+  onClose: () => void;
+}
+
+type Scope = 'user' | 'project';
+
+const SCOPE_OPTIONS: { value: Scope; label: string }[] = [
+  { value: 'user', label: '个人（全局）' },
+  { value: 'project', label: '项目' },
+];
+
+export const ApiKeyFormDialog = ({
+  open,
+  editingKey,
+  currentProjectPath,
+  currentProjectLabel,
+  onClose,
+}: ApiKeyFormDialogProps): React.JSX.Element => {
+  const saveApiKey = useStore((s) => s.saveApiKey);
+  const apiKeySaving = useStore((s) => s.apiKeySaving);
+  const storageStatus = useStore((s) => s.apiKeyStorageStatus);
+
+  const [name, setName] = useState('');
+  const [envVarName, setEnvVarName] = useState('');
+  const [value, setValue] = useState('');
+  const [scope, setScope] = useState<Scope>('user');
+  const [error, setError] = useState<string | null>(null);
+  const [envVarError, setEnvVarError] = useState<string | null>(null);
+  const editingProjectPath =
+    editingKey?.scope === 'project' ? (editingKey.projectPath ?? null) : null;
+  const effectiveProjectPath = editingProjectPath ?? currentProjectPath;
+  const effectiveProjectLabel =
+    effectiveProjectPath && effectiveProjectPath === currentProjectPath
+      ? currentProjectLabel
+      : effectiveProjectPath;
+  const canUseProjectScope = Boolean(effectiveProjectPath);
+
+  // Reset form when dialog opens/closes or editing key changes
+  useEffect(() => {
+    if (open) {
+      if (editingKey) {
+        setName(editingKey.name);
+        setEnvVarName(editingKey.envVarName);
+        setScope(editingKey.scope);
+        setValue('');
+      } else {
+        setName('');
+        setEnvVarName('');
+        setValue('');
+        setScope('user');
+      }
+      setError(null);
+      setEnvVarError(null);
+    }
+  }, [open, editingKey]);
+
+  useEffect(() => {
+    if (open && scope === 'project' && !canUseProjectScope) {
+      setScope('user');
+    }
+  }, [canUseProjectScope, open, scope]);
+
+  const validateEnvVar = (v: string) => {
+    if (!v.trim()) {
+      setEnvVarError(null);
+      return;
+    }
+    if (!ENV_KEY_RE.test(v)) {
+      setEnvVarError('Use letters, digits, underscores. Must start with a letter or underscore.');
+    } else {
+      setEnvVarError(null);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!name.trim()) {
+      setError('Name is required');
+      return;
+    }
+    if (!envVarName.trim()) {
+      setError('Environment variable name is required');
+      return;
+    }
+    if (!ENV_KEY_RE.test(envVarName)) {
+      setError('Invalid environment variable name');
+      return;
+    }
+    if (!value) {
+      setError('Key value is required');
+      return;
+    }
+    if (scope === 'project' && !effectiveProjectPath) {
+      setError('Project-scoped API keys require an active project');
+      return;
+    }
+
+    try {
+      await saveApiKey({
+        id: editingKey?.id,
+        name: name.trim(),
+        envVarName: envVarName.trim(),
+        value,
+        scope,
+        projectPath: scope === 'project' ? (effectiveProjectPath ?? undefined) : undefined,
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save');
+    }
+  };
+
+  const isEdit = editingKey !== null;
+  const canSubmit =
+    name.trim() &&
+    envVarName.trim() &&
+    value &&
+    !envVarError &&
+    !apiKeySaving &&
+    (scope !== 'project' || canUseProjectScope);
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <div className="flex size-8 items-center justify-center rounded-lg border border-border bg-surface-raised">
+              <Key className="size-4 text-text-muted" />
+            </div>
+            <div>
+              <DialogTitle>{isEdit ? '编辑 API Key' : '添加 API Key'}</DialogTitle>
+              <DialogDescription>
+                {isEdit
+                  ? '更新 Key 信息。你需要重新输入 Key 值。'
+                  : '保存 API Key，用于安装 MCP 服务器时自动填充。'}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {storageStatus && storageStatus.encryptionMethod !== 'os-keychain' && (
+          <div className="flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-400">
+            <AlertTriangle className="size-3.5 shrink-0" />
+            系统钥匙串不可用，Key 会用 AES-256 在本地加密。安装 gnome-keyring 可获得系统级保护。
+          </div>
+        )}
+
+        <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
+          {/* Name */}
+          <div className="space-y-1.5">
+            <Label htmlFor="apikey-name" className="text-xs">
+              名称
+            </Label>
+            <Input
+              id="apikey-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. OpenAI Production"
+              className="h-8 text-sm"
+              autoFocus
+            />
+          </div>
+
+          {/* Env var name */}
+          <div className="space-y-1.5">
+            <Label htmlFor="apikey-envvar" className="text-xs">
+              环境变量名
+            </Label>
+            <Input
+              id="apikey-envvar"
+              value={envVarName}
+              onChange={(e) => {
+                setEnvVarName(e.target.value);
+                validateEnvVar(e.target.value);
+              }}
+              placeholder="e.g. OPENAI_API_KEY"
+              className={`h-8 font-mono text-sm ${envVarError ? 'border-red-500/50' : ''}`}
+            />
+            {envVarError && <p className="text-xs text-red-400">{envVarError}</p>}
+          </div>
+
+          {/* Value */}
+          <div className="space-y-1.5">
+            <Label htmlFor="apikey-value" className="text-xs">
+              值
+            </Label>
+            <Input
+              id="apikey-value"
+              type="password"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder={isEdit ? '重新输入 Key 值' : 'sk-...'}
+              className="h-8 text-sm"
+            />
+          </div>
+
+          {/* Scope */}
+          <div className="space-y-1.5">
+            <Label className="text-xs">作用域</Label>
+            <Select value={scope} onValueChange={(v) => setScope(v as Scope)}>
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SCOPE_OPTIONS.map((opt) => (
+                  <SelectItem
+                    key={opt.value}
+                    value={opt.value}
+                    disabled={opt.value === 'project' && !canUseProjectScope}
+                  >
+                    {opt.value === 'project'
+                      ? effectiveProjectPath
+                        ? `项目：${effectiveProjectLabel}`
+                        : '当前无可用项目'
+                      : opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {scope === 'project' && effectiveProjectPath && (
+              <p className="text-xs text-text-muted">绑定到 {effectiveProjectPath}</p>
+            )}
+          </div>
+
+          {/* Error display */}
+          {error && (
+            <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
+              {error}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
+              取消
+            </Button>
+            <Button type="submit" size="sm" disabled={!canSubmit}>
+              {apiKeySaving ? '保存中...' : isEdit ? '更新' : '保存'}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/renderer/components/extensions/apikeys/ApiKeysPanel.tsx

@@ -0,0 +1,280 @@
+/**
+ * ApiKeysPanel — grid of saved API keys with add button and empty state.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+// Stubs for removed codex-account feature
+function useCodexAccountSnapshot(_opts: { enabled: boolean }) {
+  return { snapshot: null, loading: false };
+}
+function mergeCodexProviderStatusWithSnapshot<T>(provider: T, _snapshot: unknown): T {
+  return provider;
+}
+
+import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
+import { useStore } from '@renderer/store';
+import { createLoadingMultimodelCliStatus } from '@renderer/store/slices/cliInstallerSlice';
+import { AlertTriangle, Info, Key, Plus } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+
+import { ApiKeyCard } from './ApiKeyCard';
+import { ApiKeyFormDialog } from './ApiKeyFormDialog';
+
+import type { ApiKeyEntry } from '@shared/types/extensions';
+
+interface ApiKeysPanelProps {
+  projectPath: string | null;
+  projectLabel: string | null;
+}
+
+export const ApiKeysPanel = ({
+  projectPath,
+  projectLabel,
+}: ApiKeysPanelProps): React.JSX.Element => {
+  const {
+    apiKeys,
+    apiKeysLoading,
+    apiKeysError,
+    storageStatus,
+    fetchStorageStatus,
+    cliStatus,
+    cliStatusLoading,
+    appConfig,
+  } = useStore(
+    useShallow((s) => ({
+      apiKeys: s.apiKeys,
+      apiKeysLoading: s.apiKeysLoading,
+      apiKeysError: s.apiKeysError,
+      storageStatus: s.apiKeyStorageStatus,
+      fetchStorageStatus: s.fetchApiKeyStorageStatus,
+      cliStatus: s.cliStatus,
+      cliStatusLoading: s.cliStatusLoading,
+      appConfig: s.appConfig,
+    }))
+  );
+  const multimodelEnabled = appConfig?.general?.multimodelEnabled ?? false;
+  const loadingCliStatus = useMemo(
+    () =>
+      !cliStatus && cliStatusLoading && multimodelEnabled
+        ? createLoadingMultimodelCliStatus()
+        : cliStatus,
+    [cliStatus, cliStatusLoading, multimodelEnabled]
+  );
+  const codexAccount = useCodexAccountSnapshot({
+    enabled:
+      loadingCliStatus?.flavor === 'agent_teams_orchestrator' &&
+      Boolean(loadingCliStatus?.providers.some((provider) => provider.providerId === 'codex')),
+  });
+  const effectiveCliStatus = useMemo(
+    () =>
+      loadingCliStatus
+        ? {
+            ...loadingCliStatus,
+            providers: loadingCliStatus.providers.map((provider) =>
+              provider.providerId === 'codex'
+                ? mergeCodexProviderStatusWithSnapshot(provider, codexAccount.snapshot)
+                : provider
+            ),
+          }
+        : loadingCliStatus,
+    [loadingCliStatus, codexAccount.snapshot]
+  );
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingKey, setEditingKey] = useState<ApiKeyEntry | null>(null);
+
+  useEffect(() => {
+    void fetchStorageStatus();
+  }, [fetchStorageStatus]);
+
+  const handleAdd = () => {
+    setEditingKey(null);
+    setDialogOpen(true);
+  };
+
+  const handleEdit = (key: ApiKeyEntry) => {
+    setEditingKey(key);
+    setDialogOpen(true);
+  };
+
+  const handleDialogClose = () => {
+    setDialogOpen(false);
+    setEditingKey(null);
+  };
+
+  const isOsKeychain = storageStatus?.encryptionMethod === 'os-keychain';
+  const providerKeyCards = useMemo(() => {
+    if (!effectiveCliStatus?.providers?.length) {
+      return [];
+    }
+
+    return (
+      [
+        {
+          providerId: 'anthropic',
+          label: 'Anthropic runtime',
+          envVar: 'ANTHROPIC_API_KEY',
+        },
+        {
+          providerId: 'codex',
+          label: 'Codex runtime',
+          envVar: 'OPENAI_API_KEY',
+        },
+      ] as const
+    ).flatMap((item) => {
+      const provider = effectiveCliStatus.providers.find(
+        (entry) => entry.providerId === item.providerId
+      );
+      if (!provider) {
+        return [];
+      }
+
+      return [
+        {
+          ...item,
+          authenticated: provider.authenticated,
+          apiKeyConfigured: provider.connection?.apiKeyConfigured ?? false,
+          sourceLabel: provider.connection?.apiKeySourceLabel ?? null,
+          statusMessage: provider.statusMessage ?? null,
+        },
+      ];
+    });
+  }, [effectiveCliStatus]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {providerKeyCards.length > 0 && (
+        <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+          {providerKeyCards.map((provider) => (
+            <div
+              key={provider.providerId}
+              className="bg-surface-raised/30 rounded-lg border border-border p-4"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-sm font-medium text-text">{provider.label}</p>
+                  <p className="mt-0.5 font-mono text-[11px] text-text-muted">{provider.envVar}</p>
+                </div>
+                <span
+                  className={`rounded-full px-2 py-0.5 text-[11px] ${
+                    provider.authenticated
+                      ? 'bg-emerald-500/10 text-emerald-300'
+                      : provider.apiKeyConfigured
+                        ? 'bg-blue-500/10 text-blue-300'
+                        : 'bg-amber-500/10 text-amber-300'
+                  }`}
+                >
+                  {provider.authenticated
+                    ? '已连接'
+                    : provider.apiKeyConfigured
+                      ? '已配置密钥'
+                      : '缺少密钥'}
+                </span>
+              </div>
+              <p className="mt-2 text-xs text-text-muted">
+                {provider.sourceLabel
+                  ? `当前来源：${provider.sourceLabel}。`
+                  : '未检测到此提供商的已保存密钥或环境变量密钥。'}
+                {provider.statusMessage ? ` ${provider.statusMessage}` : ''}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+      {/* Header row */}
+      <div className="flex items-center justify-between">
+        <p className="flex items-center gap-1.5 text-sm text-text-secondary">
+          安全保存 API 密钥，用于安装 MCP 服务器时自动填充。
+          {storageStatus && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                {isOsKeychain ? (
+                  <Info className="size-3.5 shrink-0 cursor-help text-text-muted" />
+                ) : (
+                  <AlertTriangle className="size-3.5 shrink-0 cursor-help text-amber-400" />
+                )}
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="max-w-xs">
+                {isOsKeychain ? (
+                  <p>
+                    密钥通过 {storageStatus.backend} 加密，并以受限文件权限保存（仅所有者可读写）。
+                  </p>
+                ) : (
+                  <p>
+                    系统钥匙串不可用，密钥会使用 AES-256 在本地加密。若需要更强保护，请安装 keyring
+                    服务（gnome-keyring、kwallet）。
+                  </p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </p>
+        <Button variant="outline" size="sm" onClick={handleAdd} className="gap-1.5">
+          <Plus className="size-3.5" />
+          添加 API 密钥
+        </Button>
+      </div>
+
+      {/* Error */}
+      {apiKeysError && (
+        <div className="rounded-md border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-400">
+          {apiKeysError}
+        </div>
+      )}
+
+      {/* Skeleton loading */}
+      {apiKeysLoading && apiKeys.length === 0 && (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div
+              key={i}
+              className="skeleton-card flex flex-col gap-2 rounded-lg border border-border p-4"
+              style={{ animationDelay: `${i * 80}ms` }}
+            >
+              <div className="h-4 w-32 rounded bg-surface-raised" />
+              <div className="h-3 w-24 rounded bg-surface-raised" />
+              <div className="h-3 w-40 rounded bg-surface-raised" />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!apiKeysLoading && apiKeys.length === 0 && (
+        <div className="flex flex-col items-center gap-3 rounded-sm border border-dashed border-border px-8 py-16">
+          <div className="flex size-10 items-center justify-center rounded-lg border border-border bg-surface-raised">
+            <Key className="size-5 text-text-muted" />
+          </div>
+          <p className="text-sm text-text-secondary">尚未保存 API 密钥</p>
+          <p className="text-xs text-text-muted">
+            添加密钥后，安装 MCP 服务器时可自动填充环境变量。
+          </p>
+          <Button variant="outline" size="sm" onClick={handleAdd} className="mt-2 gap-1.5">
+            <Plus className="size-3.5" />
+            添加第一个密钥
+          </Button>
+        </div>
+      )}
+
+      {/* Key cards grid */}
+      {apiKeys.length > 0 && (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {apiKeys.map((key) => (
+            <ApiKeyCard key={key.id} apiKey={key} onEdit={handleEdit} />
+          ))}
+        </div>
+      )}
+
+      {/* Form dialog */}
+      <ApiKeyFormDialog
+        open={dialogOpen}
+        editingKey={editingKey}
+        currentProjectPath={projectPath}
+        currentProjectLabel={projectLabel}
+        onClose={handleDialogClose}
+      />
+    </div>
+  );
+};