feat: implement memory entry synchronization functions and schemas (#71)

* feat: implement memory entry synchronization functions and schemas

* feat: implement authentication service and integrate with UI components

* refactor: remove debug log for authentication status in App component

* feat: implement PKCE for secure OAuth flow and enhance auth logging

* fix: remove unnecessary response_type parameter and add extension metadata to token request

* feat(sync): integrate Convex for synchronization and add auto-sync functionality

- Added Convex as a dependency for synchronization.
- Implemented ConvexClientManager to manage Convex client initialization and authentication.
- Created SyncService to handle sync operations (push, pull, full sync) with remote storage.
- Introduced AutoSyncManager to manage automatic synchronization triggers.
- Updated auth store to authenticate sync service upon successful login.
- Enhanced memory store to trigger debounced push sync after memory operations.
- Added sync state management to handle sync operations and errors.
- Refactored provider-key-input component to clean up imports.
- Improved background script to check auth status and trigger startup sync.
- Updated options and popup components to include necessary imports and hooks.

* wip: supabase auth check in sync service

* feat(auth): implement OAuth login flow with Supabase and add LoginDialog component

* refactor: reorganize imports and improve type definitions across multiple files

* feat: refactor storage structure by replacing securityStorage with apiKeys and syncStateAndSettings

* feat: update @types/node to version 24.10.1 and format tsconfig.json for consistency

* refactor: update authentication check to use getUser instead of getSession

* refactor: remove unused crypto-utils functions and update Supabase client configuration

* refactor: enhance trigger-settings and theme-provider imports; update permissions in wxt.config

* refactor: remove unused flowType configuration from Supabase client

* fix: improve memory sync handling by ensuring null values for optional fields

* feat: implement sync functionality with manual trigger and status handling

* fix: enhance loading state handling and improve code formatting in App components

* feat: enhance authentication flow and sync functionality across components

* feat: add cloud models support and settings management across components

* fix: update WXT_WEBSITE_URL in .env.example for consistency

* feat: enhance database types with payments, subscriptions, and webhook logs support

* fix: reduce authentication wait timeout from 300s to 120s and update cloud models toggle behavior for unauthenticated users

* chore: update dependencies to latest versions

- upgraded @opentelemetry/sdk-trace-web from ^2.2.0 to ^2.3.0
- upgraded @supabase/supabase-js from ^2.81.1 to ^2.90.1
- upgraded ai from ^5.0.117 to ^5.0.118
- upgraded use-debounce from ^10.0.6 to ^10.1.0
- upgraded zod from ^4.3.4 to ^4.3.5
- upgraded @typescript/native-preview from ^7.0.0-dev.20260102.1 to ^7.0.0-dev.20260109.1

* fix: update service registration order and sync service import

* feat: adjust logging verbosity from info to debug

This is for routine operations and refine user authentication context in the sync service.

* fix: reorder key validation service registration and ensure message listener returns a promise

* feat: integrate capture memory service and add message handler for saving captured memories

* feat: integrate cloud AI features for categorization and deduplication

- Added cloud AI support for bulk categorization and deduplication in the BulkCategorizer and DeduplicationCategorizer classes.
- Implemented cloud-based categorization and rephrasing in the CategorizationService.
- Introduced cloud-client module for handling API requests to the cloud service.
- Enhanced the AIMatcher to utilize cloud models for field matching.
- Added toast notifications for cloud AI usage and quota limits.
- Updated UI components to display cloud usage status and settings.
- Refactored existing code to support cloud functionality and improve maintainability.

* feat: enhance CloudUsageDisplay with compact mode and tooltip for better usage insights

* refactor: remove compact mode from CloudUsageDisplay component

* feat: Implement pending deletion queue and sync process for memory entries.

* feat: Integrate cloud usage tracking and enhance alert system for cloud model limits

* feat: refactor cloud usage handling and improve cache invalidation logic

* fix: simplify Separator component usage in AiProviderSettings

* fix: update existingMemoryId type to use z.uuid() in DeduplicationOperationSchema

* feat: update biome schema version, refactor useAuth hook with React Query, and implement sync cooldown logic

* fix: streamline includes formatting in biome.json

* feat: implement content hash computation for memory entries and update related schemas

* Merge branch 'main' of https://github.com/mikr13/superfill.ai into phase-2

* feat: update changeset to reflect addition of subscription service

* feat: enhance user feedback for pending account approval in auth components

* feat: add environment variable validation for release workflow

* feat: improve toast manager UI handling and theme application

* fix: update version type for subscription service to minor

* fix: conditionally include localhost permission in manifest

* fix: reorder installation of dependencies in CI workflow

* fix: improve usage percentage calculation and update database types for cloud usage

* fix: reorder imports for better organization in use-auth hook

* fix: refactor useAuth hook to streamline user status fetching and improve state management

* fix: replace autoSyncManager with direct call to performFullSync during startup sync

* fix: update deduplication schemas to use TagSchema and improve type definitions

* fix: ensure cloud usage status is checked before displaying alert for active cloud models

* fix: centralize ToastType definition and update imports across components

* fix: enhance error handling in cloud categorization and rephrasing, and update timestamp fields to ISO string format in sync types

---------

Co-authored-by: Mihir Kumar <mihir.kumar-ext@ab-Inbev.com>

Author: mikr13

.changeset/curvy-banks-yawn.md

@@ -0,0 +1,5 @@
+---
+"superfill.ai": minor
+---
+
+feat: subscription service added

.env.example

@@ -1,5 +1,15 @@
 # Environment Variables for SuperFill Extension
 
+# Website URL for authentication
+# In production, this should be https://superfill.ai
+# In development, use http://localhost:3002
+WXT_WEBSITE_URL=https://superfill.ai
+
+# Supabase Configuration
+# Get these from your Supabase project settings
+WXT_SUPABASE_URL=https://your-project.supabase.co
+WXT_SUPABASE_PUBLISHABLE_KEY=your-supabase-publishable-key
+
 # Skip onboarding flow for local development (optional)
 # Set this to 'true' to skip the onboarding dialog during development
 # VITE_SKIP_ONBOARDING=true

.github/workflows/ci-release.yaml

@@ -9,13 +9,23 @@ permissions:
 jobs:
   submit:
     runs-on: blacksmith-2vcpu-ubuntu-2404-arm
+    env:
+      WXT_WEBSITE_URL: ${{ secrets.WXT_WEBSITE_URL }}
+      WXT_SUPABASE_URL: ${{ secrets.WXT_SUPABASE_URL }}
+      WXT_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.WXT_SUPABASE_PUBLISHABLE_KEY }}
     steps:
       - uses: actions/checkout@v6
 
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
 
+      - name: Validate required env
+        run: |
+          [[ -n "$WXT_WEBSITE_URL" ]] || { echo "Missing WXT_WEBSITE_URL"; exit 1; }
+          [[ -n "$WXT_SUPABASE_URL" ]] || { echo "Missing WXT_SUPABASE_URL"; exit 1; }
+          [[ -n "$WXT_SUPABASE_PUBLISHABLE_KEY" ]] || { echo "Missing WXT_SUPABASE_PUBLISHABLE_KEY"; exit 1; }
+
       - name: Install dependencies
         run: bun install
 

bun.lock

@@ -23,6 +23,7 @@
     "copy-pdfjs-worker": "node scripts/copy-pdfjs-worker.js",
     "format": "biome check --write",
     "lint": "bun run format",
+    "db:types": "bunx supabase gen types typescript --project-id nybgpislnqwqbcbyhzpp > src/lib/supabase/database.types.ts",
     "changeset": "changeset",
     "changeset:add": "changeset add",
     "changeset:status": "changeset status",
@@ -64,6 +65,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@supabase/supabase-js": "^2.90.1",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-form": "^1.27.7",
     "@tanstack/react-query": "^5.90.19",
@@ -85,6 +87,7 @@
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.3",
     "react-hotkeys-hook": "^5.2.3",
+    "react-icons": "^5.5.0",
     "react-resizable-panels": "^3.0.6",
     "shadcn": "^3.8.2",
     "sonner": "^2.0.7",
@@ -100,6 +103,7 @@
     "@biomejs/biome": "2.3.14",
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "@types/node": "24.10.1",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@types/uuid": "^11.0.0",

package.json

@@ -1,3 +1,4 @@
+/* biome-ignore-all lint: all G here */
 @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
 @import "tailwindcss";
 @import "tw-animate-css";
@@ -267,6 +268,5 @@
 }
 
 .toaster.group [data-description] {
-  /* biome-ignore lint/complexity/noImportantStyles: it's fine here */
   color: var(--color-popover-foreground) !important;
 }

src/assets/globals.css

@@ -0,0 +1,98 @@
+import { ExternalLink } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+import { useAuth } from "@/hooks/use-auth";
+import { createLogger } from "@/lib/logger";
+
+interface LoginDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const logger = createLogger("login-dialog");
+
+export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
+  const { signIn, signingIn, pendingApproval, inactiveMessage } = useAuth();
+
+  const handleLogin = async () => {
+    try {
+      await signIn();
+      onOpenChange(false);
+    } catch (error) {
+      logger.error("Login failed:", error);
+    }
+  };
+
+  const preventClose = (event: Event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="sm:max-w-md"
+        showCloseButton={false}
+        onEscapeKeyDown={preventClose}
+        onPointerDownOutside={preventClose}
+        onInteractOutside={preventClose}
+      >
+        <DialogHeader>
+          <DialogTitle className="text-2xl">Sign In</DialogTitle>
+          <DialogDescription>
+            Sign in to sync your memories across devices and access cloud
+            features
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          {pendingApproval && (
+            <Alert>
+              <AlertTitle>Account pending approval</AlertTitle>
+              <AlertDescription>
+                {inactiveMessage ??
+                  "Cloud and sync features are disabled until your account is approved."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <Button
+            variant="default"
+            className="w-full"
+            onClick={handleLogin}
+            disabled={signingIn}
+          >
+            {signingIn ? (
+              <>
+                <Spinner className="size-4" />
+                Checking for authentication...
+              </>
+            ) : (
+              <>
+                <ExternalLink className="size-4" />
+                Open Login Page
+              </>
+            )}
+          </Button>
+        </div>
+        {signingIn && (
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <p className="text-center">
+              A new tab will open for authentication.
+            </p>
+            <p className="text-center">
+              After logging in, return here and this dialog will automatically
+              close.
+            </p>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}