Merge remote-tracking branch 'origin/master' into jupyter-llm-8500

Author: haraldschilly

src/.claude/commands/update-i18n.md

@@ -0,0 +1,49 @@
+# Update i18n Translations
+
+Complete workflow for updating internationalization translations in CoCalc frontend.
+
+## What this command does
+
+This command runs the full i18n update sequence:
+1. **Extract** new translation strings from source code
+2. **Upload** them to SimpleLocalize for automatic translation to 19+ languages  
+3. **Download** the translated files
+4. **Compile** them for runtime use
+
+## Usage
+
+```
+/update-i18n
+```
+
+## Commands executed
+
+Run this in `./packages/frontend/`
+
+Step 1:
+
+Wait for the auto-translations to finish
+
+```bash
+pnpm i18n:extract && pnpm i18n:upload
+```
+
+Step 2:
+
+
+```
+pnpm i18n:download && pnpm i18n:compile
+```
+
+## When to use
+
+- After adding new FormattedMessage components with translation IDs
+- After modifying existing translation strings
+- When preparing translations for a new feature release
+- When onboarding new languages
+
+## Prerequisites
+
+- Must be in the `packages/frontend` directory
+- SIMPLELOCALIZE_KEY environment variable must be set
+- Changes to translation strings should already be committed to source code

src/.claude/settings.json

@@ -3,6 +3,8 @@
     "allow": [
       "Bash(../node_modules/.bin/tsc:*)",
       "Bash(NODE_OPTIONS=--max-old-space-size=8192 ../node_modules/.bin/tsc --noEmit)",
+      "Bash(bash:*)",
+      "Bash(curl:*)",
       "Bash(curl:*)",
       "Bash(docker run:*)",
       "Bash(find:*)",
@@ -19,8 +21,10 @@
       "Bash(npx tsc:*)",
       "Bash(pnpm build:*)",
       "Bash(pnpm i18n:*)",
+      "Bash(pnpm list:*)",
       "Bash(pnpm ts-build:*)",
       "Bash(pnpm tsc:*)",
+      "Bash(pnpm why:*)",
       "Bash(prettier -w:*)",
       "Bash(psql:*)",
       "WebFetch(domain:cocalc.com)",
@@ -29,10 +33,14 @@
       "WebFetch(domain:github.com)",
       "WebFetch(domain:mistral.ai)",
       "WebFetch(domain:simplelocalize.io)",
-      "Bash(pnpm list:*)",
-      "Bash(pnpm why:*)",
-      "mcp__github__get_issue",
       "WebFetch(domain:www.anthropic.com)",
+      "WebSearch",
+      "mcp__cclsp__find_definition",
+      "mcp__github__get_issue",
+      "mcp__github__get_pull_request_comments",
+      "mcp__github__get_pull_request",
+      "mcp__github__get_issue_comments",
+      "mcp__github__get_pull_request_comments",
       "mcp__cclsp__find_definition"
     ],
     "deny": []

src/CLAUDE.md

@@ -16,18 +16,20 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 - Run `pretter -w [filename]` after modifying a file (ts, tsx, md, json, ...) to format it correctly.
 - All .js and .ts files are formatted by the tool prettier
 - Add suitable types when you write code
-- Variable name styles are "camelCase" for local and "FOO_BAR" for global variables. If you edit older code not following these guidlines, adjust this rule to fit the files style.
+- Follow DRY principles!
+- Variable name styles are `camelCase` for local and `FOO_BAR` for global variables. React Components and Classes are `FooBar`. If you edit older code not following these guidlines, adjust this rule to fit the files style.
 - Some older code is JavaScript or CoffeeScript, which will be translated to TypeScript
 - Use ES modules (import/export) syntax, not CommonJS (require)
 - Organize the list of imports in such a way: installed npm packages are on top, newline, then are imports from @cocalc's code base. Sorted alphabetically.
+- **Colors**: Always use the `COLORS` dictionary from `@cocalc/util/theme` for all color values. Never hardcode colors like `#f0f0f0` or `rgb(...)`. Import with `import { COLORS } from "@cocalc/util/theme";` and use predefined constants like `COLORS.GRAY_M`, `COLORS.GRAY_L`, `COLORS.GRAY_LL`, etc.
 - **Backend Logging**: Use `getLogger` from `@cocalc/project/logger` for logging in backend code. Do NOT use `console.log`. Example: `const L = getLogger("module:name").debug;`
 
 ## Development Commands
 
 ### Essential Commands
 
 - `pnpm build-dev` - Build all packages for development
-- `pnpm clean` - Clean all node_modules and dist directories
+- `pnpm clean` - Clean all `node_modules` and `dist` directories
 - `pnpm test` - Run full test suite
 - `pnpm depcheck` - Check for dependency issues
 - `python3 ./scripts/check_npm_packages.py` - Check npm package consistency across packages
@@ -38,15 +40,16 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 
 - `cd packages/[package] && pnpm build` - Build and compile a specific package
   - for packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
-- `cd packages/[package] && pnpm tsc:watch` - TypeScript compilation in watch mode for a specific package
 - `cd packages/[package] && pnpm test` - Run tests for a specific package
 - `cd packages/[package] && pnpm build` - Build a specific package
+- To typecheck the frontend, it is best to run `cd packages/static && pnpm build` - this implicitly compiles the frontend and reports typescript errors
 - **IMPORTANT**: When modifying packages like `util` that other packages depend on, you must run `pnpm build` in the modified package before typechecking dependent packages
 
 ### Development
 
 - **IMPORTANT**: Always run `prettier -w [filename]` immediately after editing any .ts, .tsx, .md, or .json file to ensure consistent styling
 - After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
+  - When editing the frontend, run `pnpm build-dev` in `packages/static`. This implicitly builds the frontend!
 
 ## Architecture Overview
 
@@ -166,18 +169,34 @@ CoCalc is organized as a monorepo with key packages:
 
 CoCalc uses react-intl for internationalization with SimpleLocalize as the translation platform.
 
+### Architecture Overview
+
+- **Library**: Uses `react-intl` library with `defineMessages()` and `defineMessage()`
+- **Default Language**: English uses `defaultMessage` directly - no separate English translation files
+- **Supported Languages**: 19+ languages including German, Chinese, Spanish, French, Italian, Dutch, Russian, Japanese, Portuguese, Korean, Polish, Turkish, Hebrew, Hindi, Hungarian, Arabic, and Basque
+- **Translation Platform**: SimpleLocalize with OpenAI GPT-4o for automatic translations
+
 ### Translation ID Naming Convention
 
 Translation IDs follow a hierarchical pattern: `[directory].[subdir].[filename].[aspect].[label|title|tooltip|...]`
 
 Examples:
+
 - `labels.masked_files` - for common UI labels
 - `account.sign-out.button.title` - for account sign-out dialog
 - `command.generic.force_build.label` - for command labels
 
+### Usage Patterns
+
+- **TSX Components**: `<FormattedMessage id="..." defaultMessage="..." />`
+- **Data Structures**: `defineMessage({id: "...", defaultMessage: "..."})`
+- **Programmatic Use**: `useIntl()` hook + `intl.formatMessage()`
+- **Non-React Contexts**: `getIntl()` function
+
 ### Translation Workflow
 
 **For new translation keys:**
+
 1. Add the translation to source code (e.g., `packages/frontend/i18n/common.ts`)
 2. Run `pnpm i18n:extract` - updates `extracted.json` from source code
 3. Run `pnpm i18n:upload` - sends new strings to SimpleLocalize
@@ -190,14 +209,22 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
 
 ### Translation File Structure
 
-- `packages/frontend/i18n/README.md` - more information
-- `packages/frontend/i18n/common.ts` - shared translation definitions
-- `packages/frontend/i18n/extracted.json` - auto-generated, do not edit manually
-- `packages/frontend/i18n/[locale].json` - downloaded translations per language
-- `packages/frontend/i18n/[locale].compiled.json` - compiled for runtime use
+- `packages/frontend/i18n/README.md` - detailed documentation
+- `packages/frontend/i18n/common.ts` - shared translation definitions (labels, menus, editor, jupyter, etc.)
+- `packages/frontend/i18n/extracted.json` - auto-extracted messages from source code
+- `packages/frontend/i18n/trans/[locale].json` - downloaded translations from SimpleLocalize
+- `packages/frontend/i18n/trans/[locale].compiled.json` - compiled translation files for runtime
+- `packages/frontend/i18n/index.ts` - exports and locale loading logic
 
 # Ignore
 
 - Ignore files covered by `.gitignore`
 - Ignore everything in `node_modules` or `dist` directories
 - Ignore all files not tracked by Git, unless they are newly created files
+
+# important-instruction-reminders
+
+Do what has been asked; nothing more, nothing less.
+NEVER create files unless they're absolutely necessary for achieving your goal.
+ALWAYS prefer editing an existing file to creating a new one.
+NEVER proactively create documentation files (\*.md) or README files. Only create documentation files if explicitly requested by the User.

src/packages/frontend/account/i18n-selector.tsx

@@ -167,7 +167,7 @@ export function I18NSelector(props: Readonly<Props>) {
 
   const menu: MenuProps = {
     items,
-    style: { maxHeight: "75vh", overflow: "auto" },
+    style: { maxHeight: "50vh", overflow: "auto" },
     onClick: ({ key }) => {
       if (key in LOCALIZATIONS) {
         if (confirm) {