feat(dashboard): overhaul prompt modal UX with fixed layout and step-by-step guidance

gcmsg · claude · gcmsg · commit de9f9aa5f7d0 · 2026-03-15T19:41:57.000+08:00
Restructure reinstall/upgrade modals to use flex column layout with fixed
header and footer (copy/close buttons always visible), scrollable middle
section with numbered step guidance and collapsible prompt content. Add
step-by-step instructions to ClaimTokenSection prompt panels. Add i18n
keys for all 8 locales (en, zh, ja, ru, pt, fr, es, ar).

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/web/app/src/components/provider/ClaimTokenSection.tsx b/web/app/src/components/provider/ClaimTokenSection.tsx
@@ -11,7 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { Copy, Check, Key, Loader2, RefreshCw, Eye } from "lucide-react"
+import { Copy, Check, Key, Loader2, RefreshCw, Eye, Info } from "lucide-react"
 import { useClaimTokens, useGenerateClaimToken } from "@/hooks/use-provider"
 
 export function ClaimTokenSection() {
@@ -184,7 +184,7 @@ export function ClaimTokenSection() {
 
         {/* Generated prompt display */}
         {generatedCode && (
-          <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 space-y-3">
+          <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 space-y-4">
             <div className="flex items-center justify-between">
               <p className="text-sm font-medium">
                 {t('claim.sendPrompt')}
@@ -193,6 +193,35 @@ export function ClaimTokenSection() {
                 {formatTime(remaining)}
               </span>
             </div>
+            {/* Step guidance */}
+            <div className="space-y-2.5">
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">1</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step1')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step1Desc')}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">2</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step2')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step2Desc')}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">3</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step3')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step3Desc')}</p>
+                </div>
+              </div>
+            </div>
+            {/* Tip */}
+            <div className="flex items-start gap-2 rounded-md bg-background/60 p-2.5">
+              <Info className="size-3.5 shrink-0 text-muted-foreground mt-0.5" />
+              <p className="text-xs text-muted-foreground">{t('promptGuide.tip')}</p>
+            </div>
             <pre className="text-sm font-mono bg-background rounded-md p-3 overflow-x-auto whitespace-pre-wrap break-all border max-h-64 overflow-y-auto">
               {prompt}
             </pre>
@@ -213,7 +242,7 @@ export function ClaimTokenSection() {
 
         {/* View prompt panel (from token history) */}
         {viewingToken && (
-          <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 space-y-3">
+          <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 space-y-4">
             <div className="flex items-center justify-between">
               <p className="text-sm font-medium">
                 {t('claim.sendPrompt')}
@@ -226,6 +255,30 @@ export function ClaimTokenSection() {
                 {t('common.close')}
               </Button>
             </div>
+            {/* Step guidance */}
+            <div className="space-y-2.5">
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">1</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step1')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step1Desc')}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">2</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step2')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step2Desc')}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-medium">3</span>
+                <div>
+                  <p className="text-sm font-medium">{t('promptGuide.step3')}</p>
+                  <p className="text-xs text-muted-foreground">{t('promptGuide.step3Desc')}</p>
+                </div>
+              </div>
+            </div>
             <pre className="text-sm font-mono bg-background rounded-md p-3 overflow-x-auto whitespace-pre-wrap break-all border max-h-64 overflow-y-auto">
               {viewPrompt}
             </pre>
diff --git a/web/app/src/i18n/locales/ar.json b/web/app/src/i18n/locales/ar.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "إصدار SDK قديم"
     }
   },
+  "promptGuide": {
+    "step1": "انسخ النص التوجيهي",
+    "step1Desc": "انقر على الزر أدناه لنسخ نص التثبيت إلى الحافظة",
+    "step2": "أرسل إلى وكيل الذكاء الاصطناعي",
+    "step2Desc": "الصق النص في محادثة وكيل الذكاء الاصطناعي الخاص بك (Claude أو ChatGPT أو أي وكيل LLM)",
+    "step3": "الوكيل يكمل الإعداد",
+    "step3Desc": "سيقوم وكيلك بتنفيذ الخطوات تلقائيًا والتسجيل في PeerClaw",
+    "viewPrompt": "عرض النص الكامل",
+    "hidePrompt": "إخفاء النص",
+    "tip": "يحتوي هذا النص على تعليمات خطوة بخطوة يمكن لوكيل الذكاء الاصطناعي اتباعها. لا تحتاج لقراءته بنفسك — فقط انسخه والصقه."
+  },
+  "reinstallGuide": {
+    "step1Desc": "انقر على الزر أدناه لنسخ نص إعادة التثبيت",
+    "step2Desc": "الصقه في وكيل الذكاء الاصطناعي الذي أعدّ هذا الوكيل في الأصل",
+    "step3": "الوكيل يعيد تثبيت SDK",
+    "step3Desc": "سيقوم وكيلك بنسخ زوج المفاتيح احتياطيًا وإعادة تثبيت CLI والتحقق من التكوين"
+  },
+  "upgradeGuide": {
+    "step1Desc": "انقر على الزر أدناه لنسخ نص الترقية",
+    "step2Desc": "الصقه في وكيل الذكاء الاصطناعي الذي يشغّل وكيل PeerClaw هذا",
+    "step3": "الوكيل يرقّي CLI",
+    "step3Desc": "سيقوم وكيلك بتحديث CLI وإرسال نبضة قلب لتأكيد الإصدار الجديد"
+  },
   "reinstall": {
     "title": "إعادة تثبيت Agent SDK",
     "button": "إعادة تثبيت Agent",
diff --git a/web/app/src/i18n/locales/en.json b/web/app/src/i18n/locales/en.json
@@ -652,6 +652,29 @@
   "footer": {
     "copyright": "PeerClaw {{year}}. Open Source."
   },
+  "promptGuide": {
+    "step1": "Copy the prompt",
+    "step1Desc": "Click the button below to copy the installation prompt to your clipboard",
+    "step2": "Send to your AI Agent",
+    "step2Desc": "Paste the prompt into your AI agent's chat (Claude, ChatGPT, or any LLM-powered agent)",
+    "step3": "Agent completes setup",
+    "step3Desc": "Your agent will execute the steps automatically and register with PeerClaw",
+    "viewPrompt": "View full prompt",
+    "hidePrompt": "Hide prompt",
+    "tip": "This prompt contains step-by-step instructions that your AI agent can follow. You don't need to read it yourself — just copy and paste."
+  },
+  "reinstallGuide": {
+    "step1Desc": "Click the button below to copy the reinstallation prompt",
+    "step2Desc": "Paste it into the same AI agent that originally set up this agent",
+    "step3": "Agent reinstalls SDK",
+    "step3Desc": "Your agent will back up the keypair, reinstall the CLI, and verify the configuration"
+  },
+  "upgradeGuide": {
+    "step1Desc": "Click the button below to copy the upgrade prompt",
+    "step2Desc": "Paste it into the AI agent running this PeerClaw agent",
+    "step3": "Agent upgrades CLI",
+    "step3Desc": "Your agent will update the CLI and send a heartbeat to confirm the new version"
+  },
   "reinstall": {
     "title": "Reinstall Agent SDK",
     "button": "Reinstall Agent",
diff --git a/web/app/src/i18n/locales/es.json b/web/app/src/i18n/locales/es.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "SDK desactualizado"
     }
   },
+  "promptGuide": {
+    "step1": "Copie el prompt",
+    "step1Desc": "Haga clic en el botón de abajo para copiar el prompt de instalación al portapapeles",
+    "step2": "Envíe a su AI Agent",
+    "step2Desc": "Pegue el prompt en el chat de su agente de IA (Claude, ChatGPT o cualquier agente LLM)",
+    "step3": "El Agent completa la configuración",
+    "step3Desc": "Su Agent ejecutará los pasos automáticamente y se registrará en PeerClaw",
+    "viewPrompt": "Ver prompt completo",
+    "hidePrompt": "Ocultar prompt",
+    "tip": "Este prompt contiene instrucciones paso a paso que su agente de IA puede seguir. No necesita leerlo usted mismo — simplemente copie y pegue."
+  },
+  "reinstallGuide": {
+    "step1Desc": "Haga clic en el botón de abajo para copiar el prompt de reinstalación",
+    "step2Desc": "Péguelo en el mismo agente de IA que configuró originalmente este Agent",
+    "step3": "El Agent reinstala el SDK",
+    "step3Desc": "Su Agent respaldará el par de claves, reinstalará el CLI y verificará la configuración"
+  },
+  "upgradeGuide": {
+    "step1Desc": "Haga clic en el botón de abajo para copiar el prompt de actualización",
+    "step2Desc": "Péguelo en el agente de IA que ejecuta este Agent de PeerClaw",
+    "step3": "El Agent actualiza el CLI",
+    "step3Desc": "Su Agent actualizará el CLI y enviará un heartbeat para confirmar la nueva versión"
+  },
   "reinstall": {
     "title": "Reinstalar Agent SDK",
     "button": "Reinstalar Agent",
diff --git a/web/app/src/i18n/locales/fr.json b/web/app/src/i18n/locales/fr.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "SDK obsolète"
     }
   },
+  "promptGuide": {
+    "step1": "Copiez le prompt",
+    "step1Desc": "Cliquez sur le bouton ci-dessous pour copier le prompt d'installation dans le presse-papiers",
+    "step2": "Envoyez à votre AI Agent",
+    "step2Desc": "Collez le prompt dans le chat de votre agent IA (Claude, ChatGPT ou tout agent LLM)",
+    "step3": "L'Agent termine la configuration",
+    "step3Desc": "Votre Agent exécutera automatiquement les étapes et s'inscrira sur PeerClaw",
+    "viewPrompt": "Voir le prompt complet",
+    "hidePrompt": "Masquer le prompt",
+    "tip": "Ce prompt contient des instructions étape par étape que votre agent IA peut suivre. Vous n'avez pas besoin de le lire — copiez et collez simplement."
+  },
+  "reinstallGuide": {
+    "step1Desc": "Cliquez sur le bouton ci-dessous pour copier le prompt de réinstallation",
+    "step2Desc": "Collez-le dans l'agent IA qui a initialement configuré cet Agent",
+    "step3": "L'Agent réinstalle le SDK",
+    "step3Desc": "Votre Agent sauvegardera la paire de clés, réinstallera le CLI et vérifiera la configuration"
+  },
+  "upgradeGuide": {
+    "step1Desc": "Cliquez sur le bouton ci-dessous pour copier le prompt de mise à jour",
+    "step2Desc": "Collez-le dans l'agent IA qui exécute cet Agent PeerClaw",
+    "step3": "L'Agent met à jour le CLI",
+    "step3Desc": "Votre Agent mettra à jour le CLI et enverra un heartbeat pour confirmer la nouvelle version"
+  },
   "reinstall": {
     "title": "Réinstaller Agent SDK",
     "button": "Réinstaller Agent",
diff --git a/web/app/src/i18n/locales/ja.json b/web/app/src/i18n/locales/ja.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "SDKが古いバージョン"
     }
   },
+  "promptGuide": {
+    "step1": "プロンプトをコピー",
+    "step1Desc": "下のボタンをクリックしてインストールプロンプトをクリップボードにコピー",
+    "step2": "AI Agent に送信",
+    "step2Desc": "AI Agent のチャットにプロンプトを貼り付けてください（Claude、ChatGPT、その他の LLM Agent）",
+    "step3": "Agent がセットアップを完了",
+    "step3Desc": "Agent が自動的に手順を実行し、PeerClaw に登録します",
+    "viewPrompt": "プロンプト全文を表示",
+    "hidePrompt": "プロンプトを非表示",
+    "tip": "このプロンプトには AI Agent が従うステップバイステップの指示が含まれています。自分で読む必要はありません — コピーして貼り付けるだけです。"
+  },
+  "reinstallGuide": {
+    "step1Desc": "下のボタンをクリックして再インストールプロンプトをコピー",
+    "step2Desc": "この Agent を最初にセットアップした AI Agent に貼り付けてください",
+    "step3": "Agent が SDK を再インストール",
+    "step3Desc": "Agent がキーペアをバックアップし、CLI を再インストールして構成を確認します"
+  },
+  "upgradeGuide": {
+    "step1Desc": "下のボタンをクリックしてアップグレードプロンプトをコピー",
+    "step2Desc": "この PeerClaw Agent を実行している AI Agent に貼り付けてください",
+    "step3": "Agent が CLI をアップグレード",
+    "step3Desc": "Agent が CLI を更新し、新バージョンを確認するハートビートを送信します"
+  },
   "reinstall": {
     "title": "Agent SDK の再インストール",
     "button": "Agent を再インストール",
diff --git a/web/app/src/i18n/locales/pt.json b/web/app/src/i18n/locales/pt.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "SDK desatualizado"
     }
   },
+  "promptGuide": {
+    "step1": "Copie o prompt",
+    "step1Desc": "Clique no botão abaixo para copiar o prompt de instalação para a área de transferência",
+    "step2": "Envie para seu AI Agent",
+    "step2Desc": "Cole o prompt no chat do seu agente de IA (Claude, ChatGPT ou qualquer agente LLM)",
+    "step3": "Agent conclui a configuração",
+    "step3Desc": "Seu Agent executará as etapas automaticamente e se registrará no PeerClaw",
+    "viewPrompt": "Ver prompt completo",
+    "hidePrompt": "Ocultar prompt",
+    "tip": "Este prompt contém instruções passo a passo que seu agente de IA pode seguir. Você não precisa lê-lo — apenas copie e cole."
+  },
+  "reinstallGuide": {
+    "step1Desc": "Clique no botão abaixo para copiar o prompt de reinstalação",
+    "step2Desc": "Cole no mesmo agente de IA que configurou este Agent originalmente",
+    "step3": "Agent reinstala o SDK",
+    "step3Desc": "Seu Agent fará backup do par de chaves, reinstalará o CLI e verificará a configuração"
+  },
+  "upgradeGuide": {
+    "step1Desc": "Clique no botão abaixo para copiar o prompt de atualização",
+    "step2Desc": "Cole no agente de IA que executa este PeerClaw Agent",
+    "step3": "Agent atualiza o CLI",
+    "step3Desc": "Seu Agent atualizará o CLI e enviará um heartbeat para confirmar a nova versão"
+  },
   "reinstall": {
     "title": "Reinstalar Agent SDK",
     "button": "Reinstalar Agent",
diff --git a/web/app/src/i18n/locales/ru.json b/web/app/src/i18n/locales/ru.json
@@ -691,6 +691,29 @@
       "sdk_outdated": "SDK устарел"
     }
   },
+  "promptGuide": {
+    "step1": "Скопируйте промпт",
+    "step1Desc": "Нажмите кнопку ниже, чтобы скопировать промпт установки в буфер обмена",
+    "step2": "Отправьте вашему AI Agent",
+    "step2Desc": "Вставьте промпт в чат вашего AI-агента (Claude, ChatGPT или любой LLM-агент)",
+    "step3": "Agent завершает настройку",
+    "step3Desc": "Ваш Agent автоматически выполнит шаги и зарегистрируется в PeerClaw",
+    "viewPrompt": "Показать полный промпт",
+    "hidePrompt": "Скрыть промпт",
+    "tip": "Этот промпт содержит пошаговые инструкции для вашего AI-агента. Вам не нужно читать его самим — просто скопируйте и вставьте."
+  },
+  "reinstallGuide": {
+    "step1Desc": "Нажмите кнопку ниже, чтобы скопировать промпт переустановки",
+    "step2Desc": "Вставьте его в AI-агент, который изначально настроил этого Agent",
+    "step3": "Agent переустанавливает SDK",
+    "step3Desc": "Ваш Agent создаст резервную копию ключей, переустановит CLI и проверит конфигурацию"
+  },
+  "upgradeGuide": {
+    "step1Desc": "Нажмите кнопку ниже, чтобы скопировать промпт обновления",
+    "step2Desc": "Вставьте его в AI-агент, запускающий этого PeerClaw Agent",
+    "step3": "Agent обновляет CLI",
+    "step3Desc": "Ваш Agent обновит CLI и отправит heartbeat для подтверждения новой версии"
+  },
   "reinstall": {
     "title": "Переустановить Agent SDK",
     "button": "Переустановить Agent",
diff --git a/web/app/src/i18n/locales/zh.json b/web/app/src/i18n/locales/zh.json
@@ -695,6 +695,29 @@
       "sdk_outdated": "SDK 版本过旧"
     }
   },
+  "promptGuide": {
+    "step1": "复制提示词",
+    "step1Desc": "点击下方按钮将安装提示词复制到剪贴板",
+    "step2": "发送给你的 AI Agent",
+    "step2Desc": "将提示词粘贴到你的 AI Agent 对话中（Claude、ChatGPT 或任何 LLM 驱动的 Agent）",
+    "step3": "Agent 完成设置",
+    "step3Desc": "你的 Agent 将自动执行步骤并注册到 PeerClaw",
+    "viewPrompt": "查看完整提示词",
+    "hidePrompt": "隐藏提示词",
+    "tip": "此提示词包含你的 AI Agent 可以遵循的分步指引。你无需自己阅读——只需复制粘贴即可。"
+  },
+  "reinstallGuide": {
+    "step1Desc": "点击下方按钮复制重装提示词",
+    "step2Desc": "粘贴到最初设置此 Agent 的 AI Agent 对话中",
+    "step3": "Agent 重装 SDK",
+    "step3Desc": "你的 Agent 将备份密钥对、重装 CLI 并验证配置"
+  },
+  "upgradeGuide": {
+    "step1Desc": "点击下方按钮复制升级提示词",
+    "step2Desc": "粘贴到运行此 PeerClaw Agent 的 AI Agent 对话中",
+    "step3": "Agent 升级 CLI",
+    "step3Desc": "你的 Agent 将更新 CLI 并发送心跳以确认新版本"
+  },
   "reinstall": {
     "title": "重装 Agent SDK",
     "button": "重装 Agent",
diff --git a/web/app/src/pages/ProviderAgentDetailPage.tsx b/web/app/src/pages/ProviderAgentDetailPage.tsx
