@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.4

package/src/modules/auth/ui/LoginPage.tsx

@@ -0,0 +1,62 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import { authClient } from '../authClient'
+import { useAuthModal } from '../AuthModalContext'
+
+interface LoginPageProps {
+  onSuccess?: () => void
+}
+
+export function LoginPage({ onSuccess }: LoginPageProps) {
+  const [error, setError] = useState<string | null>(null)
+  const { redirectUrl } = useAuthModal()
+
+  const trpc = useTRPC()
+  const { data: providersData } = useQuery(
+    trpc.auth.getProviders.queryOptions(),
+  )
+  const socialProviders = providersData?.providers || []
+
+  const handleSocialSignIn = async (provider: string) => {
+    try {
+      // Close modal before redirect to OAuth
+      onSuccess?.()
+      
+      await authClient.signIn.social({
+        provider,
+        callbackURL: redirectUrl,
+      })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Social sign-in failed')
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {error && (
+        <div className="p-3 text-sm bg-destructive/10 text-destructive rounded-md">
+          {error}
+        </div>
+      )}
+      {socialProviders.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {socialProviders.map((provider: string) => (
+            <Button
+              key={provider}
+              variant="outline"
+              onClick={() => handleSocialSignIn(provider)}
+              className="w-full capitalize"
+            >
+              {provider === 'github' && '🔗 '}
+              {provider === 'google' && '🔐 '}
+              {provider === 'okta' && '🏢 '}
+              Sign in with {provider}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/auth/useAuthActions.ts

@@ -0,0 +1,85 @@
+import { useCallback } from 'react'
+
+interface LoginCredentials {
+  email: string
+  password: string
+}
+
+interface SignupCredentials extends LoginCredentials {
+  name: string
+}
+
+/**
+ * Hook for authentication actions (login, signup, logout)
+ */
+export function useAuthActions() {
+  const login = useCallback(async (credentials: LoginCredentials) => {
+    const response = await fetch('/api/auth/sign-in/email', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Login failed')
+    }
+
+    return response.json()
+  }, [])
+
+  const signup = useCallback(async (credentials: SignupCredentials) => {
+    const response = await fetch('/api/auth/sign-up/email', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Signup failed')
+    }
+
+    return response.json()
+  }, [])
+
+  const logout = useCallback(async () => {
+    const response = await fetch('/api/auth/sign-out', {
+      method: 'POST',
+      credentials: 'include',
+    })
+
+    if (!response.ok) {
+      throw new Error('Logout failed')
+    }
+
+    // Clear session and reload to update UI
+    window.location.href = '/'
+  }, [])
+
+  const socialLogin = useCallback(async (provider: 'github' | 'google') => {
+    const response = await fetch(`/api/auth/signin/${provider}`, {
+      method: 'POST',
+      credentials: 'include',
+    })
+
+    if (!response.ok) {
+      throw new Error(`${provider} login failed`)
+    }
+
+    const data = await response.json()
+    // Redirect to provider's OAuth flow
+    if (data.redirectUrl) {
+      window.location.href = data.redirectUrl
+    }
+  }, [])
+
+  return {
+    login,
+    signup,
+    logout,
+    socialLogin,
+  }
+}

package/src/modules/config/BootstrapConfigContext.tsx

@@ -8,7 +8,7 @@ const BootstrapConfigContext = createContext<BootstrapConfigData | undefined>(
 
 interface BootstrapConfigProviderProps {
   children: ReactNode
-  bootstrapConfig: BootstrapConfigData
+  bootstrapConfig: BootstrapConfigData | undefined
 }
 
 export function BootstrapConfigProvider({

package/src/modules/config/HealthStateContext.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo, useState } from 'react'
+
+export type EnvHopperHealth = 'healthy' | 'degraded'
+
+export interface EnvHopperHealthStateBootstrapPart {
+  bootstrapApiError?: unknown
+}
+
+export interface HealthStateContext {
+  envHopperHealth: EnvHopperHealth
+  setEnvHopperHealth: (health: EnvHopperHealth) => void
+}
+
+const HealthStateContext = createContext<HealthStateContext | undefined>(
+  undefined,
+)
+
+interface HealthStateProviderProps {
+  children: ReactNode
+  bootstrapHealth: EnvHopperHealthStateBootstrapPart
+}
+
+export function HealthStateProvider({
+  children,
+}: HealthStateProviderProps) {
+  const [envHopperHealth, setEnvHopperHealth] =
+    useState<EnvHopperHealth>('healthy')
+
+  const value = useMemo(
+    () => ({
+      envHopperHealth,
+      setEnvHopperHealth,
+    }),
+    [envHopperHealth, setEnvHopperHealth],
+  )
+
+  return <HealthStateContext value={value}>{children}</HealthStateContext>
+}
+
+export function useEnvHopperHealth(): HealthStateContext {
+  const context = use(HealthStateContext)
+  if (context === undefined) {
+    throw new Error('useGlobalConfig must be used within a useEnvHopperHealth')
+  }
+  return context
+}

package/src/modules/crossCuttingParams/CrossCuttingParamsContext.tsx

@@ -0,0 +1,75 @@
+import { objectify } from 'radashi'
+import { createContext, use, useCallback, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import type {
+  CrossCuttingParamDef,
+  CrossCuttingParamValue,
+} from '~/modules/crossCuttingParams/types'
+
+export interface CrossCuttingParamsContext {
+  setCrossCuttingParams: (
+    params: Record<string, CrossCuttingParamValue>,
+  ) => void
+  crossCuttingParams: Record<string, CrossCuttingParamValue>
+  setCrossCuttingParamsDefs: (param: Array<CrossCuttingParamDef>) => void
+  getParamDefBySlug: (slug: string) => CrossCuttingParamDef | undefined
+}
+
+export const CrossCuttingParamsContext = createContext<
+  CrossCuttingParamsContext | undefined
+>(undefined)
+
+interface CrossCuttingParamsProviderProps {
+  children: ReactNode
+  initialCrossCuttingParams?: Array<CrossCuttingParamValue>
+}
+
+export function CrossCuttingParamsProvider({
+  children,
+  initialCrossCuttingParams,
+}: CrossCuttingParamsProviderProps) {
+  const [crossCuttingParams, setCrossCuttingParams] = useState<
+    Record<string, CrossCuttingParamValue>
+  >(() =>
+    initialCrossCuttingParams
+      ? objectify(initialCrossCuttingParams, (k) => k.slug)
+      : {},
+  )
+
+  const [crossCuttingParamDefs, setCrossCuttingParamsDefs] = useState<
+    Array<CrossCuttingParamDef>
+  >([])
+
+  const getParamDefBySlug = useCallback(
+    (slug: string): CrossCuttingParamDef | undefined => {
+      return crossCuttingParamDefs.find((param) => param.slug === slug)
+    },
+    [crossCuttingParamDefs],
+  )
+
+  const value: CrossCuttingParamsContext = useMemo(
+    () => ({
+      setCrossCuttingParams,
+      crossCuttingParams,
+      setCrossCuttingParamsDefs,
+      getParamDefBySlug,
+    }),
+    [crossCuttingParams, getParamDefBySlug],
+  )
+
+  return (
+    <CrossCuttingParamsContext value={value}>
+      {children}
+    </CrossCuttingParamsContext>
+  )
+}
+
+export function useCrossCuttingParamsContext(): CrossCuttingParamsContext {
+  const context = use(CrossCuttingParamsContext)
+  if (context === undefined) {
+    throw new Error(
+      'useCrossCuttingParamsContext must be used within a CrossCuttingParamsProvider',
+    )
+  }
+  return context
+}

package/src/modules/crossCuttingParams/types.ts

@@ -0,0 +1,18 @@
+// Paramter that comes from URL
+export interface CrossCuttingLoaderParam {
+  slug: string
+  stringValue: string
+}
+
+export interface CrossCuttingParamDef {
+  slug: string
+  displayName: string
+  //   scope: 'global' | 'environment';
+}
+
+export interface CrossCuttingParamValue {
+  slug: string
+  stringValue: string
+}
+
+export const CROSS_CUTTING_SINGLE_SLUG = 'single'

package/src/modules/crossCuttingParams/utils/routeLoaderMapper.ts

@@ -0,0 +1,7 @@
+import type { CrossCuttingLoaderParam } from '~/modules/crossCuttingParams/types'
+
+export function routeLoaderMapper(
+  _subValue: string | undefined,
+): Array<CrossCuttingLoaderParam> {
+  return []
+}

package/src/modules/environment/{EnvironmentContext.tsx → context/EnvironmentContext.tsx}

@@ -1,3 +1,6 @@
+import type { EnvBaseInfo } from '@env-hopper/backend-core'
+import { useQuery } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
 import {
   createContext,
   use,
@@ -6,19 +9,19 @@ import {
   useMemo,
   useState,
 } from 'react'
-import { useBootstrapConfig } from '../config/BootstrapConfigContext'
-import type { EhEnvIndexed } from '@env-hopper/backend-core'
-import type { ReactNode } from 'react'
-import type { EnvironmentHistoryItem } from './types'
-import { useDb } from '~/userDb/DbContext'
+import { ApiQueryMagazineResourceJump } from '../../resourceJump/api/ApiQueryMagazineResourceJump'
+import type { EnvironmentHistoryItem } from '../types'
+import { useEnvironmentHistory } from './useEnvironmentHistory'
 
 export interface EnvironmentContext {
   setCurrentEnv: (envSlug: string | undefined) => void
-  currentEnv: EhEnvIndexed | undefined
-  getHistory: () => Array<EnvironmentHistoryItem>
+  currentEnv: EnvBaseInfo | undefined
+  history: Array<EnvironmentHistoryItem>
+  initialEnvSlug: string | undefined
+  environments: Array<EnvBaseInfo>
 }
 
-const EnvironmentContext = createContext<EnvironmentContext | undefined>(
+export const EnvironmentContext = createContext<EnvironmentContext | undefined>(
   undefined,
 )
 
@@ -31,54 +34,58 @@ export function EnvironmentProvider({
   children,
   initialEnvSlug,
 }: EnvironmentProviderProps) {
-  const indexData = useBootstrapConfig()
-  const db = useDb()
-  const [history, setHistory] = useState<Array<EnvironmentHistoryItem>>([])
+  // Use environment history hook (loads history from DB and provides save)
+  const { history, historySaveEnvSwitch } = useEnvironmentHistory()
 
-  useEffect(() => {
-    const fetchHistory = async () => {
-      const historyItems = await db.environmentHistory
-        .toCollection()
-        .sortBy('timestamp')
-      setHistory(historyItems)
-    }
-    fetchHistory()
-  }, [db.environmentHistory])
+  // Fetch ResourceJumpsData to get environment information
+  const { data: resourceJumpsData } = useQuery(
+    ApiQueryMagazineResourceJump.getResourceJumps(),
+  )
 
   const [currentEnvSlug, setCurrentEnvSlug] = useState<string | undefined>(
     initialEnvSlug,
   )
 
+  const environments = useMemo(() => {
+    return resourceJumpsData?.envs || []
+  }, [resourceJumpsData])
+
   // Lookup functions
   const findEnvBySlug = useCallback(
-    (envSlug: string | undefined): EhEnvIndexed | undefined => {
-      if (!envSlug) return undefined
-      return indexData.envs[envSlug]
+    (envSlug: string | undefined): EnvBaseInfo | undefined => {
+      if (!envSlug || !resourceJumpsData) return undefined
+      return resourceJumpsData.envs.find((env) => env.slug === envSlug)
     },
-    [indexData.envs],
+    [resourceJumpsData],
   )
 
   // Get current objects from slugs
   const currentEnv = findEnvBySlug(currentEnvSlug)
   const setCurrentEnv = useCallback(
     (envSlug: string | undefined) => {
+      // TODO: Intentionally setting state directly from URL
       setCurrentEnvSlug(envSlug)
-      const timestamp = Date.now()
       if (envSlug !== undefined) {
-        setHistory((prev) => [...prev, { envSlug, timestamp }])
-        db.environmentHistory.add({ envSlug, timestamp })
+        historySaveEnvSwitch(envSlug)
       }
     },
-    [db.environmentHistory],
+    [historySaveEnvSwitch],
   )
 
+  // Sync currentEnvSlug with URL changes (from initialEnvSlug prop)
+  useEffect(() => {
+    setCurrentEnv(initialEnvSlug)
+  }, [initialEnvSlug, setCurrentEnv])
+
   const value: EnvironmentContext = useMemo(
     () => ({
       setCurrentEnv,
       currentEnv,
-      getHistory: () => history,
+      history,
+      initialEnvSlug,
+      environments,
     }),
-    [currentEnv, setCurrentEnv, history],
+    [currentEnv, setCurrentEnv, history, initialEnvSlug, environments],
   )
 
   //   return (

package/src/modules/environment/context/useEnvironmentHistory.ts

@@ -0,0 +1,30 @@
+import { useLiveQuery } from 'dexie-react-hooks'
+import { useCallback } from 'react'
+import type { EnvironmentHistoryItem } from '~/modules/environment/types'
+import { useDb } from '~/userDb/DbContext'
+
+export function useEnvironmentHistory() {
+  const db = useDb()
+
+  const history = useLiveQuery(async () => {
+    const days30Ago = Date.now() - 30 * 24 * 60 * 60 * 1000
+    return await db.environmentHistory
+      .where('timestamp')
+      .aboveOrEqual(days30Ago)
+      .sortBy('timestamp')
+  })
+
+  const historySaveEnvSwitch = useCallback(
+    (envSlug: string) => {
+      const timestamp = Date.now()
+      const newHistoryItem: EnvironmentHistoryItem = { envSlug, timestamp }
+      db.environmentHistory.add(newHistoryItem)
+    },
+    [db.environmentHistory],
+  )
+
+  return {
+    history: history || [],
+    historySaveEnvSwitch,
+  }
+}

package/src/modules/fuzzyMatchLogic/autoCompleteFilter.ts

@@ -1,11 +1,16 @@
 import { Encoder, Index } from 'flexsearch'
-import { score } from './scoring'
+import { matchSorter } from 'match-sorter'
 import type {
   FuzzySearchContext,
   FuzzySearchIndex,
   FuzzySearchPrepareIndexParams,
   FuzzySearchReturnItem,
 } from './types'
+import { fixRuLayout, isRuLayout } from '~/modules/fuzzyMatchLogic/fixLayout'
+import {
+  enrichTokensForIndex,
+  tokenize,
+} from '~/modules/fuzzyMatchLogic/tokenize'
 
 export function makeFuzzySearchIndex(
   params: FuzzySearchPrepareIndexParams,
@@ -30,8 +35,12 @@ export function makeFuzzySearchIndex(
     encoder: encoder,
   })
   params.entries.forEach((entry, idx) => {
-    index.add(idx, entry.displayName || entry.slug)
-    // index.add(idx, enrichTokensForIndex(tokenize(entry.displayName || entry.slug)).join(' '))
+    const newLocal = [
+      ...enrichTokensForIndex(tokenize(entry.displayName)),
+      gluer(entry.displayName),
+    ].join(' ')
+    // index.add(idx, entry.displayName)
+    index.add(idx, newLocal)
   })
   return {
     flexIndex: index,
@@ -43,15 +52,79 @@ export function fuzzySearch(
   needle: string,
   context: FuzzySearchContext,
 ): Array<FuzzySearchReturnItem> {
-  const postFiltrationResults = context.index.flexIndex
-    .searchCache(needle)
-    .map((id) => {
-      return {
-        entry: context.index.entries[id as number]!,
-      }
+  const justDisplayName = context.index.entries
+
+  const attempt = (n: string) => {
+    const tokenizedNeedle = tokenize(n).join(' ')
+    const results = matchSorter(justDisplayName, tokenizedNeedle, {
+      keys: [(item) => tokenize(item.displayName).join(' ')],
+      sorter: (rankedItems) => {
+        return rankedItems.sort((a, b) => {
+          const aFirst = -1
+          const bFirst = 1
+          const { rank: aRank, keyIndex: aKeyIndex } = a
+          const { rank: bRank, keyIndex: bKeyIndex } = b
+          const same = aRank === bRank
+          if (same) {
+            if (aKeyIndex === bKeyIndex) {
+              const aFreq = context.freqGetter?.(a.item.slug) || 0
+              const bFreq = context.freqGetter?.(b.item.slug) || 0
+              if (aFreq === bFreq) {
+                return a.item.displayName.localeCompare(b.item.displayName)
+              }
+
+              return aFreq > bFreq ? aFirst : bFirst
+            } else {
+              return aKeyIndex < bKeyIndex ? aFirst : bFirst
+            }
+          } else {
+            return aRank > bRank ? aFirst : bFirst
+          }
+        })
+        // return sort(rankedItems, (rankedItem) => {
+        //   const { rank } = rankedItem
+        //   const freq = context.freqGetter?.(rankedItem.item.slug) || 0;
+        //   if (rank <= rankings.STARTS_WITH) {
+        //     // or worse
+        //     return ((10 - rank) * 10000 + freq * 1000 + rankedItem.index)
+        //   }
+        //   return ((10 - rank) * 100000 + rankedItem.index)
+        // }, true)
+      },
     })
+    return results.map((r) => ({ entry: r }))
+  }
 
-  // const tokenizedNeedle = tokenize(needle)
+  let lastAttempt = attempt(needle)
+  if (lastAttempt.length === 0 && isRuLayout(needle)) {
+    lastAttempt = attempt(fixRuLayout(needle))
+  }
+  return lastAttempt
+
+  // const attempt = (n: string) => {
+  //   const tokenizedNeedle = tokenize(n)
+  //   const postFiltrationResultsRaw = tokenizedNeedle.flatMap((t) =>
+  //     context.index.flexIndex.searchCache(t).map((id) => {
+  //       return {
+  //         id,
+  //         entry: context.index.entries[id as number]!,
+  //       }
+  //     }),
+  //   )
+
+  //   const postFiltrationResults = postFiltration(
+  //     unique(postFiltrationResultsRaw, (r) => r.id),
+  //     n,
+  //   )
+
+  //   return score(postFiltrationResults, n)
+  // }
+
+  // let lastAttempt = attempt(needle)
+  // if (lastAttempt.length === 0 && isRuLayout(needle)) {
+  //   lastAttempt = attempt(fixRuLayout(needle))
+  // }
+  // return lastAttempt
 
   // const foundTokensByRows = new Map<number, FuzzySearchPreliminaryResult>()
 
@@ -73,9 +146,11 @@ export function fuzzySearch(
 
   // const rawResults = [...foundTokensByRows.values()]
   // const postFiltrationResults = postFiltration(rawResults)
-  return score(postFiltrationResults, needle)
 }
 
+function gluer(displayName: string) {
+  return displayName.toLowerCase().replaceAll(/[^a-z0-9]/g, '')
+}
 // type IndexType = {
 //   title: string;
 //   titleOrig: string;

package/src/modules/fuzzyMatchLogic/features/positionBonus.ts

@@ -0,0 +1,29 @@
+export function positionBonus(
+  needle: string,
+  candidate: string,
+  positionDecayAlpha: number,
+): number {
+  if (needle.length === 0) {
+    return 0
+  }
+
+  const n = needle.toLowerCase()
+  const c = candidate.toLowerCase()
+
+  const idx = c.indexOf(n)
+  if (idx === -1) {
+    // Not a contiguous substring — no bonus.
+    return 0
+  }
+
+  // Prefer earlier matches exponentially.
+  // idx=0 -> 1, idx grows -> 0.
+  const early = Math.exp(-positionDecayAlpha * idx)
+
+  // Only use length as a gentle tie-breaker when the match starts at the same
+  // position (e.g., query "1" matches "env-1" and "env-001" at the same idx).
+  // This avoids reordering results for cases where position differs.
+  const lenFactor = 1 / (1 + Math.max(0, candidate.length - needle.length))
+
+  return early * lenFactor
+}

package/src/modules/fuzzyMatchLogic/features/prefixFracTokenMiddles.ts

@@ -9,7 +9,7 @@ export function prefixFracAcrossTokens(
 ): number {
   const entryTokens = tokenize(entry.displayName)
 
-  const scores = []
+  const scores: Array<number> = []
 
   for (let i = 0, j = 0; i < needleTokens.length && j < entryTokens.length; ) {
     const needleToken = needleTokens[i]!