feat(frontend): add software requirements display for shell types #259
Conversation
Added SoftwareRequirements component to show minimum version requirements for different shell types (ClaudeCode, Agno) when creating or editing shells. This helps users understand environment preparation requirements before validation. Changes: - Created SoftwareRequirements.tsx with version requirement data structure - Integrated component into ShellEdit to display requirements based on selected shell type - Added copy-to-clipboard functionality for check commands - Supports responsive layout (single column on mobile, dual column on desktop) - Added i18n translations for Chinese and English
WalkthroughAdds a new SoftwareRequirements React component, conditionally renders it from ShellEdit when a base shell is selected, provides copy-to-clipboard for commands, and adds English and Chinese translation keys for the UI strings. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
frontend/src/features/settings/components/ShellEdit.tsx (1)
29-29: SoftwareRequirements integration looks correct; minor readability tweak optionalThe new import and conditional render correctly derive the selected shell from
baseShellsand safely renderSoftwareRequirementsonly whenshellTypeis available. Behavior for unknown/unsupported shell types falls back to “no UI,” which matches the Dify requirements case.If you want to simplify readability, you could precompute
selectedShellviauseMemoor a simple local variable before JSX rather than using an inline IIFE in the markup, but this is purely optional.Also applies to: 506-512
frontend/src/features/settings/components/SoftwareRequirements.tsx (4)
1-13: Rename file to kebab‑case to match components naming guidelineSince this lives under a
componentsdirectory and the repo guidelines say**/components/**/*.{ts,tsx}must use kebab‑case filenames, consider renaming the file tosoftware-requirements.tsxand updating the import inShellEdit.tsxto./software-requirements.
14-22: Interface is clear; note thatversionRegexis currently unusedThe
SoftwareRequirementshape is straightforward and well‑documented. Right nowversionRegexis not used anywhere; that’s fine, but if there’s no near‑term plan to consume it, you could drop it to keep the interface minimal, or add a brief TODO indicating planned usage.
72-163: Component behavior and UX are solid; consider i18n for descriptionsThe main component logic looks good:
- Early‑return when there are no requirements (e.g., Dify) avoids rendering empty chrome.
- Clipboard handling with a transient
copiedCommandstate and a check icon provides nice feedback.- Layout uses shadcn/ui primitives and existing design tokens; responsive grid is mobile‑first.
Two minor potential improvements:
- The
descriptionstrings are hard‑coded in English; if you want full localization parity, consider moving them into the i18n files similar to the title/hint.- You might want to log copy failures at a lower level or with a more structured logger if you have one, but
console.erroris acceptable for now.Both are non‑blocking.
24-70: Improve type safety forshellTypeandshellRequirementsusingas constandsatisfiesThe current code accepts any string for
shellType, risking runtime errors when accessingshellRequirements[shellType]. TypeScript 5.7 supports the recommended pattern of combiningas constwithsatisfiesto preserve literal types while validating shape:-const shellRequirements: Record<string, SoftwareRequirement[]> = { +const shellRequirements = { ClaudeCode: [ { name: 'Node.js', command: 'node --version', minVersion: '20.0.0', required: true, description: 'JavaScript runtime for Claude Code CLI', }, { name: 'Python', command: 'python --version', minVersion: '3.12.0', required: true, description: 'Python interpreter for agent execution', }, { name: 'SQLite', command: 'sqlite3 --version', minVersion: '3.50.0', required: true, description: 'Database for local data storage', }, { name: 'claude-code', command: 'claude-code --version', minVersion: '0.1.0', required: false, description: 'Claude Code CLI (recommended)', }, ], Agno: [ { name: 'Python', command: 'python --version', minVersion: '3.12.0', required: true, description: 'Python interpreter for agent execution', }, ], Dify: [], +} as const satisfies Record<string, SoftwareRequirement[]>; +type ShellType = keyof typeof shellRequirements; + interface SoftwareRequirementsProps { - shellType: string; // Shell type (e.g., ClaudeCode, Agno, Dify) + shellType: ShellType; }This constrains
shellTypeto valid keys and catches typos at compile time.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/src/features/settings/components/ShellEdit.tsx(2 hunks)frontend/src/features/settings/components/SoftwareRequirements.tsx(1 hunks)frontend/src/i18n/locales/en/common.json(1 hunks)frontend/src/i18n/locales/zh-CN/common.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{py,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
All code comments, inline comments, block comments, docstrings, TODO/FIXME annotations, and type hints descriptions MUST be written in English
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: TypeScript code MUST use strict mode with type checking enabled
TypeScript/React code MUST use Prettier formatter with single quotes, no semicolons
TypeScript/React code MUST pass ESLint with Next.js configuration
React component names MUST use PascalCase convention
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: React components MUST use functional components with hooks instead of class-based components
Useconstoverlet, never usevarin TypeScript/JavaScript code
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
React component files MUST use kebab-case naming convention
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/src/**/*.{tsx,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Frontend Tailwind CSS MUST use provided CSS variables for color system (e.g., --color-bg-base, --color-text-primary, --color-primary)
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/src/**/*.{tsx,jsx}: Frontend responsive design MUST follow mobile-first approach with Tailwind breakpoints
Frontend React forms MUST use react-hook-form with zod validation schema
Frontend components MUST use shadcn/ui component library fromfrontend/src/components/ui/
Files:
frontend/src/features/settings/components/ShellEdit.tsxfrontend/src/features/settings/components/SoftwareRequirements.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-01T06:44:24.499Z
Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-01T06:44:24.499Z
Learning: Applies to **/src/**/*.{tsx,jsx} : Frontend components MUST use shadcn/ui component library from `frontend/src/components/ui/`
Applied to files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
🧬 Code graph analysis (1)
frontend/src/features/settings/components/SoftwareRequirements.tsx (3)
frontend/src/components/ui/card.tsx (1)
Card(75-75)frontend/src/components/ui/badge.tsx (1)
Badge(43-43)frontend/src/components/ui/button.tsx (1)
Button(55-55)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e-tests
🔇 Additional comments (2)
frontend/src/i18n/locales/en/common.json (1)
598-603: New software requirements i18n keys align with component usageThe added
shells.*keys (software_requirements_title,software_requirements_hint,required,optional,copy_command) match the lookup paths used inSoftwareRequirements.tsxand read clearly in English. No issues here.frontend/src/i18n/locales/zh-CN/common.json (1)
599-604: Chinese software requirements translations are consistent and well‑scopedThe new
shells.*keys for software requirements (title, hint, required/optional badges, copy label) correctly mirror the English versions and align with the lookup paths in the component. Looks good.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
executor/agents/image_validator/image_validator_agent.py (1)
101-165: Consider refactoring long methods to improve maintainability.The
execute()(~64 lines) and_run_check()(~73 lines) methods exceed the 50-line guideline. While the code is readable and well-structured, extracting helper methods would improve maintainability:
- For
execute(): extract progress reporting into_report_check_progress()- For
_run_check(): extract version parsing/comparison into_validate_version()As per coding guidelines, Python functions should not exceed 50 lines (preferred maximum).
Also applies to: 167-239
frontend/src/features/settings/components/SoftwareRequirements.tsx (1)
134-145: Consider using consistent icon library.CheckIcon is imported from
@heroicons/react/24/outline, but the copy icon is an inline SVG. For consistency and maintainability, consider using a heroicon for the copy action as well (e.g.,DocumentDuplicateIcon).+import { CheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline'; -import { CheckIcon } from '@heroicons/react/24/outline';Then replace the inline SVG:
{copiedCommand === req.command ? ( <CheckIcon className="w-4 h-4 text-green-600" /> ) : ( - <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> - <path - strokeLinecap="round" - strokeLinejoin="round" - strokeWidth={2} - d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" - /> - </svg> + <DocumentDuplicateIcon className="w-4 h-4" /> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
executor/agents/image_validator/image_validator_agent.py(1 hunks)frontend/src/features/settings/components/SoftwareRequirements.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{py,ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
All code comments, inline comments, block comments, docstrings, TODO/FIXME annotations, and type hints descriptions MUST be written in English
Files:
executor/agents/image_validator/image_validator_agent.pyfrontend/src/features/settings/components/SoftwareRequirements.tsx
**/*.py
📄 CodeRabbit inference engine (AGENTS.md)
**/*.py: Python code MUST be PEP 8 compliant with Black formatter (line length: 88) and isort for import organization
Python code MUST include type hints for all functions and variables
Python functions SHOULD NOT exceed 50 lines (preferred maximum)
Python functions and classes MUST have descriptive names and public functions/classes MUST include docstrings
Python code MUST extract magic numbers to named constants
Files:
executor/agents/image_validator/image_validator_agent.py
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: TypeScript code MUST use strict mode with type checking enabled
TypeScript/React code MUST use Prettier formatter with single quotes, no semicolons
TypeScript/React code MUST pass ESLint with Next.js configuration
React component names MUST use PascalCase convention
Files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: React components MUST use functional components with hooks instead of class-based components
Useconstoverlet, never usevarin TypeScript/JavaScript code
Files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
React component files MUST use kebab-case naming convention
Files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
**/src/**/*.{tsx,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Frontend Tailwind CSS MUST use provided CSS variables for color system (e.g., --color-bg-base, --color-text-primary, --color-primary)
Files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
**/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/src/**/*.{tsx,jsx}: Frontend responsive design MUST follow mobile-first approach with Tailwind breakpoints
Frontend React forms MUST use react-hook-form with zod validation schema
Frontend components MUST use shadcn/ui component library fromfrontend/src/components/ui/
Files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-01T06:44:24.499Z
Learnt from: CR
Repo: wecode-ai/Wegent PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-01T06:44:24.499Z
Learning: Applies to **/src/**/*.{tsx,jsx} : Frontend components MUST use shadcn/ui component library from `frontend/src/components/ui/`
Applied to files:
frontend/src/features/settings/components/SoftwareRequirements.tsx
🧬 Code graph analysis (1)
frontend/src/features/settings/components/SoftwareRequirements.tsx (3)
frontend/src/components/ui/card.tsx (1)
Card(75-75)frontend/src/components/ui/badge.tsx (1)
Badge(43-43)frontend/src/components/ui/button.tsx (1)
Button(55-55)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e-tests
🔇 Additional comments (2)
frontend/src/features/settings/components/SoftwareRequirements.tsx (2)
1-13: LGTM!License headers, 'use client' directive, and imports are appropriate. Correctly uses shadcn/ui components as per coding guidelines.
72-93: LGTM!Component logic is sound. The requirements lookup with fallback, null return for empty arrays, and copy-to-clipboard implementation with error handling are all appropriate.
| { | ||
| "name": "sqlite", | ||
| "command": "sqlite3 --version", | ||
| "version_regex": r"(\d+\.\d+\.\d+)", | ||
| "min_version": "3.50.0", | ||
| } |
There was a problem hiding this comment.
Major inconsistency: SQLite validation missing for ClaudeCode.
The PR objectives explicitly state that SQLite ≥ 3.50.0 is required for ClaudeCode shells: "ClaudeCode — Node.js ≥ 20.0.0 (required), Python ≥ 3.12.0 (required), SQLite ≥ 3.50.0 (required), claude-code CLI ≥ 0.1.0 (optional)". However, this implementation only adds SQLite validation to the Agno validation set, while the ClaudeCode validation set (lines 38-57) contains only node, claude-code, and python checks—no SQLite.
This creates a disconnect between the frontend requirements display and backend validation logic. Users will see SQLite listed as required for ClaudeCode in the UI, but the backend won't actually validate it.
Clarification needed: Should SQLite validation be:
- Added to ClaudeCode (to match PR objectives)?
- Removed from the PR objectives documentation?
- Required for both ClaudeCode and Agno?
If SQLite should be required for ClaudeCode, apply this diff:
"ClaudeCode": [
{
"name": "node",
"command": "node --version",
"version_regex": r"v(\d+\.\d+\.\d+)",
"min_version": "20.0.0",
},
{
"name": "claude-code",
"command": "claude --version 2>/dev/null || echo 'not found'",
"version_regex": r"(\d+\.\d+\.\d+)",
"min_version": None,
},
{
"name": "python",
"command": "python3 --version",
"version_regex": r"Python (\d+\.\d+\.\d+)",
"min_version": "3.12.0",
},
+ {
+ "name": "sqlite",
+ "command": "sqlite3 --version",
+ "version_regex": r"(\d+\.\d+\.\d+)",
+ "min_version": "3.50.0",
+ },
],🤖 Prompt for AI Agents
In executor/agents/image_validator/image_validator_agent.py around lines 38-57
and 65-70, the ClaudeCode validation set is missing the SQLite check while Agno
includes it; add a SQLite validator dict to the ClaudeCode validators identical
to the one used for Agno (name "sqlite", command "sqlite3 --version",
version_regex r"(\d+\.\d+\.\d+)", min_version "3.50.0") so backend validation
matches the PR objectives and frontend requirements; ensure the new entry is
placed with the other ClaudeCode validators and run/update any related unit
tests or integration checks that assert required tools.
| @@ -0,0 +1,155 @@ | |||
| // SPDX-FileCopyrightText: 2025 Weibo, Inc. | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Rename file to follow kebab-case convention.
As per coding guidelines, React component files under **/components/**/*.{ts,tsx} MUST use kebab-case naming convention. This file should be renamed from SoftwareRequirements.tsx to software-requirements.tsx.
You'll also need to update the import statement in ShellEdit.tsx accordingly.
Based on coding guidelines: "/components//*.{ts,tsx}: React component files MUST use kebab-case naming convention"
🤖 Prompt for AI Agents
In frontend/src/features/settings/components/SoftwareRequirements.tsx around
line 1, the filename violates the kebab-case rule for component files; rename
the file to software-requirements.tsx and update any imports that reference it
(notably update the import in ShellEdit.tsx to point to ./software-requirements
or the correct relative path). Ensure the git move preserves history (git mv)
and run the project/build to verify no remaining import errors.
| name: string; // Software name (e.g., node, python, claude-code) | ||
| command: string; // Check command (e.g., node --version) | ||
| minVersion: string; // Minimum version requirement (e.g., 20.0.0) | ||
| versionRegex?: string; // Version extraction regex (optional) |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove unused field.
The versionRegex field is defined but never used in the component implementation. Consider removing it to keep the interface clean, or document its intended future use.
- versionRegex?: string; // Version extraction regex (optional)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| versionRegex?: string; // Version extraction regex (optional) |
🤖 Prompt for AI Agents
In frontend/src/features/settings/components/SoftwareRequirements.tsx around
line 19, the interface or prop definition includes a versionRegex?: string field
that is not referenced anywhere in the component; remove the unused versionRegex
declaration (or if intended to be used, wire it into the component logic and
props) so the component interface matches actual usage—update any related
types/props and remove any unused imports or tests that reference versionRegex.
| ClaudeCode: [ | ||
| { | ||
| name: 'Node.js', | ||
| command: 'node --version', | ||
| minVersion: '20.0.0', | ||
| required: true, | ||
| description: 'JavaScript runtime for Claude Code CLI', | ||
| }, | ||
| { | ||
| name: 'Python', | ||
| command: 'python --version', | ||
| minVersion: '3.12.0', | ||
| required: true, | ||
| description: 'Python interpreter for agent execution', | ||
| }, | ||
| { | ||
| name: 'claude-code', | ||
| command: 'claude --version', | ||
| minVersion: '0.1.0', | ||
| required: true, | ||
| description: 'Claude Code CLI (recommended)', | ||
| }, | ||
| ], | ||
| Agno: [ | ||
| { | ||
| name: 'Python', | ||
| command: 'python --version', | ||
| minVersion: '3.12.0', | ||
| required: true, | ||
| description: 'Python interpreter for agent execution', | ||
| }, | ||
| { | ||
| name: 'SQLite', | ||
| command: 'sqlite3 --version', | ||
| minVersion: '3.50.0', | ||
| required: true, | ||
| description: 'Database for local data storage', | ||
| }, | ||
| ], |
There was a problem hiding this comment.
Critical: Software requirements don't match PR specifications.
The requirements mapping has multiple critical inconsistencies with the PR objectives:
- ClaudeCode is missing SQLite: PR specifies SQLite ≥ 3.50.0 (required), but it's not in the ClaudeCode array.
- claude-code should be optional: Line 45 sets
required: true, but PR states it should be optional (≥ 0.1.0 (optional)). The description "(recommended)" on line 46 also implies optional. - Agno should NOT have SQLite: Lines 58-63 define SQLite for Agno, but PR specifies "Agno — Python ≥ 3.12.0 (required)" only.
Apply this diff to fix the requirements:
ClaudeCode: [
{
name: 'Node.js',
command: 'node --version',
minVersion: '20.0.0',
required: true,
description: 'JavaScript runtime for Claude Code CLI',
},
{
name: 'Python',
command: 'python --version',
minVersion: '3.12.0',
required: true,
description: 'Python interpreter for agent execution',
},
+ {
+ name: 'SQLite',
+ command: 'sqlite3 --version',
+ minVersion: '3.50.0',
+ required: true,
+ description: 'Database for local data storage',
+ },
{
name: 'claude-code',
command: 'claude --version',
minVersion: '0.1.0',
- required: true,
+ required: false,
description: 'Claude Code CLI (recommended)',
},
],
Agno: [
{
name: 'Python',
command: 'python --version',
minVersion: '3.12.0',
required: true,
description: 'Python interpreter for agent execution',
},
- {
- name: 'SQLite',
- command: 'sqlite3 --version',
- minVersion: '3.50.0',
- required: true,
- description: 'Database for local data storage',
- },
],📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ClaudeCode: [ | |
| { | |
| name: 'Node.js', | |
| command: 'node --version', | |
| minVersion: '20.0.0', | |
| required: true, | |
| description: 'JavaScript runtime for Claude Code CLI', | |
| }, | |
| { | |
| name: 'Python', | |
| command: 'python --version', | |
| minVersion: '3.12.0', | |
| required: true, | |
| description: 'Python interpreter for agent execution', | |
| }, | |
| { | |
| name: 'claude-code', | |
| command: 'claude --version', | |
| minVersion: '0.1.0', | |
| required: true, | |
| description: 'Claude Code CLI (recommended)', | |
| }, | |
| ], | |
| Agno: [ | |
| { | |
| name: 'Python', | |
| command: 'python --version', | |
| minVersion: '3.12.0', | |
| required: true, | |
| description: 'Python interpreter for agent execution', | |
| }, | |
| { | |
| name: 'SQLite', | |
| command: 'sqlite3 --version', | |
| minVersion: '3.50.0', | |
| required: true, | |
| description: 'Database for local data storage', | |
| }, | |
| ], | |
| ClaudeCode: [ | |
| { | |
| name: 'Node.js', | |
| command: 'node --version', | |
| minVersion: '20.0.0', | |
| required: true, | |
| description: 'JavaScript runtime for Claude Code CLI', | |
| }, | |
| { | |
| name: 'Python', | |
| command: 'python --version', | |
| minVersion: '3.12.0', | |
| required: true, | |
| description: 'Python interpreter for agent execution', | |
| }, | |
| { | |
| name: 'SQLite', | |
| command: 'sqlite3 --version', | |
| minVersion: '3.50.0', | |
| required: true, | |
| description: 'Database for local data storage', | |
| }, | |
| { | |
| name: 'claude-code', | |
| command: 'claude --version', | |
| minVersion: '0.1.0', | |
| required: false, | |
| description: 'Claude Code CLI (recommended)', | |
| }, | |
| ], | |
| Agno: [ | |
| { | |
| name: 'Python', | |
| command: 'python --version', | |
| minVersion: '3.12.0', | |
| required: true, | |
| description: 'Python interpreter for agent execution', | |
| }, | |
| ], |
🤖 Prompt for AI Agents
In frontend/src/features/settings/components/SoftwareRequirements.tsx around
lines 26 to 64, the requirements mapping is incorrect: add SQLite (name
'SQLite', command 'sqlite3 --version', minVersion '3.50.0', required true,
description 'Database for local data storage') to the ClaudeCode array, change
the claude-code entry to set required: false (keep minVersion '0.1.0' and
description 'Claude Code CLI (recommended)'), and remove the SQLite entry from
the Agno array so Agno contains only the Python entry with required: true and
minVersion '3.12.0'.
Summary
This PR adds a software requirements display feature to the Shell editing page, helping users understand what software and versions need to be pre-installed in their base images before creating or validating shells.
Changes Made
Created
SoftwareRequirements.tsxcomponent:Integrated into
ShellEdit.tsx:Added i18n translations:
Version Requirements Defined
ClaudeCode:
Agno:
Dify:
UI/UX Improvements
Test Plan
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.