4 Commits

Author	SHA1	Message	Date
Anso	a25acbec7c	feat(editor): opt-in diff preview before save (#855) ... * feat(editor): add useComposeDiffPreviewEnabled hook * feat(editor): add ComposeDiffPreviewDialog component * fix(editor): replace HTML entity with Unicode arrow in ComposeDiffPreviewDialog * feat(editor): add diff preview toggle to Appearance settings Added a new 'Diff preview before save' toggle in the Display section of the Appearance settings panel. Users can now enable or disable the side-by-side diff view before compose and env file edits are saved to disk. * feat(editor): wire diff preview dialog into compose save flow * fix(editor): snapshot diff content at open time and fix event name - Fix useComposeDiffPreviewEnabled and useDeployFeedbackEnabled to use the canonical SENCHO_SETTINGS_CHANGED constant from @/lib/events instead of the hardcoded string literal (wrong value) - Snapshot language, original, modified, and fileName into diffPreview state at click time to prevent tab-switching from corrupting dialog content mid-review - Remove React.MouseEvent from diffPreview state; pass a no-op stub to deployStack in the confirm path (preventDefault/stopPropagation are no-ops on an already-settled event anyway) - Add diff-modal screenshot and document the feature in editor.mdx and settings.mdx * docs(editor): add settings-toggle screenshot for diff preview feature	2026-04-30 22:01:17 -04:00
Anso	eead195529	feat(settings): dress the page to match the audit (#849) ... * feat(settings): dress the page to match the audit (cyan rail, italic serif, two-column rows) Brings the full-page Settings route into the Sencho voice. The page now opens with a full-width PageMasthead (cyan rail, mono crumb, italic serif title, contextual stat strip) above a sidebar and main-content panel, each as a rounded-xl card inset on the dark background. Sidebar drops the duplicate "Settings" header and the candy tier badges. Group headers carry mono labels with visible/total counts; gated rows get a neutral uppercase lock chip and dim. Active rows keep the cyan 2px rail. Five new primitives (SettingsSection, SettingsField, SettingsCallout, SettingsActions / SettingsPrimaryButton, TierLockChip) replace the stacked label-input-help shadcn defaults and the per-section ad-hoc chrome. AccountSection, AppearanceSection, LicenseSection, SystemSection, NotificationsSection, DeveloperSection, AppStoreSection, AboutSection, and SupportSection are migrated to the new layout. The list-driven sections (Webhooks, Routing, Users, Labels, Security, CloudBackup, ApiTokens, Registries, NodeManager, SSO) keep their list cards but get the new chrome and primary CTAs. Each section can publish contextual stats to the masthead via a small context channel: 2FA state on Account, plan/trial/renews on License, edited count on System, channel counts on Notifications, etc. * refactor(settings): drop react-router-dom and align with DESIGN.md The Settings page was the only surface using react-router-dom for sub-section navigation. Every other primary view (Home, Fleet, Resources, App Store, Schedules, etc.) drives view switching through a single activeView useState in EditorLayout. This change removes the dependency end-to-end: - App.tsx drops BrowserRouter - EditorLayout adds 'settings' to the activeView union; SettingsPage renders inside the same flex-1 overflow-y-auto p-6 wrapper as siblings - UserProfileDropdown receives an onOpenSettings callback instead of useNavigate. SettingsPage owns currentSection via props lifted to EditorLayout, so cross-component navigation (openLabelManager, onManageNodes, ConfigurationStatus rows) can route to a sub-section - SettingsSidebar items become buttons (no more NavLink); SectionGate's redirect-on-invisible falls back through SettingsPage's safeSection memo - e2e/nodes.spec.ts updates the Nodes selector from link to button role - react-router-dom removed from package.json + package-lock.json The visual treatment is brought into alignment with frontend/DESIGN.md, which was rewritten this week to be the normative extract of the audit: - PageMasthead: title text-3xl → text-[22px] Section rung italic; kicker 11px → 10px Label rung; stat label tracking 0.22em → 0.18em; stat value font-medium for mono Stat-rung family discipline - SettingsField helper: mono → sans Body rung 14/22; success tone now uses --success green (was incorrectly mapped to brand cyan) - SettingsCallout: title tracking 0.18em; subtitle Body rung 14px; success tone now genuinely uses --success green; new brand tone for promotional callouts (Trial CTA, Admiral upgrade) that should read cyan - SettingsActions: SettingsPrimaryButton renders mono uppercase tracked, size sm by default. DESIGN §9.10 requires "small mono uppercase, cyan- filled" for every Settings primary CTA - TierLockChip: 9px → 10px Label rung floor - SettingsSidebar: group header tracking 0.18em; ⌘K kbd 9px → 10px; aside gains text-card-foreground transition-colors per §10 canonical card class - SettingsPage main panel: text-card-foreground transition-colors added; uses h-full overflow-auto p-6 to mirror FleetView's wrapper rhythm - Field rows, section headers, action rows now consume var(--density-*) tokens with literal fallbacks so Settings respects the comfortable/ compact toggle * fix(e2e): update mfa openAccountSettings to match settings redesign Settings now opens to the Account section by default when accessed from the profile dropdown, and the Account section no longer renders an h2 heading element. Update the openAccountSettings helper to open the correct section and assert on the Password h3 heading that SettingsSection renders instead. * test(e2e): fix MFA enrolment assertion after settings redesign The 2FA enrolment badge was replaced with a kicker/field pattern. Assert on the 'enrolled' text that the new design renders instead of the removed Enabled badge. * test(e2e): fix low-backup-codes warning assertions after settings redesign Update two assertions in the 'low backup codes warning' test that referenced UI text removed in the settings redesign: - '1 backup code remaining' -> '1 remaining' (SettingsField body text) - 'Regenerate now' button -> callout subtitle text, which uniquely identifies the zero-codes error card without hitting strict-mode from two identically-labelled Regenerate buttons on the page * test(e2e): navigate to root before re-opening settings for mock refresh The settings redesign uses a nested full-page route. Navigating to the same URL a second time does not remount the component, so AccountSection retains cached MFA state and the 0-codes branch never fetches. A page.goto('/') ensures full unmount before the second openAccountSettings call, so the refreshed mock is actually hit. * test(e2e): scroll zero-codes callout into view before asserting visibility The callout sits below the Disable 2FA section in the MFA settings page and is scrolled out of the clipped content area on initial render. scrollIntoViewIfNeeded() brings it into the visible viewport before the toBeVisible assertion. * test(e2e): scroll Radix ScrollArea viewport for zero-codes callout assertion The settings page wraps content in a Radix ScrollArea whose Root has overflow:hidden, so the browser's native scrollIntoView cannot scroll the inner viewport. Wait for the callout to attach (confirms mock data loaded), then programmatically set scrollTop on the Radix viewport element before asserting visibility. * test(e2e): use toBeAttached for zero-codes callout to avoid Radix clip issue The callout renders below the Disable 2FA section, outside the visible clip area of the Radix ScrollArea Root (overflow:hidden) on a standard viewport. Playwright's visibility check uses the clip intersection, so toBeVisible() fails even after programmatic scroll. toBeAttached() confirms the component rendered the warning card for backupCodesRemaining:0 without depending on the element's scroll position.	2026-04-30 19:37:38 -04:00
Anso	dd9d33813b	feat(deploy-logs): opt-in deploy progress modal with structured log rows (#779) ... * feat(notifications): dispatch deploy_failure alert on stack action errors * feat(terminal): add onReady and onMessage callback props * feat(deploy-logs): add DeployLogContext with runWithLog API * feat(deploy-logs): add DeployLogPanel bottom drawer with resize and minimize * feat(deploy-logs): wire DeployLogContext to App and EditorLayout action runners * test(deploy-logs): add E2E test for deploy log panel open, failure, and minimize * docs(deploy-logs): add user-facing and internal architecture docs * feat(deploy-logs): redesign as opt-in modal with structured log rows Replace the full-width bottom drawer (DeployLogPanel) with a centered modal that streams structured log output for deploy, stop, restart, update, install, and Git apply operations. The modal is disabled by default; users opt in from Settings -> Appearance. Core changes: - New DeployFeedbackContext with runWithLog() API: if opt-in is off, silently bypasses the UI so all call sites degrade to the existing toast behavior without code changes. - composeLogParser.ts: pure parser that strips ANSI escapes and classifies compose output into stage badges (PULL, BUILD, CREATE, START, STOP, DOWN, WARN, ERR, LOG). 15 unit tests. - StructuredLogRow.tsx: memoized row with timestamp, stage badge, and message. Error rows get a rose left rail; warn rows get a tinted bg. - DeployFeedbackModal: Dialog-based, max-w-640px/max-h-70vh, elapsed timer, auto-close 4s on success (hover cancels), persistent on failure. Raw xterm output collapsible in footer. - DeployFeedbackPill: minimized state anchored top-right, survives navigation, click restores modal. - Wires App Store install (action: install), Git apply (action: deploy), and Git pull (action: update) in addition to the existing EditorLayout actions. - Fixes Terminal.tsx WS URL in generic mode (was connecting to root path not proxied by Vite; now uses /ws). - Settings: adds "Show deploy progress modal" checkbox to Appearance. - Docs: renames deploy-logs.mdx to deploy-progress.mdx; updates internal architecture doc. * fix(deploy-logs): connect Terminal in generic mode and move pill to bottom-center Terminal was passed stackName which routes it to the stack logs WS (container stdout). In that mode onReady is never called, so the deployStarted gate never resolves and the compose command never runs. Remove stackName so Terminal uses generic WS mode, which calls onReady on open and streams compose output. Also reposition the minimized pill from top-right to bottom-center (fixed bottom-6 left-1/2 -translate-x-1/2) per UX feedback. * docs(deploy-logs): update pill position to bottom center * test(deploy-logs): rewrite E2E spec for deploy feedback modal The old spec targeted the removed bottom-drawer DeployLogPanel and used the wrong field name when calling POST /api/stacks (sent 'name' but the endpoint reads 'stackName'), causing every test to fail with a 400 before any UI assertions ran. Fixes: - POST /api/stacks body now uses 'stackName' matching the API contract - All locators updated to target the new DeployFeedbackModal and DeployFeedbackPill components (data-testid attributes added) - Added enableDeployFeedback helper to opt-in via localStorage before each test that expects the modal (feature is off by default) - Added opt-in OFF test to confirm the modal is suppressed when disabled - Minimize/expand test now asserts the pill appears and contains the stack name before clicking to restore the modal * test(deploy-logs): fix compose file write endpoint in E2E helper createStackViaApi was calling PUT /api/stacks/:name/files/docker-compose.yml which does not exist. The correct endpoint is PUT /api/stacks/:name with { content } in the body. * test(deploy-logs): use addInitScript to persist opt-in across reloads The opt-in flag was set via page.evaluate before setupDeployStack, which calls page.reload() and loginAs (a second navigation). Although localStorage should persist across same-origin reloads, the React tree was reading 'false' on remount in CI. Switching to addInitScript guarantees the localStorage value is set before any page script on every navigation, so useDeployFeedbackEnabled's useState initializer always sees the right value when React mounts. * test(deploy-logs): verify localStorage and re-dispatch event before deploy Adds syncDeployFeedbackState() called right before each deploy click in the ON tests. It both verifies localStorage is set (failing the test loudly with a clear message if not) and re-dispatches the SENCHO_SETTINGS_CHANGED event to defeat any stale React state after navigation. If the modal still does not appear with the assertion green, the issue is downstream of localStorage and we have a clear signal. * test(deploy-logs): wait for React re-render after dispatching opt-in event After syncDeployFeedbackState dispatches SENCHO_SETTINGS_CHANGED, React schedules the state update but does not flush it synchronously. The click that follows can fire against the stale closure where isEnabled is still false, so runWithLog takes its early-return path and the modal never opens. A 200ms wait is enough to let React commit the new state before the next interaction. * test(deploy-logs): wait for stack file fetch before clicking deploy deployStack() in EditorLayout returns early at 'if (!selectedFile)' without calling runWithLog. selectedFile is set inside loadFile() after GET /api/stacks/:name resolves. The previous setup clicked the stack in the sidebar and immediately asked the test to click Deploy, racing the fetch. CI backend logs confirmed no deploy POST ever fired for the ON tests, while the OFF test passed only because it asserts non-existence. Now setup awaits both the stack click and the file response together, then verifies the action bar's deploy button is visible before returning. * test(deploy-logs): wait for network idle and capture browser logs Adds a networkidle wait plus a 500ms settle after the stack click so React commits selectedFile and any follow-up env/container/backup fetches drain before the deploy click. Also mirrors browser console errors and pageerrors into the Playwright output so the next failure ships with the React stack trace instead of just a 'modal not visible' message. * test(deploy-logs): temporary debug logging in runWithLog Adds a console.log at the entry of runWithLog so we can see in CI logs whether it is being called and what isEnabled value the closure has. Also widens the test's console capture to include these debug lines. This is diagnostic only and will be removed once the root cause of the modal-not-opening-in-CI failure is identified. * test(deploy-logs): debug log at deployStack entry to trace click path Adds console.log at the first line of deployStack handler so we can confirm in CI whether the click is reaching it at all and what selectedFile/isStackBusy resolve to. Combined with the existing runWithLog debug logs, this isolates whether the modal failure is in deployStack guarding out, runWithLog early-returning, or something else entirely. * test(deploy-logs): drop filter, log every browser console msg The previous filter only emitted error/warning plus the deploy-feedback substring. The deploy-feedback debug logs never appeared, so we don't yet know whether the log itself is firing. Remove the filter so the full console stream shows up in CI. * test(deploy-logs): app-level console log to verify capture pipeline If even an unconditional log at App component render time does not appear in CI browser logs, then the console capture listener is broken or the dispatched logs are being filtered upstream of Playwright. This isolates whether the issue is in the production code or the test harness. * test(deploy-logs): use testid locator for stack action button Replaces the regex-based getByRole locator (/Deploy|Start/i) with getByTestId('stack-deploy-button'). The regex matched something other than the actual deploy button: backend logs proved no deploy POST ever fired, and instrumentation confirmed neither deployStack nor runWithLog ran on click despite the test claiming success. Adds data-testid='stack-deploy-button' to both the Restart and Start button branches in EditorLayout's action bar so the same locator works whether the stack is running or not. Also drops the temporary debug console.log entries in deployStack, runWithLog, and App, and restores the test's console listener filter to only emit error and warning messages. * test(deploy-logs): park cursor in corner so auto-close countdown fires After clicking the deploy button, the cursor lands inside the centered modal. The modal pauses its 4s auto-close countdown on hover, so the HAPPY test was waiting for a close that never happened. page.mouse.move to (0,0) parks the cursor outside the modal before the success banner appears, letting the countdown complete. * test(deploy-logs): drop redundant loginAs after page.reload page.reload preserves auth cookies, so the page lands back on the dashboard without needing a fresh login. The loginAs call after reload was racing on isLoginPage(): a transient login-page state during page load made loginAs commit to filling #username, then the dashboard committed and #username never came back. Playwright's auto-wait then hung the fill until the test's 120s timeout, which also dragged later stacks.spec tests down with collateral timeouts. waitForStacksLoaded is enough to confirm we're on the dashboard with the sidebar populated before clicking the new stack. * test(e2e): make loginAs race-safe when login page is a false positive isLoginPage() reports the page as a login screen if the Login button locator reports visible at the moment of the check. Under CI load (more real container deploys from the deploy-log-panel suite), the auth context can render the login form for one paint, then redirect to the dashboard. The original code committed to filling #username and hung until the test timeout when the field was no longer there. Now the login branch waits up to 2s for #username to actually appear before filling. If it never appears, we fall through to the dashboard check instead of hanging.	2026-04-26 00:43:54 -04:00
Anso	ad90bd9404	feat(settings): add comfortable/compact density toggle (#683) ... Adds a per-device appearance preference that compresses row, cell, and tile padding across dashboard, settings, audit log, and every shared table without changing typography or layout structure. Density is stored in localStorage and applied to the document body as a class that swaps a set of CSS variables. Components opt in by consuming the tokens, so the global table primitive scales all seven consumers at once. A new Appearance section in the Identity group lets users pick between Comfortable and Compact via a Combobox, with a helper line that reflects the current choice.	2026-04-18 18:48:58 -04:00