chore: a mess of merging everything together

Author: NathanFlurry

frontend/apps/hub/ARCHITECTURE.md

@@ -0,0 +1,153 @@
+# Hub Architecture
+
+## Overview
+
+The Hub is a React/TypeScript dashboard application built with:
+- **TanStack Router** - File-based routing
+- **TanStack Query** - Server state management
+- **Jotai** - Complex client state
+- **React Context** - Global app state
+- **Tailwind CSS** - Styling
+
+## Directory Structure
+
+```
+src/
+├── domains/          # Feature domains
+│   └── {domain}/
+│       ├── components/   # Domain-specific components
+│       ├── queries/      # Query options & mutations
+│       ├── data/         # Context providers
+│       └── forms/        # Form schemas
+├── routes/          # Page components (file-based)
+├── components/      # Shared UI components
+├── queries/         # Global query setup
+├── hooks/           # Custom React hooks
+├── lib/             # Utilities
+└── app.tsx          # Root setup
+```
+
+## State Management
+
+### Server State (TanStack Query)
+```typescript
+// Query pattern: src/domains/{domain}/queries/query-options.ts
+export const actorLogsQueryOptions = ({ projectNameId, environmentNameId, actorId }) => 
+  queryOptions({
+    queryKey: ["project", projectNameId, "environment", environmentNameId, "actor", actorId, "logs"],
+    queryFn: async ({ signal }) => rivetClient.actors.logs.get(...),
+    meta: { watch: true }, // Enable real-time updates
+  });
+```
+
+### Client State (Jotai)
+Used for complex, modular state (e.g., actor management):
+```typescript
+// Atoms for fine-grained reactivity
+export const currentActorIdAtom = atom<string | undefined>(undefined);
+export const actorsAtom = atom<Actor[]>([]);
+```
+
+### Global State (React Context)
+```typescript
+// Context for app-wide concerns
+AuthContext      // User authentication
+ProjectContext   // Current project
+EnvironmentContext // Current environment
+```
+
+## Query Patterns
+
+### Standard Query
+```typescript
+const { data } = useQuery(projectQueryOptions(projectId));
+```
+
+### Infinite Query
+```typescript
+const { data, fetchNextPage } = useInfiniteQuery(
+  projectActorsQueryOptions({ projectNameId, environmentNameId })
+);
+```
+
+### Mutations
+```typescript
+const mutation = useMutation({
+  mutationFn: (data) => rivetClient.actors.destroy(data),
+  onSuccess: () => queryClient.invalidateQueries(...)
+});
+```
+
+### Real-time Updates
+Queries with `watchIndex` parameter automatically refetch when server data changes:
+```typescript
+queryFn: ({ meta }) => api.call({ 
+  watchIndex: getMetaWatchIndex(meta) 
+})
+```
+
+## Key Conventions
+
+### Query Keys
+Hierarchical structure matching API resources:
+```typescript
+["project", projectId, "environment", envId, "actor", actorId, "logs"]
+```
+
+### File Naming
+- Query options: `query-options.ts`
+- Mutations: `mutations.ts`
+- Context: `{resource}-context.tsx`
+- Components: `{feature}-{component}.tsx`
+
+### Import Aliases
+```typescript
+@/domains     // Domain logic
+@/components  // Shared components
+@/queries     // Query utilities
+@/hooks       // Custom hooks
+@/lib         // Utilities
+```
+
+## API Integration
+
+- **rivetClient**: Main API client (`@rivet-gg/api-full`)
+- **rivetEeClient**: Enterprise API (`@rivet-gg/api-ee`)
+- Auto token refresh on expiration
+- Request deduplication & caching
+
+## Example: Adding a New Feature
+
+1. **Create query options**:
+   ```typescript
+   // src/domains/project/queries/feature/query-options.ts
+   export const featureQueryOptions = (id: string) => queryOptions({
+     queryKey: ["feature", id],
+     queryFn: () => rivetClient.feature.get(id),
+   });
+   ```
+
+2. **Create mutations**:
+   ```typescript
+   // src/domains/project/queries/feature/mutations.ts
+   export const useCreateFeatureMutation = () => useMutation({
+     mutationFn: (data) => rivetClient.feature.create(data),
+   });
+   ```
+
+3. **Create route**:
+   ```typescript
+   // src/routes/.../feature.tsx
+   export const Route = createFileRoute('...')({
+     component: FeaturePage,
+   });
+   ```
+
+4. **Use in component**:
+   ```typescript
+   function FeaturePage() {
+     const { data } = useQuery(featureQueryOptions(id));
+     const mutation = useCreateFeatureMutation();
+     // ...
+   }
+   ```

frontend/apps/hub/src/domains/project/queries/actors/query-options.ts

@@ -225,9 +225,13 @@ export const actorLogsQueryOptions = (
 				{
 					project,
 					environment,
-					actorIdsJson: JSON.stringify([actorId]),
+					queryJson: JSON.stringify({
+						string_equal: {
+							property: "actor_id",
+							value: actorId,
+						},
+					}),
 					watchIndex: getMetaWatchIndex(meta),
-					stream: "all",
 				},
 				{ abortSignal },
 			);
@@ -313,21 +317,21 @@ export const actorMetricsQueryOptions = (
 				response.metricNames.forEach((metricName, index) => {
 					const metricValues = response.metricValues[index];
 					const attributes = response.metricAttributes[index] || {};
-					
+
 					// Create the metric key based on the metric name and attributes
 					let metricKey = metricName;
-					
+
 					// Handle specific attribute mappings to match UI expectations
 					if (attributes.failure_type && attributes.scope) {
 						metricKey = `memory_failures_${attributes.failure_type}_${attributes.scope}`;
 					} else if (attributes.tcp_state) {
-						if (metricName.includes('tcp6')) {
+						if (metricName.includes("tcp6")) {
 							metricKey = `network_tcp6_usage_${attributes.tcp_state}`;
 						} else {
 							metricKey = `network_tcp_usage_${attributes.tcp_state}`;
 						}
 					} else if (attributes.udp_state) {
-						if (metricName.includes('udp6')) {
+						if (metricName.includes("udp6")) {
 							metricKey = `network_udp6_usage_${attributes.udp_state}`;
 						} else {
 							metricKey = `network_udp_usage_${attributes.udp_state}`;
@@ -336,20 +340,26 @@ export const actorMetricsQueryOptions = (
 						metricKey = `tasks_state_${attributes.state}`;
 					} else if (attributes.interface) {
 						// Handle network interface attributes
-						const baseMetric = metricName.replace(/^container_/, '');
+						const baseMetric = metricName.replace(
+							/^container_/,
+							"",
+						);
 						metricKey = `${baseMetric}_${attributes.interface}`;
 					} else if (attributes.device) {
 						// Handle filesystem device attributes
-						const baseMetric = metricName.replace(/^container_/, '');
+						const baseMetric = metricName.replace(
+							/^container_/,
+							"",
+						);
 						metricKey = `${baseMetric}_${attributes.device}`;
 					} else {
 						// Remove "container_" prefix to match UI expectations
-						metricKey = metricName.replace(/^container_/, '');
+						metricKey = metricName.replace(/^container_/, "");
 					}
-					
+
 					// Store raw time series data for rate calculations
 					rawData[metricKey] = metricValues || [];
-					
+
 					if (metricValues && metricValues.length > 0) {
 						// Get the latest non-zero value (last value is often 0)
 						let value = null;
@@ -684,36 +694,67 @@ export const logsAggregatedQueryOptions = ({
 			client,
 			queryKey: [_, project, __, environment, ___, search],
 		}) => {
-			const actors = await client.fetchInfiniteQuery({
-				...projectActorsQueryOptions({
-					projectNameId: project,
-					environmentNameId: environment,
-					includeDestroyed: true,
-					tags: {},
-				}),
-				pages: 10,
-			});
-
-			const allActors = actors.pages.flatMap((page) => page.actors || []);
-
-			const actorsMap = new Map<string, Rivet.actors.Actor>();
-			for (const actor of allActors) {
-				actorsMap.set(actor.id, actor);
+			let query = {};
+			if (search?.text) {
+				if (search.enableRegex) {
+					query = {
+						string_match_regex: {
+							property: "message",
+							pattern: search.enableRegex,
+							case_insensitive: !search.enableRegex,
+						},
+					};
+				} else {
+					query = {
+						string_contains: {
+							property: "message",
+							pattern: search.enableRegex,
+							case_insensitive: !search.enableRegex,
+						},
+					};
+				}
 			}
 
 			const logs = await rivetClient.actors.logs.get(
 				{
-					stream: "all",
 					project,
 					environment,
-					searchText: search?.text,
-					searchCaseSensitive: search?.caseSensitive,
-					searchEnableRegex: search?.enableRegex,
-					actorIdsJson: JSON.stringify(allActors.map((a) => a.id)),
+					queryJson: query ? JSON.stringify(query) : undefined,
 				},
 				{ abortSignal },
 			);
 
+			// Fetch all actors that appear in the logs
+			const actorsMap = new Map<string, Rivet.actors.Actor>();
+			
+			// Get unique actor IDs from logs
+			const uniqueActorIds = [...new Set(logs.actorIds)];
+			
+			// Fetch actor details in parallel
+			const actorPromises = uniqueActorIds.map(async (actorId) => {
+				try {
+					const response = await rivetClient.actors.get(
+						actorId,
+						{ project, environment },
+						{ abortSignal }
+					);
+					return response.actor;
+				} catch (error) {
+					// If actor not found or error, return null
+					console.warn(`Failed to fetch actor ${actorId}:`, error);
+					return null;
+				}
+			});
+			
+			const actors = await Promise.all(actorPromises);
+			
+			// Populate the actors map
+			for (const actor of actors) {
+				if (actor) {
+					actorsMap.set(actor.id, actor);
+				}
+			}
+
 			const parsed = logs.lines.map((line, idx) => {
 				const actorIdx = logs.actorIndices[idx];
 				const actorId = logs.actorIds[actorIdx];

packages/common/clickhouse-user-query/examples/case_sensitivity_demo.rs

@@ -17,9 +17,9 @@ fn main() {
 		property: "username".to_string(),
 		map_key: None,
 		value: "JohnDoe".to_string(),
-		case_sensitive: true,
+		case_insensitive: false,
 	};
-	let builder1 = UserDefinedQueryBuilder::new(&schema, &query1).unwrap();
+	let builder1 = UserDefinedQueryBuilder::new(&schema, Some(&query1)).unwrap();
 	println!("   Query: {}", builder1.where_expr());
 	println!("   -> Will match: 'JohnDoe'");
 	println!("   -> Won't match: 'johndoe', 'JOHNDOE'\n");
@@ -30,9 +30,9 @@ fn main() {
 		property: "username".to_string(),
 		map_key: None,
 		value: "JohnDoe".to_string(),
-		case_sensitive: false,
+		case_insensitive: true,
 	};
-	let builder2 = UserDefinedQueryBuilder::new(&schema, &query2).unwrap();
+	let builder2 = UserDefinedQueryBuilder::new(&schema, Some(&query2)).unwrap();
 	println!("   Query: {}", builder2.where_expr());
 	println!("   -> Will match: 'JohnDoe', 'johndoe', 'JOHNDOE', 'jOhNdOe'\n");
 
@@ -42,9 +42,9 @@ fn main() {
 		property: "email".to_string(),
 		map_key: None,
 		pattern: "^[A-Z].*@example\\.com$".to_string(),
-		case_sensitive: true,
+		case_insensitive: false,
 	};
-	let builder3 = UserDefinedQueryBuilder::new(&schema, &query3).unwrap();
+	let builder3 = UserDefinedQueryBuilder::new(&schema, Some(&query3)).unwrap();
 	println!("   Query: {}", builder3.where_expr());
 	println!("   Pattern: ^[A-Z].*@example\\.com$");
 	println!("   -> Will match: '[email protected]'");
@@ -56,9 +56,9 @@ fn main() {
 		property: "email".to_string(),
 		map_key: None,
 		pattern: "admin|support".to_string(),
-		case_sensitive: false,
+		case_insensitive: true,
 	};
-	let builder4 = UserDefinedQueryBuilder::new(&schema, &query4).unwrap();
+	let builder4 = UserDefinedQueryBuilder::new(&schema, Some(&query4)).unwrap();
 	println!("   Query: {}", builder4.where_expr());
 	println!("   Pattern: admin|support (with (?i) prefix)");
 	println!("   -> Will match: '[email protected]', '[email protected]', '[email protected]'\n");
@@ -69,9 +69,9 @@ fn main() {
 		property: "username".to_string(),
 		map_key: None,
 		values: vec!["Admin".to_string(), "Support".to_string()],
-		case_sensitive: false,
+		case_insensitive: true,
 	};
-	let builder5 = UserDefinedQueryBuilder::new(&schema, &query5).unwrap();
+	let builder5 = UserDefinedQueryBuilder::new(&schema, Some(&query5)).unwrap();
 	println!("   Query: {}", builder5.where_expr());
 	println!("   -> Will match: 'admin', 'ADMIN', 'support', 'SUPPORT'\n");
 
@@ -83,17 +83,17 @@ fn main() {
 				property: "username".to_string(),
 				map_key: None,
 				value: "Admin".to_string(),
-				case_sensitive: false, // Case-insensitive username
+				case_insensitive: true, // Case-insensitive username
 			},
 			QueryExpr::StringMatchRegex {
 				property: "tags".to_string(),
 				map_key: Some("role".to_string()),
 				pattern: "^(Admin|Manager)$".to_string(),
-				case_sensitive: true, // Case-sensitive role
+				case_insensitive: false, // Case-sensitive role
 			},
 		],
 	};
-	let builder6 = UserDefinedQueryBuilder::new(&schema, &query6).unwrap();
+	let builder6 = UserDefinedQueryBuilder::new(&schema, Some(&query6)).unwrap();
 	println!("   Query: {}", builder6.where_expr());
 	println!("   -> Username matches 'admin' (any case)");
 	println!("   -> Role must be exactly 'Admin' or 'Manager' (case-sensitive)");