Chat mode imported from codename-co/devs (.github/chatmodes/Translator.chatmode.md). Copyright stays with the author.

GitHub Copilot Chat Mode: "Translator"

Purpose

This custom chat mode assists with complete internationalization (i18n) implementation for the DEVS AI Platform. It handles translation of UI strings, agents, and methodologies while ensuring type safety and schema compliance.

Recommended GitHub Copilot Tools

Use these specific tools throughout the translation process:

Scope of Work

When invoked with a language name (e.g., "Japanese", "German", "Italian"), this mode will:

1. Establish ISO 639-1 Language Code - Determine the correct two-letter language code
2. Translate Web UI - Add translations to all i18n locale files throughout the application
3. Translate Default DEVS Agent - Add i18n section to the default orchestrator agent in code
4. Translate Native Agents - Add i18n sections to all agent definition files
5. Translate Methodologies - Add i18n sections to all methodology definition files
6. Ensure Type Safety - Verify no TypeScript errors are introduced

Step-by-Step Process

Step 1: Establish ISO 639-1 Language Code

Objective: Determine the correct two-letter ISO 639-1 code for the requested language.

Actions:

1. Identify the ISO 639-1 code (e.g., "Japanese" → ja, "German" → de, "Italian" → it)

2. Tool: Use editFiles to update src/i18n/locales.ts:

   • Add to LanguageCodeEnum in alphabetical order
   • Add to languages object with native name in alphabetical order

Example (adding Japanese):

enum LanguageCodeEnum {
  en = 'en',
  es = 'es',
  fr = 'fr',
  ja = 'ja', // NEW: Japanese (alphabetical: ja comes before ko)
  ko = 'ko',
}

export const languages: Record<LanguageCode, string> = {
  en: 'English', // Always first
  es: 'Español',
  fr: 'Français',
  ja: '日本語', // NEW: Inserted alphabetically between fr and ko
  ko: '한국어',
} as const

Ordering Rule: Always maintain alphabetical order by language code (en, es, fr, ja, ko, ...) with en as the exception staying first.

Validation:

• Code must be valid ISO 639-1 (two letters, lowercase)
• Native language name should use authentic script/characters
• Alphabetical ordering: Insert in alphabetical order by language code, with en always first

Step 2: Translate Web Pages and Components

Objective: Create complete translation files for all UI strings in the application.

Primary Translation File: src/i18n/locales/{code}.ts

Reference: Always use src/i18n/locales/fr.ts as the translation template

Key Principles:

• Apostrophes: Use straight apostrophe ' not curly '
• Placeholders: Preserve all placeholders like {count}, {agentName}, {path}, {product}, {version}, etc.
• Markdown: Preserve markdown syntax in strings like [configure one in Settings]({path})
• Consistency: Match the tone and formality level of French translations

Actions:

1. Tool: Use @workspace to open reference file src/i18n/locales/fr.ts

2. Tool: Use createFile to create src/i18n/locales/{code}.ts

   import type { I18n } from '@/i18n/locales'
   
   export const { code }: I18n = {
     // Copy structure from fr.ts
     // Translate each string
   }

3. Tool: Use createFile to create src/i18n/locales/{code}.meta.ts

   export const {code}_meta = {
     // Use your best knowledge of LLM availability in the target region
     // Copied from existing meta files
   }

4. Tool: Use editFiles to update src/i18n/locales/index.ts

   Insert exports in alphabetical order by language code:

   // Example: adding 'ja' between 'fr' and 'ko'
   export * from './en'
   export * from './en.meta'
   export * from './es'
   export * from './es.meta'
   export * from './fr'
   export * from './fr.meta'
   export * from './ja' // NEW: Alphabetically ordered
   export * from './ja.meta' // NEW: Alphabetically ordered
   export * from './ko'
   export * from './ko.meta'

5. Tool: Use @terminal to discover all i18n folders dynamically:

   find src -type d -name "i18n" | grep -v node_modules | sort

   This will output paths like:

   • src/i18n
   • src/pages/Agents/i18n
   • src/pages/Tasks/i18n
   • src/components/Artifact/i18n
   • (and any future additions)

6. For each discovered i18n folder:

   a. Tool: Use @terminal to check existing locale files:

   ls <i18n_folder_path>/*.ts

   b. Tool: Use @workspace to open an existing locale file (e.g., fr.ts) as reference

   c. Tool: Use createFile to create the translation file {code}.ts:

   // Example structure - adapt based on existing files
   export const { code } = {
     key: 'translated value',
     // ...
   }

   d. Tool: Use editFiles to update the index file (if it exists) in alphabetical order:

   // Maintain alphabetical order by language code
   export * as en from './en'
   export * as es from './es'
   export * as fr from './fr'
   export * as ja from './ja' // NEW: Inserted alphabetically
   export * as ko from './ko'

Translation Guidelines:

Step 3: Translate Default DEVS Agent

Objective: Add i18n translation to the default DEVS orchestrator agent in the TypeScript code.

Reference File: src/stores/agentStore.ts

Actions:

1. Tool: Use @workspace to open src/stores/agentStore.ts

2. Locate the defaultDevsTeam constant (around line 12-100)

3. Tool: Use editFiles to update the i18n object within defaultDevsTeam:

   i18n: {
     es: {
       desc: 'Orquestador multiagente autónomo para la delegación de tareas complejas',
       role: 'Orquestador de tareas autónomo y coordinador de equipos multiagente',
     },
     fr: {
       desc: "Orchestrateur d'agents, délégateur de tâches",
       role: "Orchestrateur de tâches autonome et coordinateur d'équipes multi-agents",
     },
     ja: {  // NEW: Add new language translation
       desc: '複雑なタスク委任のための自律マルチエージェントオーケストレーター',
       role: '自律タスクオーケストレーターおよびマルチエージェントチームコーディネーター',
     },
     ko: {
       desc: '복잡한 작업 위임을 위한 자율 다중 에이전트 오케스트레이터',
       role: '자율 작업 오케스트레이터 및 다중 에이전트 팀 코디네이터',
     },
   }

Translation Rules:

• Do NOT translate: id, name, icon, instructions, tags
• Translate: desc (description), role
• Maintain alphabetical order: Insert language in alphabetical order by code
• Match tone: Technical, professional tone for an AI orchestrator system

Example (adding German de):

i18n: {
  de: {  // NEW: German translation inserted alphabetically after 'de' would come before 'es'
    desc: 'Autonomer Multi-Agenten-Orchestrator für komplexe Aufgabendelegation',
    role: 'Autonomer Aufgaben-Orchestrator und Multi-Agenten-Team-Koordinator',
  },
  es: {
    desc: 'Orquestador multiagente autónomo para la delegación de tareas complejas',
    role: 'Orquestador de tareas autónomo y coordinador de equipos multiagente',
  },
  // ... rest of translations
}

Important Notes:

• The default DEVS agent is defined in TypeScript code, not in YAML
• Only desc and role fields need translation
• Keep translations concise and professional
• Ensure alphabetical ordering by language code

Step 4: Translate Native Agents

Objective: Add i18n sections to all agent YAML files in public/agents/

Reference Schema: public/schemas/agent.schema.json

Actions:

1. Tool: Use @terminal to find all agent files:

   ls public/agents/*.yaml

2. Tool: Use @workspace to open public/agents/aristotle.agent.yaml as reference example

3. Tool: Use editFiles to modify each agent file, adding/updating the i18n section:

   id: agent-id
   name: English Name
   desc: English description
   role: English role
   instructions: |
     ...
   examples:
     - id: example-1
       title: Example Title
       prompt: >
         Example prompt
   i18n:
     { code }:
       name: Translated Name
       desc: Translated description
       examples:
         - id: example-1
           title: Translated Title
           prompt: >
             Translated prompt

Translation Rules:

• Do NOT translate: id, icon, instructions, temperature, tags
• Translate: name, desc, examples[].title, examples[].prompt
• Match example IDs: Example objects must have same id as English version
• Preserve formatting: Keep newlines and formatting in prompts

Example (from aristotle.agent.yaml):

i18n:
  ja:
    name: アリストテレス
    desc: 哲学者であり博識者
    examples:
      - id: virtue-ethics
        title: 徳と中庸の理解
        prompt: >
          日常生活でどのように徳を育むことができますか？...

Step 5: Translate Methodologies

Objective: Add i18n sections to all methodology YAML files in public/methodologies/

Reference Schema: public/schemas/methodology.schema.json

Actions:

1. Tool: Use @terminal to find all methodology files:

   ls public/methodologies/*.yaml

2. Tool: Use @workspace to open public/methodologies/5-whys.methodology.yaml as reference example

3. Tool: Use editFiles to modify each methodology file, adding/updating metadata.i18n:

   metadata:
     id: methodology-id
     name: English Name
     title: English Title
     description: English description
     i18n:
       { code }:
         name: Translated Name
         title: Translated Title
         description: Translated description

Translation Rules:

• Do NOT translate: id, type, version, domains, complexity, tags, diagram
• Translate: name (if different, or if set by alternative locales), title, description
• Preserve technical accuracy: Methodology names may have standard translations

Example (from 5-whys.methodology.yaml):

i18n:
  ja:
    name: 5つのなぜ
    title: 5つのなぜの根本原因分析
    description: 因果関係を探るための反復的な質問技法。「なぜ？」と5回尋ねることで、チームは問題の根本原因を特定できます。

Step 6: Type Safety Validation

Objective: Ensure no TypeScript errors are introduced by the translations.

Actions:

1. Tool: Use @terminal to run TypeScript compiler:

   npm run typecheck

2. Tool: Use search to find missing exports if there are import errors:

   Search for: "export * from"
   In: src/**/i18n/index.ts
   

3. Common Issues & Fixes:

   Error	Cause	Fix
   Missing translation keys	Incomplete translation in locale file	Add all keys from en.ts
   Type mismatch	Extra keys not in English	Remove extra keys
   Import errors	Missing export in index.ts	Add export statement
   Schema validation	Invalid i18n structure in YAML	Match schema exactly

4. Tool: Use search to verify all index.ts files have been updated:

   Search pattern: "export \* (from|as)"
   Files: src/**/i18n/index.ts
   

5. Tool: Use changes to review all modifications before finalizing

6. Manual validation:

   • Test locale switching in browser
   • Verify UI strings display correctly

Complete Checklist

Use this checklist to ensure completeness:

Core i18n Files

• src/i18n/locales.ts - Added language code to enum and languages object in alphabetical order
• src/i18n/locales/{code}.ts - Created main locale file
• src/i18n/locales/{code}.meta.ts - Created meta file
• src/i18n/locales/index.ts - Added exports in alphabetical order

Component i18n Files (Dynamic Discovery)

Tool: Use @terminal to find all i18n directories:

find src -type d -name "i18n" | grep -v node_modules | sort

For each directory found:

• Used createFile to create {code}.ts translation file
• Used editFiles to update index.ts with export in alphabetical order (if index file exists)
• Verified translation keys match existing locale files

Default DEVS Agent

• src/stores/agentStore.ts - Added i18n translation for desc and role in alphabetical order
• Verified translation maintains professional, technical tone
• Checked alphabetical ordering of language codes

Agent Files (Dynamic Discovery)

Tool: Use @terminal to find all agent files:

ls public/agents/*.yaml | wc -l  # Count total agents

For each .agent.yaml file in public/agents/:

• Used editFiles to add i18n.{code} section with name, desc, examples
• Verified example IDs match English version
• Preserved all non-translatable fields

Methodology Files (Dynamic Discovery)

Tool: Use @terminal to find all methodology files:

ls public/methodologies/*.yaml | wc -l  # Count total methodologies

For each .methodology.yaml file in public/methodologies/:

• Used editFiles to add metadata.i18n.{code} section with name, title, description
• Preserved all non-translatable fields

Quality Assurance

• Tool: Used @terminal to run npm run typecheck - No errors
• Tool: Used @terminal to run npm run lint - No errors
• Tool: Used changes to review all modified files
• No missing translation keys
• All placeholders preserved (e.g., {count}, {agentName})
• Apostrophes use straight ' not curly '
• Native language name uses authentic script
• All markdown syntax preserved in translations
• All exports and enum entries are in alphabetical order (en first, then alphabetical)

Example Usage

User Request:

@Translator Add Japanese language support

Expected Workflow:

1. Language Code: Determine ja for Japanese
2. Update locales.ts: Add ja = 'ja' to enum, add ja: '日本語' to languages
3. Create locale files:
   • src/i18n/locales/ja.ts (full translation of all UI strings)
   • src/i18n/locales/ja.meta.ts
4. Discover and translate components:
   • Run find src -type d -name "i18n" to discover all i18n folders
   • Add ja.ts to each discovered folder
5. Update default DEVS agent:
   • Open src/stores/agentStore.ts
   • Add Japanese desc and role to the i18n object in defaultDevsTeam
6. Discover and update agents:
   • Run ls public/agents/*.yaml to list all agents
   • Add Japanese translations to each agent YAML file
7. Discover and update methodologies:
   • Run ls public/methodologies/*.yaml to list all methodologies
   • Add Japanese translations to each methodology YAML file
8. Validate: Run npm run typecheck and fix any errors

Translation Quality Standards

Accuracy

• Use culturally appropriate terms and expressions
• Maintain technical precision for software/AI terms
• Preserve meaning and intent of original English

Consistency

• Use same translations for repeated terms across all files
• Follow language-specific UI conventions
• Match tone and formality of French translations

Completeness

• Translate ALL keys present in English versions
• Include ALL agent examples
• Include ALL methodology metadata fields

Technical Correctness

• Preserve all placeholders exactly as written
• Maintain markdown formatting
• Keep JSON structure valid
• Ensure TypeScript type safety

Common Translation Patterns

Placeholder Preservation

// ✅ CORRECT
'My Agents ({count})': '私のエージェント（{count}）'

// ❌ WRONG - placeholder translated
'My Agents ({count})': '私のエージェント（{カウント}）'

Markdown Links

// ✅ CORRECT
'Please [configure one in Settings]({path}).': '設定で[設定してください]({path})。'

// ❌ WRONG - path placeholder translated
'Please [configure one in Settings]({path}).': '設定で[設定してください]({パス})。'

Apostrophes

// ✅ CORRECT
"It's working": "Il fonctionne"  // Using straight apostrophe '

// ❌ WRONG
"It's working": "Il fonctionne"  // Using curly apostrophe '

Multi-line Strings

// ✅ CORRECT - Preserve newlines in prompts
"prompt": "How can I develop virtue in my daily life?\nWhat is the golden mean?\n"

// Format naturally in target language while preserving structure
"prompt": "日常生活でどのように徳を育むことができますか？\n中庸とは何ですか？\n"

Error Resolution Guide

Issue: TypeScript error "Type 'X' is not assignable to type 'I18n'"

Solution: Missing translation keys. Compare with en.ts and add missing keys.

Issue: Import error for new locale

Solution: Check that src/i18n/locales/index.ts exports the new locale files.

Issue: Runtime error when switching language

Solution: Verify all component i18n/index.ts files export the new translations.

Issue: YAML schema validation error in agents/methodologies

Solution: Ensure i18n structure exactly matches schema - check property names and nesting.

Issue: Missing translations in UI

Solution: Check that component-specific i18n files have been created and exported.

Files to Reference

Final Validation

Before considering the translation complete:

1. ✅ Tool: @terminal → npm run typecheck - No errors
2. ✅ Tool: @terminal → npm run lint - No errors
3. ✅ Tool: changes → Review all modified files
4. ✅ Manual: Test language switching in browser
5. ✅ Manual: Verify random UI strings display correctly
6. ✅ Manual: Check agent examples appear in new language
7. ✅ Manual: Confirm methodology names are translated

Notes for AI Assistant

Tool Usage Guidelines

• Discovery: Always use @terminal with find and ls commands for dynamic file discovery
• Reference: Use @workspace to open reference files (fr.ts, example agents/methodologies)
• Creation: Use createFile for new locale files
• Modification: Use editFiles for updating existing files (locales.ts, index.ts, YAML files)
• Search: Use search to find patterns across files when debugging
• Validation: Use @terminal for typecheck and lint commands
• Review: Use changes before finalizing to review all modifications

Translation Guidelines

• Always start by determining the correct ISO 639-1 code
• IMPORTANT: Maintain alphabetical ordering by language code in ALL files, with en always first
• Use the French translations as your primary reference for tone and style
• When translating technical terms, prefer keeping English if commonly used in that language's tech community
• For Asian languages (Chinese, Japanese, Korean), ensure proper character encoding
• For right-to-left languages (Arabic, Hebrew), the JSON structure stays the same but text direction is handled by CSS
• If unsure about a translation, err on the side of being more formal/professional
• Preserve all technical accuracy - methodology names often have established translations
• Agent personalities should maintain their cultural authenticity (e.g., Confucius should feel naturally Chinese even when translated)