From 59fcc31483a24311fff2696579659c73a08e07ea Mon Sep 17 00:00:00 2001 From: Michael Freno Date: Mon, 25 May 2026 12:23:23 -0400 Subject: [PATCH] restructure tasks --- .../01-project-foundation-cleanup.md | 65 +++++++ .../02-theme-system-brand-palette.md | 69 +++++++ .../03-ui-primitive-library.md | 82 ++++++++ .../04-layout-components.md | 89 +++++++++ .../05-landing-page-hero.md | 75 ++++++++ .../06-landing-page-features.md | 95 ++++++++++ .../07-auth-pages.md | 105 +++++++++++ .../08-migrate-existing-pages.md | 95 ++++++++++ .../09-drizzle-schema-migration.md | 88 +++++++++ .../10-db-connection-migrations.md | 113 +++++++++++ .../11-trpc-auth-context.md | 112 +++++++++++ .../12-user-family-router.md | 95 ++++++++++ .../13-subscription-billing-router.md | 96 ++++++++++ .../14-notifications-router.md | 102 ++++++++++ .../15-darkwatch-router.md | 101 ++++++++++ .../16-voiceprint-router.md | 102 ++++++++++ .../17-spamshield-router.md | 102 ++++++++++ .../18-hometitle-router.md | 96 ++++++++++ .../19-removebrokers-router.md | 99 ++++++++++ .../20-alert-correlation-router.md | 102 ++++++++++ .../21-report-generation-router.md | 105 +++++++++++ .../22-background-jobs.md | 110 +++++++++++ .../23-frontend-api-integration.md | 121 ++++++++++++ .../24-dashboard-widgets.md | 121 ++++++++++++ .../25-realtime-alerts.md | 104 ++++++++++ .../26-error-loading-states.md | 111 +++++++++++ .../27-browser-extension-move.md | 125 +++++++++++++ .../28-ios-app-foundation.md | 108 +++++++++++ .../29-ios-design-system.md | 135 +++++++++++++ .../30-ios-auth-onboarding.md | 125 +++++++++++++ .../31-ios-api-client.md | 128 +++++++++++++ .../32-ios-service-screens.md | 136 ++++++++++++++ .../33-ios-native-features.md | 114 +++++++++++ .../34-android-app-foundation.md | 139 ++++++++++++++ .../35-android-design-system.md | 138 ++++++++++++++ .../36-android-auth-onboarding.md | 122 ++++++++++++ .../37-android-api-client.md | 113 +++++++++++ .../38-android-service-screens.md | 125 +++++++++++++ .../39-android-native-features.md | 135 +++++++++++++ .../40-shared-mobile-assets.md | 136 ++++++++++++++ .../41-cleanup-legacy.md | 116 ++++++++++++ .../42-deployment-config.md | 177 ++++++++++++++++++ tasks/shieldai-unified-restructure/README.md | 89 +++++++++ 43 files changed, 4716 insertions(+) create mode 100644 tasks/shieldai-unified-restructure/01-project-foundation-cleanup.md create mode 100644 tasks/shieldai-unified-restructure/02-theme-system-brand-palette.md create mode 100644 tasks/shieldai-unified-restructure/03-ui-primitive-library.md create mode 100644 tasks/shieldai-unified-restructure/04-layout-components.md create mode 100644 tasks/shieldai-unified-restructure/05-landing-page-hero.md create mode 100644 tasks/shieldai-unified-restructure/06-landing-page-features.md create mode 100644 tasks/shieldai-unified-restructure/07-auth-pages.md create mode 100644 tasks/shieldai-unified-restructure/08-migrate-existing-pages.md create mode 100644 tasks/shieldai-unified-restructure/09-drizzle-schema-migration.md create mode 100644 tasks/shieldai-unified-restructure/10-db-connection-migrations.md create mode 100644 tasks/shieldai-unified-restructure/11-trpc-auth-context.md create mode 100644 tasks/shieldai-unified-restructure/12-user-family-router.md create mode 100644 tasks/shieldai-unified-restructure/13-subscription-billing-router.md create mode 100644 tasks/shieldai-unified-restructure/14-notifications-router.md create mode 100644 tasks/shieldai-unified-restructure/15-darkwatch-router.md create mode 100644 tasks/shieldai-unified-restructure/16-voiceprint-router.md create mode 100644 tasks/shieldai-unified-restructure/17-spamshield-router.md create mode 100644 tasks/shieldai-unified-restructure/18-hometitle-router.md create mode 100644 tasks/shieldai-unified-restructure/19-removebrokers-router.md create mode 100644 tasks/shieldai-unified-restructure/20-alert-correlation-router.md create mode 100644 tasks/shieldai-unified-restructure/21-report-generation-router.md create mode 100644 tasks/shieldai-unified-restructure/22-background-jobs.md create mode 100644 tasks/shieldai-unified-restructure/23-frontend-api-integration.md create mode 100644 tasks/shieldai-unified-restructure/24-dashboard-widgets.md create mode 100644 tasks/shieldai-unified-restructure/25-realtime-alerts.md create mode 100644 tasks/shieldai-unified-restructure/26-error-loading-states.md create mode 100644 tasks/shieldai-unified-restructure/27-browser-extension-move.md create mode 100644 tasks/shieldai-unified-restructure/28-ios-app-foundation.md create mode 100644 tasks/shieldai-unified-restructure/29-ios-design-system.md create mode 100644 tasks/shieldai-unified-restructure/30-ios-auth-onboarding.md create mode 100644 tasks/shieldai-unified-restructure/31-ios-api-client.md create mode 100644 tasks/shieldai-unified-restructure/32-ios-service-screens.md create mode 100644 tasks/shieldai-unified-restructure/33-ios-native-features.md create mode 100644 tasks/shieldai-unified-restructure/34-android-app-foundation.md create mode 100644 tasks/shieldai-unified-restructure/35-android-design-system.md create mode 100644 tasks/shieldai-unified-restructure/36-android-auth-onboarding.md create mode 100644 tasks/shieldai-unified-restructure/37-android-api-client.md create mode 100644 tasks/shieldai-unified-restructure/38-android-service-screens.md create mode 100644 tasks/shieldai-unified-restructure/39-android-native-features.md create mode 100644 tasks/shieldai-unified-restructure/40-shared-mobile-assets.md create mode 100644 tasks/shieldai-unified-restructure/41-cleanup-legacy.md create mode 100644 tasks/shieldai-unified-restructure/42-deployment-config.md create mode 100644 tasks/shieldai-unified-restructure/README.md diff --git a/tasks/shieldai-unified-restructure/01-project-foundation-cleanup.md b/tasks/shieldai-unified-restructure/01-project-foundation-cleanup.md new file mode 100644 index 0000000..ed12af6 --- /dev/null +++ b/tasks/shieldai-unified-restructure/01-project-foundation-cleanup.md @@ -0,0 +1,65 @@ +# 01. Project Foundation — Root Config & Directory Cleanup + +meta: + id: shieldai-unified-restructure-01 + feature: shieldai-unified-restructure + priority: P0 + depends_on: [] + tags: [infrastructure, cleanup, foundation] + +objective: +- Establish a clean project root with unified tooling, removing the fragmented packages/ + services/ split and preparing the workspace for a single monolithic web app plus native mobile projects. + +deliverables: +- Updated root `package.json` with single workspace entry `web/` +- Updated `pnpm-workspace.yaml` to include `web/`, `iOS/ShieldAI`, `android/`, `browser-ext/` +- Updated `turbo.json` with tasks for web, browser-ext +- Remove or archive legacy `packages/`, `services/`, `server/` directories +- Ensure `web/` is the primary application workspace +- Root-level shared config files (`.nvmrc`, `.editorconfig`, `tsconfig.base.json` cleanup) + +steps: +1. Backup `packages/`, `services/`, `server/` to a dated archive branch or tar.gz before removal. +2. Update root `package.json`: + - Remove `workspaces` field referencing `packages/*` and `services/*` + - Add `workspaces: ["web", "browser-ext"]` or use pnpm workspace syntax + - Update scripts to reference `web/` directly (e.g., `"dev": "pnpm --filter web dev"`) +3. Update `pnpm-workspace.yaml`: + ```yaml + packages: + - "web" + - "browser-ext" + ``` +4. Update `turbo.json`: + - Remove package-specific build outputs that no longer apply + - Ensure `web#build`, `web#dev`, `web#test` are defined + - Add `browser-ext#build` if needed +5. Clean root of obsolete files: + - `check-identity.js`, `test-classifier.ts`, `test-maxpayload.ts`, `test-ws-maxpayload*.js` (move to web/ if still needed) + - `docker-compose*.yml`, `Dockerfile` (will be recreated in task 42) + - `infra/`, `load-tests/`, `docs/` (evaluate if content should move to web/docs or archive) +6. Verify `web/` has its own `package.json`, `vite.config.ts`, `tsconfig.json`, and can run independently. +7. Run `pnpm install` from root to regenerate lockfile and verify workspace resolves correctly. +8. Run `pnpm dev` from root and confirm web app starts on expected port. + +tests: +- Unit: N/A (infrastructure task) +- Integration: `pnpm install` completes without workspace errors; `pnpm dev` starts web app; `pnpm build` in web/ succeeds +- E2E: N/A + +acceptance_criteria: +- [ ] `pnpm-workspace.yaml` only references `web` and `browser-ext` +- [ ] `pnpm install` from root resolves dependencies cleanly +- [ ] `pnpm dev` starts the web app without errors +- [ ] `packages/`, `services/`, and `server/` are no longer in the working tree (archived or deleted) +- [ ] No broken references to removed directories in root config files + +validation: +- Run `ls packages/ services/ server/` and confirm "No such file or directory" or they are empty placeholders +- Run `pnpm dev` and verify `http://localhost:3000` responds +- Run `pnpm build` inside `web/` and verify output in `web/.output/` or `web/dist/` + +notes: +- Do NOT delete git history. Use `git mv` where possible, or archive via `git branch archive/legacy-$(date +%Y%m%d)` before deleting. +- The `web/` directory already exists (was `redux/`) and contains a SolidStart scaffold. We build from there. +- `iOS/ShieldAI` and `android/` are native projects and do not participate in the pnpm workspace; they are tracked as sibling directories. diff --git a/tasks/shieldai-unified-restructure/02-theme-system-brand-palette.md b/tasks/shieldai-unified-restructure/02-theme-system-brand-palette.md new file mode 100644 index 0000000..a50fbe7 --- /dev/null +++ b/tasks/shieldai-unified-restructure/02-theme-system-brand-palette.md @@ -0,0 +1,69 @@ +# 02. Theme System — Auto-Shifting CSS with ShieldAI Brand Palette + +meta: + id: shieldai-unified-restructure-02 + feature: shieldai-unified-restructure + priority: P0 + depends_on: [shieldai-unified-restructure-01] + tags: [frontend, design-system, css, theme] + +objective: +- Create a comprehensive, auto-shifting CSS theme system for the web app using Tailwind v4 `@theme` and CSS custom properties with `@property` animations, adapted from the Lendair reference but using a ShieldAI-appropriate brand palette. + +deliverables: +- `web/src/app.css` — Complete theme file with: + - `@property` declarations for all animatable color tokens + - `:root` light-mode color tokens (backgrounds, text, brand, borders, semantic, glass) + - `@media (prefers-color-scheme: dark)` dark-mode overrides + - `:root.light` and `:root.dark` manual override classes + - `@theme` block registering all tokens for Tailwind v4 + - Base styles (`html`, `body`, `*:focus-visible`) + - Utility classes (gradients, glassmorphism, gradient text, glow shadows, dot-grid background, noise texture) +- Global background dot-grid pattern and smooth 500ms color transitions +- Typography scale using Inter font family +- Spacing and radius scale aligned with Lendair's design + +steps: +1. Copy the Lendair `app.css` structure from `~/code/Lendair/web/src/app.css` as the scaffold. +2. Replace the brand color tokens with ShieldAI palette: + - Primary: deep indigo `#4f46e5` (brand-primary), light `#818cf8` (brand-primary-light), dark `#4338ca` (brand-primary-dark) + - Accent: electric cyan `#06b6d4` (brand-accent), light `#67e8f9` (brand-accent-light), dark `#0891b2` (brand-accent-dark) + - Alert/Danger: amber `#f59e0b` (warning), red `#ef4444` (error) + - Keep neutral grays from Lendair for backgrounds and text +3. Add `@property` declarations for every custom property that should animate smoothly. +4. Define `@theme` block with all tokens so Tailwind v4 utility classes resolve correctly. +5. Implement `prefers-color-scheme: dark` media query with full dark palette. +6. Add `.light` and `.dark` classes on `:root` for manual JS toggling. +7. Define utility classes: + - `.gradient-primary`, `.gradient-accent`, `.gradient-subtle`, `.gradient-card` + - `.glass`, `.glass-dark` + - `.text-gradient-primary`, `.text-gradient-accent` + - `.shadow-glow-primary`, `.shadow-glow-accent` + - `.bg-dot-grid`, `.bg-noise` +8. Set global `background-color`, `background-image` (dot-grid), and `transition` on `:root` and `body`. +9. Import the CSS in `web/src/entry-client.tsx` or `web/src/app.tsx` (whichever is the root). +10. Create a small `useTheme()` hook in `web/src/lib/theme.ts` that detects `prefers-color-scheme`, exposes `theme` signal, and toggles `.light`/`.dark` on `document.documentElement`. + +tests: +- Unit: `useTheme()` hook returns correct initial theme based on media query; toggling updates class and signal +- Visual: Open app in light and dark OS modes; verify all colors shift smoothly over 500ms +- Visual: Toggle theme manually via `useTheme()`; verify override persists across reloads (localStorage) + +acceptance_criteria: +- [ ] All color tokens animate smoothly between light/dark modes +- [ ] Tailwind utilities like `text-brand-primary`, `bg-bg-secondary`, `border-border` work correctly +- [ ] Manual theme toggle (light/dark/system) functions and persists +- [ ] Dot-grid background pattern renders correctly in both modes +- [ ] No FOUC (flash of unstyled content) on initial load + +validation: +- Open `http://localhost:3000` in browser DevTools +- Toggle OS dark mode; verify background, text, and card colors shift +- Run `document.documentElement.classList.add('dark')` in console; verify immediate dark mode +- Check computed styles for `--color-bg` and confirm it matches token values + +notes: +- Reference: `~/code/Lendair/web/src/app.css` — this is the exact structure we want, just with ShieldAI colors. +- Tailwind v4 `@theme` is compile-time; changing tokens requires rebuild. Runtime theme switching uses CSS custom properties. +- The `transition` on `:root` and `body` must include `background-color` and `color` for smooth shifts. +- Consider adding a `theme-color` meta tag that updates with the theme for mobile browsers. diff --git a/tasks/shieldai-unified-restructure/03-ui-primitive-library.md b/tasks/shieldai-unified-restructure/03-ui-primitive-library.md new file mode 100644 index 0000000..a0d9a5a --- /dev/null +++ b/tasks/shieldai-unified-restructure/03-ui-primitive-library.md @@ -0,0 +1,82 @@ +# 03. UI Primitive Library — Button, Card, Input, Badge, Modal, Toast + +meta: + id: shieldai-unified-restructure-03 + feature: shieldai-unified-restructure + priority: P0 + depends_on: [shieldai-unified-restructure-01, shieldai-unified-restructure-02] + tags: [frontend, components, design-system, solidjs] + +objective: +- Build a reusable set of UI primitive components in SolidJS that match the ShieldAI theme and are used across all pages and features. These should feel cohesive with the Lendair component style but adapted for ShieldAI's security-focused brand. + +deliverables: +- `web/src/components/ui/Button.tsx` — Variants: primary, secondary, ghost, danger. Sizes: sm, md, lg. States: disabled, loading. +- `web/src/components/ui/Card.tsx` — Container with gradient-card background, border, padding, and optional header/footer slots. +- `web/src/components/ui/Input.tsx` — Text input with label, error state, helper text, and focus ring. Types: text, email, password, number. +- `web/src/components/ui/Badge.tsx` — Status badges with variants: default, success, warning, error, info. +- `web/src/components/ui/Modal.tsx` — Accessible dialog with overlay, close button, focus trap, and animation. +- `web/src/components/ui/Toast.tsx` — Toast notification system (single component + `ToastProvider` context) with auto-dismiss, positions, and variants. +- `web/src/components/ui/index.ts` — Barrel export for all primitives. +- `web/src/components/ui/ui.test.ts` — Unit tests for each primitive. + +steps: +1. Create `web/src/components/ui/` directory. +2. **Button**: + - Props: `variant`, `size`, `disabled`, `loading`, `onClick`, `children`, `class` (merge with base) + - Primary: `.gradient-primary` bg, white text, `.shadow-glow-primary` + - Secondary: transparent bg, border, primary text + - Ghost: transparent, no border, text only + - Danger: red gradient bg + - Loading state shows spinner SVG and disables interaction +3. **Card**: + - Props: `children`, `class`, `header?`, `footer?` + - Uses `.gradient-card`, `.border-border/50`, rounded-xl +4. **Input**: + - Props: `label`, `type`, `value`, `onInput`, `error`, `helperText`, `placeholder` + - Styled with bg-transparent, border, focus ring using `--color-focus-ring` + - Error state adds red border and error text +5. **Badge**: + - Props: `variant`, `children` + - Small rounded pill with semantic color backgrounds +6. **Modal**: + - Props: `isOpen`, `onClose`, `title`, `children`, `size?` + - Uses SolidJS `Portal` for rendering outside DOM tree + - Backdrop click closes; Escape key closes + - Focus trap inside modal content + - Enter/exit CSS transitions +7. **Toast**: + - Create `ToastContext` with `showToast({ message, variant, duration })` API + - `ToastProvider` renders a fixed-position container + - Individual toasts auto-dismiss after duration (default 4s) + - Variants: success, error, warning, info +8. Write unit tests for each component using Vitest + Testing Library. +9. Create barrel export `index.ts`. + +steps: +- Unit: Each component renders correctly with default props +- Unit: Button variants produce correct CSS classes +- Unit: Input error state renders error message +- Unit: Modal open/close toggles visibility and calls onClose +- Unit: Toast context show/dismiss works and auto-dismiss fires +- Visual: Inspect all components in Storybook-style page (optional) or directly in landing page + +acceptance_criteria: +- [ ] All 6 primitives exist in `web/src/components/ui/` with barrel export +- [ ] Each primitive has full TypeScript types +- [ ] Button supports all 4 variants, 3 sizes, disabled, and loading states +- [ ] Input supports error states and focus rings +- [ ] Modal is accessible (focus trap, ESC to close, backdrop click) +- [ ] Toast system can queue multiple toasts and auto-dismiss +- [ ] All components use theme tokens (no hardcoded colors) +- [ ] Unit tests pass with >80% coverage + +validation: +- `cd web && pnpm test` runs and passes all UI tests +- Manual inspection: create a temporary `/ui-test` route importing all primitives and verify visual appearance in both light/dark modes + +notes: +- Reference Lendair components: `~/code/Lendair/web/src/components/ui/Button.tsx`, `Card.tsx`, `Input.tsx`, `Modal.tsx`, `Toast.tsx` +- Keep components uncontrolled where possible (SolidJS signals for state) to avoid prop drilling. +- The `class` prop should always merge with base classes using a utility like `clsx` or `tailwind-merge`. Install if not present. +- Do NOT add business logic to primitives — they are purely presentational. diff --git a/tasks/shieldai-unified-restructure/04-layout-components.md b/tasks/shieldai-unified-restructure/04-layout-components.md new file mode 100644 index 0000000..5e5d809 --- /dev/null +++ b/tasks/shieldai-unified-restructure/04-layout-components.md @@ -0,0 +1,89 @@ +# 04. Layout Components — Navbar, Footer, PageContainer, AppShell + +meta: + id: shieldai-unified-restructure-04 + feature: shieldai-unified-restructure + priority: P0 + depends_on: [shieldai-unified-restructure-01, shieldai-unified-restructure-02, shieldai-unified-restructure-03] + tags: [frontend, layout, navigation, solidjs] + +objective: +- Build the structural layout components that wrap every page: a responsive navbar with navigation and auth state, a footer, a page container for consistent padding/max-width, and an AppShell that composes them all with the theme background. + +deliverables: +- `web/src/components/layout/Navbar.tsx` — Responsive nav with: + - ShieldAI logo/wordmark (SVG) + - Navigation links: Features, Pricing, Blog, Dashboard + - Auth buttons: Sign In (secondary), Get Started (primary) + - Mobile hamburger menu with slide-out drawer + - Theme toggle button (light/dark/system) + - Scroll-aware background blur/glass effect when scrolled +- `web/src/components/layout/Footer.tsx` — Multi-column footer with: + - Logo and tagline + - Link columns: Product, Company, Resources, Legal + - Social links (GitHub, Twitter/X, LinkedIn placeholders) + - Copyright and privacy/terms links +- `web/src/components/layout/PageContainer.tsx` — Wrapper with: + - `max-width` and centered layout + - Responsive horizontal padding (`px-4 md:px-6 lg:px-8`) + - Optional vertical padding prop + - `class` prop for additional overrides +- `web/src/components/layout/AppShell.tsx` — Root layout component: + - Renders ``, `
{children}
`, `