Add helpful tips to Changes tab zero state (#8230)

Co-authored-by: openhands <openhands@all-hands.dev>

frontend/src/components/features/tips/random-tip.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
+import { getRandomTip } from "#/utils/tips";
+
+export function RandomTip() {
+  const { t } = useTranslation();
+  const [randomTip, setRandomTip] = React.useState(getRandomTip());
+
+  // Update the random tip when the component mounts
+  React.useEffect(() => {
+    setRandomTip(getRandomTip());
+  }, []);
+
+  return (
+    <p>
+      <h4 className="font-bold">{t(I18nKey.TIPS$PROTIP)}:</h4>
+      {t(randomTip.key)}
+      {randomTip.link && (
+        <>
+          {" "}
+          <a
+            href={randomTip.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            {t(I18nKey.TIPS$LEARN_MORE)}
+          </a>
+        </>
+      )}
+    </p>
+  );
+}

frontend/src/i18n/declaration.ts

@@ -474,4 +474,16 @@ export enum I18nKey {
   TOS$ACCEPT_TERMS_DESCRIPTION = "TOS$ACCEPT_TERMS_DESCRIPTION",
   TOS$CONTINUE = "TOS$CONTINUE",
   TOS$ERROR_ACCEPTING = "TOS$ERROR_ACCEPTING",
+  TIPS$CUSTOMIZE_MICROAGENT = "TIPS$CUSTOMIZE_MICROAGENT",
+  TIPS$SETUP_SCRIPT = "TIPS$SETUP_SCRIPT",
+  TIPS$VSCODE_INSTANCE = "TIPS$VSCODE_INSTANCE",
+  TIPS$SAVE_WORK = "TIPS$SAVE_WORK",
+  TIPS$SPECIFY_FILES = "TIPS$SPECIFY_FILES",
+  TIPS$HEADLESS_MODE = "TIPS$HEADLESS_MODE",
+  TIPS$CLI_MODE = "TIPS$CLI_MODE",
+  TIPS$GITHUB_HOOK = "TIPS$GITHUB_HOOK",
+  TIPS$BLOG_SIGNUP = "TIPS$BLOG_SIGNUP",
+  TIPS$API_USAGE = "TIPS$API_USAGE",
+  TIPS$LEARN_MORE = "TIPS$LEARN_MORE",
+  TIPS$PROTIP = "TIPS$PROTIP",
 }

frontend/src/i18n/translation.json

@@ -6817,5 +6817,185 @@
         "de": "Fehler beim Akzeptieren der Nutzungsbedingungen",
         "it": "Errore nell'accettazione dei Termini di Servizio",
         "pt": "Erro ao aceitar os Termos de Serviço"
+    },
+    "TIPS$CUSTOMIZE_MICROAGENT": {
+        "en": "You can customize OpenHands for your repo using a microagent. Ask OpenHands to put a description of the repo, including how to run the code, into .openhands/microagents/repo.md.",
+        "ja": "マイクロエージェントを使用して、リポジトリ用にOpenHandsをカスタマイズできます。OpenHandsに、コードの実行方法を含むリポジトリの説明を.openhands/microagents/repo.mdに入れるよう依頼してください。",
+        "zh-CN": "您可以使用微代理为您的仓库自定义OpenHands。请OpenHands将仓库的描述（包括如何运行代码）放入.openhands/microagents/repo.md。",
+        "zh-TW": "您可以使用微代理為您的倉庫自定義OpenHands。請OpenHands將倉庫的描述（包括如何運行代碼）放入.openhands/microagents/repo.md。",
+        "ko-KR": "마이크로에이전트를 사용하여 저장소에 맞게 OpenHands를 사용자 정의할 수 있습니다. OpenHands에게 코드 실행 방법을 포함한 저장소 설명을 .openhands/microagents/repo.md에 넣도록 요청하세요.",
+        "no": "Du kan tilpasse OpenHands for ditt repo ved å bruke en mikroagent. Be OpenHands om å legge en beskrivelse av repoet, inkludert hvordan du kjører koden, i .openhands/microagents/repo.md.",
+        "it": "Puoi personalizzare OpenHands per il tuo repository utilizzando un microagente. Chiedi a OpenHands di inserire una descrizione del repository, incluso come eseguire il codice, in .openhands/microagents/repo.md.",
+        "pt": "Você pode personalizar o OpenHands para seu repositório usando um microagente. Peça ao OpenHands para colocar uma descrição do repositório, incluindo como executar o código, em .openhands/microagents/repo.md.",
+        "es": "Puede personalizar OpenHands para su repositorio utilizando un microagente. Pídale a OpenHands que ponga una descripción del repositorio, incluido cómo ejecutar el código, en .openhands/microagents/repo.md.",
+        "ar": "يمكنك تخصيص OpenHands لمستودعك باستخدام وكيل مصغر. اطلب من OpenHands وضع وصف للمستودع، بما في ذلك كيفية تشغيل الكود، في .openhands/microagents/repo.md.",
+        "fr": "Vous pouvez personnaliser OpenHands pour votre dépôt en utilisant un micro-agent. Demandez à OpenHands de mettre une description du dépôt, y compris comment exécuter le code, dans .openhands/microagents/repo.md.",
+        "tr": "Bir mikro ajan kullanarak deponuz için OpenHands'i özelleştirebilirsiniz. OpenHands'ten kodun nasıl çalıştırılacağı da dahil olmak üzere deponun açıklamasını .openhands/microagents/repo.md dosyasına koymasını isteyin.",
+        "de": "Sie können OpenHands für Ihr Repository mit einem Mikroagenten anpassen. Bitten Sie OpenHands, eine Beschreibung des Repositorys, einschließlich der Ausführung des Codes, in .openhands/microagents/repo.md zu platzieren."
+    },
+    "TIPS$SETUP_SCRIPT": {
+        "en": "You can add .openhands/setup.sh to your repository to automatically run a setup script every time you start an OpenHands conversation.",
+        "ja": "OpenHandsの会話を開始するたびに自動的にセットアップスクリプトを実行するために、.openhands/setup.shをリポジトリに追加できます。",
+        "zh-CN": "您可以将.openhands/setup.sh添加到您的仓库中，以便在每次启动OpenHands对话时自动运行设置脚本。",
+        "zh-TW": "您可以將.openhands/setup.sh添加到您的倉庫中，以便在每次啟動OpenHands對話時自動運行設置腳本。",
+        "ko-KR": "OpenHands 대화를 시작할 때마다 자동으로 설정 스크립트를 실행하도록 .openhands/setup.sh를 저장소에 추가할 수 있습니다.",
+        "no": "Du kan legge til .openhands/setup.sh i ditt repository for å automatisk kjøre et oppsettskript hver gang du starter en OpenHands-samtale.",
+        "it": "Puoi aggiungere .openhands/setup.sh al tuo repository per eseguire automaticamente uno script di configurazione ogni volta che avvii una conversazione OpenHands.",
+        "pt": "Você pode adicionar .openhands/setup.sh ao seu repositório para executar automaticamente um script de configuração toda vez que iniciar uma conversa OpenHands.",
+        "es": "Puede agregar .openhands/setup.sh a su repositorio para ejecutar automáticamente un script de configuración cada vez que inicie una conversación de OpenHands.",
+        "ar": "يمكنك إضافة .openhands/setup.sh إلى مستودعك لتشغيل نص إعداد تلقائيًا في كل مرة تبدأ فيها محادثة OpenHands.",
+        "fr": "Vous pouvez ajouter .openhands/setup.sh à votre dépôt pour exécuter automatiquement un script de configuration chaque fois que vous démarrez une conversation OpenHands.",
+        "tr": "OpenHands konuşması başlattığınız her seferinde otomatik olarak bir kurulum betiği çalıştırmak için deponuza .openhands/setup.sh ekleyebilirsiniz.",
+        "de": "Sie können .openhands/setup.sh zu Ihrem Repository hinzufügen, um jedes Mal, wenn Sie ein OpenHands-Gespräch starten, automatisch ein Setup-Skript auszuführen."
+    },
+    "TIPS$VSCODE_INSTANCE": {
+        "en": "Every OpenHands conversation comes with a VS Code instance, where you can interact with the development environment.",
+        "ja": "すべてのOpenHands会話には、開発環境と対話できるVS Codeインスタンスが付属しています。",
+        "zh-CN": "每个OpenHands对话都配有VS Code实例，您可以在其中与开发环境交互。",
+        "zh-TW": "每個OpenHands對話都配有VS Code實例，您可以在其中與開發環境交互。",
+        "ko-KR": "모든 OpenHands 대화에는 개발 환경과 상호 작용할 수 있는 VS Code 인스턴스가 함께 제공됩니다.",
+        "no": "Hver OpenHands-samtale kommer med en VS Code-instans, hvor du kan samhandle med utviklingsmiljøet.",
+        "it": "Ogni conversazione OpenHands è dotata di un'istanza VS Code, dove puoi interagire con l'ambiente di sviluppo.",
+        "pt": "Cada conversa OpenHands vem com uma instância do VS Code, onde você pode interagir com o ambiente de desenvolvimento.",
+        "es": "Cada conversación de OpenHands viene con una instancia de VS Code, donde puede interactuar con el entorno de desarrollo.",
+        "ar": "تأتي كل محادثة OpenHands مع نسخة من VS Code، حيث يمكنك التفاعل مع بيئة التطوير.",
+        "fr": "Chaque conversation OpenHands est accompagnée d'une instance VS Code, où vous pouvez interagir avec l'environnement de développement.",
+        "tr": "Her OpenHands konuşması, geliştirme ortamıyla etkileşimde bulunabileceğiniz bir VS Code örneği ile birlikte gelir.",
+        "de": "Jedes OpenHands-Gespräch wird mit einer VS Code-Instanz geliefert, in der Sie mit der Entwicklungsumgebung interagieren können."
+    },
+    "TIPS$SAVE_WORK": {
+        "en": "Be sure to regularly save your work, either by pushing to GitHub or by downloading your files via VS Code.",
+        "ja": "GitHubにプッシュするか、VS Codeを介してファイルをダウンロードすることで、定期的に作業を保存してください。",
+        "zh-CN": "请确保定期保存您的工作，可以通过推送到GitHub或通过VS Code下载文件来实现。",
+        "zh-TW": "請確保定期保存您的工作，可以通過推送到GitHub或通過VS Code下載文件來實現。",
+        "ko-KR": "GitHub에 푸시하거나 VS Code를 통해 파일을 다운로드하여 정기적으로 작업을 저장하세요.",
+        "no": "Sørg for å lagre arbeidet ditt regelmessig, enten ved å pushe til GitHub eller ved å laste ned filene dine via VS Code.",
+        "it": "Assicurati di salvare regolarmente il tuo lavoro, sia inviando a GitHub o scaricando i tuoi file tramite VS Code.",
+        "pt": "Certifique-se de salvar regularmente seu trabalho, seja enviando para o GitHub ou baixando seus arquivos via VS Code.",
+        "es": "Asegúrese de guardar regularmente su trabajo, ya sea enviándolo a GitHub o descargando sus archivos a través de VS Code.",
+        "ar": "تأكد من حفظ عملك بانتظام، إما عن طريق الدفع إلى GitHub أو عن طريق تنزيل ملفاتك عبر VS Code.",
+        "fr": "Assurez-vous de sauvegarder régulièrement votre travail, soit en le poussant vers GitHub, soit en téléchargeant vos fichiers via VS Code.",
+        "tr": "GitHub'a göndererek veya VS Code aracılığıyla dosyalarınızı indirerek çalışmalarınızı düzenli olarak kaydettiğinizden emin olun.",
+        "de": "Stellen Sie sicher, dass Sie Ihre Arbeit regelmäßig speichern, entweder durch Pushen zu GitHub oder durch Herunterladen Ihrer Dateien über VS Code."
+    },
+    "TIPS$SPECIFY_FILES": {
+        "en": "When possible, include the names of files or functions OpenHands should focus on. This can help OpenHands work faster, save money, and improve accuracy.",
+        "ja": "可能な場合は、OpenHandsが集中すべきファイルや関数の名前を含めてください。これにより、OpenHandsの作業が速くなり、コストを節約し、精度を向上させることができます。",
+        "zh-CN": "如果可能，请包含OpenHands应该关注的文件或函数的名称。这可以帮助OpenHands更快地工作，节省成本，并提高准确性。",
+        "zh-TW": "如果可能，請包含OpenHands應該關注的文件或函數的名稱。這可以幫助OpenHands更快地工作，節省成本，並提高準確性。",
+        "ko-KR": "가능한 경우, OpenHands가 집중해야 할 파일이나 함수의 이름을 포함하세요. 이는 OpenHands가 더 빠르게 작업하고, 비용을 절약하며, 정확도를 향상시키는 데 도움이 됩니다.",
+        "no": "Når det er mulig, inkluder navnene på filer eller funksjoner OpenHands bør fokusere på. Dette kan hjelpe OpenHands å jobbe raskere, spare penger og forbedre nøyaktigheten.",
+        "it": "Quando possibile, includi i nomi dei file o delle funzioni su cui OpenHands dovrebbe concentrarsi. Questo può aiutare OpenHands a lavorare più velocemente, risparmiare denaro e migliorare la precisione.",
+        "pt": "Quando possível, inclua os nomes dos arquivos ou funções nos quais o OpenHands deve se concentrar. Isso pode ajudar o OpenHands a trabalhar mais rápido, economizar dinheiro e melhorar a precisão.",
+        "es": "Cuando sea posible, incluya los nombres de los archivos o funciones en los que OpenHands debe centrarse. Esto puede ayudar a OpenHands a trabajar más rápido, ahorrar dinero y mejorar la precisión.",
+        "ar": "عندما يكون ذلك ممكنًا، قم بتضمين أسماء الملفات أو الوظائف التي يجب أن يركز عليها OpenHands. يمكن أن يساعد ذلك OpenHands على العمل بشكل أسرع، وتوفير المال، وتحسين الدقة.",
+        "fr": "Lorsque c'est possible, incluez les noms des fichiers ou des fonctions sur lesquels OpenHands devrait se concentrer. Cela peut aider OpenHands à travailler plus rapidement, à économiser de l'argent et à améliorer la précision.",
+        "tr": "Mümkün olduğunda, OpenHands'in odaklanması gereken dosya veya fonksiyon isimlerini dahil edin. Bu, OpenHands'in daha hızlı çalışmasına, para tasarrufu sağlamasına ve doğruluğu artırmasına yardımcı olabilir.",
+        "de": "Wenn möglich, geben Sie die Namen der Dateien oder Funktionen an, auf die sich OpenHands konzentrieren soll. Dies kann OpenHands helfen, schneller zu arbeiten, Geld zu sparen und die Genauigkeit zu verbessern."
+    },
+    "TIPS$HEADLESS_MODE": {
+        "en": "You can run OpenHands in headless mode to create automations, like responding to 500 errors by automatically creating a fix.",
+        "ja": "OpenHandsをヘッドレスモードで実行して、500エラーに対して自動的に修正を作成するなどの自動化を作成できます。",
+        "zh-CN": "您可以在无头模式下运行OpenHands来创建自动化，例如通过自动创建修复来响应500错误。",
+        "zh-TW": "您可以在無頭模式下運行OpenHands來創建自動化，例如通過自動創建修復來響應500錯誤。",
+        "ko-KR": "OpenHands를 헤드리스 모드로 실행하여 500 오류에 자동으로 수정을 생성하는 등의 자동화를 만들 수 있습니다.",
+        "no": "Du kan kjøre OpenHands i headless-modus for å lage automatiseringer, som å svare på 500-feil ved å automatisk opprette en løsning.",
+        "it": "Puoi eseguire OpenHands in modalità headless per creare automazioni, come rispondere agli errori 500 creando automaticamente una correzione.",
+        "pt": "Você pode executar o OpenHands no modo headless para criar automações, como responder a erros 500 criando automaticamente uma correção.",
+        "es": "Puede ejecutar OpenHands en modo headless para crear automatizaciones, como responder a errores 500 creando automáticamente una solución.",
+        "ar": "يمكنك تشغيل OpenHands في الوضع اللارأسي لإنشاء عمليات آلية، مثل الاستجابة لأخطاء 500 عن طريق إنشاء إصلاح تلقائيًا.",
+        "fr": "Vous pouvez exécuter OpenHands en mode headless pour créer des automatisations, comme répondre aux erreurs 500 en créant automatiquement un correctif.",
+        "tr": "OpenHands'i başsız modda çalıştırarak, 500 hatalarına otomatik olarak düzeltme oluşturarak yanıt vermek gibi otomasyonlar oluşturabilirsiniz.",
+        "de": "Sie können OpenHands im Headless-Modus ausführen, um Automatisierungen zu erstellen, wie z.B. das Reagieren auf 500-Fehler durch automatisches Erstellen einer Lösung."
+    },
+    "TIPS$CLI_MODE": {
+        "en": "You can run OpenHands as a CLI, similar to Claude Code.",
+        "ja": "Claude Codeと同様に、OpenHandsをCLIとして実行できます。",
+        "zh-CN": "您可以将OpenHands作为CLI运行，类似于Claude Code。",
+        "zh-TW": "您可以將OpenHands作為CLI運行，類似於Claude Code。",
+        "ko-KR": "Claude Code와 유사하게 OpenHands를 CLI로 실행할 수 있습니다.",
+        "no": "Du kan kjøre OpenHands som en CLI, lignende Claude Code.",
+        "it": "Puoi eseguire OpenHands come CLI, simile a Claude Code.",
+        "pt": "Você pode executar o OpenHands como CLI, semelhante ao Claude Code.",
+        "es": "Puede ejecutar OpenHands como CLI, similar a Claude Code.",
+        "ar": "يمكنك تشغيل OpenHands كواجهة سطر أوامر، مشابهة لـ Claude Code.",
+        "fr": "Vous pouvez exécuter OpenHands en tant que CLI, similaire à Claude Code.",
+        "tr": "OpenHands'i Claude Code'a benzer şekilde bir CLI olarak çalıştırabilirsiniz.",
+        "de": "Sie können OpenHands als CLI ausführen, ähnlich wie Claude Code."
+    },
+    "TIPS$GITHUB_HOOK": {
+        "en": "OpenHands Cloud offers a GitHub hook, so you can say \"@openhands fix the merge conflicts\" or \"@openhands fix the feedback on this PR\" right inside the GitHub UI.",
+        "ja": "OpenHands CloudはGitHubフックを提供しているため、GitHub UI内で「@openhands マージの競合を修正して」や「@openhands このPRのフィードバックを修正して」と言うことができます。",
+        "zh-CN": "OpenHands Cloud提供GitHub钩子，因此您可以在GitHub UI中直接说\"@openhands 修复合并冲突\"或\"@openhands 修复此PR上的反馈\"。",
+        "zh-TW": "OpenHands Cloud提供GitHub鉤子，因此您可以在GitHub UI中直接說\"@openhands 修復合併衝突\"或\"@openhands 修復此PR上的反饋\"。",
+        "ko-KR": "OpenHands Cloud는 GitHub 훅을 제공하므로 GitHub UI 내에서 \"@openhands 병합 충돌 수정\" 또는 \"@openhands 이 PR의 피드백 수정\"이라고 말할 수 있습니다.",
+        "no": "OpenHands Cloud tilbyr en GitHub-hook, så du kan si \"@openhands fix the merge conflicts\" eller \"@openhands fix the feedback on this PR\" direkte i GitHub-grensesnittet.",
+        "it": "OpenHands Cloud offre un hook GitHub, così puoi dire \"@openhands fix the merge conflicts\" o \"@openhands fix the feedback on this PR\" direttamente nell'interfaccia di GitHub.",
+        "pt": "O OpenHands Cloud oferece um hook do GitHub, para que você possa dizer \"@openhands fix the merge conflicts\" ou \"@openhands fix the feedback on this PR\" diretamente na interface do GitHub.",
+        "es": "OpenHands Cloud ofrece un hook de GitHub, por lo que puede decir \"@openhands fix the merge conflicts\" o \"@openhands fix the feedback on this PR\" directamente en la interfaz de GitHub.",
+        "ar": "يوفر OpenHands Cloud خطافًا لـ GitHub، لذلك يمكنك قول \"@openhands أصلح تعارضات الدمج\" أو \"@openhands أصلح التعليقات على طلب السحب هذا\" مباشرة داخل واجهة GitHub.",
+        "fr": "OpenHands Cloud propose un hook GitHub, vous pouvez donc dire \"@openhands fix the merge conflicts\" ou \"@openhands fix the feedback on this PR\" directement dans l'interface GitHub.",
+        "tr": "OpenHands Cloud, GitHub kancası sunar, böylece GitHub arayüzünde doğrudan \"@openhands birleştirme çakışmalarını düzelt\" veya \"@openhands bu PR'daki geri bildirimi düzelt\" diyebilirsiniz.",
+        "de": "OpenHands Cloud bietet einen GitHub-Hook, sodass Sie \"@openhands fix the merge conflicts\" oder \"@openhands fix the feedback on this PR\" direkt in der GitHub-Benutzeroberfläche sagen können."
+    },
+    "TIPS$BLOG_SIGNUP": {
+        "en": "Sign up for the OpenHands Blog to hear about new features and the latest releases.",
+        "ja": "OpenHandsブログに登録して、新機能や最新リリースについての情報を入手しましょう。",
+        "zh-CN": "注册OpenHands博客，了解新功能和最新版本。",
+        "zh-TW": "註冊OpenHands博客，了解新功能和最新版本。",
+        "ko-KR": "OpenHands 블로그에 가입하여 새로운 기능과 최신 릴리스에 대한 정보를 받아보세요.",
+        "no": "Meld deg på OpenHands-bloggen for å høre om nye funksjoner og de nyeste utgivelsene.",
+        "it": "Iscriviti al Blog di OpenHands per conoscere le nuove funzionalità e gli ultimi rilasci.",
+        "pt": "Inscreva-se no Blog do OpenHands para ouvir sobre novos recursos e as últimas versões.",
+        "es": "Suscríbase al Blog de OpenHands para conocer las nuevas funciones y las últimas versiones.",
+        "ar": "اشترك في مدونة OpenHands للاطلاع على الميزات الجديدة وأحدث الإصدارات",
+        "fr": "Inscrivez-vous au blog OpenHands pour connaître les nouvelles fonctionnalités et les dernières versions.",
+        "tr": "Yeni özellikler ve en son sürümler hakkında bilgi almak için OpenHands Blog'a kaydolun.",
+        "de": "Melden Sie sich für den OpenHands Blog an, um über neue Funktionen und die neuesten Versionen informiert zu werden."
+    },
+    "TIPS$API_USAGE": {
+        "en": "OpenHands has an API! Create OpenHands conversations with simple cURL command.",
+        "ja": "OpenHandsにはAPIがあります！簡単なcURLコマンドでOpenHands会話を作成できます。",
+        "zh-CN": "OpenHands有API！使用简单的cURL命令创建OpenHands对话。",
+        "zh-TW": "OpenHands有API！使用簡單的cURL命令創建OpenHands對話。",
+        "ko-KR": "OpenHands에는 API가 있습니다! 간단한 cURL 명령으로 OpenHands 대화를 만들 수 있습니다.",
+        "no": "OpenHands har et API! Opprett OpenHands-samtaler med enkel cURL-kommando.",
+        "it": "OpenHands ha un'API! Crea conversazioni OpenHands con un semplice comando cURL.",
+        "pt": "OpenHands tem uma API! Crie conversas OpenHands com um simples comando cURL.",
+        "es": "¡OpenHands tiene una API! Cree conversaciones de OpenHands con un simple comando cURL.",
+        "ar": "OpenHands لديه واجهة برمجة تطبيقات! قم بإنشاء محادثات OpenHands باستخدام أمر cURL بسيط.",
+        "fr": "OpenHands a une API ! Créez des conversations OpenHands avec une simple commande cURL.",
+        "tr": "OpenHands'in bir API'si var! Basit bir cURL komutuyla OpenHands konuşmaları oluşturun.",
+        "de": "OpenHands hat eine API! Erstellen Sie OpenHands-Gespräche mit einem einfachen cURL-Befehl."
+    },
+    "TIPS$LEARN_MORE": {
+        "en": "Learn more",
+        "ja": "詳細を見る",
+        "zh-CN": "了解更多",
+        "zh-TW": "了解更多",
+        "ko-KR": "더 알아보기",
+        "no": "Lær mer",
+        "it": "Scopri di più",
+        "pt": "Saiba mais",
+        "es": "Más información",
+        "ar": "اعرف المزيد",
+        "fr": "En savoir plus",
+        "tr": "Daha fazla bilgi",
+        "de": "Mehr erfahren"
+    },
+    "TIPS$PROTIP": {
+        "en": "Protip",
+        "ja": "プロのヒント",
+        "zh-CN": "专业提示",
+        "zh-TW": "專業提示",
+        "ko-KR": "프로팁",
+        "no": "Proffetips",
+        "it": "Consiglio pro",
+        "pt": "Dica profissional",
+        "es": "Consejo profesional",
+        "ar": "نصيحة احترافية",
+        "fr": "Astuce pro",
+        "tr": "Uzman ipucu",
+        "de": "Profi-Tipp"
     }
 }

frontend/src/routes.ts

@@ -17,7 +17,7 @@ export default [
       route("api-keys", "routes/api-keys.tsx"),
     ]),
     route("conversations/:conversationId", "routes/conversation.tsx", [
-      index("routes/editor.tsx"),
+      index("routes/changes-tab.tsx"),
       route("browser", "routes/browser-tab.tsx"),
       route("jupyter", "routes/jupyter-tab.tsx"),
       route("served", "routes/served-tab.tsx"),

frontend/src/routes/changes-tab.tsx

@@ -1,11 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
+import React from "react";
 import { FileDiffViewer } from "#/components/features/diff-viewer/file-diff-viewer";
 import { retrieveAxiosErrorMessage } from "#/utils/retrieve-axios-error-message";
 import { useGetGitChanges } from "#/hooks/query/use-get-git-changes";
 import { I18nKey } from "#/i18n/declaration";
 import { RootState } from "#/store";
 import { RUNTIME_INACTIVE_STATES } from "#/types/agent-state";
+import { RandomTip } from "#/components/features/tips/random-tip";
 
 // Error message patterns
 const GIT_REPO_ERROR_PATTERN = /not a git repository/i;
@@ -18,7 +20,7 @@ function StatusMessage({ children }: React.PropsWithChildren) {
   );
 }
 
-function EditorScreen() {
+function GitChanges() {
   const { t } = useTranslation();
   const { data: gitChanges, isSuccess, isError, error } = useGetGitChanges();
 
@@ -28,37 +30,50 @@ function EditorScreen() {
   const isNotGitRepoError =
     error && GIT_REPO_ERROR_PATTERN.test(retrieveAxiosErrorMessage(error));
 
-  return (
-    <main className="h-full overflow-y-scroll px-4 py-3 gap-3 flex flex-col">
-      {!runtimeIsActive && (
-        <StatusMessage>
-          {t(I18nKey.DIFF_VIEWER$WAITING_FOR_RUNTIME)}
-        </StatusMessage>
-      )}
-      {!isNotGitRepoError && error && (
-        <StatusMessage>{retrieveAxiosErrorMessage(error)}</StatusMessage>
-      )}
-      {isNotGitRepoError && (
-        <StatusMessage>
+  let statusMessage: React.ReactNode = null;
+  if (!runtimeIsActive) {
+    statusMessage = <span>{t(I18nKey.DIFF_VIEWER$WAITING_FOR_RUNTIME)}</span>;
+  } else if (isNotGitRepoError) {
+    if (error) {
+      statusMessage = <span>{retrieveAxiosErrorMessage(error)}</span>;
+    } else {
+      statusMessage = (
+        <span>
           {t(I18nKey.DIFF_VIEWER$NOT_A_GIT_REPO)}
           <br />
           {t(I18nKey.DIFF_VIEWER$ASK_OH)}
-        </StatusMessage>
-      )}
+        </span>
+      );
+    }
+  }
 
-      {runtimeIsActive && !isError && gitChanges?.length === 0 && (
-        <StatusMessage>{t(I18nKey.DIFF_VIEWER$NO_CHANGES)}</StatusMessage>
-      )}
-      {isSuccess &&
+  return (
+    <main className="h-full overflow-y-scroll px-4 py-3 gap-3 flex flex-col items-center">
+      {!isSuccess || !gitChanges.length ? (
+        <div className="relative flex h-full w-full items-center">
+          <div className="absolute inset-x-0 top-1/2 -translate-y-1/2">
+            {statusMessage && <StatusMessage>{statusMessage}</StatusMessage>}
+          </div>
+
+          <div className="absolute inset-x-0 bottom-0">
+            {!isError && gitChanges?.length === 0 && (
+              <div className="max-w-2xl mb-4 text-m bg-tertiary rounded-xl p-4 text-left mx-auto">
+                <RandomTip />
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
         gitChanges.map((change) => (
           <FileDiffViewer
             key={change.path}
             path={change.path}
             type={change.status}
           />
-        ))}
+        ))
+      )}
     </main>
   );
 }
 
-export default EditorScreen;
+export default GitChanges;

frontend/src/utils/tips.ts

@@ -0,0 +1,48 @@
+import { I18nKey } from "#/i18n/declaration";
+
+export interface Tip {
+  key: I18nKey;
+  link?: string;
+}
+
+export const TIPS: Tip[] = [
+  {
+    key: I18nKey.TIPS$CUSTOMIZE_MICROAGENT,
+    link: "https://docs.all-hands.dev/modules/usage/prompting/microagents-repo",
+  },
+  {
+    key: I18nKey.TIPS$SETUP_SCRIPT,
+    link: "https://docs.all-hands.dev/modules/usage/customization/repository",
+  },
+  { key: I18nKey.TIPS$VSCODE_INSTANCE },
+  { key: I18nKey.TIPS$SAVE_WORK },
+  {
+    key: I18nKey.TIPS$SPECIFY_FILES,
+    link: "https://docs.all-hands.dev/modules/usage/prompting/prompting-best-practices",
+  },
+  {
+    key: I18nKey.TIPS$HEADLESS_MODE,
+    link: "https://docs.all-hands.dev/modules/usage/how-to/headless-mode",
+  },
+  {
+    key: I18nKey.TIPS$CLI_MODE,
+    link: "https://docs.all-hands.dev/modules/usage/how-to/cli-mode",
+  },
+  {
+    key: I18nKey.TIPS$GITHUB_HOOK,
+    link: "https://docs.all-hands.dev/modules/usage/cloud/cloud-github-resolver",
+  },
+  {
+    key: I18nKey.TIPS$BLOG_SIGNUP,
+    link: "https://www.all-hands.dev/blog",
+  },
+  {
+    key: I18nKey.TIPS$API_USAGE,
+    link: "https://docs.all-hands.dev/swagger-ui/",
+  },
+];
+
+export function getRandomTip(): Tip {
+  const randomIndex = Math.floor(Math.random() * TIPS.length);
+  return TIPS[randomIndex];
+}