feat: enhance channel configuration UI and validation

- Updated ChannelInstructionsPanel to include a button for viewing documentation, improving user guidance.
- Enhanced ChannelTokenField to support showing/hiding secret values with appropriate labels and icons.
- Refined ChannelTypeSelector to display connection type icons and improved layout for better user experience.
- Added new messages for documentation links, validation feedback, and secret management in i18n.
- Extended ChannelMeta to include optional documentation URLs for better context on configuration fields.
- Implemented credential validation logic in ChannelsPage to ensure user inputs are validated before saving.
- Introduced ChannelLogo component to display channel icons in the UI.
- Added tests for channel credential validation to ensure proper error handling and feedback.

src/i18n/messages.ts

@@ -55,10 +55,28 @@ export const messages: I18nMessages = {
       modal: {
         title: 'Channel configuration',
         description: 'Choose a channel type, then fill in the connection fields that are available for this template.',
+        configureTitle: 'Configure {name}',
         typeLabel: 'Channel type',
         accountIdLabel: 'Account ID',
         docsLabel: 'Docs and instructions',
         instructionsTitle: 'Setup instructions',
+        howTo: 'How to connect',
+        viewDocs: 'View docs',
+        validate: 'Validate',
+        validateConfig: 'Validate configuration',
+        validating: 'Validating...',
+        saveAndConnect: 'Save and connect',
+        envVar: 'Environment variable',
+        envVars: 'Environment variables',
+        fieldDocs: 'Field reference',
+        docsUrl: 'Documentation URL',
+        envVarHint: 'These values can also be provided from environment variables when needed.',
+        credentialsVerified: 'Credentials verified',
+        validationFailed: 'Validation failed',
+        warnings: 'Warnings',
+        noAdditionalFields: 'No additional fields are required for this channel.',
+        showSecret: 'Show secret',
+        hideSecret: 'Hide secret',
         tokenHelpText: 'Paste the token, secret, or access credential required by the selected channel.',
         diagnosticsNote: 'QR code and diagnostics hooks will be wired up later when the backend contract is ready.',
         todoNote: 'TODO: QR and diagnostics are placeholders for now; the modal stays props-driven until the channel APIs land.',
@@ -272,10 +290,28 @@ export const messages: I18nMessages = {
       modal: {
         title: '渠道配置',
         description: '先选择渠道类型，再填写这个模板可用的连接字段。',
+        configureTitle: '配置 {name}',
         typeLabel: '渠道类型',
         accountIdLabel: 'Account ID',
         docsLabel: '文档与说明',
         instructionsTitle: '接入说明',
+        howTo: '如何连接',
+        viewDocs: '查看文档',
+        validate: '校验',
+        validateConfig: '验证配置',
+        validating: '验证中...',
+        saveAndConnect: '保存并连接',
+        envVar: '环境变量',
+        envVars: '环境变量',
+        fieldDocs: '字段说明',
+        docsUrl: '文档链接',
+        envVarHint: '这些值也可以通过环境变量提前提供。',
+        credentialsVerified: '凭证已验证',
+        validationFailed: '验证失败',
+        warnings: '警告',
+        noAdditionalFields: '当前频道不需要额外字段。',
+        showSecret: '显示密钥',
+        hideSecret: '隐藏密钥',
         tokenHelpText: '请填写所选渠道所需的 token、密钥或访问凭证。',
         diagnosticsNote: '二维码和诊断能力会在后端契约完成后再接入。',
         todoNote: 'TODO：二维码和诊断目前仅保留占位，modal 先保持 props 驱动，等待渠道 API 落地。',
@@ -489,10 +525,28 @@ export const messages: I18nMessages = {
       modal: {
         title: 'チャンネル設定',
         description: 'まずチャンネル種類を選び、このテンプレートで使える接続項目を入力します。',
+        configureTitle: '{name} を設定',
         typeLabel: 'チャンネル種類',
         accountIdLabel: 'Account ID',
         docsLabel: 'ドキュメントと手順',
         instructionsTitle: '接続手順',
+        howTo: '接続方法',
+        viewDocs: 'ドキュメントを見る',
+        validate: '検証',
+        validateConfig: '設定を検証',
+        validating: '検証中...',
+        saveAndConnect: '保存して接続',
+        envVar: '環境変数',
+        envVars: '環境変数',
+        fieldDocs: '項目の説明',
+        docsUrl: 'ドキュメント URL',
+        envVarHint: '必要に応じて、これらの値は環境変数からも指定できます。',
+        credentialsVerified: '認証情報を確認しました',
+        validationFailed: '検証に失敗しました',
+        warnings: '警告',
+        noAdditionalFields: 'このチャンネルに追加項目はありません。',
+        showSecret: 'シークレットを表示',
+        hideSecret: 'シークレットを隠す',
         tokenHelpText: '選択したチャンネルに必要な token、secret、またはアクセス資格情報を入力してください。',
         diagnosticsNote: 'QR コードと診断の導線は、バックエンド契約が整ってから接続します。',
         todoNote: 'TODO: QR と診断は現在プレースホルダです。modal は引き続き props 駆動のままにしておきます。',