mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-06 08:58:05 +00:00
Anso
9e41d5e6b8
* feat(stack-view): anatomy panel replaces always-open yaml Introduce StackAnatomyPanel as the default right-column surface of the stack view, replacing the always-visible Monaco YAML editor. The panel parses compose.yaml client-side and surfaces services, ports, volumes, restart policy, env file with missing-variable detection, network, and git/local source in a compact, read-only format. An inline banner surfaces pending image updates with risk classification (patch/minor/major) and an apply button gated on edit permissions. Compose editing remains one click away: the anatomy header exposes an "edit compose.yaml" toggle that slides the Monaco editor into the same right-column slot with the full tabs, Git Source, Save, and Save & Deploy toolbar. Closing the editor discards unsaved changes and restores the anatomy view. The overall stack view is now a two-column grid: left column stacks the identity header, per-container health strip, and logs viewer; right column holds the anatomy panel or the Monaco editor. Missing-variable detection covers the full compose interpolation grammar, including defaulted (:- / -) and required (:? / ?) modifiers. * fix(stack-view): restore Git Source accessible name on anatomy source row The anatomy panel's source row is the primary Git Source control on the default stack view. Without an explicit accessible name, screen readers announced only the raw git ref or 'local', and role-based locators could not target it.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])