diff --git a/docs/features/editor.mdx b/docs/features/editor.mdx index b32033d4..c403f725 100644 --- a/docs/features/editor.mdx +++ b/docs/features/editor.mdx @@ -41,6 +41,23 @@ The `.env` editor has the same save/discard controls as the compose editor. Chan Sencho reads the `env_file:` paths from your `compose.yaml` to discover available env files. If no `env_file:` is declared, a default `.env` in the stack directory is used. +## Diff preview before save + +When the **Diff preview before save** toggle is enabled in **Settings → Appearance**, clicking **Save & Deploy** or **Save Only** opens a side-by-side diff modal before anything is written to disk. The left pane shows the current on-disk content; the right pane shows your unsaved edits, with additions highlighted in green. + + + Diff preview modal showing side-by-side YAML diff with a new comment line highlighted in green on the right + + +Review the diff, then: + +- Click **Save & deploy** (or **Save**) to confirm and write the changes to disk. +- Click **Cancel** to return to the editor without saving. + +If there are no unsaved changes the modal is skipped and the save proceeds directly. + +The toggle is off by default and saved per browser. Each device remembers its own setting independently. Enable it in **Settings → Appearance → Diff preview before save**. + ## Container panel The left column lists all containers that belong to the selected stack under the **CONTAINERS** heading. Each container shows: diff --git a/docs/images/compose-diff-preview/diff-modal.png b/docs/images/compose-diff-preview/diff-modal.png new file mode 100644 index 00000000..88679ba8 Binary files /dev/null and b/docs/images/compose-diff-preview/diff-modal.png differ diff --git a/docs/images/compose-diff-preview/settings-toggle.png b/docs/images/compose-diff-preview/settings-toggle.png new file mode 100644 index 00000000..788dbcbd Binary files /dev/null and b/docs/images/compose-diff-preview/settings-toggle.png differ diff --git a/docs/reference/settings.mdx b/docs/reference/settings.mdx index b913df38..62586f05 100644 --- a/docs/reference/settings.mdx +++ b/docs/reference/settings.mdx @@ -71,6 +71,28 @@ Control how much information Sencho packs on screen. Each browser you sign in fr Density affects the dashboard stack table, the resource gauge strip, the Settings Hub sidebar, the Schedules and Audit Log tables, and every other data table in Sencho. Typography, color, and layout structure stay the same; only vertical padding compresses. +### Deploy progress modal + +When enabled, Sencho streams live output in a modal whenever you deploy, restart, update, install, or run a Git operation. The modal closes automatically on success or stays open on failure so you can read the error output. + +| Value | Behavior | +|-------|----------| +| **Enabled** | A progress modal opens for every long-running operation | +| **Disabled** (default) | Operations run silently; results surface via toast notifications only | + +### Diff preview before save + +When enabled, clicking **Save & Deploy** or **Save Only** in the compose or env editor opens a side-by-side diff modal before writing anything to disk. The left pane shows the current on-disk content; the right pane shows your unsaved edits, with additions highlighted green and removals highlighted red. + +| Value | Behavior | +|-------|----------| +| **Enabled** | Diff modal opens on every save that has unsaved changes | +| **Disabled** (default) | File is saved directly without a review step | + +If there are no unsaved changes the modal is skipped and the save proceeds immediately. + +See [Diff preview before save](/features/editor#diff-preview-before-save) in the Editor guide for screenshots and the full workflow. + --- ## License diff --git a/frontend/src/components/ComposeDiffPreviewDialog.tsx b/frontend/src/components/ComposeDiffPreviewDialog.tsx new file mode 100644 index 00000000..8e632ad6 --- /dev/null +++ b/frontend/src/components/ComposeDiffPreviewDialog.tsx @@ -0,0 +1,103 @@ +import { Suspense } from 'react'; +import { DiffEditor } from '@/lib/monacoLoader'; +import { FileDiff, Loader2 } from 'lucide-react'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, +} from '@/components/ui/dialog'; +import { Button } from '@/components/ui/button'; + +export interface ComposeDiffPreviewDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + stackName: string; + fileName: string; + language: 'yaml' | 'ini'; + original: string; + modified: string; + actionLabel: 'Save' | 'Save & deploy'; + confirming: boolean; + isDarkMode: boolean; + onConfirm: () => void | Promise; +} + +export function ComposeDiffPreviewDialog({ + open, + onOpenChange, + stackName, + fileName, + language, + original, + modified, + actionLabel, + confirming, + isDarkMode, + onConfirm, +}: ComposeDiffPreviewDialogProps) { + return ( + + + + + + Review changes to {stackName} + {fileName} + + + Review the diff between on-disk content and unsaved editor changes before saving. + + + +
+
+ }> + + +
+
+ + + ON DISK → UNSAVED +
+ + +
+ + + + ); +} diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx index 628c2941..4df6b8b1 100644 --- a/frontend/src/components/EditorLayout.tsx +++ b/frontend/src/components/EditorLayout.tsx @@ -78,6 +78,8 @@ import type { FilterChip, StackMenuCtx } from '@/components/sidebar/sidebar-type import { useBulkStackActions, type BulkAction } from '@/hooks/useBulkStackActions'; import { isInputFocused, isPaletteOpen } from '@/lib/keyboard-guards'; import { StackFileExplorer } from '@/components/files/StackFileExplorer'; +import { useComposeDiffPreviewEnabled } from '@/hooks/use-compose-diff-preview-enabled'; +import { ComposeDiffPreviewDialog } from '@/components/ComposeDiffPreviewDialog'; interface ContainerInfo { Id: string; @@ -328,6 +330,7 @@ export default function EditorLayout() { window.matchMedia('(prefers-color-scheme: dark)').matches ); const isDarkMode = theme === 'dark' || (theme === 'auto' && systemDark); + const [diffPreviewEnabled] = useComposeDiffPreviewEnabled(); const [activeView, setActiveView] = useState<'dashboard' | 'editor' | 'host-console' | 'resources' | 'templates' | 'global-observability' | 'fleet' | 'audit-log' | 'scheduled-ops' | 'auto-updates' | 'settings'>('dashboard'); const [settingsSection, setSettingsSection] = useState('appearance'); const [securityHistoryOpen, setSecurityHistoryOpen] = useState(false); @@ -335,6 +338,14 @@ export default function EditorLayout() { const [schedulePrefill, setSchedulePrefill] = useState(null); const handlePrefillConsumed = useCallback(() => setSchedulePrefill(null), []); const [isEditing, setIsEditing] = useState(false); + const [diffPreview, setDiffPreview] = useState<{ + mode: 'save' | 'save-and-deploy'; + language: 'yaml' | 'ini'; + original: string; + modified: string; + fileName: string; + } | null>(null); + const [diffPreviewConfirming, setDiffPreviewConfirming] = useState(false); const [editingCompose, setEditingCompose] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [stackStatuses, setStackStatuses] = useState({}); @@ -1260,6 +1271,40 @@ export default function EditorLayout() { } }; + const requestSave = () => { + const isCompose = activeTab === 'compose'; + const orig = isCompose ? originalContent : originalEnvContent; + const curr = isCompose ? content : envContent; + if (diffPreviewEnabled && activeTab !== 'files' && curr !== orig) { + setDiffPreview({ + mode: 'save', + language: isCompose ? 'yaml' : 'ini', + original: orig, + modified: curr, + fileName: isCompose ? 'compose.yaml' : (selectedEnvFile || '.env'), + }); + } else { + void saveFile(); + } + }; + + const requestSaveAndDeploy = (e: React.MouseEvent) => { + const isCompose = activeTab === 'compose'; + const orig = isCompose ? originalContent : originalEnvContent; + const curr = isCompose ? content : envContent; + if (diffPreviewEnabled && activeTab !== 'files' && curr !== orig) { + setDiffPreview({ + mode: 'save-and-deploy', + language: isCompose ? 'yaml' : 'ini', + original: orig, + modified: curr, + fileName: isCompose ? 'compose.yaml' : (selectedEnvFile || '.env'), + }); + } else { + void handleSaveAndDeploy(e); + } + }; + const rollbackStack = async () => { if (!selectedFile || isStackBusy(selectedFile)) return; const stackFile = selectedFile; @@ -2866,7 +2911,7 @@ export default function EditorLayout() { ) : (
- @@ -2877,7 +2922,7 @@ export default function EditorLayout() { - + Save Only @@ -3199,6 +3244,36 @@ export default function EditorLayout() { onClose={() => setStackMisconfigScanId(null)} /> + {/* Compose diff preview */} + { if (!open && !diffPreviewConfirming) setDiffPreview(null); }} + stackName={selectedFile ? selectedFile.replace(/\.(yml|yaml)$/, '') : ''} + fileName={diffPreview?.fileName ?? ''} + language={diffPreview?.language ?? 'yaml'} + original={diffPreview?.original ?? ''} + modified={diffPreview?.modified ?? ''} + actionLabel={diffPreview?.mode === 'save-and-deploy' ? 'Save & deploy' : 'Save'} + confirming={diffPreviewConfirming} + isDarkMode={isDarkMode} + onConfirm={async () => { + const snapshot = diffPreview; + setDiffPreviewConfirming(true); + try { + if (snapshot?.mode === 'save-and-deploy') { + await saveFile(); + // e.preventDefault/stopPropagation are no-ops here; no browser event is in flight + await deployStack({ preventDefault() {}, stopPropagation() {} } as unknown as React.MouseEvent); + } else { + await saveFile(); + } + } finally { + setDiffPreviewConfirming(false); + setDiffPreview(null); + } + }} + /> + {/* Scan history overlay */} = { export function AppearanceSection() { const [density, setDensity] = useDensity(); const [isEnabled, setEnabled] = useDeployFeedbackEnabled(); + const [diffPreviewEnabled, setDiffPreviewEnabled] = useComposeDiffPreviewEnabled(); return (
@@ -55,6 +57,25 @@ export function AppearanceSection() {
+ + +
+ setDiffPreviewEnabled(v === true)} + /> + +
+

diff --git a/frontend/src/hooks/use-compose-diff-preview-enabled.ts b/frontend/src/hooks/use-compose-diff-preview-enabled.ts new file mode 100644 index 00000000..c6658599 --- /dev/null +++ b/frontend/src/hooks/use-compose-diff-preview-enabled.ts @@ -0,0 +1,46 @@ +import { useCallback, useEffect, useState } from 'react'; +import { SENCHO_SETTINGS_CHANGED } from '@/lib/events'; + +export const COMPOSE_DIFF_PREVIEW_KEY = 'sencho.compose-editor.diff-preview.enabled'; + +function readStored(): boolean { + if (typeof window === 'undefined') return false; + try { + return window.localStorage.getItem(COMPOSE_DIFF_PREVIEW_KEY) === 'true'; + } catch { + return false; + } +} + +export function useComposeDiffPreviewEnabled(): [boolean, (next: boolean) => void] { + const [enabled, setEnabledState] = useState(readStored); + + useEffect(() => { + function onSettingsChanged() { + setEnabledState(readStored()); + } + window.addEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged); + return () => window.removeEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged); + }, []); + + useEffect(() => { + function onStorage(event: StorageEvent) { + if (event.key !== COMPOSE_DIFF_PREVIEW_KEY) return; + setEnabledState(event.newValue === 'true'); + } + window.addEventListener('storage', onStorage); + return () => window.removeEventListener('storage', onStorage); + }, []); + + const setEnabled = useCallback((next: boolean) => { + try { + window.localStorage.setItem(COMPOSE_DIFF_PREVIEW_KEY, next ? 'true' : 'false'); + } catch { + // ignore; localStorage may be unavailable (private mode, quota) + } + setEnabledState(next); + window.dispatchEvent(new CustomEvent(SENCHO_SETTINGS_CHANGED)); + }, []); + + return [enabled, setEnabled]; +} diff --git a/frontend/src/hooks/use-deploy-feedback-enabled.ts b/frontend/src/hooks/use-deploy-feedback-enabled.ts index 40c8af3c..74ca9b06 100644 --- a/frontend/src/hooks/use-deploy-feedback-enabled.ts +++ b/frontend/src/hooks/use-deploy-feedback-enabled.ts @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; +import { SENCHO_SETTINGS_CHANGED } from '@/lib/events'; export const DEPLOY_FEEDBACK_KEY = 'sencho.deploy-feedback.enabled'; @@ -18,8 +19,8 @@ export function useDeployFeedbackEnabled(): [boolean, (next: boolean) => void] { function onSettingsChanged() { setEnabledState(readStored()); } - window.addEventListener('SENCHO_SETTINGS_CHANGED', onSettingsChanged); - return () => window.removeEventListener('SENCHO_SETTINGS_CHANGED', onSettingsChanged); + window.addEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged); + return () => window.removeEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged); }, []); useEffect(() => { @@ -38,7 +39,7 @@ export function useDeployFeedbackEnabled(): [boolean, (next: boolean) => void] { // ignore; localStorage may be unavailable (private mode, quota) } setEnabledState(next); - window.dispatchEvent(new CustomEvent('SENCHO_SETTINGS_CHANGED')); + window.dispatchEvent(new CustomEvent(SENCHO_SETTINGS_CHANGED)); }, []); return [enabled, setEnabled];