@yancyyu/openhermit 1.6.28 → 1.6.30

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

@@ -1,282 +0,0 @@
-/**
- * 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

@@ -1,280 +0,0 @@
-/**
- * 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>
-  );
-};