Skip to content

Conversation

@stevebissett
Copy link
Collaborator

@stevebissett stevebissett commented Jul 9, 2025

Adds in these from fork:

Add profiles & dashboard summary:
stevebissett#4

Improve test coverage and robustness
stevebissett#5

Outstanding before merge:

  • Update readme with updated UI image.

Summary by CodeRabbit

  • New Features

    • Added support for managing and displaying "profile" data, including KYC compliance, in accounts.
    • Introduced a "Database Summary" section in the UI showing counts of profiles, accounts, cards, and transactions.
    • Added new API endpoints for database summary and health checks, with real-time updates via WebSocket.
    • Enabled toggling visibility for client secret and API key inputs in the UI.
    • Added ability to manage beneficiaries with create and delete endpoints.
  • Bug Fixes

    • Improved handling and validation of timestamp fields in card and environment variable tests.
  • Tests

    • Added comprehensive tests for profile and database summary endpoints, and updated existing tests to cover new profile fields.
  • Chores

    • Updated environment and ignore files for better project configuration and maintenance.
    • Enhanced logging and response formatting for improved clarity.
  • Documentation

    • Corrected dashboard access description and added documentation for the new health check and beneficiary management endpoints.

- Removed DB_FILE environment variable from .env.sample
- Deleted legacy investec.db file
- Cleaned up commented DB_FILE reference in app.ts
* Add profile and KYC compliant fields to accounts

- Added Profile model with profileId and profileName
- Updated Account model with kycCompliant, profileId, and profileName fields
- Created profile seeding script with default profile (ID: 10001234567890, Name: Joe Soap)
- Updated account seeding to include profile references and KYC compliance
- Added database journal files to gitignore
- Applied Prisma migration to update existing database

This ensures production-like account responses for strict validation compatibility.

* Add updated database, edit migration
* Add profile and KYC compliant fields to accounts

- Added Profile model with profileId and profileName
- Updated Account model with kycCompliant, profileId, and profileName fields
- Created profile seeding script with default profile (ID: 10001234567890, Name: Joe Soap)
- Updated account seeding to include profile references and KYC compliance
- Added database journal files to gitignore
- Applied Prisma migration to update existing database

This ensures production-like account responses for strict validation compatibility.

* Add updated database, edit migration

* Add real-time database summary dashboard (#3)

* Add real-time database summary dashboard with Socket.IO

- Added Database Summary section showing live counts for profiles, accounts, cards, and transactions
- Implemented Socket.IO real-time updates for all database operations (create/delete accounts, transactions, clear/restore)
- Added /database-summary API endpoint with real-time emission via emitDatabaseSummary()
- Improved server logging to use req.originalUrl for complete path details
- Excluded internal database-summary calls from server logs to reduce noise
- Added .idea folder to .gitignore
* Update dev.db with test accounts and transactions
* Improve test coverage and robustness

- Update account.spec.ts to include new profile fields (kycCompliant, profileId, profileName)
- Improve card.spec.ts with better timestamp validation instead of exact matching
- Enhance environmentalvariables.spec.ts with comprehensive structure validation
- Add new profile.spec.ts with comprehensive profile functionality testing
- Remove unnecessary comments from test files for cleaner code
- Fix TypeScript warnings with proper parameter types

* Remove remaining comments from test files

- Clean up card.spec.ts by removing unnecessary comments
- Clean up environmentalvariables.spec.ts by removing unnecessary comments
- Keep code clean and concise without explanatory comments

* Fix ESLint configuration and resolve linting issues

- Fix eslint.config.js max-len rule configuration with proper severity and options
- Fix Array() constructor usage in cards.ts to use array literal notation
- Fix line length issues in card.spec.ts by breaking long strings into concatenated lines
- Replace 'any' type with proper typing in profile.spec.ts
- All 26 tests still passing
- No ESLint errors remaining
@coderabbitai
Copy link

coderabbitai bot commented Jul 9, 2025

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)
  • prisma/dev.db is excluded by !**/*.db

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This update introduces a new "Profile" entity to the application, linking it to accounts with profile data and a KYC compliance flag. The database schema, seeding scripts, API endpoints, and tests are updated accordingly. A new /database-summary endpoint and real-time summary emission are added, with front-end and test coverage enhancements.

Changes

File(s) Change Summary
.env.sample Removed the DB_FILE variable definition.
.gitignore Added ignore patterns for **.db-journal, CLAUDE.md, and .idea.
eslint.config.js Refined @stylistic/js/max-len rule to use an explicit error with a 120-character limit.
prisma/account.ts Added kycCompliant, profileId, and profileName fields to all seeded accounts.
prisma/profile.ts Introduced module to seed profile data and exported seedProfiles function.
prisma/migrations/.../migration.sql Added Profile table; updated Account table with new fields and migrated data accordingly.
prisma/schema.prisma Defined new Profile model; extended Account model with profile linkage and KYC flag.
prisma/seed.ts Integrated seedProfiles into the seeding process.
src/app.ts Added /database-summary endpoint, emitDatabaseSummary function, and improved request logging.
src/index.html Added "Database Summary" UI section, socket integration, and summary-fetching logic.
src/routes/accounts.ts Called emitDatabaseSummary after account and transaction mutations; added beneficiary deletion route; included profile data on account creation.
src/routes/cards.ts Added CardResponse interface; changed cards array initialization to typed array.
test/account.spec.ts Updated expected account object to include new fields.
test/card.spec.ts Changed assertions to check structure and parse timestamps instead of strict value matching.
test/environmentalvariables.spec.ts Updated assertions to check property existence and type, not exact values.
test/profile.spec.ts Added new test suite for profile endpoints and data consistency.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Database

    User->>Frontend: Request database summary (UI load or after reset)
    Frontend->>Backend: GET /database-summary
    Backend->>Database: Query counts (profiles, accounts, cards, transactions)
    Database-->>Backend: Return counts
    Backend-->>Frontend: Respond with summary data
    Frontend->>User: Display summary

    Note over Backend,Frontend: On database mutation (e.g. account create/delete)
    Backend->>Backend: emitDatabaseSummary()
    Backend->>Database: Query updated counts
    Database-->>Backend: Return new counts
    Backend-->>Frontend: WebSocket emit 'database-summary'
    Frontend->>User: Update summary in real-time
Loading

Possibly related PRs

Suggested reviewers

  • devinpearson

Poem

🐰
New profiles hop into the scene,
With KYC checked, their records are clean.
Accounts now know just who you are,
And summaries shine like a dashboard star.
With tests and seeds, the garden grows—
This bunny approves, as everyone knows!
🥕


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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@@ -0,0 +1,28 @@
-- CreateTable
CREATE TABLE "Profile" (
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like the migrations could be compressed, given that the DB is shipped with the simulator.

createdAt: '2024-08-01T13:05:33.685Z',
updatedAt: '2024-08-01T13:05:33.685Z',
publishedAt: '2024-08-01T13:05:33.685Z',
code: '// This function runs before a transaction.\n' +
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a linting change from the linter, which may be undesirable.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🔭 Outside diff range comments (1)
src/routes/accounts.ts (1)

274-300: Fix duplicate route definition.

There are two identical POST routes for /:accountId/transactions defined at lines 274 and 302. This will cause the second route to be unreachable and could lead to unexpected behavior.

Remove the duplicate route definition:

-router.post('/:accountId/transactions', async (req: Request, res: Response) => {
-  try {
-    let randomTx = Investec.transaction(req.params.accountId)
-    randomTx.runningBalance = 0
-    randomTx = { ...randomTx, ...req.body }
-
-    const accountId = req.params.accountId
-    // check that the account exists
-    const account = await prisma.account.findFirst({
-      where: {
-        accountId: accountId,
-      },
-    })
-    if (!account) {
-      console.log('no account found')
-      return formatErrorResponse(req, res, 404) // no account was found
-    }
-    // insert the transaction
-    const transaction = await prisma.transaction.create({
-      data: randomTx,
-    })
-    return formatResponse(transaction, req, res)
-  } catch (error) {
-    console.log(error)
-    return formatErrorResponse(req, res, 500)
-  }
-})

Also applies to: 302-328

🧹 Nitpick comments (1)
src/routes/accounts.ts (1)

294-294: Good integration of real-time updates, but consider error handling.

The emitDatabaseSummary() calls are properly positioned after database mutations to ensure clients receive updated summary data. However, consider adding error handling since these calls shouldn't fail the main operation.

-    await emitDatabaseSummary()
+    try {
+      await emitDatabaseSummary()
+    } catch (error) {
+      console.log('Failed to emit database summary:', error)
+    }

Also applies to: 352-352, 381-381, 415-415

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 262c510 and 26fb209.

⛔ Files ignored due to path filters (2)
  • investec.db is excluded by !**/*.db
  • prisma/dev.db is excluded by !**/*.db
📒 Files selected for processing (16)
  • .env.sample (0 hunks)
  • .gitignore (1 hunks)
  • eslint.config.js (1 hunks)
  • prisma/account.ts (1 hunks)
  • prisma/migrations/20250708211014_add_profile_and_kyc/migration.sql (1 hunks)
  • prisma/profile.ts (1 hunks)
  • prisma/schema.prisma (1 hunks)
  • prisma/seed.ts (2 hunks)
  • src/app.ts (5 hunks)
  • src/index.html (5 hunks)
  • src/routes/accounts.ts (5 hunks)
  • src/routes/cards.ts (1 hunks)
  • test/account.spec.ts (1 hunks)
  • test/card.spec.ts (1 hunks)
  • test/environmentalvariables.spec.ts (1 hunks)
  • test/profile.spec.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • .env.sample
🧰 Additional context used
🧬 Code Graph Analysis (4)
prisma/seed.ts (1)
prisma/profile.ts (1)
  • seedProfiles (12-19)
src/routes/accounts.ts (1)
src/app.ts (1)
  • emitDatabaseSummary (254-274)
test/profile.spec.ts (1)
src/app.ts (1)
  • app (32-32)
src/app.ts (6)
prisma/profile.ts (1)
  • seedProfiles (12-19)
prisma/account.ts (1)
  • seedAccounts (58-65)
prisma/transaction.ts (1)
  • seedTransactions (205-212)
prisma/beneficiary.ts (1)
  • seedBeneficiaries (56-63)
prisma/card.ts (1)
  • seedCards (20-27)
prisma/card-code.ts (1)
  • seedCardCodes (22-29)
🔇 Additional comments (30)
eslint.config.js (1)

12-12: LGTM! Improved ESLint rule configuration.

The change from a simple numeric value to an explicit error-level configuration with an options object follows ESLint best practices and makes the configuration more maintainable. The 120-character line length limit is appropriate for code readability.

src/routes/cards.ts (1)

13-13: LGTM: Good stylistic improvement

Replacing Array() with the array literal [] is a best practice that improves code readability and follows standard JavaScript conventions.

.gitignore (1)

5-8: LGTM: Appropriate gitignore additions

The new entries are well-chosen:

  • **.db-journal excludes SQLite journal files (transient database files)
  • CLAUDE.md excludes what appears to be AI-generated documentation
  • .idea excludes JetBrains IDE configuration files

These additions follow standard practices for excluding temporary and IDE-specific files.

test/environmentalvariables.spec.ts (1)

11-19: LGTM: Improved test robustness

The refactored assertions are more maintainable and robust:

  • Property existence checks (assert.exists, assert.property) are more resilient than strict equality
  • Date parsing validation (new Date()) is more appropriate than exact timestamp matching
  • Tests now focus on data structure and type correctness rather than exact values

This approach reduces test brittleness while maintaining coverage of the essential functionality.

test/card.spec.ts (2)

23-50: LGTM: Well-structured test improvements

The test restructuring provides several benefits:

  • Clearer separation between static data validation and dynamic timestamp validation
  • Improved readability with explicit newline concatenation in the expected code string
  • More robust timestamp validation using date parsing instead of exact string matches
  • Better maintainability by focusing on data structure rather than exact values

56-82: LGTM: Consistent test pattern applied

The same improved testing pattern is consistently applied to the published code test, maintaining code consistency and providing the same benefits as the previous test case.

test/account.spec.ts (1)

15-17: LGTM: Profile and KYC fields addition

The new properties align well with the PR objectives:

  • kycCompliant: Boolean flag for KYC compliance tracking (essential for banking apps)
  • profileId and profileName: Support the new profile functionality mentioned in the PR summary

The test data appears reasonable and consistent with the broader profile feature integration.

prisma/seed.ts (2)

5-5: LGTM: Proper import integration.

The import statement correctly brings in the seedProfiles function from the new profile module.


20-20: LGTM: Correct seeding order.

The seedProfiles() call is properly positioned before seedAccounts(), ensuring profile data exists before accounts are created that reference it.

prisma/schema.prisma (1)

10-13: LGTM: Clean Profile model definition.

The Profile model is well-defined with appropriate primary key and naming.

prisma/profile.ts (1)

1-19: LGTM: Well-structured profile seeding implementation.

The implementation follows proper Prisma patterns:

  • Correct imports and type usage
  • Consistent with other seeding files
  • Proper async/await handling
  • Clear console logging

The single hardcoded profile is appropriate for testing purposes.

src/routes/accounts.ts (1)

6-6: LGTM: Proper import integration.

The import statement correctly adds the emitDatabaseSummary function for real-time database summary updates.

src/index.html (5)

69-85: LGTM! Well-structured database summary UI.

The Database Summary section is well-implemented with proper HTML structure and consistent styling. The use of conditional rendering with || 0 ensures graceful handling of undefined values.


166-171: LGTM! Proper Vue.js data model extension.

The summary object is correctly initialized with all required fields (profiles, accounts, cards, transactions) set to zero, following Vue.js best practices.


194-198: LGTM! Proper socket event handling.

The socket event listener for 'database-summary' is correctly implemented and follows the existing pattern for handling socket events.


216-222: LGTM! Clean API integration.

The fetchSummary() method follows the same pattern as fetchEnv(), with proper error handling through the fetch API and consistent data assignment.


240-241: LGTM! Proper integration with existing actions.

The delayed fetchSummary() calls after clearing/restoring the database are appropriate, allowing time for the backend operations to complete before refreshing the summary.

Also applies to: 248-249

prisma/migrations/20250708211014_add_profile_and_kyc/migration.sql (3)

1-5: LGTM! Proper table creation.

The Profile table is correctly defined with appropriate data types and primary key constraint.


10-28: LGTM! Proper SQLite table recreation pattern.

The table recreation follows the correct SQLite pattern with proper foreign key handling using PRAGMA commands. The data migration correctly preserves existing data while adding new fields with appropriate defaults.


7-8: Default profile data is consistent.
The migration’s INSERT for profileId 10001234567890 / profileName Joe Soap matches the seed values in prisma/profile.ts. No changes required.

test/profile.spec.ts (4)

1-4: LGTM! Proper test setup.

The imports and setup are correct, properly importing the necessary testing libraries and the Express app for testing.


5-22: LGTM! Comprehensive database summary endpoint testing.

The test properly validates the /database-summary endpoint response structure, ensuring all required fields are present and have correct types. The use of isAtLeast(0) for profile count is appropriate.


24-44: LGTM! Thorough account profile validation.

The test properly validates that accounts contain the new profile fields with correct types. The regex pattern /^1000\d{10}$/ for profileId validation is appropriate and the conditional testing for array length > 0 prevents false failures.


46-62: LGTM! Good consistency validation.

The test ensures profile data consistency across multiple accounts, which is important for data integrity. The type assertion pattern is properly handled for TypeScript compatibility.

src/app.ts (6)

25-25: LGTM! Proper import addition.

The import for seedProfiles is correctly added and consistent with other seeding function imports.


70-71: LGTM! Proper profile integration in database operations.

The profile deletion and seeding are correctly integrated into the clear and restore operations, maintaining consistency with other entity operations. The emitDatabaseSummary() calls ensure real-time updates.

Also applies to: 79-80, 86-86


210-231: LGTM! Efficient database summary endpoint.

The endpoint uses Promise.all() for parallel database counting, which is efficient. The response format follows the existing pattern using formatResponse().


254-274: LGTM! Well-designed WebSocket emission function.

The emitDatabaseSummary() function is properly exported and mirrors the HTTP endpoint logic. Error handling is appropriate with console logging.


278-292: LGTM! Improved logging behavior.

The conditional logging exclusion for /database-summary calls is a good UX improvement, preventing log clutter from frequent dashboard updates. The switch from req.url to req.originalUrl provides more accurate request path logging.


311-311: LGTM! Consistent logging improvement.

The change from req.url to req.originalUrl in error response logging maintains consistency with the formatResponse function change.

Comment on lines 12 to 14
kycCompliant: true,
profileId: '10001234567890',
profileName: 'Joe Soap',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider normalization and data consistency improvements.

All accounts are using the same profile data, which may be appropriate for testing but raises some concerns:

  1. Data duplication: Storing both profileId and profileName in the Account model duplicates data from the Profile table, violating normalization principles.
  2. Data consistency risk: Without foreign key constraints, there's no guarantee the profileId exists in the Profile table.

Consider removing profileName from the Account model and using joins to retrieve profile information when needed, or adding proper foreign key relationships.

-    kycCompliant: true,
-    profileId: '10001234567890',
-    profileName: 'Joe Soap',
+    kycCompliant: true,
+    profileId: '10001234567890',

Also applies to: 22-24, 32-34, 42-44, 52-54

🤖 Prompt for AI Agents
In prisma/account.ts around lines 12-14, 22-24, 32-34, and 42-44, the Account
model includes both profileId and profileName, causing data duplication and
risking inconsistency. To fix this, remove the profileName field from the
Account model and ensure profileId is a foreign key referencing the Profile
table. Adjust queries to join with the Profile table to retrieve profileName
when needed, maintaining normalization and data integrity.

Comment on lines 21 to 23
kycCompliant Boolean @default(true)
profileId String
profileName String
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add foreign key relationship and consider normalization.

The Account model extensions introduce profile functionality but lack proper relational constraints:

  1. Missing foreign key: No relationship defined between Account.profileId and Profile.profileId
  2. Data duplication: profileName is stored in both Profile and Account tables

Consider this improved schema design:

    kycCompliant Boolean @default(true)
    profileId String
-    profileName String
+    profile Profile @relation(fields: [profileId], references: [profileId])

This approach:

  • Establishes proper foreign key constraints
  • Eliminates data duplication
  • Ensures referential integrity
  • Requires joining to get profile name when needed
📝 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.

Suggested change
kycCompliant Boolean @default(true)
profileId String
profileName String
kycCompliant Boolean @default(true)
profileId String
profile Profile @relation(fields: [profileId], references: [profileId])
🤖 Prompt for AI Agents
In prisma/schema.prisma around lines 21 to 23, the Account model has profileId
and profileName fields but lacks a foreign key relationship to the Profile
model, causing data duplication and missing referential integrity. To fix this,
remove the profileName field from Account, define a relation field linking
Account.profileId to Profile.id (or the appropriate primary key), and add the
@relation attribute to enforce the foreign key constraint. This will normalize
the schema, eliminate duplicated profileName data, and ensure proper relational
integrity.

@devinpearson
Copy link
Owner

@stevebissett, is there anything you need from me to get this one merged?

@stevebissett
Copy link
Collaborator Author

@devinpearson - No - the outstanding but was to update the UI image that shows within the app, that can be done as a follow up.

The only other thing is for you to merge it (I don't have permissions to do that).

- Client Secret and API Key fields now default to hidden state for security
- Toggle buttons positioned to the right of input fields with eye icons
- Client Secret uses password/text input type switching
- API Key uses conditional rendering between textarea and masked dots display
- Updated dashboard screenshot to reflect new UI changes
- Implements GET /health endpoint returning HTTP 200 with { status: 'ok' }
- Provides simple service availability check for monitoring tools
- Lightweight response with no database dependencies
- Fixed typo: "room of the domain" to "root of the domain"
- Added /health endpoint to Dashboard section for completeness
- Preserved original formatting and structure
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
README.md (1)

55-58: Fix nested-list indentation to satisfy markdownlint (MD007).

Sub-bullets are indented 4 spaces; the rule expects 2. Adjust to keep lint clean:

-    - Dashboard view of the server
+  - Dashboard view of the server-    - Health check endpoint returning service status
+  - Health check endpoint returning service status
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 62edb45 and 9085df7.

📒 Files selected for processing (1)
  • README.md (2 hunks)
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
README.md

58-58: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)

🔇 Additional comments (1)
README.md (1)

48-48: Good wording fix – “root” is clearer than “room”.
No issues found with this change.

- Added fixed height (300px) scrollable container for server logs
- Implemented auto-scroll to bottom when new log entries arrive
- Added custom scrollbar styling for better visibility
- Removed overflow-hidden from parent container to show scrollbar
- Enhanced log item padding and styling for better readability
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (6)
src/index.html (6)

7-22: Broaden scrollbar styling for non-WebKit browsers & remove inline duplication

Only ::-webkit-scrollbar* rules are provided, so Firefox/Edge (non-Chromium) fall back to default scrollbars.
Also note that .logs-container already sets scrollbar-width: auto inline, so the CSS here partially duplicates inline declarations.

Consider adding scrollbar-width / scrollbar-color for Gecko engines and moving all scrollbar styling into a single CSS block to avoid scattered inline styles.

 .logs-container {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #9ca3af #f1f5f9;
 }

85-101: Make the summary markup semantic & guard against missing keys

div/span pairs work, but a definition list or small table would be more accessible (screen-readers announce term/value pairs clearly).
Additionally, if the backend ever omits a field, Vue will render undefined; the || 0 guard covers numbers but still flashes falsy strings.

-<div class="text-sm text-gray-600">
-  <span class="font-medium">Profiles:</span>
-  <span class="font-semibold text-gray-900">{{ summary.profiles ?? 0 }}</span>
+<dl class="grid grid-cols-4 gap-x-8 text-sm text-gray-600">
+  <dt class="font-medium">Profiles</dt><dd class="font-semibold text-gray-900">{{ summary.profiles ?? 0 }}</dd>

(Repeat for other metrics.)


108-115: Conflicting height rules cause double scroll-bars

logs-container has height: 300px while its child ul declares min-height: 350px, guaranteeing overflow even when only a few messages exist.
Drop the min-height or match the container height to avoid a redundant scrollbar and wasted space.

-<ul ... style="min-height: 350px;">
+<ul ...>

240-245: database-summary socket event already provides fresh data – redundant fetch

You call fetchSummary() immediately after establishing the socket and again after DB ops, but the server also emits a database-summary event which you handle. Duplicating via fetch:

  1. Sends an unnecessary HTTP request.
  2. Risks race conditions where the GET response arrives before the mutation completes, while the socket event is already the authoritative push channel.

Consider removing the manual fetches and relying solely on the socket, or vice-versa for simpler HTTP-only flow.


286-296: Arbitrary 500 ms delay after clear/restore

Waiting 0.5 s before refreshing assumes the server finishes mutations within that window. Use either:

  • A socket ack / event from the server confirming completion, or
  • The existing database-summary push just discussed,

and drop the timeout to guarantee consistency regardless of DB size or load.


304-309: Nit: helpers can be collapsed into one liner

Both visibility toggles are identical; unify into a single method taking the key to flip to keep the methods section concise.

-toggleClientSecretVisibility() {
-  this.showClientSecret = !this.showClientSecret;
-},
-toggleApiKeyVisibility() {
-  this.showApiKey = !this.showApiKey;
-},
+toggleVisibility(key) {
+  this[key] = !this[key];
+},

Called as toggleVisibility('showClientSecret'), etc.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9085df7 and fb1c3bc.

📒 Files selected for processing (1)
  • src/index.html (9 hunks)

Comment on lines 205 to 213
showClientSecret: false,
showApiKey: false,
summary: {
profiles: 0,
accounts: 0,
cards: 0,
transactions: 0
}
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Secrets live forever in a reactive front-end state

client_secret and api_key are stored in Vue’s reactive data. Anyone with DevTools access (or a JS snippet in console) can read them even when the inputs are masked. If these credentials are meant only for local simulation, note the risk; otherwise move them to an HTTP-only cookie or keep them solely server-side.

🤖 Prompt for AI Agents
In src/index.html around lines 205 to 213, client_secret and api_key are stored
in Vue's reactive data, exposing them to anyone with DevTools access even if
masked. To fix this, remove these secrets from the reactive front-end state and
instead store them securely on the server or in HTTP-only cookies to prevent
client-side access. If they are only for local simulation, clearly document the
risk and avoid using them in production code.

Comment on lines 262 to 268
fetchSummary() {
fetch('/database-summary')
.then(response => response.json())
.then(data => {
this.summary = data.data;
});
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add basic error handling to fetchSummary

A failing /database-summary GET (network error or 5xx) currently throws an unhandled promise rejection. Wrap in try/catch or append .catch() to surface an error toast.

 fetch('/database-summary')
   .then(r => r.json())
   .then(d => { this.summary = d.data })
+  .catch(() => this.toast('Unable to load DB summary'));

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
In src/index.html around lines 262 to 268, the fetchSummary method lacks error
handling for the fetch call to '/database-summary', which can cause unhandled
promise rejections on network or server errors. Add a .catch() block after the
existing .then() chain to handle errors by showing an error toast or logging the
error, ensuring any fetch failures are gracefully handled and surfaced to the
user.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
README.md (3)

48-48: Nit: be explicit that “root” is /

“Root of the domain” can be ambiguous for newcomers. Consider saying “Visiting / shows the dashboard …” to avoid any doubt.


55-58: Fix markdown-lint indent (MD007)

Nested bullets should be indented by 2 spaces, not 4.

-    - Dashboard view of the server
-    - Health check endpoint returning service status
+  - Dashboard view of the server
+  - Health check endpoint returning service status

110-113: Same indent issue for the new beneficiary endpoints

-    - Create a new beneficiary
-    - Delete a beneficiary
+  - Create a new beneficiary
+  - Delete a beneficiary
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb1c3bc and e69d451.

📒 Files selected for processing (3)
  • README.md (3 hunks)
  • src/routes/accounts.ts (7 hunks)
  • src/routes/cards.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • src/routes/cards.ts
  • src/routes/accounts.ts
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
README.md

58-58: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


111-111: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)


113-113: Unordered list indentation
Expected: 2; Actual: 4

(MD007, ul-indent)

@stevebissett
Copy link
Collaborator Author

I've added quite a bit more since this and opened #30 with the additional changes from my fork.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants