insforge 1.2.10 → 1.4.8

package/frontend/src/features/functions/{page → pages}/SecretsPage.tsx

@@ -1,116 +1,118 @@
-import { useState } from 'react';
-import { Button, Input, Skeleton, SearchInput, ConfirmDialog } from '@/components';
-import { SecretRow } from '../components/SecretRow';
-import SecretEmptyState from '../components/SecretEmptyState';
-import { useSecrets } from '@/features/functions/hooks/useSecrets';
-
-export default function SecretsPage() {
-  const [newSecretKey, setNewSecretKey] = useState('');
-  const [newSecretValue, setNewSecretValue] = useState('');
-
-  const {
-    filteredSecrets,
-    searchQuery,
-    setSearchQuery,
-    isLoading: loading,
-    createSecret,
-    deleteSecret,
-    confirmDialogProps,
-  } = useSecrets();
-
-  const handleSaveNewSecret = async () => {
-    const success = await createSecret(newSecretKey, newSecretValue);
-    if (success) {
-      setNewSecretKey('');
-      setNewSecretValue('');
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col overflow-hidden">
-      <div className="flex flex-col gap-6 p-4">
-        {/* Header */}
-        <p className="h-7 text-xl text-zinc-950 dark:text-white">Secrets</p>
-
-        {/* Add New Secret Portal */}
-        <div className="bg-white dark:bg-[#333333] rounded-[8px]">
-          <div className="p-6 border-b border-gray-200 dark:border-neutral-700">
-            <p className="text-base text-zinc-950 dark:text-white">Add New Secret</p>
-          </div>
-          <div className="p-6 flex gap-6 items-end">
-            <div className="flex-1">
-              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Key</label>
-              <Input
-                placeholder="e.g CLIENT_KEY"
-                value={newSecretKey}
-                onChange={(e) => setNewSecretKey(e.target.value)}
-                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
-              />
-            </div>
-            <div className="flex-1">
-              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Value</label>
-              <Input
-                placeholder="e.g 1234567890"
-                type="text"
-                value={newSecretValue}
-                onChange={(e) => setNewSecretValue(e.target.value)}
-                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
-              />
-            </div>
-            <Button
-              onClick={() => void handleSaveNewSecret()}
-              className="bg-black hover:bg-zinc-800 dark:bg-emerald-300 dark:hover:bg-emerald-400 dark:text-black text-white px-3 py-2 w-20 h-9 rounded"
-              disabled={!newSecretKey.trim() || !newSecretValue.trim()}
-            >
-              Save
-            </Button>
-          </div>
-        </div>
-
-        {/* Search Bar */}
-        <SearchInput
-          placeholder="Search secret"
-          value={searchQuery}
-          onChange={setSearchQuery}
-          className="max-w-70 dark:bg-neutral-900 dark:border-neutral-700"
-        />
-
-        {/* Secrets Table */}
-        <div className="flex flex-col gap-2">
-          {/* Table Header */}
-          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
-            <div className="col-span-8 py-1 px-3">Name</div>
-            {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
-            <div className="col-span-3 py-1 px-3">Updated at</div>
-            <div className="col-span-1 py-1 px-3" />
-          </div>
-
-          {loading ? (
-            <>
-              {[...Array(4)].map((_, i) => (
-                <Skeleton key={i} className="h-14 rounded-[8px] cols-span-full" />
-              ))}
-            </>
-          ) : filteredSecrets.length >= 1 ? (
-            <>
-              {filteredSecrets.map((secret) => (
-                <SecretRow
-                  key={secret.id}
-                  secret={secret}
-                  onDelete={() => void deleteSecret(secret)}
-                  className="cols-span-full"
-                />
-              ))}
-            </>
-          ) : (
-            <div className="cols-span-full">
-              <SecretEmptyState searchQuery={searchQuery} />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <ConfirmDialog {...confirmDialogProps} />
-    </div>
-  );
-}
+import { useState } from 'react';
+import { Button, Input, Skeleton, SearchInput, ConfirmDialog } from '@/components';
+import { SecretRow } from '../components/SecretRow';
+import SecretEmptyState from '../components/SecretEmptyState';
+import { useSecrets } from '@/features/functions/hooks/useSecrets';
+
+export default function SecretsPage() {
+  const [newSecretKey, setNewSecretKey] = useState('');
+  const [newSecretValue, setNewSecretValue] = useState('');
+
+  const {
+    filteredSecrets,
+    searchQuery,
+    setSearchQuery,
+    isLoading: loading,
+    createSecret,
+    deleteSecret,
+    confirmDialogProps,
+  } = useSecrets();
+
+  const handleSaveNewSecret = async () => {
+    const success = await createSecret(newSecretKey, newSecretValue);
+    if (success) {
+      setNewSecretKey('');
+      setNewSecretValue('');
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className="flex flex-col gap-6 p-4">
+        {/* Header */}
+        <p className="h-7 text-xl text-zinc-950 dark:text-white">Secrets</p>
+
+        {/* Add New Secret Portal */}
+        <div className="bg-white dark:bg-[#333333] rounded-[8px]">
+          <div className="p-6 border-b border-gray-200 dark:border-neutral-700">
+            <p className="text-base text-zinc-950 dark:text-white">Add New Secret</p>
+          </div>
+          <div className="p-6 flex gap-6 items-end">
+            <div className="flex-1">
+              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Key</label>
+              <Input
+                placeholder="e.g CLIENT_KEY"
+                value={newSecretKey}
+                onChange={(e) => setNewSecretKey(e.target.value)}
+                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
+              />
+            </div>
+            <div className="flex-1">
+              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Value</label>
+              <Input
+                placeholder="e.g 1234567890"
+                type="text"
+                value={newSecretValue}
+                onChange={(e) => setNewSecretValue(e.target.value)}
+                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
+              />
+            </div>
+            <Button
+              onClick={() => void handleSaveNewSecret()}
+              className="bg-black hover:bg-zinc-800 dark:bg-emerald-300 dark:hover:bg-emerald-400 dark:text-black text-white px-3 py-2 w-20 h-9 rounded"
+              disabled={!newSecretKey.trim() || !newSecretValue.trim()}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <SearchInput
+          placeholder="Search secret"
+          value={searchQuery}
+          onChange={setSearchQuery}
+          className="max-w-70 dark:bg-neutral-900 dark:border-neutral-700"
+        />
+
+        {/* Secrets Table Header */}
+        <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+          <div className="col-span-8 py-1 px-3">Name</div>
+          {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
+          <div className="col-span-3 py-1 px-3">Updated at</div>
+          <div className="col-span-1 py-1 px-3" />
+        </div>
+      </div>
+
+      {/* Scrollable Table Body */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+        <div className="flex flex-col gap-2">
+          {loading ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px] cols-span-full" />
+              ))}
+            </>
+          ) : filteredSecrets.length >= 1 ? (
+            <>
+              {filteredSecrets.map((secret) => (
+                <SecretRow
+                  key={secret.id}
+                  secret={secret}
+                  onDelete={() => void deleteSecret(secret)}
+                  className="cols-span-full"
+                />
+              ))}
+            </>
+          ) : (
+            <div className="cols-span-full">
+              <SecretEmptyState searchQuery={searchQuery} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <ConfirmDialog {...confirmDialogProps} />
+    </div>
+  );
+}

package/frontend/src/features/functions/services/function.service.ts

@@ -1,40 +1,23 @@
 import { apiClient } from '@/lib/api/client';
-
-export interface EdgeFunction {
-  id: string;
-  slug: string;
-  name: string;
-  description?: string;
-  code?: string;
-  status: 'draft' | 'active' | 'error';
-  created_at: string;
-  updated_at: string;
-  deployed_at?: string;
-}
-
-export interface FunctionsResponse {
-  functions: EdgeFunction[];
-  runtime: {
-    status: 'running' | 'unavailable';
-  };
-}
+import { FunctionSchema, ListFunctionsResponse } from '@insforge/shared-schemas';
 
 export class FunctionService {
-  async listFunctions(): Promise<FunctionsResponse> {
-    const data = await apiClient.request('/functions', {
+  async listFunctions(): Promise<ListFunctionsResponse> {
+    const response: ListFunctionsResponse = await apiClient.request('/functions', {
       headers: apiClient.withAccessToken(),
     });
 
     return {
-      functions: Array.isArray(data.functions) ? data.functions : [],
-      runtime: data.runtime || { status: 'unavailable' },
+      functions: Array.isArray(response.functions) ? response.functions : [],
+      runtime: response.runtime || { status: 'unavailable' },
     };
   }
 
-  async getFunctionBySlug(slug: string): Promise<EdgeFunction> {
-    return apiClient.request(`/functions/${slug}`, {
+  async getFunctionBySlug(slug: string): Promise<FunctionSchema> {
+    const response: FunctionSchema = await apiClient.request(`/functions/${slug}`, {
       headers: apiClient.withAccessToken(),
     });
+    return response;
   }
 
   async deleteFunction(slug: string): Promise<void> {

package/frontend/src/features/functions/services/secret.service.ts

@@ -1,56 +1,38 @@
 import { apiClient } from '@/lib/api/client';
-
-export interface Secret {
-  id: string;
-  key: string;
-  isActive: boolean;
-  isReserved: boolean;
-  lastUsedAt: string | null;
-  expiresAt: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface CreateSecretInput {
-  key: string;
-  value: string;
-}
-
-export interface SecretsListResponse {
-  secrets: Secret[];
-}
-
-export interface SecretValueResponse {
-  key: string;
-  value: string;
-}
+import {
+  SecretSchema,
+  CreateSecretRequest,
+  CreateSecretResponse,
+  ListSecretsResponse,
+  DeleteSecretResponse,
+} from '@insforge/shared-schemas';
 
 export class SecretService {
-  async listSecrets(): Promise<Secret[]> {
+  async listSecrets(): Promise<SecretSchema[]> {
     const data = (await apiClient.request('/secrets', {
       headers: apiClient.withAccessToken(),
-    })) as SecretsListResponse;
-    return data.secrets || [];
+    })) as ListSecretsResponse;
+    return data.secrets as SecretSchema[];
   }
 
-  async createSecret(
-    input: CreateSecretInput
-  ): Promise<{ success: boolean; message: string; id?: string }> {
-    return apiClient.request('/secrets', {
+  async createSecret(input: CreateSecretRequest): Promise<CreateSecretResponse> {
+    const response: CreateSecretResponse = await apiClient.request('/secrets', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...apiClient.withAccessToken(),
-      },
+      headers: apiClient.withAccessToken(),
       body: JSON.stringify(input),
     });
+    return response;
   }
 
-  async deleteSecret(key: string): Promise<{ success: boolean; message: string }> {
-    return apiClient.request(`/secrets/${encodeURIComponent(key)}`, {
-      method: 'DELETE',
-      headers: apiClient.withAccessToken(),
-    });
+  async deleteSecret(key: string): Promise<DeleteSecretResponse> {
+    const response: DeleteSecretResponse = await apiClient.request(
+      `/secrets/${encodeURIComponent(key)}`,
+      {
+        method: 'DELETE',
+        headers: apiClient.withAccessToken(),
+      }
+    );
+    return response;
   }
 }
 

package/frontend/src/features/login/{page → pages}/CloudLoginPage.tsx

@@ -1,118 +1,125 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { LockIcon } from 'lucide-react';
-import { useAuth } from '@/lib/contexts/AuthContext';
-import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
-import { usePartnerOrigin } from '../hooks/usePartnerOrigin';
-
-export default function CloudLoginPage() {
-  const navigate = useNavigate();
-  const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
-  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
-  const { isPartnerOrigin } = usePartnerOrigin();
-  const [authError, setAuthError] = useState<string | null>(null);
-
-  // Handle authorization code from postMessage
-  const onAuthorizationCodeReceived = useCallback(
-    async (event: MessageEvent) => {
-      try {
-        // Validate origin - allow insforge.dev, *.insforge.dev, and partner domains
-        const isInsforgeOrigin =
-          event.origin.endsWith('.insforge.dev') || event.origin === 'https://insforge.dev';
-
-        if (!isInsforgeOrigin) {
-          const isPartner = await isPartnerOrigin(event.origin);
-          if (!isPartner) {
-            console.warn('Received message from unauthorized origin:', event.origin);
-            return;
-          }
-        }
-
-        const authorizationCode = event.data.code;
-
-        setAuthError(null);
-        // Exchange the authorization code for an access token
-        const success = await loginWithAuthorizationCode(authorizationCode);
-        if (success) {
-          // Notify parent of success
-          postMessageToParent(
-            {
-              type: 'AUTH_SUCCESS',
-            },
-            event.origin
-          );
-        } else {
-          setAuthError('The authorization code may have expired or already been used.');
-          postMessageToParent(
-            {
-              type: 'AUTH_ERROR',
-              message: 'Authorization code validation failed',
-            },
-            event.origin
-          );
-        }
-      } catch (error) {
-        console.error('Authorization code exchange failed:', error);
-        setAuthError('The authorization code may have expired or already been used.');
-        postMessageToParent(
-          {
-            type: 'AUTH_ERROR',
-            message: 'Authorization code validation failed',
-          },
-          event.origin
-        );
-      }
-    },
-    [loginWithAuthorizationCode, isPartnerOrigin]
-  );
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === 'AUTHORIZATION_CODE' && event.data?.code) {
-        void onAuthorizationCodeReceived(event);
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, [onAuthorizationCodeReceived]);
-
-  useEffect(() => {
-    if (isAuthenticated && !isMcpUsageLoading) {
-      if (!hasCompletedOnboarding) {
-        postMessageToParent({ type: 'SHOW_ONBOARDING_OVERLAY' });
-      }
-      void navigate('/dashboard', { replace: true });
-    }
-  }, [hasCompletedOnboarding, isAuthenticated, isMcpUsageLoading, navigate]);
-
-  // Show error state if authentication failed
-  if (authError) {
-    return (
-      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
-        <div className="text-center text-white">
-          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
-          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
-          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Show authenticating state
-  return (
-    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
-      <div className="text-center">
-        <div className="animate-spin mb-4">
-          <LockIcon className="h-12 w-12 text-white mx-auto" />
-        </div>
-        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
-        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
-      </div>
-    </div>
-  );
-}
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LockIcon } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { usePartnerOrigin } from '../hooks/usePartnerOrigin';
+import { useModal } from '@/lib/hooks/useModal';
+
+export default function CloudLoginPage() {
+  const navigate = useNavigate();
+  const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
+  const { hasCompletedOnboarding, isLoading: isMcpUsageLoading } = useMcpUsage();
+  const { isPartnerOrigin } = usePartnerOrigin();
+  const [authError, setAuthError] = useState<string | null>(null);
+  const { setOnboardingModalOpen } = useModal();
+  // Handle authorization code from postMessage
+  const onAuthorizationCodeReceived = useCallback(
+    async (event: MessageEvent) => {
+      try {
+        // Validate origin - allow insforge.dev, *.insforge.dev, and partner domains
+        const isInsforgeOrigin =
+          event.origin.endsWith('.insforge.dev') || event.origin === 'https://insforge.dev';
+
+        if (!isInsforgeOrigin) {
+          const isPartner = await isPartnerOrigin(event.origin);
+          if (!isPartner) {
+            console.warn('Received message from unauthorized origin:', event.origin);
+            return;
+          }
+        }
+
+        const authorizationCode = event.data.code;
+
+        setAuthError(null);
+        // Exchange the authorization code for an access token
+        const success = await loginWithAuthorizationCode(authorizationCode);
+        if (success) {
+          // Notify parent of success
+          postMessageToParent(
+            {
+              type: 'AUTH_SUCCESS',
+            },
+            event.origin
+          );
+        } else {
+          setAuthError('The authorization code may have expired or already been used.');
+          postMessageToParent(
+            {
+              type: 'AUTH_ERROR',
+              message: 'Authorization code validation failed',
+            },
+            event.origin
+          );
+        }
+      } catch (error) {
+        console.error('Authorization code exchange failed:', error);
+        setAuthError('The authorization code may have expired or already been used.');
+        postMessageToParent(
+          {
+            type: 'AUTH_ERROR',
+            message: 'Authorization code validation failed',
+          },
+          event.origin
+        );
+      }
+    },
+    [loginWithAuthorizationCode, isPartnerOrigin]
+  );
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'AUTHORIZATION_CODE' && event.data?.code) {
+        void onAuthorizationCodeReceived(event);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [onAuthorizationCodeReceived]);
+
+  useEffect(() => {
+    if (isAuthenticated && !isMcpUsageLoading) {
+      if (!hasCompletedOnboarding) {
+        setOnboardingModalOpen(true);
+      }
+      void navigate('/dashboard', { replace: true });
+    }
+  }, [
+    hasCompletedOnboarding,
+    isAuthenticated,
+    isMcpUsageLoading,
+    navigate,
+    setOnboardingModalOpen,
+  ]);
+
+  // Show error state if authentication failed
+  if (authError) {
+    return (
+      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+        <div className="text-center text-white">
+          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
+          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
+          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show authenticating state
+  return (
+    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+      <div className="text-center">
+        <div className="animate-spin mb-4">
+          <LockIcon className="h-12 w-12 text-white mx-auto" />
+        </div>
+        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
+        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/logs/components/LogDetailPanel.tsx

@@ -0,0 +1,41 @@
+import { X } from 'lucide-react';
+import type { LogSchema } from '@insforge/shared-schemas';
+
+interface LogDetailPanelProps {
+  log: LogSchema | null;
+  onClose: () => void;
+}
+
+export function LogDetailPanel({ log, onClose }: LogDetailPanelProps) {
+  if (!log) {
+    return null;
+  }
+
+  // Format the log body as pretty JSON
+  const formattedContent = JSON.stringify(log.body, null, 2);
+
+  return (
+    <div className="flex flex-col h-full bg-gray-100 dark:bg-neutral-700 border border-gray-300 dark:border-neutral-600 overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-300 dark:border-neutral-600">
+        <p className="text-sm text-gray-600 dark:text-neutral-300 font-normal leading-6">
+          Log Content
+        </p>
+        <button
+          onClick={onClose}
+          className="p-1 hover:bg-gray-200 dark:hover:bg-neutral-600 rounded transition-colors"
+          aria-label="Close panel"
+        >
+          <X className="w-4 h-4 text-gray-500 dark:text-neutral-400" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto p-3">
+        <pre className="text-sm text-gray-900 dark:text-white font-normal leading-6 whitespace-pre-wrap break-all font-mono">
+          {formattedContent}
+        </pre>
+      </div>
+    </div>
+  );
+}