Feature/secrets manager updates by ndorin · Pull Request #48 · PepperDash/essentials-devtools

ndorin · 2026-09-25T04:05:12Z

This pull request introduces several improvements to project configuration, documentation, and development tooling. The most significant changes include enhanced documentation structure and clarity, new and updated development scripts, improved VS Code settings and extensions, and additional project configuration files for formatting and blame management.

Documentation and User Guidance Improvements:

Major expansion and restructuring of README.md and docs/README.md to clarify onboarding, learning resources, and feature descriptions, following the Diataxis documentation framework. This includes new sections for tutorials, how-to guides, reference, and explanation, as well as clearer feature listings and browser compatibility info. (F1fceed5R1, [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]
Added a new how-to guide for tracing signal routes and reading the routing diagram, with references in both main and documentation READMEs. [1] [2]
Improved feature descriptions for signal routing, highlighting new interactive and live feedback capabilities. [1] [2]

Development Tooling and Configuration:

Added and updated npm scripts for linting (lint, lint:fix) and formatting (format, format:check) with ESLint and Prettier, and documented these in README.md.
Introduced .prettierignore to exclude build, coverage, and lock files from formatting.
Added .git-blame-ignore-revs for bulk formatting commit exclusion in blame, and set up .gitattributes for consistent line endings across platforms. [1] [2]

VS Code Workspace Enhancements:

Updated .vscode/settings.json for improved formatting (Prettier as default, format on save), streamlined ESLint validation, and explicit code actions on save.
Added .vscode/extensions.json to recommend ESLint and Prettier extensions for consistent development experience.
Minor formatting and consistency improvements in VS Code snippets and launch configurations. [1] [2] [3] [4]

Other Configuration Updates:

Minor fix to .releaserc.json for changelog plugin configuration.

These changes collectively enhance developer experience, enforce consistent code style, and make documentation more accessible for both new and experienced users.

…al path tracing

… connection

…d display alert for untrusted certificates

…on component feat: update Routing to support synthetic tie lines for live routing feedback feat: modify Versions component layout for better responsiveness feat: extend apiSlice and routingFeedbackSlice to handle multiple sink routes

…and integrate with routing feedback

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…feedback

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

- Introduced Help component with dynamic routing for documentation. - Added HelpSidebar for navigation through documentation categories and pages. - Implemented HelpArticle for rendering markdown content with support for GFM tables. - Created docsContent module for managing documentation structure and content retrieval. - Added tests for Help component, HelpArticle, and docsContent functionality. - Updated LoginForm and TopNav to include links to Help documentation. - Added react-markdown and remark-gfm for markdown rendering.

The repository already stores all text files with LF; this keeps Windows editors and tooling from committing CRLF. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…sages Detach handlers before closing a socket and ignore events from any socket that is no longer current, so a replaced connection can't keep dispatching messages, clobber the active socket, or trigger a spurious fallback. WS_DISCONNECT now also dispatches disconnected() since the detached onclose no longer does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…nding Rapid clicks on Join started multiple debug sessions and sockets, producing duplicate console messages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The server already returns the URL reachable from the browser's side of the network, so connect to `url` first and use `fallbackUrl` only as the fallback instead of swapping them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Referenced by .vscode/settings.json and the README; no lint config or script yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- eslint.config.js: @eslint/js + typescript-eslint recommended, React hooks, Vite react-refresh, plus type-aware no-floating-promises and no-misused-promises; eslint-config-prettier last to avoid conflicts - Rename prettierrc.json to .prettierrc.json so Prettier finds it, and add .prettierignore - Add lint, lint:fix, format and format:check scripts Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

No functional changes; generated by `npm run format`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

GitHub applies .git-blame-ignore-revs automatically; locally run `git config blame.ignoreRevsFile .git-blame-ignore-revs`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Log failures from join() instead of leaving an unhandled rejection when starting a debug session fails - Mark fire-and-forget RTK Query triggers, refetch() and navigate() with `void` (their promises don't reject without unwrap()) - Wrap async click/submit handlers so React gets a void callback - Replace `any` with `unknown` or a narrow type for the legacy monaco languages.json API; String -> string in LogMessage - Remove unused getAppIdFromPath; rename icons/index.tsx to .ts since it holds no components Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- Drop legacy eslint.options.extensions (removed in ESLint 10), the prettier/prettier rule customization, html validation and the deprecated eslint.alwaysShowStatus; the default eslint.validate also covers .tsx, which the old list missed - Use Prettier as the default formatter and format on save - Recommend the ESLint and Prettier extensions - Document the lint and format scripts in the README Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Chore/eslint prettier config

ESLint 10, jsdom 29 and Vite 8 require Node ^20.19.0 || ^22.13.0 || >=24, so Node 18 is no longer supported. Update the README prerequisite and declare the range in package.json engines. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Chore/eslint prettier config

Replace the join ref, which was released before the WebSocket opened, with an isConnecting flag in the websocket slice. It is set when a join begins and cleared when the socket opens, fails, or disconnects, and the Start button is disabled while it is set. Dispatch disconnected() when replacing a socket, since its detached onclose no longer reports it, so a failed reconnect can't leave isConnected stuck at true. Exercise the stale socket's captured handlers in the middleware tests and cover reconnect failure and the isConnecting lifecycle. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-authored-by: cdenig <86131648+cdenig@users.noreply.github.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

- Add signalColors.ts to define colors for various signal types used in routing diagrams. - Introduce signalTypes.ts to manage signal-type flag algebra, including parsing and formatting functions. - Create signalTypes.test.ts to validate the functionality of signal type parsing and formatting. - Implement useRouteCandidates.ts for memoized candidate-source lookup based on static tie-line graphs. - Add routingCommands.ts to define the wire contract for routing commands and their builders. - Create routingCommands.test.ts to ensure the correctness of command builders and error handling. - Update routingFeedbackSlice.ts to manage sink input changes, ensuring proper route handling and clearing. - Add routingFeedbackSlice.test.ts to validate the behavior of sink input changes in the state.

…nd empty state diagnostics

- Added `secretsFile.ts` to handle parsing and validation of secrets files, ensuring security by not exposing sensitive values in error messages or logs. - Introduced types and interfaces for issues, summaries, and results related to secrets file processing. - Implemented functions to normalize, validate, and summarize secrets entries. - Added tests for the new functionality. feat(download): create utility functions for downloading files - Introduced `downloadFile.ts` with functions to download text and JSON files, including support for timestamped filenames. - Added tests for download functionality to ensure correct behavior across different scenarios. test(secretsContract): add comprehensive tests for secrets API contract - Created `secretsContract.test.ts` to validate command builders and constants against the expected API shapes and limits. - Ensured that command builders emit the exact wire shape required by the backend. feat(secretsContract): define the wire contract for the Essentials secrets API - Established the structure for secrets API requests and responses in `secretsContract.ts`, including command requests, bulk operations, and error handling. - Documented the API's behavior and constraints to ensure consistency across implementations.

… tiles and close button

Copilot

Copilot review overview

🟡 Changes recommended

Unresolved critical and moderate issues remain in routing feedback, signal handling, secrets workflows, documentation links, and formatting checks.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 2 · 5

Open (7)

Guard socket callbacks against stale connections · New
Key feedback routes by port and signal type · New
Format files before enabling format checks · New
Match routingCommand as a path segment · New
Include signal type in pending confirmations · New
Check unmanaged records across all target providers · New
Dispatch disconnect before opening fallback socket · New

What changed in this PR

This pull request adds routing feedback/editing, secrets management, documentation improvements, and development tooling updates.

Changes:

Adds routing commands, feedback handling, signal tracing, and multiview UI.
Adds secrets workflows, including editing, deletion, and bulk operations.
Expands documentation and standardizes formatting, linting, and VS Code configuration.

File	Summary
`vite.config.ts`	Vite configuration
`tsconfig.json`	TypeScript configuration
`src/vite-env.d.ts`	Vite environment types
`src/styles.scss`	Global styles
`src/store/websocketSlice.ts`	WebSocket state
`src/store/websocketMiddleware.ts`	WebSocket middleware
`src/store/websocketMiddleware.test.ts`	WebSocket middleware tests
`src/store/store.ts`	Store configuration
`src/store/routingFeedbackSlice.ts`	Routing feedback state
`src/store/routingFeedbackSlice.test.ts`	Feedback state tests
`src/store/routingFeedbackMiddleware.ts`	Routing feedback lifecycle
`src/store/routingCommands.ts`	Routing command contracts
`src/store/routingCommands.test.ts`	Routing command tests
`src/store/hooks.ts`	Store hooks
`src/store/commonUi/commonUiState.ts`	Common UI state
`src/store/commonUi/commonUiSlice.ts`	Common UI reducers
`src/store/commonUi/commonUiSelectors.ts`	Common UI selectors
`src/store/commonUi/commonUiHooks.ts`	Common UI hooks
`src/shared/types/LogMessage.ts`	Log message types
`src/shared/ListFiltersHeader.tsx`	List filter header
`src/shared/icons/index.ts`	Shared icon exports
`src/shared/hooks/useAppParams.ts`	Application parameter hook
`src/shared/functions/meetsMinimumVersion.ts`	Version validation
`src/shared/functions/downloadFile.ts`	File download utility
`src/shared/functions/downloadFile.test.ts`	Download utility tests
`src/shared/FilterSearchText.tsx`	Filter search control
`src/shared/FilterDropdownSearchParams.tsx`	Filter parameters
`src/shared/components/EyeIcon.tsx`	Eye icon component
`src/react-app-env.d.ts`	React environment types
`src/index.tsx`	Application entry point
`src/features/Versions.tsx`	Versions feature
`src/features/Types.tsx`	Types feature
`src/features/TopNav.tsx`	Top navigation
`src/features/TieLineEdge.tsx`	Tie-line edge component
`src/features/secrets/SecretDeleteModal.tsx`	Secret deletion modal
`src/features/secrets/BulkPreviewTable.tsx`	Bulk preview table
`src/features/secrets/BulkApplyModal.module.scss`	Bulk apply styling
`src/features/RoutingDeviceNode.module.scss`	Routing node styling
`src/features/routing/useRouteCandidates.ts`	Route candidate hook
`src/features/routing/useRouteCandidates.test.ts`	Route candidate tests
`src/features/routing/signalTypes.ts`	Signal type definitions
`src/features/routing/signalTypes.test.ts`	Signal type tests
`src/features/routing/signalColors.ts`	Signal colors
`src/features/routing/RoutePopover.module.scss`	Route popover styling
`src/features/routing/pendingRoutes.ts`	Pending route state
`src/features/routing/currentSource.ts`	Current source logic
`src/features/RequireAuth.tsx`	Authentication guard
`src/features/MultiviewLayoutPanel.tsx`	Multiview panel
`src/features/MultiviewLayoutPanel.module.scss`	Multiview panel styling
`src/features/MultiviewLayoutCanvas.tsx`	Multiview canvas
`src/features/MultiviewLayoutCanvas.module.scss`	Multiview canvas styling
`src/features/MobileControl.tsx`	Mobile controls
`src/features/MainLayout.tsx`	Main layout
`src/features/LoginForm.tsx`	Login form
`src/features/InitializationExceptions.tsx`	Initialization errors
`src/features/Help/HelpSidebar.tsx`	Help sidebar
`src/features/Help/HelpArticle.tsx`	Help article rendering
`src/features/Help/Help.tsx`	Help page
`src/features/Help/Help.test.tsx`	Help page tests
`src/features/Help/docsContent.ts`	Help documentation content
`src/features/Help/docsContent.test.ts`	Documentation content tests
`src/features/ErrorBoundary.tsx`	Error boundary
`src/features/DeviceList.tsx`	Device list
`src/features/DeviceDetail.tsx`	Device details
`src/features/DebugConsole/RestartConfirmModal.tsx`	Restart confirmation
`src/features/DebugConsole/MinimumLogLevelDropdown.tsx`	Log level control
`src/features/DebugConsole/LogMessageDetailDrawer.tsx`	Log detail drawer
`src/features/DebugConsole/DeviceFilterDropdown.tsx`	Device filter
`src/features/DebugConsole/DebugFilters.tsx`	Debug filters
`src/features/DebugConsole/debugConsts.ts`	Debug constants
`src/features/DebugConsole/ConsoleWindow.tsx`	Console window
`src/features/ConfigFile.tsx`	Configuration file view
`src/features/ApiPaths.tsx`	API paths
`src/features/ApiPathDetailDrawer.tsx`	API path details
`src/App.test.tsx`	Application tests
`README.md`	Project documentation
`package.json`	Scripts and dependencies
`index.html`	Application HTML
`eslint.config.js`	ESLint configuration
`docs/tutorials/README.md`	Tutorial index
`docs/tutorials/getting-started.md`	Getting started guide
`docs/tutorials/device-management-basics.md`	Device management tutorial
`docs/tutorials/debug-console-basics.md`	Debug console tutorial
`docs/README.md`	Documentation index
`docs/how-to/troubleshoot-connection.md`	Connection troubleshooting
`docs/how-to/trace-signal-routes.md`	Signal route tracing guide
`docs/how-to/restart-reload-config.md`	Restart and reload guide
`docs/how-to/monitor-performance.md`	Performance monitoring guide
`docs/how-to/manage-secrets.md`	Secrets management guide
`docs/how-to/change-routes.md`	Route changes guide
`docs/explanation/README.md`	Explanatory documentation
`.vscode/settings.json`	VS Code settings
`.vscode/launch.json`	VS Code launch configuration
`.vscode/extensions.json`	Recommended extensions
`.releaserc.json`	Release configuration
`.prettierrc.json`	Prettier configuration
`.prettierignore`	Prettier exclusions
`.gitattributes`	Git attributes
`.git-blame-ignore-revs`	Blame exclusions

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

…llback connection logic

…cross routing commands and secrets contract files; add tests for routing feedback middleware; enhance WebSocket handling in middleware; update TypeScript configuration to include ES2022.Error library.

Copilot

Copilot review overview

🟡 Changes recommended

Unresolved critical and moderate findings remain in WebSocket handling, routing, secrets workflows, documentation, and accessibility.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 2 · 3

Open (5)

Unused selector causes ESLint failure · New
Malformed failed URLs crash DebugConsole rendering · New
Nested edit button is inaccessible inside button-role tile · New
Provider switch validates against stale existing keys · New
WebSocket constructor errors bypass fallback handling · New

Resolved since last review (7)

Key feedback routes by port and signal type
Guard socket callbacks against stale connections
Dispatch disconnect before opening fallback socket
Check unmanaged records across all target providers
Include signal type in pending confirmations
Match routingCommand as a path segment
Format files before enabling format checks

+  const sinkRoutes = useAppSelector((s) => s.routingFeedback.sinkRoutes);
+  const layouts = useAppSelector((s) => s.routingFeedback.layouts);
+  const routingWsConnected = useAppSelector((s) => s.routingFeedback.connected);
+  const failedUrls = useAppSelector((s) => s.routingFeedback.failedUrls);


+            store.dispatch(
+              connectionFailed(
+                fallbackUrl && targetUrl === fallbackUrl
+                  ? [url, fallbackUrl]
+                  : [targetUrl]
+              )
+            );


+                // Not a <button>: it contains the edit <button>, and buttons can't nest.
+                role={onTileClick ? 'button' : undefined}
+                tabIndex={onTileClick ? 0 : undefined}
+                aria-label={
+                  onTileClick
+                    ? `Tile ${tile.tileNumber}: ${sourceName}`
+                    : undefined
+                }
+                aria-pressed={onTileClick ? isSelected : undefined}


+  const trimmedKey = key.trim();
+  const collision = existingKeys.find(
+    (entry) => entry.key.toLowerCase() === trimmedKey.toLowerCase()
+  );
+  // An update is always a collision with itself; only a *new* key colliding is worth warning about.
+  const collidesUnexpectedly = !isUpdate && collision !== undefined;
+  const collidesWithUnmanaged = collision !== undefined && !collision.managed;


+    currentUrl = url;
+    if (!attemptedUrls.includes(url)) attemptedUrls.push(url);
+    const ws = new WebSocket(url);
+    socket = ws;


ndorin and others added 30 commits June 22, 2026 21:25

feat: implement live routing feedback with WebSocket support and sign…

4382406

…al path tracing

feat: seed routing feedback state from HTTP response before WebSocket…

308bb4a

… connection

feat: update routing feedback state to handle multiple failed URLs an…

2804c30

…d display alert for untrusted certificates

feat: implement multiview layout panels with draggable functionality …

a66b451

…and integrate with routing feedback

Potential fix for pull request finding

3b1d346

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

f58bef9

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Fix Routing.tsx layout effect re-running dagre on every feedback update

74c915f

Potential fix for pull request finding

599dc93

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

30ccdc1

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

feat: increment minor version

73bcc2b

refactor: remove unused type import for MidpointRoute in Routing.tsx

98dea90

Merge remote-tracking branch 'origin/HEAD' into feature/live-routing-…

fcae28f

…feedback

fix: Potential fix for pull request finding

2514c62

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: Potential fix for pull request finding

061dad9

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: Potential fix for pull request finding

b836745

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

chore: enforce LF line endings via .gitattributes

1358c69

The repository already stores all text files with LF; this keeps Windows editors and tooling from committing CRLF. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

fix(console): ignore repeat Join clicks while a session request is pe…

425ee1e

…nding Rapid clicks on Join started multiple debug sessions and sockets, producing duplicate console messages. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

test: replace stale CRA "learn react" test with Help route smoke test

6bb0a94

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

chore: add eslint as a dev dependency

fab51a0

Referenced by .vscode/settings.json and the README; no lint config or script yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

style: format codebase with Prettier

240c88c

No functional changes; generated by `npm run format`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

chore: ignore Prettier formatting commit in git blame

a1bcd0d

GitHub applies .git-blame-ignore-revs automatically; locally run `git config blame.ignoreRevsFile .git-blame-ignore-revs`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Merge pull request #46 from PepperDash:chore/eslint-prettier-config

bcf3a41

Chore/eslint prettier config

cdenig and others added 9 commits September 23, 2026 14:37

fix: clarify functional grouping examples in device management tutorial

e8c18ec

Merge pull request #47 from PepperDash/chore/eslint-prettier-config

9bd0cb0

Chore/eslint prettier config

fix stale debug session state on app changes

f26a904

Co-authored-by: cdenig <86131648+cdenig@users.noreply.github.com>

fix: Merge browser and node globals in ESLint config

be5edca

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

feat(routing): enhance routing logic with current source resolution a…

e78d39d

…nd empty state diagnostics

feat(accessibility): enhance focus styles and keyboard navigation for…

bdc4964

… tiles and close button

ndorin self-assigned this Sep 25, 2026

Copilot AI lite review requested due to automatic review settings September 25, 2026 04:05

Copilot started reviewing on behalf of ndorin September 25, 2026 04:05 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

ndorin added 2 commits September 24, 2026 22:17

feat(websocket): add error handling for invalid WebSocket URLs and fa…

7e33cbf

…llback connection logic

feat: Refactor string literals to use single quotes for consistency a…

db49f5f

…cross routing commands and secrets contract files; add tests for routing feedback middleware; enhance WebSocket handling in middleware; update TypeScript configuration to include ES2022.Error library.

Copilot AI review requested due to automatic review settings September 25, 2026 04:49

Copilot started reviewing on behalf of ndorin September 25, 2026 04:49 View session

Copilot AI reviewed Sep 25, 2026

View reviewed changes

ndorin closed this pull request by merging all changes into main in 8ef9242 Sep 30, 2026

Navigation Menu

Feature/secrets manager updates - #48

Feature/secrets manager updates#48
41 commits merged into
mainfrom
feature/secrets-manager-updates

ndorin commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

ndorin commented Sep 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants