add: JS saas app

[sarahxsanders]

adds a vanilla JS saas project management tool. uses no frameworks, just plain HTML/CSS/JS, and Vite

wizard run eval

> wizard-workbench@ wizard-ci /Users/sarahsanders/wizard-workbench > tsx services/wizard-ci/index.ts --local --evaluate

Available apps:

1. android/Jetchat
2. angular/angular-saas
3. astro/astro-hybrid-marketing
4. astro/astro-ssr-docs
5. astro/astro-static-marketing
6. astro/astro-view-transitions-marketing
7. django/django3-saas
8. fastapi/fastapi3-ai-saas
9. flask/flask3-social-media
10. javascript/saas-dashboard
11. laravel/laravel12-saas
12. next-js/15-app-router-saas
13. next-js/15-app-router-todo
14. next-js/15-pages-router-saas
15. next-js/15-pages-router-todo
16. nuxt/movies-nuxt-3-6
17. nuxt/movies-nuxt-4
18. react-native/expo-react-native-hacker-news
19. react-native/react-native-saas
20. react-router/react-router-v7-project
21. react-router/rrv7-starter
22. react-router/saas-template
23. react-router/shopper
24. sveltekit/CMSaasStarter
25. tanstack-router/tanstack-router-code-based-saas
26. tanstack-router/tanstack-router-file-based-saas
27. tanstack-start/tanstack-start-saas
28. vue/movies

Select app (1-28): 10

Wizard CI
App: javascript/saas-dashboard
Trigger ID: ac2c60d
Mode: local

──────────────────────────────────────────────────
Running CI: javascript/saas-dashboard
──────────────────────────────────────────────────

[1/5] Reset app to clean state
Path: /Users/sarahsanders/wizard-workbench/apps/javascript/saas-dashboard

  No uncommitted changes in app

  Done

[2/5] Running wizard...

┌ Welcome to the PostHog setup wizard ✨
│
● Running in CI mode
│
◆ Detected integration: JavaScript

┌ PostHog JavaScript wizard (agent-powered)
│
● [BETA] The JavaScript wizard is in beta. Questions or feedback? Email wizard@posthog.com
│
● We're about to read your project using our LLM gateway.
│
│ .env* file contents will not leave your machine.
│
│ Other files will be read and edited to provide a fully-custom PostHog integration.
│
● Using provided API key (CI mode - OAuth bypassed)
│
◇ Initializing Claude agent...
│
◇ Verbose logs: /tmp/posthog-wizard.log
│
◆ Agent initialized. Let's get cooking!
│
◇ This whole process should take about 5 minutes including error checking and fixes.
│
│ Grab some coffee!
│
◇ Checking project structure.
│
◇ Verifying PostHog dependencies.
│
◇ Generating events based on project.
│
◇ Inserting PostHog capture code
│
◇ Planning changes to src/posthog.js - Create PostHog initialization file following the example pattern
│
◇ Planning changes to src/main.js - Add PostHog import, user identification on app load, and error tracking handlers
│
◇ Updated src/main.js with PostHog import, error tracking, and user re-identification on page load
│
◇ Updated src/pages/login.js with user identification and login event tracking
│
◇ Updated src/components/shell.js with logout event tracking and PostHog reset
│
◇ Updated src/pages/projects.js with project creation and deletion event tracking
│
◇ Updated src/pages/project-detail.js with task management event tracking
│
◇ Updated src/pages/settings.js with settings change event tracking
│
◇ Finding and correcting errors
│
◇ Configured dashboard: Creating PostHog dashboard and insights
│
◇ PostHog integration complete
│
● Skipping MCP installation (CI mode)
│
└
Successfully installed PostHog!

What the agent did:
• Analyzed your JavaScript project structure
• Installed the posthog-js package using npm
• Created PostHog initialization code
• Configured autocapture, error tracking, and event capture
• Added environment variables to .env file

Next steps:
• Ensure posthog.init() is called before any capture calls
• Autocapture tracks clicks, form submissions, and pageviews automatically
• Use posthog.capture() for custom events and posthog.identify() for users
• NEVER send PII in event properties (no emails, names, or user content)
• Visit your PostHog dashboard to see incoming events

Learn more: https://posthog.com/docs/libraries/js

Note: This wizard uses an LLM agent to analyze and modify your project. Please review the changes made.

How did this work for you? Drop us a line: wizard@posthog.com

  Completed in 643.5s

[3/5] Checking changes...
Changes detected

[4/5] Creating branch and committing for local evaluation...
Branch: wizard-ci-ac2c60d-javascript-saas-dashboard
Commit: 238ff45

[5/5] Running local evaluation (test-run mode)...
Branch: wizard-ci-ac2c60d-javascript-saas-dashboard (base: main)

wizard-workbench@ evaluate /Users/sarahsanders/wizard-workbench
tsx services/pr-evaluator/index.ts --branch wizard-ci-ac2c60d-javascript-saas-dashboard --base main --test-run local-ac2c60d-javascript-saas-dashboard

Configured LLM gateway: https://gateway.us.posthog.com/wizard
Test run directory: test-evaluations/local-ac2c60d-javascript-saas-dashboard
Fetching local branch "wizard-ci-ac2c60d-javascript-saas-dashboard" (base: main)...
Title: "js saas" by sarahxsanders
Branch: wizard-ci-ac2c60d-javascript-saas-dashboard → main
Files changed: 22

Running evaluation agent...
AGENT: Now let me read the remaining files to complete my evaluation:
AGENT: Now I have read all the key files. Let me compile my evaluation:

---

PR Evaluation Report

Summary

This PR introduces a complete vanilla JavaScript SaaS dashboard application ("TrackFlow") built with Vite, featuring comprehensive PostHog ana...

Agent completed evaluation

--- Usage ---
Total cost: $0.5338
Input tokens: 5
Output tokens: 2873

Confidence score: 4/5

--- TEST RUN: Review Comment Preview ---
Now I have read all the key files. Let me compile my evaluation:

---

PR Evaluation Report

Summary

This PR introduces a complete vanilla JavaScript SaaS dashboard application ("TrackFlow") built with Vite, featuring comprehensive PostHog analytics integration. The application includes authentication, project management, task kanban boards, settings, and activity tracking. PostHog is properly initialized with environment variables, implements user identification, error tracking, session management on logout, and captures 12 distinct custom events across the user journey.

Files changed	Lines added	Lines removed
22	+2772	-0

Confidence score: 4/5 👍

• No reverse proxy configured: Events will be sent directly to PostHog's API host, making them susceptible to ad blockers. Consider adding a Vite proxy configuration or server-side proxy for /ingest endpoints. [MEDIUM]
• Theme setting not applied correctly: In settings.js, theme changes update document.body.dataset.theme but the CSS uses [data-theme='dark'] on :root/html element, not body. Theme toggle may not work visually. [MEDIUM]
• Hardcoded API key in setup report: The posthog-setup-report.md contains a full PostHog API key (phc_L6HKlIH0GEsltkl2essKvg5qZ3ud4L1ZMwgWWQVM8Ht). While public keys are not secret, this should reference the environment variable pattern instead. [LOW]

---

File changes

Filename	Score	Description
src/posthog.js	5/5	Clean PostHog initialization with environment variables, proper fallback for missing key, and sensible defaults
src/main.js	5/5	Properly imports PostHog first, sets up error tracking with captureException, re-identifies users on page refresh
src/pages/login.js	5/5	Correct identify() call with user properties, captures user_logged_in and login_failed events
src/components/shell.js	5/5	Captures user_logged_out and correctly calls posthog.reset() to clear session
src/pages/projects.js	5/5	Captures project_created and project_deleted with relevant properties
src/pages/project-detail.js	5/5	Comprehensive task tracking: task_added, task_status_changed, task_assigned, task_deleted with rich properties
src/pages/settings.js	4/5	Good event tracking for theme_changed, notification_settings_updated, data_reset. Theme application bug exists
package.json	5/5	Correct dependencies: posthog-js ^1.346.0, Vite 6, chart.js
.env.example	5/5	Properly documents required PostHog environment variables
src/router.js	5/5	Clean hash-based SPA router implementation
src/store.js	5/5	Well-structured localStorage-backed state management
src/api.js	5/5	Clean async API layer with simulated delays
vite.config.js	4/5	Minimal config, missing reverse proxy for PostHog
index.html	5/5	Standard Vite HTML entry point
src/styles/*.css	5/5	Comprehensive styling with dark mode support
Other files	5/5	Supporting files (README, modal, activity, dashboard) are well-structured

---

App sanity check: 4/5 ✅

Criteria	Result	Description
App builds and runs	Yes	Standard Vite setup with valid dependencies, should build without issues
Preserves existing env vars & configs	Yes	This is a new app, .env.example properly documents all required variables
No syntax or type errors	Yes	All JavaScript files have valid syntax and module imports
Correct imports/exports	Yes	All imports/exports are properly structured using ES modules
Minimal, focused changes	Yes	This is a greenfield app, all code is necessary for the feature set

Issues

• Theme toggle targets wrong element: document.body.dataset.theme is set in settings.js but CSS [data-theme='dark'] selector targets :root. Theme changes may not apply visually. [MEDIUM]

Other completed criteria

• Clean separation of concerns (api, store, router, pages, components)
• Appropriate error handling with try/catch blocks and user feedback
• No hardcoded secrets in committed code files
• Build configuration is valid Vite config
• LocalStorage state management with proper fallbacks
• Auth guard pattern protects authenticated routes

---

PostHog implementation: 4/5 ✅

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js ^1.346.0 in package.json dependencies
PostHog client initialized	Yes	Singleton pattern in src/posthog.js using environment variables VITE_POSTHOG_KEY and VITE_POSTHOG_HOST
capture()	Yes	12 custom events captured across login, projects, tasks, and settings
identify()	Yes	posthog.identify(user.id, { email, name, role }) on login and page refresh
Error tracking	Yes	Global handlers for error and unhandledrejection events using posthog.captureException()
Reverse proxy	No	No proxy configuration to circumvent ad blockers

Issues

• Missing reverse proxy: Direct API calls to us.i.posthog.com will be blocked by ad blockers. Add Vite proxy config or document server-side proxy setup. [MEDIUM]

Other completed criteria

• API key sourced from environment variable, not hardcoded
• API host configurable via environment variable with sensible default
• posthog.reset() called on logout to clear user session
• Re-identification on page refresh for logged-in users
• Autocapture enabled by default (pageviews, clicks, forms)
• Graceful degradation when PostHog key not configured (console warning)
• No PII beyond email/name in event properties (appropriate for user identification)

---

PostHog insights and events: 5/5 ✅

Filename	PostHog events	Description
src/pages/login.js	user_logged_in, login_failed	Tracks successful authentication and failed attempts
src/components/shell.js	user_logged_out	Captures sign-out action with session reset
src/pages/projects.js	project_created, project_deleted	Project lifecycle with properties: project_id, has_description, task_count
src/pages/project-detail.js	task_added, task_status_changed, task_assigned, task_deleted	Full task workflow tracking with rich properties including previous_status, new_status, is_completed, was_previously_assigned
src/pages/settings.js	theme_changed, notification_settings_updated, data_reset	User preference changes with previous_theme/new_theme, setting_name/enabled
src/main.js	captureException	Unhandled errors and promise rejections captured automatically

Issues

None - event coverage is comprehensive.

Other completed criteria

• Events represent real user actions (login, create, update, delete patterns)
• Properties enable building funnels (task creation → assignment → completion)
• Status change tracking enables conversion analysis
• Error tracking provides visibility into runtime issues
• Events can answer product questions: "What % of tasks get completed?", "How often do users change themes?", "What's the login failure rate?"
• Rich properties on task events enable cohort analysis (by project, by assignee status)

---

Reviewed by wizard workbench PR evaluator
--- END PREVIEW ---

=== Evaluation Complete ===
Files saved to: test-evaluations/local-ac2c60d-javascript-saas-dashboard
Evaluation complete

══════════════════════════════════════════════════
Summary
══════════════════════════════════════════════════
Branch: wizard-ci-ac2c60d-javascript-saas-dashboard
ID: ac2c60d
Evaluation: test-evaluations/local-ac2c60d-javascript-saas-dashboard
══════════════════════════════════════════════════