feat(opencode): add manual provider key input with duplicate check

- Add Provider Key input field for OpenCode providers (between icon and name)
- User must manually enter a unique key instead of auto-generating from name
- Real-time validation: format check and duplicate detection
- Key is immutable after creation (disabled in edit mode)
- Remove slugify auto-generation logic from mutations
- Add beforeNameSlot prop to BasicFormFields for extensibility
- Add i18n translations for zh/en/ja

src/components/providers/AddProviderDialog.tsx

@@ -24,7 +24,7 @@ interface AddProviderDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   appId: AppId;
-  onSubmit: (provider: Omit<Provider, "id">) => Promise<void> | void;
+  onSubmit: (provider: Omit<Provider, "id"> & { providerKey?: string }) => Promise<void> | void;
 }
 
 export function AddProviderDialog({
@@ -85,7 +85,7 @@ export function AddProviderDialog({
       >;
 
       // 构造基础提交数据
-      const providerData: Omit<Provider, "id"> = {
+      const providerData: Omit<Provider, "id"> & { providerKey?: string } = {
         name: values.name.trim(),
         notes: values.notes?.trim() || undefined,
         websiteUrl: values.websiteUrl?.trim() || undefined,
@@ -96,6 +96,11 @@ export function AddProviderDialog({
         ...(values.meta ? { meta: values.meta } : {}),
       };
 
+      // OpenCode: pass providerKey for ID generation
+      if (appId === "opencode" && values.providerKey) {
+        providerData.providerKey = values.providerKey;
+      }
+
       const hasCustomEndpoints =
         providerData.meta?.custom_endpoints &&
         Object.keys(providerData.meta.custom_endpoints).length > 0;