insforge 0.3.1

package/frontend/src/features/ai/helpers.ts

@@ -0,0 +1,155 @@
+import { OpenRouterModel, ModalitySchema } from '@insforge/shared-schemas';
+
+// Type for pricing information from OpenRouter model
+type ModelPricing = {
+  prompt: string;
+  completion: string;
+  image?: string;
+  request?: string;
+  webSearch?: string;
+  internalReasoning?: string;
+  inputCacheRead?: string;
+  inputCacheWrite?: string;
+};
+
+export type ModelPriceLevel = 'FREE' | '$' | '$$' | '$$$';
+
+export interface ModelOption {
+  value: string;
+  label: string;
+  company: string;
+  priceLevel: ModelPriceLevel;
+  priceColor: string;
+  logo: React.ComponentType<React.SVGProps<SVGSVGElement>> | undefined;
+}
+
+import { Type, Image } from 'lucide-react';
+import GrokIcon from '@/assets/logos/grok.svg?react';
+import GeminiIcon from '@/assets/logos/gemini.svg?react';
+import ClaudeIcon from '@/assets/logos/claude_code.svg?react';
+import OpenAIIcon from '@/assets/logos/openai.svg?react';
+import AmazonIcon from '@/assets/logos/amazon.svg?react';
+
+export const getModalityIcon = (
+  modality: ModalitySchema
+): React.FunctionComponent<React.SVGProps<SVGSVGElement>> => {
+  switch (modality) {
+    case 'text':
+      return Type;
+    case 'image':
+      return Image;
+    // case 'audio':
+    //   return Mic;
+    // case 'video':
+    //   return Video;
+    // case 'file':
+    //   return File;
+    default:
+      return Type;
+  }
+};
+
+export const formatTokenCount = (count: number): string => {
+  if (count >= 1000000) {
+    return `${(count / 1000000).toFixed(1)}M`;
+  } else if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}K`;
+  }
+  return count.toString();
+};
+
+export const getProviderDisplayName = (providerId: string): string => {
+  const providerMap: Record<string, string> = {
+    openai: 'OpenAI',
+    anthropic: 'Anthropic',
+    google: 'Google',
+    openrouter: 'OpenRouter',
+    azure: 'Azure',
+    amazon: 'Amazon',
+    xai: 'xAI',
+    huggingface: 'HuggingFace',
+  };
+
+  return (
+    providerMap[providerId.toLowerCase()] ||
+    providerId.charAt(0).toUpperCase() + providerId.slice(1)
+  );
+};
+
+export const getProviderLogo = (
+  providerId: string
+): React.FunctionComponent<React.SVGProps<SVGSVGElement>> | undefined => {
+  const logoMap: Record<string, React.FunctionComponent<React.SVGProps<SVGSVGElement>>> = {
+    anthropic: ClaudeIcon,
+    openai: OpenAIIcon,
+    google: GeminiIcon,
+    xai: GrokIcon,
+    amazon: AmazonIcon,
+  };
+  return logoMap[providerId];
+};
+
+// Calculate price level based on pricing data
+export const calculatePriceLevel = (
+  pricing: ModelPricing | undefined | null
+): { level: ModelPriceLevel; color: string } => {
+  if (!pricing) {
+    return { level: 'FREE', color: 'text-green-400' };
+  }
+
+  // Check if it's free
+  if (pricing.prompt === '0' && pricing.completion === '0') {
+    return { level: 'FREE', color: 'text-green-400' };
+  }
+
+  // Calculate average cost per 1M tokens (prompt + completion)
+  // Convert from per-token to per-1M-tokens
+  const promptCostPerToken = parseFloat(pricing.prompt) || 0;
+  const completionCostPerToken = parseFloat(pricing.completion) || 0;
+  const promptCostPer1M = promptCostPerToken * 1000000;
+  const completionCostPer1M = completionCostPerToken * 1000000;
+  const avgCostPer1M = (promptCostPer1M + completionCostPer1M) / 2;
+
+  // Adjusted thresholds based on actual pricing data and user feedback
+  if (avgCostPer1M <= 3) {
+    return { level: '$', color: 'text-green-400' };
+  } // ≤$3/1M tokens (Haiku, Gemini Flash, etc.)
+  if (avgCostPer1M <= 15) {
+    return { level: '$$', color: 'text-amber-400' };
+  } // ≤$15/1M tokens (GPT-4o, Claude Sonnet, etc.)
+  return { level: '$$$', color: 'text-red-400' }; // >$15/1M tokens (Claude Opus, etc.)
+};
+
+// Helper function to filter AI models based on selected modalities
+export const filterModelsByModalities = (
+  models: OpenRouterModel[],
+  selectedInputModalities: ModalitySchema[],
+  selectedOutputModalities: ModalitySchema[]
+): OpenRouterModel[] => {
+  if (!models?.length) {
+    return [];
+  }
+
+  return models
+    .filter((model) => {
+      const inputModalities = new Set(model.architecture?.inputModalities || []);
+      const outputModalities = new Set(model.architecture?.outputModalities || []);
+      return (
+        selectedInputModalities.every((m) => inputModalities.has(m)) &&
+        selectedOutputModalities.every((m) => outputModalities.has(m))
+      );
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+// Helper function to get friendly model name from model ID
+export const getFriendlyModelName = (modelId: string): string => {
+  // Extract the model name part (after the last slash)
+  const modelName = modelId.split('/').pop() || modelId;
+
+  // Convert kebab-case to Title Case
+  return modelName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};

package/frontend/src/features/ai/hooks/useAIConfigs.ts

@@ -0,0 +1,221 @@
+import { useMemo, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { aiService } from '@/features/ai/services/ai.service';
+import { authService } from '@/features/auth/services/auth.service';
+import {
+  ListModelsResponse,
+  AIConfigurationWithUsageSchema,
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+  ModalitySchema,
+  type OpenRouterModel,
+} from '@insforge/shared-schemas';
+import { useToast } from '@/lib/hooks/useToast';
+import {
+  getProviderLogo,
+  calculatePriceLevel,
+  getProviderDisplayName,
+  filterModelsByModalities,
+  type ModelOption,
+} from '../helpers';
+
+interface UseAIConfigsOptions {
+  enabled?: boolean;
+}
+
+export function useAIConfigs(options: UseAIConfigsOptions = {}) {
+  const { enabled = true } = options;
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Fetch AI models configuration
+  const {
+    data: modelsData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<ListModelsResponse>({
+    queryKey: ['ai-models'],
+    queryFn: () => aiService.getModels(),
+    enabled: enabled,
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  // Fetch AI configurations list
+  const {
+    data: configurations,
+    isLoading: isLoadingConfigurations,
+    error: configurationsError,
+    refetch: refetchConfigurations,
+  } = useQuery<AIConfigurationWithUsageSchema[]>({
+    queryKey: ['ai-configurations'],
+    queryFn: () => aiService.listConfigurations(),
+    enabled: enabled,
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  // Fetch anonymous token (shared across all configs)
+  const { data: anonTokenData, isLoading: isLoadingAnonToken } = useQuery({
+    queryKey: ['anon-token'],
+    queryFn: () => authService.generateAnonToken(),
+    enabled: enabled,
+    staleTime: 30 * 60 * 1000, // Cache for 30 minutes since token never expires
+  });
+
+  // Create configuration mutation
+  const createConfigurationMutation = useMutation({
+    mutationFn: (data: CreateAIConfigurationRequest) => aiService.createConfiguration(data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['ai-configurations'] });
+      showToast('AI configuration created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(`Failed to create configuration: ${error.message}`, 'error');
+    },
+  });
+
+  // Update configuration mutation
+  const updateConfigurationMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateAIConfigurationRequest }) =>
+      aiService.updateConfiguration(id, data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['ai-configurations'] });
+      showToast('AI configuration updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(`Failed to update configuration: ${error.message}`, 'error');
+    },
+  });
+
+  // Delete configuration mutation
+  const deleteConfigurationMutation = useMutation({
+    mutationFn: (id: string) => aiService.deleteConfiguration(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['ai-configurations'] });
+      showToast('AI configuration deleted successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(`Failed to delete configuration: ${error.message}`, 'error');
+    },
+  });
+
+  // Extract configured providers (memoized to maintain referential stability)
+  const configuredTextProviders = useMemo(
+    () => modelsData?.text?.filter((p) => p.configured) || [],
+    [modelsData?.text]
+  );
+  const configuredImageProviders = useMemo(
+    () => modelsData?.image?.filter((p) => p.configured) || [],
+    [modelsData?.image]
+  );
+
+  // Extract unconfigured providers
+  const unconfiguredTextProviders = modelsData?.text?.filter((p) => !p.configured) || [];
+  const unconfiguredImageProviders = modelsData?.image?.filter((p) => !p.configured) || [];
+
+  // Get all available models (flat list)
+  const allTextModels = modelsData?.text?.flatMap((p) => p.models) || [];
+  const allImageModels = modelsData?.image?.flatMap((p) => p.models) || [];
+
+  // All configured models from all providers (flattened with deduplication)
+  const allConfiguredModels = useMemo(() => {
+    const uniqueModels = new Map<string, OpenRouterModel>();
+
+    [...configuredTextProviders, ...configuredImageProviders].forEach((provider) => {
+      provider.models.forEach((model) => {
+        // Only add if we haven't seen this model.id before
+        if (!uniqueModels.has(model.id)) {
+          uniqueModels.set(model.id, model);
+        }
+      });
+    });
+
+    return Array.from(uniqueModels.values());
+  }, [configuredTextProviders, configuredImageProviders]);
+
+  // Helper function to get filtered and processed models
+  const getFilteredModels = useCallback(
+    (inputModality: ModalitySchema[], outputModality: ModalitySchema[]): ModelOption[] => {
+      const filteredRawModels = filterModelsByModalities(
+        allConfiguredModels,
+        inputModality,
+        outputModality
+      );
+
+      return filteredRawModels.map((model) => {
+        const companyId = model.id.split('/')[0];
+        const priceInfo = calculatePriceLevel(model.pricing);
+
+        return {
+          value: model.id,
+          label: model.name,
+          company: getProviderDisplayName(companyId),
+          priceLevel: priceInfo.level,
+          priceColor: priceInfo.color,
+          logo: getProviderLogo(companyId),
+        };
+      });
+    },
+    [allConfiguredModels]
+  );
+
+  // Check if any providers are configured
+  const hasConfiguredTextProviders = configuredTextProviders.length > 0;
+  const hasConfiguredImageProviders = configuredImageProviders.length > 0;
+  const hasAnyConfiguration = hasConfiguredTextProviders || hasConfiguredImageProviders;
+
+  return {
+    // Raw data
+    modelsData,
+    isLoading,
+    error,
+
+    // Providers by type
+    textProviders: modelsData?.text || [],
+    imageProviders: modelsData?.image || [],
+
+    // Configured providers
+    configuredTextProviders,
+    configuredImageProviders,
+    allConfiguredModels,
+
+    // Unconfigured providers
+    unconfiguredTextProviders,
+    unconfiguredImageProviders,
+
+    // Models lists
+    allTextModels,
+    allImageModels,
+
+    // Status checks
+    hasConfiguredTextProviders,
+    hasConfiguredImageProviders,
+    hasAnyConfiguration,
+
+    // Configurations data
+    configurations: configurations || [],
+    isLoadingConfigurations,
+    configurationsError,
+
+    // Anonymous token data
+    anonKey: anonTokenData?.accessToken,
+    isLoadingAnonToken,
+
+    // Configuration mutations
+    createConfiguration: createConfigurationMutation.mutate,
+    updateConfiguration: updateConfigurationMutation.mutate,
+    deleteConfiguration: deleteConfigurationMutation.mutate,
+
+    // Mutation states
+    isCreating: createConfigurationMutation.isPending,
+    isUpdating: updateConfigurationMutation.isPending,
+    isDeleting: deleteConfigurationMutation.isPending,
+
+    // Operations
+    refetch,
+    refetchConfigurations,
+
+    // Helper functions
+    getFilteredModels,
+  };
+}

package/frontend/src/features/ai/hooks/useAIUsage.ts

@@ -0,0 +1,77 @@
+import { useQuery } from '@tanstack/react-query';
+import { aiService } from '@/features/ai/services/ai.service';
+import {
+  AIUsageSummarySchema,
+  AIUsageRecordSchema,
+  ListAIUsageResponse,
+} from '@insforge/shared-schemas';
+
+interface UseAIUsageSummaryOptions {
+  configId?: string;
+  startDate?: string;
+  endDate?: string;
+  enabled?: boolean;
+}
+
+export function useAIUsageSummary(options: UseAIUsageSummaryOptions = {}) {
+  const { configId, startDate, endDate, enabled = true } = options;
+
+  return useQuery<AIUsageSummarySchema>({
+    queryKey: ['ai-usage-summary', configId, startDate, endDate],
+    queryFn: () => aiService.getUsageSummary({ configId, startDate, endDate }),
+    enabled: enabled,
+    staleTime: 60 * 1000, // Cache for 1 minute
+  });
+}
+
+interface UseAIUsageRecordsOptions {
+  startDate?: string;
+  endDate?: string;
+  limit?: string;
+  offset?: string;
+  enabled?: boolean;
+}
+
+export function useAIUsageRecords(options: UseAIUsageRecordsOptions = {}) {
+  const { startDate, endDate, limit = '50', offset = '0', enabled = true } = options;
+
+  return useQuery<ListAIUsageResponse>({
+    queryKey: ['ai-usage-records', startDate, endDate, limit, offset],
+    queryFn: () => aiService.getUsageRecords({ startDate, endDate, limit, offset }),
+    enabled: enabled,
+    staleTime: 60 * 1000, // Cache for 1 minute
+  });
+}
+
+interface UseAIConfigUsageOptions {
+  configId: string;
+  startDate?: string;
+  endDate?: string;
+  enabled?: boolean;
+}
+
+export function useAIConfigUsage(options: UseAIConfigUsageOptions) {
+  const { configId, startDate, endDate, enabled = true } = options;
+
+  return useQuery<AIUsageRecordSchema[]>({
+    queryKey: ['ai-config-usage', configId, startDate, endDate],
+    queryFn: () => aiService.getConfigUsageRecords(configId, { startDate, endDate }),
+    enabled: enabled && !!configId,
+    staleTime: 60 * 1000, // Cache for 1 minute
+  });
+}
+
+export function useAIRemainingCredits(enabled = true) {
+  return useQuery<{
+    usage: number;
+    limit: number | null;
+    remaining: number | null;
+  }>({
+    queryKey: ['ai-remaining-credits'],
+    queryFn: () => aiService.getRemainingCredits(),
+    enabled: enabled,
+    staleTime: 30 * 1000, // Cache for 30 seconds
+    refetchInterval: 60 * 1000, // Refetch every minute
+    retry: false,
+  });
+}

package/frontend/src/features/ai/page/AIPage.tsx

@@ -0,0 +1,178 @@
+import { useState, useEffect } from 'react';
+import { Plus, Loader2 } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { useAIConfigs } from '../hooks/useAIConfigs';
+import { useAIRemainingCredits } from '../hooks/useAIUsage';
+import {
+  AIConfigurationWithUsageSchema,
+  CreateAIConfigurationRequest,
+  UpdateAIConfigurationRequest,
+} from '@insforge/shared-schemas';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useToast } from '@/lib/hooks/useToast';
+import { AIConfigDialog } from '@/features/ai/components/AIConfigDialog';
+import { AIModelCard } from '@/features/ai/components/AIConfigCard';
+import AIEmptyState from '@/features/ai/components/AIEmptyState';
+import { getProviderLogo } from '../helpers';
+
+export default function AIPage() {
+  const {
+    configurations,
+    isLoadingConfigurations,
+    createConfiguration,
+    updateConfiguration,
+    deleteConfiguration,
+  } = useAIConfigs();
+
+  const { data: credits, error: getAICreditsError } = useAIRemainingCredits();
+
+  const { confirm, confirmDialogProps } = useConfirm();
+  const { showToast } = useToast();
+
+  // Handle AI credits error
+  useEffect(() => {
+    if (getAICreditsError) {
+      console.error('Failed to fetch AI credits:', getAICreditsError);
+      const errorMessage = getAICreditsError.message || 'Failed to load AI credits';
+      showToast(errorMessage, 'error');
+    }
+  }, [getAICreditsError, showToast]);
+
+  // Format credits display
+  const formatCredits = (remaining: number) => {
+    if (remaining >= 1000) {
+      return `${(remaining / 1000).toFixed(1)}K`;
+    }
+    return remaining.toFixed(2);
+  };
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogMode, setDialogMode] = useState<'create' | 'edit'>('create');
+  const [editingConfig, setEditingConfig] = useState<AIConfigurationWithUsageSchema | undefined>();
+
+  const handleEdit = (id: string) => {
+    const config = configurations.find((c) => c.id === id);
+    if (config) {
+      setEditingConfig(config);
+      setDialogMode('edit');
+      setDialogOpen(true);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    const shouldDelete = await confirm({
+      title: 'Delete AI Configuration',
+      description:
+        'Are you certain you wish to remove this AI Integration? This action is irreversible.',
+      confirmText: 'Delete',
+      destructive: true,
+    });
+
+    if (shouldDelete) {
+      deleteConfiguration(id);
+    }
+  };
+
+  const handleCreate = () => {
+    setEditingConfig(undefined);
+    setDialogMode('create');
+    setDialogOpen(true);
+  };
+
+  const handleDialogSuccess = (
+    configData: CreateAIConfigurationRequest | UpdateAIConfigurationRequest
+  ) => {
+    if (dialogMode === 'create') {
+      const createData = configData as CreateAIConfigurationRequest;
+      createConfiguration({
+        inputModality: createData.inputModality,
+        outputModality: createData.outputModality,
+        provider: createData.provider,
+        modelId: createData.modelId,
+        systemPrompt: createData.systemPrompt,
+      });
+    } else if (editingConfig) {
+      const updateData = configData as UpdateAIConfigurationRequest;
+      updateConfiguration({
+        id: editingConfig.id,
+        data: {
+          systemPrompt: updateData.systemPrompt || null,
+        },
+      });
+    }
+    setDialogOpen(false);
+  };
+
+  return (
+    <div className="flex h-full bg-bg-gray dark:bg-neutral-800 pt-8 pb-6">
+      <div className="max-w-[1080px] mx-auto flex-1 flex flex-col gap-6 overflow-hidden">
+        {/* Header Section */}
+        <div className="w-full flex items-start justify-between">
+          <div className="flex flex-col items-start gap-2">
+            <div className="flex items-center gap-3">
+              <h1 className="text-xl font-semibold text-black dark:text-white">AI Integration</h1>
+              {credits?.remaining && (
+                <span className="text-sm font-normal text-emerald-500 dark:text-emerald-400 mt-[2.5px]">
+                  {formatCredits(credits.remaining)} credit{credits.remaining !== 1 ? 's' : ''} left
+                </span>
+              )}
+            </div>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Copy prompt to your agent and the AI Model below will be integrated automatically.
+            </p>
+          </div>
+          <Button
+            className="h-9 py-2 pl-2 pr-3 text-sm font-medium gap-2 dark:text-white dark:bg-neutral-700 dark:hover:bg-neutral-600"
+            onClick={handleCreate}
+          >
+            <Plus className="w-5 h-5" />
+            New Integration
+          </Button>
+        </div>
+
+        {/* Content Section */}
+        <div className="flex-1 overflow-auto">
+          {isLoadingConfigurations ? (
+            <div className="flex-1 flex items-center justify-center h-full">
+              <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+            </div>
+          ) : configurations.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {configurations.map((config) => {
+                const providerLogo = getProviderLogo(config.modelId.split('/')[0]);
+                const extendedConfig = {
+                  ...config,
+                  logo: providerLogo,
+                };
+
+                return (
+                  <AIModelCard
+                    key={config.id}
+                    config={extendedConfig}
+                    onEdit={handleEdit}
+                    onDelete={() => void handleDelete(config.id)}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <AIEmptyState />
+          )}
+        </div>
+      </div>
+
+      {/* AI Configuration Dialog */}
+      <AIConfigDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        mode={dialogMode}
+        editingConfig={editingConfig}
+        onSuccess={handleDialogSuccess}
+      />
+
+      {/* Confirm Dialog */}
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}