@hilbras/keystone 2.6.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +350 -0
  2. package/README.md +72 -1
  3. package/dist/config.d.ts.map +1 -1
  4. package/dist/config.js +7 -1
  5. package/dist/config.js.map +1 -1
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +15 -11
  8. package/dist/index.js.map +1 -1
  9. package/dist/plugins/rateLimit.d.ts +10 -7
  10. package/dist/plugins/rateLimit.d.ts.map +1 -1
  11. package/dist/plugins/rateLimit.js +75 -36
  12. package/dist/plugins/rateLimit.js.map +1 -1
  13. package/dist/routes/admin/organizations.d.ts.map +1 -1
  14. package/dist/routes/admin/organizations.js +2 -0
  15. package/dist/routes/admin/organizations.js.map +1 -1
  16. package/dist/routes/admin/platform.d.ts.map +1 -1
  17. package/dist/routes/admin/platform.js +14 -1
  18. package/dist/routes/admin/platform.js.map +1 -1
  19. package/dist/routes/apiKeys.d.ts.map +1 -1
  20. package/dist/routes/apiKeys.js +15 -1
  21. package/dist/routes/apiKeys.js.map +1 -1
  22. package/dist/routes/auth.d.ts.map +1 -1
  23. package/dist/routes/auth.js +104 -3
  24. package/dist/routes/auth.js.map +1 -1
  25. package/dist/routes/emailVerification.d.ts.map +1 -1
  26. package/dist/routes/emailVerification.js +2 -0
  27. package/dist/routes/emailVerification.js.map +1 -1
  28. package/dist/routes/magicLinks.d.ts.map +1 -1
  29. package/dist/routes/magicLinks.js +2 -0
  30. package/dist/routes/magicLinks.js.map +1 -1
  31. package/dist/routes/oauth2.d.ts.map +1 -1
  32. package/dist/routes/oauth2.js +16 -2
  33. package/dist/routes/oauth2.js.map +1 -1
  34. package/dist/routes/password.d.ts.map +1 -1
  35. package/dist/routes/password.js +2 -0
  36. package/dist/routes/password.js.map +1 -1
  37. package/dist/routes/scim.d.ts.map +1 -1
  38. package/dist/routes/scim.js +2 -0
  39. package/dist/routes/scim.js.map +1 -1
  40. package/dist/routes/smsOtp.d.ts.map +1 -1
  41. package/dist/routes/smsOtp.js +4 -0
  42. package/dist/routes/smsOtp.js.map +1 -1
  43. package/dist/routes/totp.d.ts.map +1 -1
  44. package/dist/routes/totp.js +18 -1
  45. package/dist/routes/totp.js.map +1 -1
  46. package/dist/services/configuration/profiles.d.ts +26 -0
  47. package/dist/services/configuration/profiles.d.ts.map +1 -1
  48. package/dist/services/configuration/profiles.js +80 -1
  49. package/dist/services/configuration/profiles.js.map +1 -1
  50. package/dist/services/events/subscribers/auditLog.d.ts.map +1 -1
  51. package/dist/services/events/subscribers/auditLog.js +38 -3
  52. package/dist/services/events/subscribers/auditLog.js.map +1 -1
  53. package/dist/services/events/types.d.ts +3 -1
  54. package/dist/services/events/types.d.ts.map +1 -1
  55. package/dist/services/events/validate.d.ts +1 -0
  56. package/dist/services/events/validate.d.ts.map +1 -1
  57. package/dist/services/events/validate.js +5 -1
  58. package/dist/services/events/validate.js.map +1 -1
  59. package/dist/services/localRateLimit.d.ts +44 -0
  60. package/dist/services/localRateLimit.d.ts.map +1 -0
  61. package/dist/services/localRateLimit.js +86 -0
  62. package/dist/services/localRateLimit.js.map +1 -0
  63. package/dist/services/refreshTokenState.d.ts +5 -0
  64. package/dist/services/refreshTokenState.d.ts.map +1 -0
  65. package/dist/services/refreshTokenState.js +30 -0
  66. package/dist/services/refreshTokenState.js.map +1 -0
  67. package/dist/services/setup/token.d.ts +12 -0
  68. package/dist/services/setup/token.d.ts.map +1 -1
  69. package/dist/services/setup/token.js +27 -3
  70. package/dist/services/setup/token.js.map +1 -1
  71. package/dist/services/tokens.d.ts +1 -0
  72. package/dist/services/tokens.d.ts.map +1 -1
  73. package/dist/services/tokens.js +1 -1
  74. package/dist/services/tokens.js.map +1 -1
  75. package/dist/services/trustedProxies.d.ts +24 -0
  76. package/dist/services/trustedProxies.d.ts.map +1 -1
  77. package/dist/services/trustedProxies.js +19 -0
  78. package/dist/services/trustedProxies.js.map +1 -1
  79. package/dist/services/webhooks.d.ts +16 -0
  80. package/dist/services/webhooks.d.ts.map +1 -1
  81. package/dist/services/webhooks.js +48 -3
  82. package/dist/services/webhooks.js.map +1 -1
  83. package/dist/setup-server.js +47 -3
  84. package/dist/setup-server.js.map +1 -1
  85. package/docs/API-REVIEW.md +121 -0
  86. package/docs/API.md +457 -0
  87. package/docs/ARCHITECTURE.md +142 -0
  88. package/docs/CONTRIBUTING.md +61 -0
  89. package/docs/DEPLOYMENT.md +257 -0
  90. package/docs/INTEGRATION.md +336 -0
  91. package/docs/LOGIN_FORM_INTEGRATION.md +306 -0
  92. package/docs/MIGRATION-1.7.md +70 -0
  93. package/docs/MIGRATION-1.8.md +183 -0
  94. package/docs/MIGRATION-1.9.md +200 -0
  95. package/docs/MIGRATION-2.0.md +203 -0
  96. package/docs/MIGRATION-2.4.md +185 -0
  97. package/docs/PERFORMANCE.md +155 -0
  98. package/docs/RBAC.md +100 -0
  99. package/docs/RE-AUDIT.md +72 -0
  100. package/docs/README.md +54 -0
  101. package/docs/RELEASE-1.7.md +53 -0
  102. package/docs/ROADMAP.md +41 -0
  103. package/docs/SECURITY.md +143 -0
  104. package/docs/adrs/001-identity-connectors-as-adapters.md +27 -0
  105. package/docs/adrs/002-versioned-event-bus.md +30 -0
  106. package/docs/adrs/003-bullmq-for-background-work.md +20 -0
  107. package/docs/adrs/004-argon2id-password-hashing.md +19 -0
  108. package/docs/plans/KEYSTONE_IMPROVEMENT_PLAN.md +334 -0
  109. package/docs/plans/UI_SIMPLIFICATION_IMPROVEMENT_PLAN.md +271 -0
  110. package/docs/security/audit.md +82 -0
  111. package/docs/security/configuration.md +60 -0
  112. package/docs/security/enterprise-sso.md +193 -0
  113. package/docs/security/mtls.md +132 -0
  114. package/docs/security/proxy-security.md +128 -0
  115. package/docs/security/rate-limiting.md +79 -0
  116. package/docs/security/registry-exceptions.md +34 -0
  117. package/docs/security/registry.json +649 -0
  118. package/docs/security/registry.md +657 -0
  119. package/docs/security/scopes.md +45 -0
  120. package/docs/security/supply-chain.md +49 -0
  121. package/docs/security/trust-boundaries.md +111 -0
  122. package/package.json +15 -6
@@ -0,0 +1,30 @@
1
+ # ADR 002: Versioned Event Bus
2
+
3
+ ## Status
4
+
5
+ Accepted
6
+
7
+ ## Context
8
+
9
+ Keystone emits events for audit logging, webhooks, analytics, anomaly detection, and workflow triggers. Without versioning, a change to an event payload could break external subscribers or downstream internal consumers.
10
+
11
+ ## Decision
12
+
13
+ Every event emitted by the event bus includes a monotonic version number:
14
+
15
+ ```json
16
+ {
17
+ "type": "user.login",
18
+ "version": 1,
19
+ "timestamp": "...",
20
+ "payload": {}
21
+ }
22
+ ```
23
+
24
+ Subscribers are expected to handle versions they understand and ignore or reject unknown versions.
25
+
26
+ ## Consequences
27
+
28
+ - Events can evolve without breaking existing integrations.
29
+ - Consumers must document the versions they support.
30
+ - Event producers must increment the version for backward-incompatible payload changes.
@@ -0,0 +1,20 @@
1
+ # ADR 003: BullMQ for Background Work
2
+
3
+ ## Status
4
+
5
+ Accepted
6
+
7
+ ## Context
8
+
9
+ Sending emails, delivering webhooks, running analytics, and executing workflow actions synchronously would slow API responses and reduce reliability. The project started with an in-process event bus for simplicity.
10
+
11
+ ## Decision
12
+
13
+ Introduce a BullMQ-backed queue as the production default when Redis is available, falling back to an in-process queue for local development. The queue abstraction (`src/services/queue/types.ts`) keeps core code independent of BullMQ specifics.
14
+
15
+ ## Consequences
16
+
17
+ - API responses stay fast.
18
+ - Failed jobs are retried with exponential backoff.
19
+ - Redis becomes a runtime dependency for production queues.
20
+ - Local development can still run without Redis.
@@ -0,0 +1,19 @@
1
+ # ADR 004: Argon2id Password Hashing
2
+
3
+ ## Status
4
+
5
+ Accepted
6
+
7
+ ## Context
8
+
9
+ Keystone originally hashed passwords with scrypt. While scrypt is still secure, argon2id is the current OWASP recommendation and provides stronger resistance to GPU attacks with simpler parameter tuning.
10
+
11
+ ## Decision
12
+
13
+ New password hashes use argon2id with parameters `m=65536, t=3, p=4`. Existing scrypt hashes remain verifiable through a legacy verifier so no user passwords are invalidated.
14
+
15
+ ## Consequences
16
+
17
+ - New hashes follow modern best practices.
18
+ - No password migration is required.
19
+ - The project gains a native dependency (`argon2`) that must compile on target platforms.
@@ -0,0 +1,334 @@
1
+ # Keystone Comprehensive Improvement Plan
2
+
3
+ **Goal:** Make Hilbras Keystone the simplest identity platform for beginners and the most capable platform for advanced users — while staying secure, fast, and mobile-friendly.
4
+
5
+ **Principles:**
6
+ - *Progressive disclosure* — show only what is needed, never hide the path to more control.
7
+ - *Secure by default* — every feature ships with safe defaults.
8
+ - *Mobile-first* — every screen must be usable on a phone.
9
+ - *API-first* — every UI action is backed by a documented, automatable API.
10
+
11
+ ---
12
+
13
+ ## 1. Mobile Responsiveness & Accessibility
14
+
15
+ ### 1.1 Complete responsive audit
16
+ Audit every panel and fix overflow, truncation, and unreachable controls on screens < 640 px.
17
+
18
+ Priority files:
19
+ - `frontend/src/components/ApplicationsPanel.tsx`
20
+ - `frontend/src/components/OrganizationsPanel.tsx`
21
+ - `frontend/src/components/EnterpriseSsoPanel.tsx`
22
+ - `frontend/src/components/WorkflowPanel.tsx`
23
+ - `frontend/src/components/BillingPanel.tsx`
24
+ - `frontend/src/components/ui/DataTable.tsx`
25
+ - `frontend/src/components/wizard/SimpleWizard.tsx`
26
+ - `frontend/src/components/wizard/Wizard.tsx`
27
+
28
+ Concrete rules:
29
+ - All button groups use `flex-col sm:flex-row` and `w-full sm:w-auto`.
30
+ - All tables become horizontal-scroll cards on mobile or switch to a stacked row layout.
31
+ - Forms use full-width inputs with labels above.
32
+ - Modals/dialogs become bottom sheets on mobile.
33
+
34
+ ### 1.2 Mobile navigation redesign
35
+ Replace the desktop sidebar with a responsive pattern:
36
+ - Desktop: collapsible sidebar.
37
+ - Tablet: icon-only rail.
38
+ - Mobile: bottom tab bar for top-level sections plus a hamburger menu for the rest.
39
+
40
+ Files to update:
41
+ - `frontend/src/components/layout/Sidebar.tsx`
42
+ - `frontend/src/components/layout/MobileNav.tsx`
43
+ - `frontend/src/components/layout/AppShell.tsx`
44
+
45
+ ### 1.3 Touch-friendly components
46
+ - Minimum tap target 44 × 44 px.
47
+ - Larger checkboxes, toggles, and select controls on mobile.
48
+ - Pull-to-refresh on data tables.
49
+ - Swipe gestures on cards (e.g., delete with confirmation).
50
+
51
+ ### 1.4 Accessibility (a11y)
52
+ - Add `aria-label`, `aria-describedby`, and `role` attributes to all icon buttons.
53
+ - Ensure focus order is logical in modals and wizards.
54
+ - Add keyboard shortcuts documentation panel.
55
+ - Run automated a11y checks with `axe-core` in CI.
56
+ - Support reduced-motion preferences.
57
+
58
+ ---
59
+
60
+ ## 2. Security Hardening
61
+
62
+ ### 2.1 Session security
63
+ - Enforce `SameSite=strict` for cookies in production unless cross-origin login is explicitly enabled.
64
+ - Add session binding to IP + user-agent fingerprint with optional strict mode.
65
+ - Implement idle timeout and absolute session lifetime with configurable defaults (30 min idle, 7 days absolute).
66
+ - Add concurrent session limits per user.
67
+
68
+ ### 2.2 Authentication hardening
69
+ - Enable password breach detection via Have I Been Pwned (or self-hosted `hibp` service) by default.
70
+ - Add account lockout after failed attempts with exponential backoff.
71
+ - Require email verification before owner/admin actions.
72
+ - Add device trust: prompt for MFA when a new device is detected.
73
+
74
+ ### 2.3 API and token security
75
+ - Rotate JWT signing keys automatically on a schedule (daily check, rotate if older than 90 days).
76
+ - Add key version metadata to the JWKS endpoint.
77
+ - Enforce strict audience (`aud`) and issuer (`iss`) validation.
78
+ - Scope API keys to organizations and applications with fine-grained permissions.
79
+ - Add API key usage quotas and expiration warnings.
80
+ - Implement signed webhook payloads so consumers can verify authenticity.
81
+
82
+ ### 2.4 Secrets provider hardening
83
+ - Default to `EnvironmentSecretsProvider` in production instead of `DatabaseSecretsProvider`.
84
+ - Add built-in providers for AWS KMS, HashiCorp Vault, Azure Key Vault, and Google Cloud KMS.
85
+ - Encrypt all secrets at rest with AES-256-GCM.
86
+ - Audit every secret read/write/rotate event.
87
+
88
+ ### 2.5 Audit and compliance
89
+ - Make audit logs tamper-evident with a hash chain or append-only stream.
90
+ - Add export formats: CSV, JSON, NDJSON, and CEF for SIEMs.
91
+ - Add retention policies and automatic archiving.
92
+ - Add GDPR-style data export and deletion workflows.
93
+
94
+ ---
95
+
96
+ ## 3. Backend Architecture Improvements
97
+
98
+ ### 3.1 Domain service consolidation
99
+ Create explicit orchestration services to reduce coupling:
100
+ - `AuthenticationApplicationService`
101
+ - `AuthorizationApplicationService`
102
+ - `IdentityApplicationService`
103
+ - `OrganizationApplicationService`
104
+ - `SetupApplicationService`
105
+
106
+ Move ad-hoc orchestration out of route files and thin services into these application services.
107
+
108
+ ### 3.2 Background job queue productionization
109
+ - Default to BullMQ when Redis is available; keep in-process queue for local dev.
110
+ - Add job retries with exponential backoff and dead-letter queues.
111
+ - Add a jobs dashboard UI to inspect/retry failed jobs.
112
+ - Queue categories: emails, webhooks, analytics, workflows, exports.
113
+
114
+ ### 3.3 Plugin architecture GA
115
+ - Stabilize the plugin manifest format.
116
+ - Add hot-reload for plugins in development.
117
+ - Add plugin marketplace UI (list installed, enable/disable, configure).
118
+ - Provide official plugin templates for identity providers, email providers, and workflow steps.
119
+
120
+ ### 3.4 Configuration management
121
+ - Complete the `ConfigStore` abstraction (`EnvFileConfigStore`, `JsonConfigStore`, `KubernetesSecretConfigStore`, `VaultConfigStore`).
122
+ - Add configuration profiles: Development, Production, Docker, Docker Compose, Kubernetes, High Availability.
123
+ - Add configuration validation with actionable error messages.
124
+ - Add dry-run mode and automatic backup before writes.
125
+
126
+ ### 3.5 Database and migrations
127
+ - Add migration status endpoint and UI.
128
+ - Add zero-downtime migration strategy documentation.
129
+ - Add connection pooling metrics.
130
+ - Support read replicas for analytics queries.
131
+
132
+ ### 3.6 Observability
133
+ - Add structured health checks with dependency details.
134
+ - Add OpenTelemetry tracing (optional, disabled by default).
135
+ - Add metrics endpoint (`/metrics`) for Prometheus.
136
+ - Add structured logging conventions across all services.
137
+
138
+ ---
139
+
140
+ ## 4. New User-Facing Features
141
+
142
+ ### 4.1 Smart Setup Wizard 2.0
143
+ Make first-run setup fully UI-driven with no file editing required.
144
+
145
+ Steps:
146
+ 1. **Welcome & profile** — pick environment, auto-fill defaults.
147
+ 2. **Dependencies** — detect or install PostgreSQL/Redis via Docker, test connections.
148
+ 3. **URLs & security** — suggest public URLs, generate secrets, set CORS origins.
149
+ 4. **Owner account** — create first admin with password strength meter.
150
+ 5. **First application** — ask for project URL/framework, auto-create org + app.
151
+ 6. **Done** — show one-line drop-in script and "Test login" button.
152
+
153
+ Add to wizard:
154
+ - Configuration change summary before apply.
155
+ - Automatic configuration backup.
156
+ - Dry-run validation.
157
+ - Rollback on failure.
158
+ - Final diagnostics report.
159
+
160
+ ### 4.2 One-click project connection
161
+ The Connect Project panel should generate a single copy-paste script for any framework.
162
+
163
+ Supported frameworks in simple view:
164
+ - HTML/Vanilla JS
165
+ - React / Next.js
166
+ - Vue / Nuxt
167
+ - Angular
168
+ - Svelte / SvelteKit
169
+ - Django
170
+ - Ruby on Rails
171
+ - Go templates
172
+
173
+ Each template pre-fills:
174
+ - Correct redirect URI
175
+ - Allowed origin
176
+ - Recommended scopes
177
+ - Framework-specific initialization code
178
+
179
+ Add "Test login" button that opens a popup and reports success/failure with clear fixes.
180
+
181
+ ### 4.3 Identity provider presets
182
+ Guided setup for:
183
+ - Google
184
+ - GitHub
185
+ - Microsoft / Azure AD
186
+ - Apple
187
+ - Okta
188
+ - Keycloak
189
+ - Zitadel
190
+ - Custom OIDC
191
+
192
+ Each preset shows:
193
+ - Exact callback URL to paste in the provider
194
+ - Link to official provider docs
195
+ - Field-by-field guidance
196
+ - One-click enable/disable
197
+
198
+ ### 4.4 Role and permission templates
199
+ Default roles:
200
+ - Owner
201
+ - Admin
202
+ - Editor
203
+ - Viewer
204
+ - Member
205
+
206
+ Each template ships with sensible permissions and is editable. Allow cloning custom roles.
207
+
208
+ ### 4.5 Organization onboarding flow
209
+ When a new organization is created:
210
+ - Optional wizard to invite members.
211
+ - Default application created automatically.
212
+ - Quick-start checklist per organization.
213
+
214
+ ### 4.6 User self-service portal
215
+ Allow end users to:
216
+ - View and update their profile.
217
+ - Change password.
218
+ - Manage MFA (TOTP, WebAuthn, backup codes).
219
+ - View active sessions and revoke them.
220
+ - Download their data.
221
+ - Request account deletion.
222
+
223
+ ### 4.7 Security dashboard
224
+ A dedicated panel showing:
225
+ - Recent login activity map.
226
+ - Failed login attempts.
227
+ - Active sessions.
228
+ - MFA adoption rate.
229
+ - Password strength distribution.
230
+ - Recommended security actions.
231
+
232
+ ### 4.8 Workflow & automation engine improvements
233
+ - Visual workflow builder (drag-and-drop nodes).
234
+ - Pre-built templates:
235
+ - Post-signup email + default role + organization + workspace.
236
+ - Failed login alert + temporary lockout.
237
+ - New member invite sequence.
238
+ - Trigger types: events, schedules, webhooks.
239
+ - Action types: email, webhook, role change, notification, custom script.
240
+
241
+ ### 4.9 Billing and plans (if enabled)
242
+ - Self-service plan selection.
243
+ - Usage dashboards (MAU, API calls, emails, SMS).
244
+ - Invoice history.
245
+ - Trial reminders.
246
+
247
+ ---
248
+
249
+ ## 5. Developer Experience
250
+
251
+ ### 5.1 SDK improvements
252
+ - Publish the browser SDK to npm as `@hilbras/keystone-sdk`.
253
+ - Add React/Vue/Angular wrapper hooks.
254
+ - Add TypeScript types for all public APIs.
255
+ - Add server-side SDKs (Node.js, Python, Go) with examples.
256
+
257
+ ### 5.2 Documentation
258
+ - Auto-generated OpenAPI docs from Fastify routes.
259
+ - Interactive API explorer in the admin UI.
260
+ - Step-by-step integration guides per framework.
261
+ - Video walkthroughs for first-time setup.
262
+
263
+ ### 5.3 Local development
264
+ - `docker compose up` should start the full stack including PostgreSQL, Redis, and Keystone.
265
+ - `npm run dev` starts backend + frontend with hot reload.
266
+ - Add seed scripts for demo data.
267
+ - Add Playwright E2E tests for critical flows.
268
+
269
+ ### 5.4 CLI improvements
270
+ - `keystone setup` — interactive first-run setup.
271
+ - `keystone config validate` — validate current configuration.
272
+ - `keystone db migrate` / `keystone db rollback`.
273
+ - `keystone plugin install <name>`.
274
+ - `keystone status` — health and diagnostics.
275
+
276
+ ---
277
+
278
+ ## 6. Implementation Phases
279
+
280
+ ### Phase 1 — Foundation (2 weeks)
281
+ - Complete mobile responsive audit and fixes.
282
+ - Add hash-based routing improvements and URL persistence.
283
+ - Stabilize Simple/Advanced mode across dashboard and wizard.
284
+ - Add a11y basics and touch-friendly components.
285
+
286
+ ### Phase 2 — Security & Backend (2 weeks)
287
+ - Harden sessions, cookies, and token rotation.
288
+ - Implement secrets provider backends (KMS, Vault, Azure Key Vault).
289
+ - Add signed webhooks and API key scopes.
290
+ - Add structured metrics and health endpoints.
291
+
292
+ ### Phase 3 — Setup & Onboarding (2 weeks)
293
+ - Rewrite setup wizard with dependency auto-detection.
294
+ - Add configuration profiles, dry-run, backup, and rollback.
295
+ - Add onboarding checklist and first-app auto-creation.
296
+ - Add final diagnostics report.
297
+
298
+ ### Phase 4 — Connect & Templates (2 weeks)
299
+ - Build framework selector in Connect Project panel.
300
+ - Add identity provider presets.
301
+ - Add role templates.
302
+ - Add "Test login" flow.
303
+
304
+ ### Phase 5 — Self-Service & Workflows (2 weeks)
305
+ - Build user self-service portal.
306
+ - Add security dashboard.
307
+ - Add visual workflow builder and templates.
308
+ - Add organization onboarding flow.
309
+
310
+ ### Phase 6 — Scale & Polish (2 weeks)
311
+ - Productionize background queue with BullMQ dashboard.
312
+ - Add plugin marketplace and templates.
313
+ - Performance optimization pass.
314
+ - E2E test coverage for critical paths.
315
+
316
+ ---
317
+
318
+ ## 7. Success Metrics
319
+
320
+ - **Onboarding:** A new user completes setup and connects a website in under 10 minutes without reading docs.
321
+ - **Mobile:** All dashboard panels are usable on a 375 px wide screen without horizontal overflow.
322
+ - **Security:** 100% of security-relevant actions emit versioned audit events; secrets are never logged.
323
+ - **Reliability:** Background jobs have < 0.1% failure rate; failed jobs are visible and retryable.
324
+ - **Adoption:** 80% of new users enable at least one login method within the first session.
325
+ - **Developer satisfaction:** Integration requires one copy-paste script for common frameworks.
326
+
327
+ ---
328
+
329
+ ## Notes
330
+
331
+ - Keep all existing public APIs backward-compatible.
332
+ - Introduce feature flags for every major UI change so they can be rolled out gradually.
333
+ - Maintain dark mode and theme consistency.
334
+ - Update `docs/SECURITY.md`, `docs/PERFORMANCE.md`, and `docs/ARCHITECTURE.md` as features land.
@@ -0,0 +1,271 @@
1
+ # Keystone UI Simplification Improvement Plan
2
+
3
+ **Goal:** Make Keystone feel simple enough for a first-time user, while keeping every advanced capability one click away for power users.
4
+
5
+ **Principle:** *Progressive disclosure* — show only what is needed for the current task, but never hide the path to more control.
6
+
7
+ ---
8
+
9
+ ## 1. Unified "Simple / Advanced" Mode
10
+
11
+ Introduce a global toggle in the dashboard header and setup wizard.
12
+
13
+ - **Simple mode:**
14
+ - Hides optional fields.
15
+ - Uses plain-language labels ("App name" instead of "Client ID").
16
+ - Shows guided steps with defaults selected.
17
+ - Surfaces only the most common actions.
18
+ - **Advanced mode:**
19
+ - Reveals all fields, raw IDs, scopes, claims, policies, webhooks.
20
+ - Shows JSON payloads, raw event logs, and migration details.
21
+ - Allows direct editing of configuration files.
22
+
23
+ **Implementation:**
24
+ - Store preference in `localStorage` (`keystone:ui-mode`).
25
+ - Wrap advanced sections with `<Advanced>` component that reads the preference.
26
+ - Default to **Simple** for the first login, prompt to switch when an action needs advanced fields.
27
+
28
+ ---
29
+
30
+ ## 2. Simplified Navigation & Home Dashboard
31
+
32
+ Replace the current sidebar-heavy layout with a goal-oriented home screen.
33
+
34
+ ### Home cards (one-click actions)
35
+
36
+ 1. **Add login to my website** → opens Connect Project panel.
37
+ 2. **Create an organization** → opens a one-field modal.
38
+ 3. **Invite a team member** → opens invite modal.
39
+ 4. **View active users** → opens Users panel with default filter.
40
+ 5. **Enable Google sign-in** → opens Identity Providers with Google pre-selected.
41
+
42
+ ### Navigation redesign
43
+
44
+ - Collapse secondary items into grouped menus:
45
+ - **Home**
46
+ - **Authentication** (users, apps, identity providers)
47
+ - **Access Control** (roles, permissions, organizations)
48
+ - **Platform** (audit, workflows, secrets, plugins, settings)
49
+ - Add a global search bar (Cmd+K) to jump to any page, user, app, or setting.
50
+
51
+ ---
52
+
53
+ ## 3. Contextual Help & Inline Education
54
+
55
+ Every screen should teach without forcing the user to read docs.
56
+
57
+ - **Tooltips:** Explain every field on hover/focus. Examples:
58
+ - "Redirect URI" → "Where users land after signing in with Google."
59
+ - "Allowed Origins" → "Websites allowed to talk to Keystone from the browser."
60
+ - **Inline examples:** Show a live example value next to each input.
61
+ - **"Why do I need this?"** expandable help blocks for complex sections.
62
+ - **Toast guidance:** After creating an app, show: "Next, copy the drop-in script to your website."
63
+
64
+ ---
65
+
66
+ ## 4. Setup Wizard 2.0 — Guided First Run
67
+
68
+ The current setup wizard should become a clear, linear, 4-step flow.
69
+
70
+ ### Step 1: Welcome
71
+ - One sentence value prop.
72
+ - "Start with Docker (recommended)" vs "I already have PostgreSQL/Redis".
73
+ - Profile selector (Development, Production, Docker Compose).
74
+
75
+ ### Step 2: Dependencies
76
+ - Auto-detect Docker, PostgreSQL, Redis.
77
+ - Big green checkmarks when each is ready.
78
+ - One "Start services for me" button if Docker is available.
79
+ - Plain error messages with a "Fix it for me" suggestion when possible.
80
+
81
+ ### Step 3: Owner Account
82
+ - Email + password + confirm password.
83
+ - Password strength meter.
84
+ - Optional: "Generate a strong password for me".
85
+
86
+ ### Step 4: First Application
87
+ - Ask for a website name and URL.
88
+ - Auto-create the organization and application behind the scenes.
89
+ - Generate the drop-in script immediately.
90
+ - Final screen: "Your setup is complete. Here is your one-line install code."
91
+
92
+ ---
93
+
94
+ ## 5. Smart Defaults & Wizards for Complex Features
95
+
96
+ Instead of empty forms, offer presets and guided creation.
97
+
98
+ ### Application templates
99
+ - **Single-page app (React/Vue/Angular)**
100
+ - **Server-rendered app (Next.js/Nuxt/Django)**
101
+ - **Mobile app**
102
+ - **Machine-to-machine API**
103
+
104
+ Each template pre-fills:
105
+ - Redirect URIs
106
+ - Allowed origins
107
+ - Token lifetime
108
+ - Recommended scopes
109
+
110
+ ### Identity provider presets
111
+ - Google
112
+ - GitHub
113
+ - Microsoft
114
+ - Apple
115
+ - Custom OIDC
116
+
117
+ Each preset shows:
118
+ - Link to provider docs
119
+ - Exact callback URL to paste
120
+ - Fields needed (Client ID, Client Secret)
121
+
122
+ ### Role templates
123
+ - **Admin** — full access
124
+ - **Editor** — read + write
125
+ - **Viewer** — read only
126
+ - **Member** — default user
127
+
128
+ ---
129
+
130
+ ## 6. Connect Project Panel — Beginner Path
131
+
132
+ The Connect Project panel should have two views:
133
+
134
+ ### Simple view (default)
135
+ - Ask: "What framework are you using?" (HTML, React, Vue, Next.js, etc.)
136
+ - Ask: "What is your website URL?"
137
+ - Show exactly one code block to copy.
138
+ - Show a "Test login" button that opens a popup to verify the integration.
139
+ - Hide client IDs, callback URLs, and allowed origins unless the user expands them.
140
+
141
+ ### Advanced view
142
+ - Full control over all script attributes.
143
+ - Custom callback paths.
144
+ - Manual origin/redirect URI management.
145
+ - Raw SDK API reference.
146
+
147
+ ---
148
+
149
+ ## 7. Plain-Language Error Handling
150
+
151
+ Every error in the UI should answer three questions:
152
+ 1. What went wrong?
153
+ 2. Why did it happen?
154
+ 3. What should I do now?
155
+
156
+ ### Examples
157
+
158
+ | Technical error | Plain message | Action |
159
+ |---|---|---|
160
+ | `401 Unauthorized` | "You are not signed in." | "Sign in" button |
161
+ | `Invalid or missing setup token` | "Setup token is missing or has expired." | "Show token from server logs" |
162
+ | `relation "secrets" does not exist` | "Database is not ready. Run migrations first." | "Run migrations" button |
163
+ | CORS error | "This website is not allowed to talk to Keystone." | "Add origin to Allowed Origins" |
164
+
165
+ ---
166
+
167
+ ## 8. Live Status & Health Indicators
168
+
169
+ Add a persistent status bar or footer showing:
170
+ - Database connection: ✅ / ❌
171
+ - Redis connection: ✅ / ❌
172
+ - Setup complete: ✅ / ❌
173
+ - API reachable: ✅ / ❌
174
+
175
+ Clicking an indicator opens diagnostics with a "Fix issue" suggestion.
176
+
177
+ ---
178
+
179
+ ## 9. Onboarding Checklist
180
+
181
+ After first login, show a dismissible checklist:
182
+
183
+ - [ ] Create an organization
184
+ - [ ] Register an application
185
+ - [ ] Connect my website
186
+ - [ ] Enable at least one login method
187
+ - [ ] Invite a team member
188
+ - [ ] Review audit logs
189
+
190
+ Each item links directly to the action. Progress gives a sense of accomplishment.
191
+
192
+ ---
193
+
194
+ ## 10. Mobile-First Responsive Design
195
+
196
+ The dashboard should work well on tablets and phones.
197
+
198
+ - Collapsible sidebar into a bottom sheet or hamburger menu.
199
+ - Stacked cards on small screens.
200
+ - Touch-friendly buttons and inputs.
201
+ - Reduce padding and font size on mobile (already partially done).
202
+
203
+ ---
204
+
205
+ ## 11. Consistent Design Tokens & Animations
206
+
207
+ Polish the visual experience:
208
+ - Consistent spacing scale (4px grid).
209
+ - Subtle entrance animations for cards and modals.
210
+ - Loading skeletons instead of spinners where appropriate.
211
+ - Hover states on all interactive elements.
212
+ - Empty states with illustrations and clear next steps.
213
+
214
+ ---
215
+
216
+ ## 12. Feedback & Confirmation Flows
217
+
218
+ Any destructive or important action should be clear.
219
+
220
+ - Deleting an app → confirmation modal with the app name typed.
221
+ - Creating credentials → show a one-time copy dialog.
222
+ - Saving settings → toast confirmation.
223
+ - Long operations → progress indicator.
224
+
225
+ ---
226
+
227
+ ## Implementation Phases
228
+
229
+ ### Phase 1 — Foundation (1 week)
230
+ - Add Simple/Advanced toggle.
231
+ - Redesign navigation and home dashboard.
232
+ - Add global search (Cmd+K).
233
+
234
+ ### Phase 2 — Setup Wizard (1 week)
235
+ - Rewrite setup wizard as 4-step guided flow.
236
+ - Add dependency auto-detection and "Fix it" helpers.
237
+ - Add onboarding checklist.
238
+
239
+ ### Phase 3 — Contextual Help (1 week)
240
+ - Add tooltips and inline examples everywhere.
241
+ - Create reusable `<FieldHelp>` component.
242
+ - Rewrite error messages into plain language.
243
+
244
+ ### Phase 4 — Smart Defaults (1 week)
245
+ - Add application templates.
246
+ - Add identity provider presets.
247
+ - Add role templates.
248
+ - Simplify Connect Project panel with framework selector.
249
+
250
+ ### Phase 5 — Polish (1 week)
251
+ - Mobile responsiveness pass.
252
+ - Animations and transitions.
253
+ - Empty states and loading skeletons.
254
+ - User testing with beginners.
255
+
256
+ ---
257
+
258
+ ## Success Metrics
259
+
260
+ - A new user can complete setup in under 10 minutes without reading docs.
261
+ - First login-to-connected-website flow takes under 5 minutes.
262
+ - Support questions about "what is a redirect URI" drop by 50%.
263
+ - Advanced users report no loss of control.
264
+
265
+ ---
266
+
267
+ ## Notes
268
+
269
+ - Keep all existing APIs unchanged. These are frontend-only improvements.
270
+ - Maintain dark mode support throughout.
271
+ - Add feature flags for wizard steps so they can be iterated safely.