No providers available
@@ -22,9 +20,18 @@ export default function ProvidersList({
);
}
+ // Create a simple handler for form submission - just updates the global context
+ const handleSubmit = async (data: ProviderCreate | ProviderUpdate) => {
+ // This is a simple wrapper, so we don't actually need to do anything on submit
+ console.log("Provider selected in list:", data);
+ };
+
return (
-
+ {/* Wrap in provider form container to provide the necessary context */}
+
+
+
);
}
diff --git a/graphcap_studio/src/features/inference/providers/ProvidersPanel.tsx b/graphcap_studio/src/features/inference/providers/ProvidersPanel.tsx
index 5711a3ce..3154e996 100644
--- a/graphcap_studio/src/features/inference/providers/ProvidersPanel.tsx
+++ b/graphcap_studio/src/features/inference/providers/ProvidersPanel.tsx
@@ -1,66 +1,23 @@
import { useColorMode } from "@/components/ui/theme/color-mode";
-import { Box, Button, Center, Flex, Text, VStack } from "@chakra-ui/react";
+import { Box, Center, Flex, Text } from "@chakra-ui/react";
// SPDX-License-Identifier: Apache-2.0
import { useMemo } from "react";
import { useProviders } from "../services/providers";
-import ProviderForm from "./ProviderForm";
+import { ProviderConnection } from "./ProviderConnection";
import {
InferenceProviderProvider,
- useInferenceProviderContext,
} from "./context";
-import { ProviderSelect } from "./form";
/**
* Panel content that requires context
*/
function PanelContent() {
- const { setMode, providers } =
- useInferenceProviderContext();
-
- const { colorMode } = useColorMode();
- const textColor = colorMode === "light" ? "gray.600" : "gray.300";
- const borderColor = colorMode === "light" ? "gray.200" : "gray.700";
-
- // No providers state
- if (providers.length === 0) {
- return (
-
- No providers configured
-
-
- );
- }
return (
- {/* Header */}
-
- {/* Provider Selection Dropdown */}
-
-
-
-
-
-
{/* Content */}
-
+
);
@@ -69,8 +26,8 @@ function PanelContent() {
/**
* Providers Panel Component
*
- * This component displays a list of providers and allows viewing and editing
- * provider configurations.
+ * This component displays provider configurations in a panel.
+ * It acts as a container for the provider connection form.
*/
export function ProvidersPanel() {
const {
@@ -111,9 +68,6 @@ export function ProvidersPanel() {
providers={providersData}
selectedProvider={initialSelectedProvider}
isCreating={false}
- onSubmit={() => {}}
- onCancel={() => {}}
- isSubmitting={false}
>
diff --git a/graphcap_studio/src/features/inference/providers/context/InferenceProviderContext.tsx b/graphcap_studio/src/features/inference/providers/context/InferenceProviderContext.tsx
index 7401a316..bdc1fd02 100644
--- a/graphcap_studio/src/features/inference/providers/context/InferenceProviderContext.tsx
+++ b/graphcap_studio/src/features/inference/providers/context/InferenceProviderContext.tsx
@@ -1,3 +1,4 @@
+import type { Provider } from "@/types/provider-config-types";
// SPDX-License-Identifier: Apache-2.0
/**
* Inference Provider Context
@@ -8,9 +9,8 @@
* The context includes:
* - View state (mode, selected provider)
* - Providers data
- * - Form state and validation
* - Model selection state
- * - Form actions and callbacks
+ * - Basic view actions
*/
import {
type ReactNode,
@@ -21,15 +21,12 @@ import {
useMemo,
useState,
} from "react";
-import { DEFAULT_PROVIDER_FORM_DATA } from "../../constants";
-import { useModelSelection, useProviderForm } from "../../hooks";
-import type { Provider, ProviderCreate, ProviderUpdate } from "../types";
+import { useModelSelection } from "../../hooks";
// Local storage key for selected provider
const SELECTED_PROVIDER_STORAGE_KEY = "graphcap-selected-provider";
type ViewMode = "view" | "edit" | "create";
-type FormData = ProviderCreate | ProviderUpdate;
/**
* Type definition for the Inference Provider Context
@@ -47,29 +44,12 @@ type InferenceProviderContextType = {
providers: Provider[];
setProviders: (providers: Provider[]) => void;
- // Form state
- control: any;
- handleSubmit: any;
- errors: any;
- watch: any;
- providerName: string | undefined;
- reset: any;
-
// Model selection state
selectedModelId: string;
setSelectedModelId: (id: string) => void;
- providerModelsData: any;
- isLoadingModels: boolean;
- isModelsError: boolean;
- modelsError: any;
-
- // Form actions
handleModelSelect: () => void;
- isSubmitting: boolean;
- isCreating: boolean;
- // Form callbacks
- onSubmit: (data: FormData) => Promise
;
+ // Basic actions
onCancel: () => void;
};
@@ -86,29 +66,12 @@ const defaultContextValue: InferenceProviderContextType = {
providers: [],
setProviders: () => {},
- // Form state
- control: null,
- handleSubmit: () => ({}),
- errors: {},
- watch: () => undefined,
- providerName: undefined,
- reset: () => {},
-
// Model selection state
selectedModelId: "",
setSelectedModelId: () => {},
- providerModelsData: null,
- isLoadingModels: false,
- isModelsError: false,
- modelsError: null,
-
- // Form actions
handleModelSelect: () => {},
- isSubmitting: false,
- isCreating: false,
- // Form callbacks
- onSubmit: async () => Promise.resolve(),
+ // Basic actions
onCancel: () => {},
};
@@ -135,9 +98,6 @@ export function useInferenceProviderContext() {
return context;
}
-// For backward compatibility
-export const useProviderFormContext = useInferenceProviderContext;
-
/**
* Save provider to localStorage
* @param provider - The provider to save
@@ -176,11 +136,8 @@ const loadProviderFromStorage = (): Provider | null => {
*/
type InferenceProviderProviderProps = {
readonly children: ReactNode;
- readonly initialData?: Partial;
- readonly isCreating: boolean;
- readonly onSubmit: (data: FormData) => void;
- readonly onCancel: () => void;
- readonly isSubmitting: boolean;
+ readonly isCreating?: boolean;
+ readonly onCancel?: () => void;
readonly onModelSelect?: (providerName: string, modelId: string) => void;
readonly selectedProvider?: Provider | null;
readonly providers?: Provider[];
@@ -193,20 +150,16 @@ type InferenceProviderProviderProps = {
* available to all child components through the context. It handles:
*
* - Provider selection and management
- * - Form state and validation
* - Model selection
- * - Form submission and cancellation
+ * - Basic view actions
*
* @param props - The provider props
* @returns A context provider component
*/
export function InferenceProviderProvider({
children,
- initialData = {},
- isCreating,
- onSubmit: onSubmitProp,
- onCancel,
- isSubmitting,
+ isCreating = false,
+ onCancel = () => {},
onModelSelect,
selectedProvider: selectedProviderProp,
providers: providersProp = [],
@@ -223,79 +176,41 @@ export function InferenceProviderProvider({
// Update selected provider when prop changes
useEffect(() => {
- if (selectedProviderProp) {
+ if (selectedProviderProp && JSON.stringify(selectedProviderProp) !== JSON.stringify(selectedProvider)) {
setSelectedProvider(selectedProviderProp);
}
- }, [selectedProviderProp]);
+ }, [selectedProviderProp, selectedProvider]);
// Save selected provider to localStorage when it changes
useEffect(() => {
- saveProviderToStorage(selectedProvider);
+ if (selectedProvider) {
+ saveProviderToStorage(selectedProvider);
+ }
}, [selectedProvider]);
- // Update providers when prop changes
+ // Update providers when prop changes - only if we have providers and they're different
useEffect(() => {
- setProviders(providersProp);
- }, [providersProp]);
-
- // Use the form hook
- const {
- control,
- handleSubmit,
- errors,
- providerName,
- onSubmit: onSubmitForm,
- watch,
- reset,
- } = useProviderForm(initialData);
-
- // Reset form data when selected provider changes
- useEffect(() => {
- if (selectedProvider && mode !== "create") {
- reset({
- name: selectedProvider.name,
- kind: selectedProvider.kind,
- environment: selectedProvider.environment,
- baseUrl: selectedProvider.baseUrl,
- envVar: selectedProvider.envVar,
- isEnabled: selectedProvider.isEnabled,
- rateLimits: selectedProvider.rateLimits || {
- requestsPerMinute: 0,
- tokensPerMinute: 0,
- },
- });
- } else if (mode === "create") {
- reset(DEFAULT_PROVIDER_FORM_DATA);
+ const hasProviders = Array.isArray(providersProp) && providersProp.length > 0;
+ const providersChanged = JSON.stringify(providersProp) !== JSON.stringify(providers);
+
+ if (hasProviders && providersChanged) {
+ setProviders(providersProp);
}
- }, [selectedProvider, mode, reset]);
+ }, [providersProp, providers]);
- // Use the model selection hook with null check
+ // Use the model selection hook with selectedProvider
const {
selectedModelId,
setSelectedModelId,
- providerModelsData,
- isLoadingModels,
- isModelsError,
- modelsError,
handleModelSelect: handleModelSelectBase,
- } = useModelSelection(selectedProvider?.name ?? "", onModelSelect);
+ } = useModelSelection(selectedProvider, onModelSelect);
// Create a memoized version of handleModelSelect
const handleModelSelect = useCallback(() => {
- handleModelSelectBase();
- }, [handleModelSelectBase]);
-
- // Create a memoized version of onSubmit that calls both form and prop handlers
- const onSubmitHandler = useCallback(
- async (data: FormData) => {
- const result = await onSubmitForm(data, isCreating, selectedProvider?.id);
- if (result.success) {
- onSubmitProp(data);
- setMode("view");
- }
- },
- [onSubmitForm, onSubmitProp, setMode, isCreating, selectedProvider?.id],
- );
+ if (selectedProvider) {
+ handleModelSelectBase();
+ }
+ }, [handleModelSelectBase, selectedProvider]);
// Create a memoized version of onCancel that resets mode
const onCancelHandler = useCallback(() => {
@@ -317,51 +232,21 @@ export function InferenceProviderProvider({
providers,
setProviders,
- // Form state
- control,
- handleSubmit,
- errors,
- watch,
- providerName,
- reset,
-
// Model selection state
selectedModelId,
setSelectedModelId,
- providerModelsData,
- isLoadingModels,
- isModelsError,
- modelsError,
-
- // Form actions
handleModelSelect,
- isSubmitting,
- isCreating,
- // Form callbacks
- onSubmit: onSubmitHandler,
+ // Basic actions
onCancel: onCancelHandler,
}),
[
mode,
selectedProvider,
providers,
- control,
- handleSubmit,
- errors,
- watch,
- providerName,
- reset,
selectedModelId,
setSelectedModelId,
- providerModelsData,
- isLoadingModels,
- isModelsError,
- modelsError,
handleModelSelect,
- isSubmitting,
- isCreating,
- onSubmitHandler,
onCancelHandler,
],
);
@@ -372,6 +257,3 @@ export function InferenceProviderProvider({
);
}
-
-// For backward compatibility
-export const ProviderFormProvider = InferenceProviderProvider;
diff --git a/graphcap_studio/src/features/inference/providers/context/ProviderFormContext.tsx b/graphcap_studio/src/features/inference/providers/context/ProviderFormContext.tsx
new file mode 100644
index 00000000..5cce41e3
--- /dev/null
+++ b/graphcap_studio/src/features/inference/providers/context/ProviderFormContext.tsx
@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: Apache-2.0
+import type { ConnectionDetails, ErrorDetails, Provider, ProviderCreate, ProviderUpdate } from "@/types/provider-config-types";
+import { type ReactNode, createContext, useContext } from "react";
+import type { Control, FieldErrors, UseFormWatch } from "react-hook-form";
+
+// Simplified dialog state type
+type DialogType = null | "error" | "success" | "formError" | "save";
+
+interface ProviderFormContextType {
+ // Core state
+ provider: Provider | null;
+ mode: "view" | "edit" | "create";
+
+ // Form state
+ control: Control;
+ errors: FieldErrors;
+ watch: UseFormWatch;
+
+ // UI state
+ isSubmitting: boolean;
+ dialog: DialogType;
+ error: ErrorDetails | null;
+ connectionDetails: ConnectionDetails | null;
+
+ // Selected model state
+ selectedModelId: string | null;
+ providerModels: Array<{ id: string; name: string; is_default?: boolean }> | null;
+
+ // Actions
+ setProvider: (provider: Provider | null) => void;
+ setMode: (mode: "view" | "edit" | "create") => void;
+ setSelectedModelId: (id: string | null) => void;
+ openDialog: (type: DialogType, error?: ErrorDetails) => void;
+ closeDialog: () => void;
+
+ // Form actions
+ handleSubmit: (e?: React.BaseSyntheticEvent) => Promise;
+ cancelEdit: () => void;
+ testConnection: () => Promise;
+}
+
+const ProviderFormContext = createContext(undefined);
+
+export function useProviderFormContext() {
+ const context = useContext(ProviderFormContext);
+ if (context === undefined) {
+ throw new Error("useProviderFormContext must be used within a ProviderFormProvider");
+ }
+ return context;
+}
+
+interface ProviderFormProviderProps {
+ readonly children: ReactNode;
+ readonly value: ProviderFormContextType;
+}
+
+export function ProviderFormProvider({ children, value }: ProviderFormProviderProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/graphcap_studio/src/features/inference/providers/form/ConnectionSection.tsx b/graphcap_studio/src/features/inference/providers/form/ConnectionSection.tsx
deleted file mode 100644
index d424a855..00000000
--- a/graphcap_studio/src/features/inference/providers/form/ConnectionSection.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Switch } from "@/components/ui/buttons/Switch";
-import { useColorModeValue } from "@/components/ui/theme/color-mode";
-import { Box, Field, Input, Text, VStack } from "@chakra-ui/react";
-// SPDX-License-Identifier: Apache-2.0
-import { Controller } from "react-hook-form";
-import { useInferenceProviderContext } from "../context";
-
-/**
- * Component for displaying and editing provider connection settings
- */
-export function ConnectionSection() {
- const { control, errors, watch, isEditing } = useInferenceProviderContext();
- const labelColor = useColorModeValue("gray.600", "gray.300");
- const textColor = useColorModeValue("gray.700", "gray.200");
-
- // Watch form values for read-only display
- const baseUrl = watch("baseUrl");
- const envVar = watch("envVar");
- const isEnabled = watch("isEnabled");
-
- if (!isEditing) {
- return (
-
-
-
- Base URL
-
- {baseUrl}
-
-
-
-
- Environment Variable
-
- {envVar}
-
-
-
-
- Status
-
- {isEnabled ? "Enabled" : "Disabled"}
-
-
- );
- }
-
- return (
-
- (
-
- Base URL
-
- {errors.baseUrl?.message}
-
- )}
- />
-
- (
-
- Environment Variable
-
- {errors.envVar?.message}
-
- )}
- />
-
- (
-
-
-
- Enabled
-
-
-
- )}
- />
-
- );
-}
diff --git a/graphcap_studio/src/features/inference/providers/form/ModelSelector.tsx b/graphcap_studio/src/features/inference/providers/form/ModelSelector.tsx
deleted file mode 100644
index e535ee60..00000000
--- a/graphcap_studio/src/features/inference/providers/form/ModelSelector.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-import { Field } from "@/components/ui/field";
-import {
- SelectContent,
- SelectItem,
- SelectRoot,
- SelectTrigger,
- SelectValueText,
-} from "@/components/ui/select";
-import { useColorMode } from "@/components/ui/theme/color-mode";
-import { Box, Heading, Text, createListCollection } from "@chakra-ui/react";
-
-// Define the model item type for the select component
-export interface ModelItem {
- label: string;
- value: string;
-}
-
-export interface ModelSelectorProps {
- modelItems: ModelItem[];
- selectedModelId: string | null;
- setSelectedModelId: (id: string) => void;
-}
-
-/**
- * Component for selecting a model from a list
- */
-export function ModelSelector({
- modelItems,
- selectedModelId,
- setSelectedModelId,
-}: ModelSelectorProps) {
- const { colorMode } = useColorMode();
- const isDark = colorMode === "dark";
-
- const cardBg = isDark ? "gray.800" : "white";
- const borderColor = isDark ? "gray.700" : "gray.200";
- const headingColor = isDark ? "gray.100" : "gray.700";
- const labelColor = isDark ? "gray.300" : "gray.600";
-
- const modelCollection = createListCollection({
- items: modelItems,
- });
-
- // Convert selectedModelId to string array format
- const value = selectedModelId ? [selectedModelId] : [];
-
- return (
-
-
- Model
-
-
- Select a model to use with this provider
-
-
- setSelectedModelId(details.value[0])}
- >
-
-
-
-
- {modelItems.map((item: ModelItem) => (
-
- {item.label}
-
- ))}
-
-
-
-
- );
-}
diff --git a/graphcap_studio/src/features/inference/providers/form/ProviderSelect.tsx b/graphcap_studio/src/features/inference/providers/form/ProviderSelect.tsx
deleted file mode 100644
index d3124ee1..00000000
--- a/graphcap_studio/src/features/inference/providers/form/ProviderSelect.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-import {
- SelectContent,
- SelectItem,
- SelectRoot,
- SelectTrigger,
- SelectValueText,
-} from "@/components/ui/select";
-import { createListCollection } from "@chakra-ui/react";
-import { useInferenceProviderContext } from "../context";
-
-type ProviderSelectProps = {
- readonly className?: string;
- readonly "aria-label"?: string;
-};
-
-/**
- * Component for selecting a provider from a dropdown
- */
-export function ProviderSelect({
- className,
- "aria-label": ariaLabel = "Select Provider",
-}: ProviderSelectProps) {
- const { providers, selectedProvider, setSelectedProvider, setMode } =
- useInferenceProviderContext();
-
- const selectedProviderId = selectedProvider?.id ?? null;
-
- // Convert providers to the format expected by SelectRoot
- const providerItems = providers.map((provider) => ({
- label: provider.name,
- value: String(provider.id),
- }));
-
- const providerCollection = createListCollection({
- items: providerItems,
- });
-
- // Convert selectedProviderId to string array format
- const value = selectedProviderId ? [String(selectedProviderId)] : [];
-
- const handleProviderChange = (details: any) => {
- const id = Number(details.value[0]);
- const provider = providers.find((p) => p.id === id);
- if (provider) {
- setSelectedProvider(provider);
- setMode("view");
- }
- };
-
- return (
-
-
-
-
-
- {providerItems.map((item) => (
-
- {item.label}
-
- ))}
-
-
- );
-}
diff --git a/graphcap_studio/src/features/inference/providers/form/RateLimitsSection.tsx b/graphcap_studio/src/features/inference/providers/form/RateLimitsSection.tsx
deleted file mode 100644
index 0c6f8089..00000000
--- a/graphcap_studio/src/features/inference/providers/form/RateLimitsSection.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useColorModeValue } from "@/components/ui/theme/color-mode";
-import {
- Box,
- Field,
- Grid,
- GridItem,
- Input,
- Text,
- VStack,
-} from "@chakra-ui/react";
-// SPDX-License-Identifier: Apache-2.0
-import { ChangeEvent } from "react";
-import { Controller } from "react-hook-form";
-import { useInferenceProviderContext } from "../context";
-
-/**
- * Component for displaying and editing provider rate limits
- */
-export function RateLimitsSection() {
- const { control, errors, watch, isEditing } = useInferenceProviderContext();
- const labelColor = useColorModeValue("gray.600", "gray.300");
- const textColor = useColorModeValue("gray.700", "gray.200");
-
- // Watch form values for read-only display
- const rateLimits = watch("rateLimits");
-
- if (!isEditing) {
- return (
-
-
-
- Rate Limits
-
-
-
-
- Requests per minute
-
-
- {rateLimits?.requestsPerMinute ?? 0}
-
-
-
-
- Tokens per minute
-
- {rateLimits?.tokensPerMinute ?? 0}
-
-
-
-
- );
- }
-
- return (
-
-
-
- Rate Limits
-
-
-
- (
-
-
- Requests per minute
-
- ) =>
- onChange(parseInt(e.target.value) || 0)
- }
- min={0}
- />
-
- {errors.rateLimits?.requestsPerMinute?.message}
-
-
- )}
- />
-
-
-
- (
-
-
- Tokens per minute
-
- ) =>
- onChange(parseInt(e.target.value) || 0)
- }
- min={0}
- />
-
- {errors.rateLimits?.tokensPerMinute?.message}
-
-
- )}
- />
-
-
-
-
- );
-}
diff --git a/graphcap_studio/src/features/inference/providers/form/index.ts b/graphcap_studio/src/features/inference/providers/form/index.ts
deleted file mode 100644
index 74080701..00000000
--- a/graphcap_studio/src/features/inference/providers/form/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-export * from "./BasicInfoSection";
-export * from "./ConnectionSection";
-export * from "./RateLimitsSection";
-export * from "./EnvironmentSelect";
-export * from "./ProviderSelect";
-export * from "../../../../components/ui/status/StatusMessage";
-export * from "./ModelSelector";
-export * from "../../../../components/ui/buttons/ActionButton";
diff --git a/graphcap_studio/src/features/inference/providers/index.ts b/graphcap_studio/src/features/inference/providers/index.ts
index 351881e1..386cead9 100644
--- a/graphcap_studio/src/features/inference/providers/index.ts
+++ b/graphcap_studio/src/features/inference/providers/index.ts
@@ -1,10 +1,7 @@
// SPDX-License-Identifier: Apache-2.0
-export { default as ProviderForm } from "./ProviderForm";
-export { ProvidersPanel } from "./ProvidersPanel";
-export { default as ProvidersList } from "./ProvidersList";
-export { ModelSelectionSection } from "./ModelSelectionSection";
-export { FormFields } from "./FormFields";
-export { FormActions } from "./FormActions";
-export * from "../hooks";
-export * from "./context";
+export * from '@/types/provider-config-types';
+export * from './context';
+export * from './ProviderConnection';
+export * from './ProvidersPanel';
+
diff --git a/graphcap_studio/src/features/inference/providers/types.ts b/graphcap_studio/src/features/inference/providers/types.ts
deleted file mode 100644
index d6e2915f..00000000
--- a/graphcap_studio/src/features/inference/providers/types.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-/**
- * Provider Types
- *
- * Type definitions for provider-related data.
- */
-
-/**
- * Provider model
- */
-export interface ProviderModel {
- id: number;
- providerId: number;
- name: string;
- isEnabled: boolean;
- createdAt: string | Date;
- updatedAt: string | Date;
-}
-
-/**
- * Rate limits configuration
- */
-export interface RateLimits {
- id: number;
- providerId: number;
- requestsPerMinute?: number;
- tokensPerMinute?: number;
- createdAt: string | Date;
- updatedAt: string | Date;
-}
-
-/**
- * Provider configuration
- */
-export interface Provider {
- id: number;
- name: string;
- kind: string;
- environment: "cloud" | "local";
- envVar: string;
- baseUrl: string;
- apiKey?: string;
- isEnabled: boolean;
- createdAt: string | Date;
- updatedAt: string | Date;
- models?: ProviderModel[];
- rateLimits?: RateLimits;
-}
-
-/**
- * Provider creation payload
- */
-export interface ProviderCreate {
- name: string;
- kind: string;
- environment: "cloud" | "local";
- envVar: string;
- baseUrl: string;
- apiKey?: string;
- isEnabled?: boolean;
- models?: Array<{
- name: string;
- isEnabled?: boolean;
- }>;
- rateLimits?: {
- requestsPerMinute?: number;
- tokensPerMinute?: number;
- };
-}
-
-/**
- * Provider update payload
- */
-export interface ProviderUpdate {
- name?: string;
- kind?: string;
- environment?: "cloud" | "local";
- envVar?: string;
- baseUrl?: string;
- isEnabled?: boolean;
- models?: Array<{
- id?: number;
- name: string;
- isEnabled?: boolean;
- }>;
- rateLimits?: {
- requestsPerMinute?: number;
- tokensPerMinute?: number;
- };
-}
-
-/**
- * Provider API key update payload
- */
-export interface ProviderApiKey {
- apiKey: string;
-}
-
-/**
- * Success response
- */
-export interface SuccessResponse {
- success: boolean;
- message: string;
-}
-
-/**
- * Provider model info from GraphCap server
- */
-export interface ProviderModelInfo {
- id: string;
- name: string;
- is_default: boolean;
-}
-
-/**
- * Provider models response from GraphCap server
- */
-export interface ProviderModelsResponse {
- provider: string;
- models: ProviderModelInfo[];
-}
diff --git a/graphcap_studio/src/features/inference/services/providers.ts b/graphcap_studio/src/features/inference/services/providers.ts
index fd95a03e..9d5ce231 100644
--- a/graphcap_studio/src/features/inference/services/providers.ts
+++ b/graphcap_studio/src/features/inference/services/providers.ts
@@ -8,69 +8,32 @@
import { useServerConnectionsContext } from "@/context/ServerConnectionsContext";
import { SERVER_IDS } from "@/features/server-connections/constants";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { hc } from "hono/client";
-import type { AppType } from "../../../../../data_service/src/app"; // TODO: Refactor
+import {
+ createDataServiceClient,
+ createInferenceBridgeClient,
+} from "@/features/server-connections/services/apiClients";
import type {
Provider,
- ProviderApiKey,
ProviderCreate,
- ProviderModelsResponse,
ProviderUpdate,
- SuccessResponse,
-} from "../providers/types";
+ ServerProviderConfig,
+ SuccessResponse
+} from "@/types/provider-config-types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
// Query keys for TanStack Query
export const queryKeys = {
providers: ["providers"] as const,
- provider: (id: number) => [...queryKeys.providers, id] as const,
+ provider: (id: number) => ["providers", id] as const,
providerModels: (providerName: string) =>
- [...queryKeys.providers, "models", providerName] as const,
+ ["providers", "models", providerName] as const,
};
-// Define a more specific type for the client
-interface DataServiceClient {
- providers: {
- $get: () => Promise;
- $post: (options: { json: ProviderCreate }) => Promise;
- [":id"]: {
- $get: (options: { param: { id: string } }) => Promise;
- $put: (options: {
- param: { id: string };
- json: ProviderUpdate;
- }) => Promise;
- $delete: (options: { param: { id: string } }) => Promise;
- "api-key": {
- $put: (options: {
- param: { id: string };
- json: ProviderApiKey;
- }) => Promise;
- };
- };
- };
-}
-
-/**
- * Get the Data Service URL from server connections context
- */
-function getDataServiceUrl(connections: any[]): string {
- const dataServiceConnection = connections.find(
- (conn) => conn.id === SERVER_IDS.DATA_SERVICE,
- );
-
- return (
- dataServiceConnection?.url ||
- import.meta.env.VITE_DATA_SERVICE_URL ||
- "http://localhost:32550"
- );
-}
-
/**
- * Create a Hono client for the Data Service
+ * Extended Error interface with cause property
*/
-function createDataServiceClient(connections: any[]): DataServiceClient {
- const baseUrl = getDataServiceUrl(connections);
- return hc(`${baseUrl}/api/v1`) as DataServiceClient;
+interface ErrorWithCause extends Error {
+ cause?: unknown;
}
/**
@@ -143,7 +106,33 @@ export function useCreateProvider() {
});
if (!response.ok) {
- throw new Error(`Failed to create provider: ${response.status}`);
+ // Try to get detailed error information
+ try {
+ const errorData = await response.json();
+ console.error("Provider creation error:", errorData);
+
+ // Check if we have a structured error response
+ if (errorData.status === "error" || errorData.validationErrors) {
+ throw errorData;
+ }
+
+ // Simple error with a message
+ if (errorData.message) {
+ throw new Error(errorData.message);
+ }
+
+ // Fallback error
+ throw new Error(`Failed to create provider: ${response.status}`);
+ } catch (parseError) {
+ // If we can't parse the error as JSON, throw a general error
+ if (
+ parseError instanceof Error &&
+ parseError.message !== "Failed to create provider"
+ ) {
+ throw parseError;
+ }
+ throw new Error(`Failed to create provider: ${response.status}`);
+ }
}
return response.json() as Promise;
@@ -164,21 +153,30 @@ export function useUpdateProvider() {
return useMutation({
mutationFn: async ({ id, data }: { id: number; data: ProviderUpdate }) => {
+ console.log("Updating provider with data:", data);
+
+ const apiData = { ...data };
+
const client = createDataServiceClient(connections);
const response = await client.providers[":id"].$put({
param: { id: id.toString() },
- json: data,
+ json: apiData,
});
if (!response.ok) {
- throw new Error(`Failed to update provider: ${response.status}`);
+ const errorData = await response.json();
+ console.error("Provider update error:", errorData);
+ throw errorData;
}
return response.json() as Promise;
},
onSuccess: (data) => {
+ // Convert string ID to number for query invalidation
+ const numericId = typeof data.id === 'string' ? Number.parseInt(data.id, 10) : data.id;
+
// Invalidate specific provider query
- queryClient.invalidateQueries({ queryKey: queryKeys.provider(data.id) });
+ queryClient.invalidateQueries({ queryKey: queryKeys.provider(numericId) });
// Invalidate providers list
queryClient.invalidateQueries({ queryKey: queryKeys.providers });
},
@@ -215,73 +213,59 @@ export function useDeleteProvider() {
}
/**
- * Hook to update a provider's API key
+ * Hook to test provider connection
*/
-export function useUpdateProviderApiKey() {
- const queryClient = useQueryClient();
+export function useTestProviderConnection() {
const { connections } = useServerConnectionsContext();
return useMutation({
- mutationFn: async ({ id, apiKey }: { id: number; apiKey: string }) => {
- const client = createDataServiceClient(connections);
- const response = await client.providers[":id"]["api-key"].$put({
- param: { id: id.toString() },
- json: { apiKey } as ProviderApiKey,
+ mutationFn: async ({
+ providerName,
+ config,
+ }: { providerName: string; config: ServerProviderConfig }) => {
+ const client = createInferenceBridgeClient(connections);
+
+ console.log("Testing connection with config:", JSON.stringify(config));
+
+ const response = await client.providers[":provider_name"][
+ "test-connection"
+ ].$post({
+ param: { provider_name: providerName },
+ json: config,
});
if (!response.ok) {
- throw new Error(`Failed to update API key: ${response.status}`);
+ const errorData = await response.json();
+ console.error("Error response:", errorData);
+
+ if (errorData.status === "error" && errorData.details) {
+ const error = new Error(
+ errorData.message || "Connection test failed",
+ ) as ErrorWithCause;
+ error.cause = errorData;
+ throw error;
+ }
+
+ // Handle different error formats
+ if (errorData.detail) {
+ throw new Error(errorData.detail);
+ }
+
+ if (errorData.message) {
+ throw new Error(errorData.message);
+ }
+
+ if (typeof errorData === "object") {
+ const error = new Error("Connection test failed") as ErrorWithCause;
+ error.cause = errorData;
+ throw error;
+ }
+
+ // Fallback to simple error
+ throw new Error(`Connection test failed: ${response.status}`);
}
- return response.json() as Promise;
+ return response.json();
},
- onSuccess: (_, { id }) => {
- // Invalidate specific provider query
- queryClient.invalidateQueries({ queryKey: queryKeys.provider(id) });
- },
- });
-}
-
-/**
- * Get the GraphCap Server URL from server connections context
- */
-function getGraphCapServerUrl(connections: any[]): string {
- const graphcapServerConnection = connections.find(
- (conn) => conn.id === SERVER_IDS.GRAPHCAP_SERVER,
- );
-
- return (
- graphcapServerConnection?.url ||
- import.meta.env.VITE_GRAPHCAP_SERVER_URL ||
- "http://localhost:32100"
- );
-}
-
-/**
- * Hook to get available models for a provider from the GraphCap server
- */
-export function useProviderModels(providerName: string) {
- const { connections } = useServerConnectionsContext();
- const graphcapServerConnection = connections.find(
- (conn) => conn.id === SERVER_IDS.GRAPHCAP_SERVER,
- );
- const isConnected = graphcapServerConnection?.status === "connected";
-
- return useQuery({
- queryKey: queryKeys.providerModels(providerName),
- queryFn: async () => {
- const baseUrl = getGraphCapServerUrl(connections);
- const response = await fetch(
- `${baseUrl}/providers/${providerName}/models`,
- );
-
- if (!response.ok) {
- throw new Error(`Failed to fetch provider models: ${response.status}`);
- }
-
- return response.json() as Promise;
- },
- enabled: isConnected && !!providerName,
- staleTime: 1000 * 60 * 5, // 5 minutes
});
}
diff --git a/graphcap_studio/src/features/perspectives/README.md b/graphcap_studio/src/features/perspectives/README.md
index 0c30ae8b..d5f4313b 100644
--- a/graphcap_studio/src/features/perspectives/README.md
+++ b/graphcap_studio/src/features/perspectives/README.md
@@ -165,4 +165,3 @@ Custom hooks are provided for working with perspectives:
- **usePerspectives** - Fetches available perspectives from the server
- **useGeneratePerspectiveCaption** - Generates captions for images using perspectives
-- **useImagePerspectives** - Manages perspective data for a specific image
\ No newline at end of file
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveActions/PerspectivesFooter.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveActions/PerspectivesFooter.tsx
index 8435416d..b756cb30 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveActions/PerspectivesFooter.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveActions/PerspectivesFooter.tsx
@@ -6,27 +6,20 @@
*/
import { useColorModeValue } from "@/components/ui/theme/color-mode";
-import {
- GenerationOptionsButton,
- GenerationOptionsProvider,
- ProviderSelector,
-} from "@/features/inference/generation-options";
-import { DEFAULT_OPTIONS } from "@/features/inference/generation-options/schema";
import {
usePerspectiveUI,
usePerspectivesData,
} from "@/features/perspectives/context";
-import type { CaptionOptions } from "@/features/perspectives/types";
import {
Box,
Button,
Flex,
- HStack,
Icon,
- useBreakpointValue,
+ Text,
+ chakra,
} from "@chakra-ui/react";
-import { useCallback, useEffect } from "react";
-import { LuRefreshCw, LuSettings } from "react-icons/lu";
+import { useCallback, useEffect, useMemo } from "react";
+import { LuRefreshCw } from "react-icons/lu";
/**
* Helper function to determine button title text
@@ -64,10 +57,7 @@ export function PerspectivesFooter() {
generatePerspective,
isGenerating,
currentImage,
- captionOptions,
- setCaptionOptions,
- selectedProvider,
- handleProviderChange,
+ generationOptions,
} = usePerspectivesData();
// Use UI context
@@ -83,13 +73,19 @@ export function PerspectivesFooter() {
const bgColor = useColorModeValue("white", "gray.800");
const borderColor = useColorModeValue("gray.200", "gray.700");
-
- // Use responsive selector width based on screen size
- const selectorWidth = useBreakpointValue({
- base: "100%",
- sm: "12rem",
- md: "16rem",
- });
+ const infoTextColor = useColorModeValue("gray.600", "gray.400");
+
+ // Log information for debugging
+ console.log("GenerationOptions:", generationOptions);
+ console.log("Available providers:", availableProviders);
+
+ // Get provider information safely
+ const { providerName, modelName } = useMemo(() => {
+ return {
+ providerName: generationOptions.provider_name || "Select Provider",
+ modelName: generationOptions.model_name || "Select Model"
+ };
+ }, [generationOptions.provider_name, generationOptions.model_name]);
// Fetch providers on component mount
useEffect(() => {
@@ -109,7 +105,7 @@ export function PerspectivesFooter() {
return false;
}
- if (!selectedProvider) {
+ if (!generationOptions.provider_name) {
showMessage(
"No provider selected",
"Please select an inference provider",
@@ -128,21 +124,13 @@ export function PerspectivesFooter() {
}
return true;
- }, [activeSchemaName, selectedProvider, currentImage, showMessage]);
+ }, [activeSchemaName, generationOptions.provider_name, currentImage, showMessage]);
// Handle generate button click
const handleGenerate = useCallback(async () => {
console.log("Generate button clicked");
console.log("Active schema:", activeSchemaName);
- console.log("Selected provider:", selectedProvider);
-
- // Ensure we have valid options by applying defaults if needed
- const effectiveOptions =
- Object.keys(captionOptions).length === 0
- ? DEFAULT_OPTIONS
- : captionOptions;
-
- console.log("Using caption options:", effectiveOptions);
+ console.log("Generation options:", generationOptions);
if (!validateGeneration()) {
return;
@@ -150,12 +138,20 @@ export function PerspectivesFooter() {
try {
console.log("Calling generatePerspective...");
+ // Find the provider object from the available providers using provider_name
+ const providerObject = availableProviders.find(p => p.name === generationOptions.provider_name);
+
+ if (!providerObject) {
+ throw new Error(`Provider "${generationOptions.provider_name}" not found in available providers`);
+ }
+
await generatePerspective(
- activeSchemaName!,
- currentImage!.path,
- selectedProvider,
- effectiveOptions,
+ activeSchemaName as string,
+ currentImage?.path as string,
+ providerObject,
+ generationOptions
);
+
showMessage(
"Generation started",
`Generating ${activeSchemaName} perspective`,
@@ -171,9 +167,9 @@ export function PerspectivesFooter() {
}
}, [
activeSchemaName,
- selectedProvider,
+ availableProviders,
generatePerspective,
- captionOptions,
+ generationOptions,
showMessage,
currentImage,
validateGeneration,
@@ -184,37 +180,16 @@ export function PerspectivesFooter() {
// Check if button should be disabled
const isGenerateDisabled =
- isProcessing || !activeSchemaName || !selectedProvider;
+ isProcessing || !activeSchemaName || !generationOptions.provider_name;
// Get title for the generate button
const buttonTitle = getButtonTitle(
- selectedProvider,
+ generationOptions.provider_name,
activeSchemaName,
isProcessing,
isGenerated,
);
- // Handle options change
- const handleOptionsChange = useCallback(
- (newOptions: CaptionOptions) => {
- setCaptionOptions(newOptions);
- },
- [setCaptionOptions],
- );
-
- // Create a handler for the new ProviderSelector component
- const handleProviderSelection = useCallback(
- (provider: string) => {
- // Create a synthetic event to pass to the original handler
- const syntheticEvent = {
- target: { value: provider },
- } as React.ChangeEvent;
-
- handleProviderChange(syntheticEvent);
- },
- [handleProviderChange],
- );
-
return (
- {/* Provider Selection */}
- {availableProviders.length > 0 ? (
-
- ) : (
-
- )}
-
-
- {/* Options Button with Popover */}
-
-
-
- Options
-
- }
- size="sm"
- variant="ghost"
+ {/* Provider and Model Info */}
+
+ Using: {providerName} / {modelName}
+
+
+ {/* Generate/Regenerate Button */}
+
);
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveCardTabbed.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveCardTabbed.tsx
index c6453bdc..e4d6eac5 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveCardTabbed.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveCardTabbed.tsx
@@ -1,5 +1,6 @@
import { ClipboardButton } from "@/components/ui/buttons";
import { useColorModeValue } from "@/components/ui/theme/color-mode";
+import type { PerspectiveSchema } from "@/types/perspective-types";
// SPDX-License-Identifier: Apache-2.0
/**
* PerspectiveCardTabbed Component
@@ -8,7 +9,6 @@ import { useColorModeValue } from "@/components/ui/theme/color-mode";
* This component uses Chakra UI tabs for the tabbed interface.
*/
import { Box, Card, Stack, Tabs, Text } from "@chakra-ui/react";
-import type { PerspectiveSchema } from "../../../types";
import { PerspectiveDebug } from "./PerspectiveDebug";
import { SchemaView } from "./SchemaView";
import { CaptionRenderer } from "./schema-fields";
@@ -175,8 +175,9 @@ export function PerspectiveCardTabbed({
{/* Metadata - e.g., timestamps or version info */}
- {data?.metadata?.timestamp &&
- new Date(data.metadata.timestamp).toLocaleString()}
+ {data?.metadata?.generatedAt || data?.metadata?.timestamp ?
+ new Date(data?.metadata?.generatedAt || data?.metadata?.timestamp || '').toLocaleString() :
+ ''}
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveDebug.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveDebug.tsx
index 15f54073..6e7ad947 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveDebug.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/PerspectiveDebug.tsx
@@ -1,4 +1,5 @@
import { ClipboardButton } from "@/components/ui/buttons";
+import type { PerspectiveData, PerspectiveSchema } from "@/types";
import { Box, Stack } from "@chakra-ui/react";
// SPDX-License-Identifier: Apache-2.0
/**
@@ -8,7 +9,6 @@ import { Box, Stack } from "@chakra-ui/react";
* including its data, options, and metadata.
*/
import { useEffect } from "react";
-import type { PerspectiveData, PerspectiveSchema } from "../../../types";
import {
DataStatistics,
MetadataSection,
@@ -49,9 +49,7 @@ function processDebugInfo(
model: perspectiveData?.model,
version: perspectiveData?.version,
config_name: perspectiveData?.config_name ?? schema.name,
- generatedAt: data.metadata?.timestamp
- ? new Date(data.metadata.timestamp).toISOString()
- : null,
+ generatedAt: data.metadata?.generatedAt ?? null,
},
// Generation options - directly from the PerspectiveData interface
options: perspectiveData?.options || null,
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/SchemaView.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/SchemaView.tsx
index 34b72a5b..b0cbb982 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/SchemaView.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/SchemaView.tsx
@@ -5,13 +5,12 @@
* This component displays the schema information for a perspective.
*/
-import React from "react";
-import type { PerspectiveSchema } from "../../../types";
+import type { PerspectiveSchema } from "@/types";
import { SchemaFieldFactory } from "./schema-fields";
interface SchemaViewProps {
- schema: PerspectiveSchema;
- className?: string;
+ readonly schema: PerspectiveSchema;
+ readonly className?: string;
}
export function SchemaView({ schema, className = "" }: SchemaViewProps) {
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/debug-fields/MetadataSection.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/debug-fields/MetadataSection.tsx
index 143ddaee..13663e43 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/debug-fields/MetadataSection.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveCaption/PerspectiveCard/debug-fields/MetadataSection.tsx
@@ -77,6 +77,11 @@ function MetadataItem({
labelColor,
valueColor,
}: MetadataItemProps) {
+ // Format date if this is the Generated timestamp field
+ const formattedValue = label === "Generated:" && value
+ ? new Date(value).toLocaleString()
+ : value;
+
return (
@@ -84,7 +89,7 @@ function MetadataItem({
{value ? (
- {value}
+ {formattedValue}
) : (
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveFilterPanel.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveFilterPanel.tsx
deleted file mode 100644
index 177d6f2c..00000000
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveFilterPanel.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-/**
- * Perspective Filter Panel
- *
- * This component provides a UI for toggling the visibility of different perspectives.
- */
-
-import { Checkbox } from "@/components/ui/checkbox";
-import {
- Box,
- Button,
- Flex,
- HStack,
- Heading,
- Text,
- VStack,
-} from "@chakra-ui/react";
-import { useMemo } from "react";
-import { usePerspectivesData } from "../../context/PerspectivesDataContext";
-
-/**
- * Component for filtering which perspectives are visible in the UI
- */
-export function PerspectiveFilterPanel() {
- const {
- perspectives,
- hiddenPerspectives,
- togglePerspectiveVisibility,
- isPerspectiveVisible,
- setAllPerspectivesVisible,
- } = usePerspectivesData();
-
- // Count how many perspectives are visible/hidden
- const counts = useMemo(() => {
- const totalCount = perspectives.length;
- const hiddenCount = hiddenPerspectives.length;
- const visibleCount = totalCount - hiddenCount;
-
- return { totalCount, hiddenCount, visibleCount };
- }, [perspectives, hiddenPerspectives]);
-
- return (
-
-
-
- Perspective Visibility
-
- {counts.visibleCount} of {counts.totalCount} visible
-
-
-
-
-
-
- {perspectives.map((perspective) => (
- togglePerspectiveVisibility(perspective.name)}
- colorScheme="blue"
- size="sm"
- >
-
- {perspective.display_name || perspective.name}
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveModuleFilter.tsx b/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveModuleFilter.tsx
index 808298cc..762df226 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveModuleFilter.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/PerspectiveModuleFilter.tsx
@@ -170,7 +170,7 @@ export function PerspectiveModuleFilter({
alignItems="center"
justifyContent="center"
color={buttonColor}
- width="20px"
+ width="60px"
height="20px"
borderWidth="1px"
borderColor="currentColor"
@@ -178,7 +178,7 @@ export function PerspectiveModuleFilter({
ml={1}
_hover={{ bg: hoverBgColor }}
>
- →
+ View →
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/index.ts b/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/index.ts
index 2efe2459..e6565208 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/index.ts
+++ b/graphcap_studio/src/features/perspectives/components/PerspectiveManagement/index.ts
@@ -1,10 +1,10 @@
-export { ModuleList } from './PerspectiveModules/ModuleList';
-export { ModuleInfo } from './PerspectiveModules/ModuleInfo';
-export { NotFound } from './NotFound';
export { ErrorDisplay } from './ErrorDisplay';
export { LoadingDisplay } from './LoadingDisplay';
+export { NotFound } from './NotFound';
export { PerspectiveEditor } from './PerspectiveEditor/PerspectiveEditor';
-export { SchemaValidationError } from './SchemaValidationError';
-export { PerspectiveModuleFilter } from './PerspectiveModuleFilter';
export { PerspectiveManagementPanel } from './PerspectiveManagementPanel';
-export { PerspectiveFilterPanel } from './PerspectiveFilterPanel';
+export { PerspectiveModuleFilter } from './PerspectiveModuleFilter';
+export { ModuleInfo } from './PerspectiveModules/ModuleInfo';
+export { ModuleList } from './PerspectiveModules/ModuleList';
+export { SchemaValidationError } from './SchemaValidationError';
+
diff --git a/graphcap_studio/src/features/perspectives/components/PerspectivesErrorState.tsx b/graphcap_studio/src/features/perspectives/components/PerspectivesErrorState.tsx
index af12d179..908a091c 100644
--- a/graphcap_studio/src/features/perspectives/components/PerspectivesErrorState.tsx
+++ b/graphcap_studio/src/features/perspectives/components/PerspectivesErrorState.tsx
@@ -42,7 +42,7 @@ export function PerspectivesErrorState({
Server Connection Error
- Unable to connect to the GraphCap server. Please check your
+ Unable to connect to the Inference Bridge. Please check your
connection settings and try again.