🎉 first commit

app/routes/api.system.$action/app-info.server.ts

@@ -0,0 +1,134 @@
+import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { createScopedLogger } from '~/lib/.server/logger';
+
+// These are injected by Vite at build time
+declare const __PKG_NAME: string;
+declare const __PKG_DESCRIPTION: string;
+declare const __PKG_LICENSE: string;
+declare const __PKG_DEPENDENCIES: Record<string, string>;
+declare const __PKG_DEV_DEPENDENCIES: Record<string, string>;
+declare const __PKG_PEER_DEPENDENCIES: Record<string, string>;
+declare const __PKG_OPTIONAL_DEPENDENCIES: Record<string, string>;
+declare const __GIT_BRANCH: string;
+declare const __GIT_COMMIT_TIME: string;
+declare const __GIT_AUTHOR: string;
+declare const __GIT_EMAIL: string;
+declare const __GIT_REMOTE_URL: string;
+declare const __GIT_REPO_NAME: string;
+
+const logger = createScopedLogger('api.system.app-info');
+
+const getGitInfo = () => {
+  return {
+    branch: __GIT_BRANCH || 'unknown',
+    commitTime: __GIT_COMMIT_TIME || 'unknown',
+    author: __GIT_AUTHOR || 'unknown',
+    email: __GIT_EMAIL || 'unknown',
+    remoteUrl: __GIT_REMOTE_URL || 'unknown',
+    repoName: __GIT_REPO_NAME || 'unknown',
+  };
+};
+
+const formatDependencies = (
+  deps: Record<string, string>,
+  type: 'production' | 'development' | 'peer' | 'optional',
+): Array<{ name: string; version: string; type: string }> => {
+  return Object.entries(deps || {}).map(([name, version]) => ({
+    name,
+    version: version.replace(/^\^|~/, ''),
+    type,
+  }));
+};
+
+const getAppResponse = () => {
+  const gitInfo = getGitInfo();
+
+  return {
+    name: __PKG_NAME || 'upage',
+    description: __PKG_DESCRIPTION || '使用人工智能构建可视化网页',
+    license: __PKG_LICENSE || 'MIT',
+    environment: 'cloudflare',
+    gitInfo,
+    timestamp: new Date().toISOString(),
+    runtimeInfo: {
+      nodeVersion: 'cloudflare',
+    },
+    dependencies: {
+      production: formatDependencies(__PKG_DEPENDENCIES, 'production'),
+      development: formatDependencies(__PKG_DEV_DEPENDENCIES, 'development'),
+      peer: formatDependencies(__PKG_PEER_DEPENDENCIES, 'peer'),
+      optional: formatDependencies(__PKG_OPTIONAL_DEPENDENCIES, 'optional'),
+    },
+  };
+};
+
+export const appInfoLoader: LoaderFunction = async ({ request: _request }) => {
+  try {
+    return json(getAppResponse());
+  } catch (error) {
+    logger.error('Failed to get webapp info:', error);
+    return json(
+      {
+        name: 'upage',
+        version: '0.0.0',
+        description: 'Error fetching app info',
+        license: 'MIT',
+        environment: 'error',
+        gitInfo: {
+          commitHash: 'error',
+          branch: 'unknown',
+          commitTime: 'unknown',
+          author: 'unknown',
+          email: 'unknown',
+          remoteUrl: 'unknown',
+          repoName: 'unknown',
+        },
+        timestamp: new Date().toISOString(),
+        runtimeInfo: { nodeVersion: 'unknown' },
+        dependencies: {
+          production: [],
+          development: [],
+          peer: [],
+          optional: [],
+        },
+      },
+      { status: 500 },
+    );
+  }
+};
+
+export const appInfoAction = async ({ request: _request }: ActionFunctionArgs) => {
+  try {
+    return json(getAppResponse());
+  } catch (error) {
+    logger.error('Failed to get webapp info:', error);
+    return json(
+      {
+        name: 'upage',
+        version: '0.0.0',
+        description: 'Error fetching app info',
+        license: 'MIT',
+        environment: 'error',
+        gitInfo: {
+          commitHash: 'error',
+          branch: 'unknown',
+          commitTime: 'unknown',
+          author: 'unknown',
+          email: 'unknown',
+          remoteUrl: 'unknown',
+          repoName: 'unknown',
+        },
+        timestamp: new Date().toISOString(),
+        runtimeInfo: { nodeVersion: 'unknown' },
+        dependencies: {
+          production: [],
+          development: [],
+          peer: [],
+          optional: [],
+        },
+      },
+      { status: 500 },
+    );
+  }
+};

app/routes/api.system.$action/disk.server.ts

@@ -0,0 +1,314 @@
+import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { createScopedLogger } from '~/lib/.server/logger';
+
+// Only import child_process if we're not in a Cloudflare environment
+let execSync: any;
+
+const logger = createScopedLogger('api.system.disk-info');
+
+try {
+  // Check if we're in a Node.js environment
+  if (typeof process !== 'undefined' && process.platform) {
+    // Using dynamic import to avoid require()
+    const childProcess = { execSync: null };
+    execSync = childProcess.execSync;
+  }
+} catch {
+  // In Cloudflare environment, this will fail, which is expected
+  logger.debug('Running in Cloudflare environment, child_process not available');
+}
+
+// For development environments, we'll always provide mock data if real data isn't available
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+interface DiskInfo {
+  filesystem: string;
+  size: number;
+  used: number;
+  available: number;
+  percentage: number;
+  mountpoint: string;
+  timestamp: string;
+  error?: string;
+}
+
+const getDiskInfo = (): DiskInfo[] => {
+  // If we're in a Cloudflare environment and not in development, return error
+  if (!execSync && !isDevelopment) {
+    return [
+      {
+        filesystem: 'N/A',
+        size: 0,
+        used: 0,
+        available: 0,
+        percentage: 0,
+        mountpoint: 'N/A',
+        timestamp: new Date().toISOString(),
+        error: 'Disk information is not available in this environment',
+      },
+    ];
+  }
+
+  // If we're in development but not in Node environment, return mock data
+  if (!execSync && isDevelopment) {
+    // Generate random percentage between 40-60%
+    const percentage = Math.floor(40 + Math.random() * 20);
+    const totalSize = 500 * 1024 * 1024 * 1024; // 500GB
+    const usedSize = Math.floor((totalSize * percentage) / 100);
+    const availableSize = totalSize - usedSize;
+
+    return [
+      {
+        filesystem: 'MockDisk',
+        size: totalSize,
+        used: usedSize,
+        available: availableSize,
+        percentage,
+        mountpoint: '/',
+        timestamp: new Date().toISOString(),
+      },
+      {
+        filesystem: 'MockDisk2',
+        size: 1024 * 1024 * 1024 * 1024, // 1TB
+        used: 300 * 1024 * 1024 * 1024, // 300GB
+        available: 724 * 1024 * 1024 * 1024, // 724GB
+        percentage: 30,
+        mountpoint: '/data',
+        timestamp: new Date().toISOString(),
+      },
+    ];
+  }
+
+  try {
+    // Different commands for different operating systems
+    const platform = process.platform;
+    let disks: DiskInfo[] = [];
+
+    if (platform === 'darwin') {
+      // macOS - use df command to get disk information
+      try {
+        const output = execSync('df -k', { encoding: 'utf-8' }).toString().trim();
+
+        // Skip the header line
+        const lines = output.split('\n').slice(1);
+
+        disks = lines.map((line: string) => {
+          const parts = line.trim().split(/\s+/);
+          const filesystem = parts[0];
+          const size = parseInt(parts[1], 10) * 1024; // Convert KB to bytes
+          const used = parseInt(parts[2], 10) * 1024;
+          const available = parseInt(parts[3], 10) * 1024;
+          const percentageStr = parts[4].replace('%', '');
+          const percentage = parseInt(percentageStr, 10);
+          const mountpoint = parts[5];
+
+          return {
+            filesystem,
+            size,
+            used,
+            available,
+            percentage,
+            mountpoint,
+            timestamp: new Date().toISOString(),
+          };
+        });
+
+        // Filter out non-physical disks
+        disks = disks.filter(
+          (disk) =>
+            !disk.filesystem.startsWith('devfs') &&
+            !disk.filesystem.startsWith('map') &&
+            !disk.mountpoint.startsWith('/System/Volumes') &&
+            disk.size > 0,
+        );
+      } catch (error) {
+        logger.error('Failed to get macOS disk info:', error);
+        return [
+          {
+            filesystem: 'Unknown',
+            size: 0,
+            used: 0,
+            available: 0,
+            percentage: 0,
+            mountpoint: '/',
+            timestamp: new Date().toISOString(),
+            error: error instanceof Error ? error.message : 'Unknown error',
+          },
+        ];
+      }
+    } else if (platform === 'linux') {
+      // Linux - use df command to get disk information
+      try {
+        const output = execSync('df -k', { encoding: 'utf-8' }).toString().trim();
+
+        // Skip the header line
+        const lines = output.split('\n').slice(1);
+
+        disks = lines.map((line: string) => {
+          const parts = line.trim().split(/\s+/);
+          const filesystem = parts[0];
+          const size = parseInt(parts[1], 10) * 1024; // Convert KB to bytes
+          const used = parseInt(parts[2], 10) * 1024;
+          const available = parseInt(parts[3], 10) * 1024;
+          const percentageStr = parts[4].replace('%', '');
+          const percentage = parseInt(percentageStr, 10);
+          const mountpoint = parts[5];
+
+          return {
+            filesystem,
+            size,
+            used,
+            available,
+            percentage,
+            mountpoint,
+            timestamp: new Date().toISOString(),
+          };
+        });
+
+        // Filter out non-physical disks
+        disks = disks.filter(
+          (disk) =>
+            !disk.filesystem.startsWith('/dev/loop') &&
+            !disk.filesystem.startsWith('tmpfs') &&
+            !disk.filesystem.startsWith('devtmpfs') &&
+            disk.size > 0,
+        );
+      } catch (error) {
+        logger.error('Failed to get Linux disk info:', error);
+        return [
+          {
+            filesystem: 'Unknown',
+            size: 0,
+            used: 0,
+            available: 0,
+            percentage: 0,
+            mountpoint: '/',
+            timestamp: new Date().toISOString(),
+            error: error instanceof Error ? error.message : 'Unknown error',
+          },
+        ];
+      }
+    } else if (platform === 'win32') {
+      // Windows - use PowerShell to get disk information
+      try {
+        const output = execSync(
+          'powershell "Get-PSDrive -PSProvider FileSystem | Select-Object Name, Used, Free, @{Name=\'Size\';Expression={$_.Used + $_.Free}} | ConvertTo-Json"',
+          { encoding: 'utf-8' },
+        )
+          .toString()
+          .trim();
+
+        const driveData = JSON.parse(output);
+        const drivesArray = Array.isArray(driveData) ? driveData : [driveData];
+
+        disks = drivesArray.map((drive) => {
+          const size = drive.Size || 0;
+          const used = drive.Used || 0;
+          const available = drive.Free || 0;
+          const percentage = size > 0 ? Math.round((used / size) * 100) : 0;
+
+          return {
+            filesystem: drive.Name + ':\\',
+            size,
+            used,
+            available,
+            percentage,
+            mountpoint: drive.Name + ':\\',
+            timestamp: new Date().toISOString(),
+          };
+        });
+      } catch (error) {
+        logger.error('Failed to get Windows disk info:', error);
+        return [
+          {
+            filesystem: 'Unknown',
+            size: 0,
+            used: 0,
+            available: 0,
+            percentage: 0,
+            mountpoint: 'C:\\',
+            timestamp: new Date().toISOString(),
+            error: error instanceof Error ? error.message : 'Unknown error',
+          },
+        ];
+      }
+    } else {
+      logger.warn(`Unsupported platform: ${platform}`);
+      return [
+        {
+          filesystem: 'Unknown',
+          size: 0,
+          used: 0,
+          available: 0,
+          percentage: 0,
+          mountpoint: '/',
+          timestamp: new Date().toISOString(),
+          error: `Unsupported platform: ${platform}`,
+        },
+      ];
+    }
+
+    return disks;
+  } catch (error) {
+    logger.error('Failed to get disk info:', error);
+    return [
+      {
+        filesystem: 'Unknown',
+        size: 0,
+        used: 0,
+        available: 0,
+        percentage: 0,
+        mountpoint: '/',
+        timestamp: new Date().toISOString(),
+        error: error instanceof Error ? error.message : 'Unknown error',
+      },
+    ];
+  }
+};
+
+export const diskLoader: LoaderFunction = async ({ request: _request }) => {
+  try {
+    return json(getDiskInfo());
+  } catch (error) {
+    logger.error('Failed to get disk info:', error);
+    return json(
+      [
+        {
+          filesystem: 'Unknown',
+          size: 0,
+          used: 0,
+          available: 0,
+          percentage: 0,
+          mountpoint: '/',
+          timestamp: new Date().toISOString(),
+          error: error instanceof Error ? error.message : 'Unknown error',
+        },
+      ],
+      { status: 500 },
+    );
+  }
+};
+
+export const diskAction = async ({ request: _request }: ActionFunctionArgs) => {
+  try {
+    return json(getDiskInfo());
+  } catch (error) {
+    logger.error('Failed to get disk info:', error);
+    return json(
+      [
+        {
+          filesystem: 'Unknown',
+          size: 0,
+          used: 0,
+          available: 0,
+          percentage: 0,
+          mountpoint: '/',
+          timestamp: new Date().toISOString(),
+          error: error instanceof Error ? error.message : 'Unknown error',
+        },
+      ],
+      { status: 500 },
+    );
+  }
+};

app/routes/api.system.$action/git-info.server.ts

@@ -0,0 +1,335 @@
+import { json, type LoaderFunction, type LoaderFunctionArgs } from '@remix-run/node';
+import { createScopedLogger } from '~/lib/.server/logger';
+
+interface GitInfo {
+  local: {
+    branch: string;
+    commitTime: string;
+    author: string;
+    email: string;
+    remoteUrl: string;
+    repoName: string;
+  };
+  github?: {
+    currentRepo?: {
+      fullName: string;
+      defaultBranch: string;
+      stars: number;
+      forks: number;
+      openIssues?: number;
+    };
+  };
+  isForked?: boolean;
+  timestamp?: string;
+}
+
+// Define context type
+interface AppContext {
+  env?: {
+    GITHUB_ACCESS_TOKEN?: string;
+  };
+}
+
+interface GitHubRepo {
+  name: string;
+  full_name: string;
+  html_url: string;
+  description: string;
+  stargazers_count: number;
+  forks_count: number;
+  language: string | null;
+  languages_url: string;
+}
+
+interface GitHubGist {
+  id: string;
+  html_url: string;
+  description: string;
+}
+
+// These values will be replaced at build time
+declare const __GIT_BRANCH: string;
+declare const __GIT_COMMIT_TIME: string;
+declare const __GIT_AUTHOR: string;
+declare const __GIT_EMAIL: string;
+declare const __GIT_REMOTE_URL: string;
+declare const __GIT_REPO_NAME: string;
+
+/*
+ * Remove unused variable to fix linter error
+ * declare const __GIT_REPO_URL: string;
+ */
+
+const logger = createScopedLogger('api.system.git-info');
+
+export const gitInfoLoader: LoaderFunction = async ({
+  request,
+  context,
+}: LoaderFunctionArgs & { context: AppContext }) => {
+  logger.debug('Git info API called with URL:', request.url);
+
+  // Handle CORS preflight requests
+  if (request.method === 'OPTIONS') {
+    return new Response(null, {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
+    });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const action = searchParams.get('action');
+
+  logger.debug('Git info action:', action);
+
+  if (action === 'getUser' || action === 'getRepos' || action === 'getOrgs' || action === 'getActivity') {
+    // Use server-side token instead of client-side token
+    const serverGithubToken = process.env.GITHUB_ACCESS_TOKEN || context.env?.GITHUB_ACCESS_TOKEN;
+    const cookieToken = request.headers
+      .get('Cookie')
+      ?.split(';')
+      .find((cookie) => cookie.trim().startsWith('githubToken='))
+      ?.split('=')[1];
+
+    // Also check for token in Authorization header
+    const authHeader = request.headers.get('Authorization');
+    const headerToken = authHeader?.startsWith('Bearer ') ? authHeader.substring(7) : null;
+
+    const token = serverGithubToken || headerToken || cookieToken;
+
+    logger.debug(
+      'Using GitHub token from:',
+      serverGithubToken ? 'server env' : headerToken ? 'auth header' : cookieToken ? 'cookie' : 'none',
+    );
+
+    if (!token) {
+      logger.error('No GitHub token available');
+      return json(
+        { error: 'No GitHub token available' },
+        {
+          status: 401,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+          },
+        },
+      );
+    }
+
+    try {
+      if (action === 'getUser') {
+        const response = await fetch('https://api.github.com/user', {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) {
+          logger.error('GitHub user API error:', response.status);
+          throw new Error(`GitHub API error: ${response.status}`);
+        }
+
+        const userData = await response.json();
+
+        return json(
+          { user: userData },
+          {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            },
+          },
+        );
+      }
+
+      if (action === 'getRepos') {
+        const reposResponse = await fetch('https://api.github.com/user/repos?per_page=100&sort=updated', {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!reposResponse.ok) {
+          logger.error('GitHub repos API error:', reposResponse.status);
+          throw new Error(`GitHub API error: ${reposResponse.status}`);
+        }
+
+        const repos = (await reposResponse.json()) as GitHubRepo[];
+
+        // Get user's gists
+        const gistsResponse = await fetch('https://api.github.com/gists', {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        const gists = gistsResponse.ok ? ((await gistsResponse.json()) as GitHubGist[]) : [];
+
+        // Calculate language statistics
+        const languageStats: Record<string, number> = {};
+        let totalStars = 0;
+        let totalForks = 0;
+
+        for (const repo of repos) {
+          totalStars += repo.stargazers_count || 0;
+          totalForks += repo.forks_count || 0;
+
+          if (repo.language && repo.language !== 'null') {
+            languageStats[repo.language] = (languageStats[repo.language] || 0) + 1;
+          }
+
+          /*
+           * Optionally fetch languages for each repo for more accurate stats
+           * This is commented out to avoid rate limiting
+           *
+           * if (repo.languages_url) {
+           *   try {
+           *     const langResponse = await fetch(repo.languages_url, {
+           *       headers: {
+           *         Accept: 'application/vnd.github.v3+json',
+           *         Authorization: `Bearer ${token}`,
+           *       },
+           *     });
+           *
+           *     if (langResponse.ok) {
+           *       const languages = await langResponse.json();
+           *       Object.keys(languages).forEach(lang => {
+           *         languageStats[lang] = (languageStats[lang] || 0) + languages[lang];
+           *       });
+           *     }
+           *   } catch (error) {
+           *     logger.error(`Error fetching languages for ${repo.name}:`, error);
+           *   }
+           * }
+           */
+        }
+
+        return json(
+          {
+            repos,
+            stats: {
+              totalStars,
+              totalForks,
+              languages: languageStats,
+              totalGists: gists.length,
+            },
+          },
+          {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            },
+          },
+        );
+      }
+
+      if (action === 'getOrgs') {
+        const response = await fetch('https://api.github.com/user/orgs', {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) {
+          logger.error('GitHub orgs API error:', response.status);
+          throw new Error(`GitHub API error: ${response.status}`);
+        }
+
+        const orgs = await response.json();
+
+        return json(
+          { organizations: orgs },
+          {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            },
+          },
+        );
+      }
+
+      if (action === 'getActivity') {
+        const username = request.headers
+          .get('Cookie')
+          ?.split(';')
+          .find((cookie) => cookie.trim().startsWith('githubUsername='))
+          ?.split('=')[1];
+
+        if (!username) {
+          logger.error('GitHub username not found in cookies');
+          return json(
+            { error: 'GitHub username not found in cookies' },
+            {
+              status: 400,
+              headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+              },
+            },
+          );
+        }
+
+        const response = await fetch(`https://api.github.com/users/${username}/events?per_page=30`, {
+          headers: {
+            Accept: 'application/vnd.github.v3+json',
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) {
+          logger.error('GitHub activity API error:', response.status);
+          throw new Error(`GitHub API error: ${response.status}`);
+        }
+
+        const events = await response.json();
+
+        return json(
+          { recentActivity: events },
+          {
+            headers: {
+              'Access-Control-Allow-Origin': '*',
+              'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+            },
+          },
+        );
+      }
+    } catch (error) {
+      logger.error('GitHub API error:', error);
+      return json(
+        { error: error instanceof Error ? error.message : 'Unknown error' },
+        {
+          status: 500,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+          },
+        },
+      );
+    }
+  }
+
+  const gitInfo: GitInfo = {
+    local: {
+      branch: typeof __GIT_BRANCH !== 'undefined' ? __GIT_BRANCH : 'main',
+      commitTime: typeof __GIT_COMMIT_TIME !== 'undefined' ? __GIT_COMMIT_TIME : new Date().toISOString(),
+      author: typeof __GIT_AUTHOR !== 'undefined' ? __GIT_AUTHOR : 'development',
+      email: typeof __GIT_EMAIL !== 'undefined' ? __GIT_EMAIL : 'development@local',
+      remoteUrl: typeof __GIT_REMOTE_URL !== 'undefined' ? __GIT_REMOTE_URL : 'local',
+      repoName: typeof __GIT_REPO_NAME !== 'undefined' ? __GIT_REPO_NAME : 'upage',
+    },
+    timestamp: new Date().toISOString(),
+  };
+
+  return json(gitInfo, {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+    },
+  });
+};

app/routes/api.system.$action/memory.server.ts

@@ -0,0 +1,283 @@
+import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { createScopedLogger } from '~/lib/.server/logger';
+
+// Only import child_process if we're not in a Cloudflare environment
+let execSync: any;
+
+const logger = createScopedLogger('api.system.memory-info');
+
+try {
+  // Check if we're in a Node.js environment
+  if (typeof process !== 'undefined' && process.platform) {
+    // Using dynamic import to avoid require()
+    const childProcess = { execSync: null };
+    execSync = childProcess.execSync;
+  }
+} catch {
+  // In Cloudflare environment, this will fail, which is expected
+  logger.debug('Running in Cloudflare environment, child_process not available');
+}
+
+// For development environments, we'll always provide mock data if real data isn't available
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+interface SystemMemoryInfo {
+  total: number;
+  free: number;
+  used: number;
+  percentage: number;
+  swap?: {
+    total: number;
+    free: number;
+    used: number;
+    percentage: number;
+  };
+  timestamp: string;
+  error?: string;
+}
+
+const getSystemMemoryInfo = (): SystemMemoryInfo => {
+  try {
+    // Check if we're in a Cloudflare environment and not in development
+    if (!execSync && !isDevelopment) {
+      // Return error for Cloudflare production environment
+      return {
+        total: 0,
+        free: 0,
+        used: 0,
+        percentage: 0,
+        timestamp: new Date().toISOString(),
+        error: 'System memory information is not available in this environment',
+      };
+    }
+
+    // If we're in development but not in Node environment, return mock data
+    if (!execSync && isDevelopment) {
+      // Return mock data for development
+      const mockTotal = 16 * 1024 * 1024 * 1024; // 16GB
+      const mockPercentage = Math.floor(30 + Math.random() * 20); // Random between 30-50%
+      const mockUsed = Math.floor((mockTotal * mockPercentage) / 100);
+      const mockFree = mockTotal - mockUsed;
+
+      return {
+        total: mockTotal,
+        free: mockFree,
+        used: mockUsed,
+        percentage: mockPercentage,
+        swap: {
+          total: 8 * 1024 * 1024 * 1024, // 8GB
+          free: 6 * 1024 * 1024 * 1024, // 6GB
+          used: 2 * 1024 * 1024 * 1024, // 2GB
+          percentage: 25,
+        },
+        timestamp: new Date().toISOString(),
+      };
+    }
+
+    // Different commands for different operating systems
+    let memInfo: { total: number; free: number; used: number; percentage: number; swap?: any } = {
+      total: 0,
+      free: 0,
+      used: 0,
+      percentage: 0,
+    };
+
+    // Check the operating system
+    const platform = process.platform;
+
+    if (platform === 'darwin') {
+      // macOS
+      const totalMemory = parseInt(execSync('sysctl -n hw.memsize').toString().trim(), 10);
+
+      // Get memory usage using vm_stat
+      const vmStat = execSync('vm_stat').toString().trim();
+      const pageSize = 4096; // Default page size on macOS
+
+      // Parse vm_stat output
+      const matches = {
+        free: /Pages free:\s+(\d+)/.exec(vmStat),
+        active: /Pages active:\s+(\d+)/.exec(vmStat),
+        inactive: /Pages inactive:\s+(\d+)/.exec(vmStat),
+        speculative: /Pages speculative:\s+(\d+)/.exec(vmStat),
+        wired: /Pages wired down:\s+(\d+)/.exec(vmStat),
+        compressed: /Pages occupied by compressor:\s+(\d+)/.exec(vmStat),
+      };
+
+      const freePages = parseInt(matches.free?.[1] || '0', 10);
+      const activePages = parseInt(matches.active?.[1] || '0', 10);
+      const inactivePages = parseInt(matches.inactive?.[1] || '0', 10);
+
+      // Speculative pages are not currently used in calculations, but kept for future reference
+      const wiredPages = parseInt(matches.wired?.[1] || '0', 10);
+      const compressedPages = parseInt(matches.compressed?.[1] || '0', 10);
+
+      const freeMemory = freePages * pageSize;
+      const usedMemory = (activePages + inactivePages + wiredPages + compressedPages) * pageSize;
+
+      memInfo = {
+        total: totalMemory,
+        free: freeMemory,
+        used: usedMemory,
+        percentage: Math.round((usedMemory / totalMemory) * 100),
+      };
+
+      // Get swap information
+      try {
+        const swapInfo = execSync('sysctl -n vm.swapusage').toString().trim();
+        const swapMatches = {
+          total: /total = (\d+\.\d+)M/.exec(swapInfo),
+          used: /used = (\d+\.\d+)M/.exec(swapInfo),
+          free: /free = (\d+\.\d+)M/.exec(swapInfo),
+        };
+
+        const swapTotal = parseFloat(swapMatches.total?.[1] || '0') * 1024 * 1024;
+        const swapUsed = parseFloat(swapMatches.used?.[1] || '0') * 1024 * 1024;
+        const swapFree = parseFloat(swapMatches.free?.[1] || '0') * 1024 * 1024;
+
+        memInfo.swap = {
+          total: swapTotal,
+          used: swapUsed,
+          free: swapFree,
+          percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
+        };
+      } catch (swapError) {
+        logger.error('Failed to get swap info:', swapError);
+      }
+    } else if (platform === 'linux') {
+      // Linux
+      const meminfo = execSync('cat /proc/meminfo').toString().trim();
+
+      const memTotal = parseInt(/MemTotal:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
+
+      // We use memAvailable instead of memFree for more accurate free memory calculation
+      const memAvailable = parseInt(/MemAvailable:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
+
+      /*
+       * Buffers and cached memory are included in the available memory calculation by the kernel
+       * so we don't need to calculate them separately
+       */
+
+      const usedMemory = memTotal - memAvailable;
+
+      memInfo = {
+        total: memTotal,
+        free: memAvailable,
+        used: usedMemory,
+        percentage: Math.round((usedMemory / memTotal) * 100),
+      };
+
+      // Get swap information
+      const swapTotal = parseInt(/SwapTotal:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
+      const swapFree = parseInt(/SwapFree:\s+(\d+)/.exec(meminfo)?.[1] || '0', 10) * 1024;
+      const swapUsed = swapTotal - swapFree;
+
+      memInfo.swap = {
+        total: swapTotal,
+        free: swapFree,
+        used: swapUsed,
+        percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
+      };
+    } else if (platform === 'win32') {
+      /*
+       * Windows
+       * Using PowerShell to get memory information
+       */
+      const memoryInfo = execSync(
+        'powershell "Get-CimInstance Win32_OperatingSystem | Select-Object TotalVisibleMemorySize, FreePhysicalMemory | ConvertTo-Json"',
+      )
+        .toString()
+        .trim();
+
+      const memData = JSON.parse(memoryInfo);
+      const totalMemory = parseInt(memData.TotalVisibleMemorySize, 10) * 1024;
+      const freeMemory = parseInt(memData.FreePhysicalMemory, 10) * 1024;
+      const usedMemory = totalMemory - freeMemory;
+
+      memInfo = {
+        total: totalMemory,
+        free: freeMemory,
+        used: usedMemory,
+        percentage: Math.round((usedMemory / totalMemory) * 100),
+      };
+
+      // Get swap (page file) information
+      try {
+        const swapInfo = execSync(
+          "powershell \"Get-CimInstance Win32_PageFileUsage | Measure-Object -Property CurrentUsage, AllocatedBaseSize -Sum | Select-Object @{Name='CurrentUsage';Expression={$_.Sum}}, @{Name='AllocatedBaseSize';Expression={$_.Sum}} | ConvertTo-Json\"",
+        )
+          .toString()
+          .trim();
+
+        const swapData = JSON.parse(swapInfo);
+        const swapTotal = parseInt(swapData.AllocatedBaseSize, 10) * 1024 * 1024;
+        const swapUsed = parseInt(swapData.CurrentUsage, 10) * 1024 * 1024;
+        const swapFree = swapTotal - swapUsed;
+
+        memInfo.swap = {
+          total: swapTotal,
+          free: swapFree,
+          used: swapUsed,
+          percentage: swapTotal > 0 ? Math.round((swapUsed / swapTotal) * 100) : 0,
+        };
+      } catch (swapError) {
+        logger.error('Failed to get swap info:', swapError);
+      }
+    } else {
+      throw new Error(`Unsupported platform: ${platform}`);
+    }
+
+    return {
+      ...memInfo,
+      timestamp: new Date().toISOString(),
+    };
+  } catch (error) {
+    logger.error('Failed to get system memory info:', error);
+    return {
+      total: 0,
+      free: 0,
+      used: 0,
+      percentage: 0,
+      timestamp: new Date().toISOString(),
+      error: error instanceof Error ? error.message : 'Unknown error',
+    };
+  }
+};
+
+export const memoryLoader: LoaderFunction = async ({ request: _request }) => {
+  try {
+    return json(getSystemMemoryInfo());
+  } catch (error) {
+    logger.error('Failed to get system memory info:', error);
+    return json(
+      {
+        total: 0,
+        free: 0,
+        used: 0,
+        percentage: 0,
+        timestamp: new Date().toISOString(),
+        error: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 },
+    );
+  }
+};
+
+export const memoryAction = async ({ request: _request }: ActionFunctionArgs) => {
+  try {
+    return json(getSystemMemoryInfo());
+  } catch (error) {
+    logger.error('Failed to get system memory info:', error);
+    return json(
+      {
+        total: 0,
+        free: 0,
+        used: 0,
+        percentage: 0,
+        timestamp: new Date().toISOString(),
+        error: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 500 },
+    );
+  }
+};

app/routes/api.system.$action/process.server.ts

@@ -0,0 +1,419 @@
+import type { ActionFunctionArgs, LoaderFunction } from '@remix-run/node';
+import { json } from '@remix-run/node';
+import { createScopedLogger } from '~/lib/.server/logger';
+
+// Only import child_process if we're not in a Cloudflare environment
+let execSync: any;
+
+const logger = createScopedLogger('api.system.process-info');
+
+try {
+  // Check if we're in a Node.js environment
+  if (typeof process !== 'undefined' && process.platform) {
+    // Using dynamic import to avoid require()
+    const childProcess = { execSync: null };
+    execSync = childProcess.execSync;
+  }
+} catch {
+  // In Cloudflare environment, this will fail, which is expected
+  logger.info('Running in Cloudflare environment, child_process not available');
+}
+
+// For development environments, we'll always provide mock data if real data isn't available
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+interface ProcessInfo {
+  pid: number;
+  name: string;
+  cpu: number;
+  memory: number;
+  command?: string;
+  timestamp: string;
+  error?: string;
+}
+
+const getProcessInfo = (): ProcessInfo[] => {
+  try {
+    // If we're in a Cloudflare environment and not in development, return error
+    if (!execSync && !isDevelopment) {
+      return [
+        {
+          pid: 0,
+          name: 'N/A',
+          cpu: 0,
+          memory: 0,
+          timestamp: new Date().toISOString(),
+          error: 'Process information is not available in this environment',
+        },
+      ];
+    }
+
+    // If we're in development but not in Node environment, return mock data
+    if (!execSync && isDevelopment) {
+      return getMockProcessInfo();
+    }
+
+    // Different commands for different operating systems
+    const platform = process.platform;
+    let processes: ProcessInfo[] = [];
+
+    // Get CPU count for normalizing CPU percentages
+    let cpuCount = 1;
+
+    try {
+      if (platform === 'darwin') {
+        const cpuInfo = execSync('sysctl -n hw.ncpu', { encoding: 'utf-8' }).toString().trim();
+        cpuCount = parseInt(cpuInfo, 10) || 1;
+      } else if (platform === 'linux') {
+        const cpuInfo = execSync('nproc', { encoding: 'utf-8' }).toString().trim();
+        cpuCount = parseInt(cpuInfo, 10) || 1;
+      } else if (platform === 'win32') {
+        const cpuInfo = execSync('wmic cpu get NumberOfCores', { encoding: 'utf-8' }).toString().trim();
+        const match = cpuInfo.match(/\d+/);
+        cpuCount = match ? parseInt(match[0], 10) : 1;
+      }
+    } catch (error) {
+      logger.error('Failed to get CPU count:', error);
+
+      // Default to 1 if we can't get the count
+      cpuCount = 1;
+    }
+
+    if (platform === 'darwin') {
+      // macOS - use ps command to get process information
+      try {
+        const output = execSync('ps -eo pid,pcpu,pmem,comm -r | head -n 11', { encoding: 'utf-8' }).toString().trim();
+
+        // Skip the header line
+        const lines = output.split('\n').slice(1);
+
+        processes = lines.map((line: string) => {
+          const parts = line.trim().split(/\s+/);
+          const pid = parseInt(parts[0], 10);
+
+          /*
+           * Normalize CPU percentage by dividing by CPU count
+           * This converts from "% of all CPUs" to "% of one CPU"
+           */
+          const cpu = parseFloat(parts[1]) / cpuCount;
+          const memory = parseFloat(parts[2]);
+          const command = parts.slice(3).join(' ');
+
+          return {
+            pid,
+            name: command.split('/').pop() || command,
+            cpu,
+            memory,
+            command,
+            timestamp: new Date().toISOString(),
+          };
+        });
+      } catch (error) {
+        logger.error('Failed to get macOS process info:', error);
+
+        // Try alternative command
+        try {
+          const output = execSync('top -l 1 -stats pid,cpu,mem,command -n 10', { encoding: 'utf-8' }).toString().trim();
+
+          // Parse top output - skip the first few lines of header
+          const lines = output.split('\n').slice(6);
+
+          processes = lines.map((line: string) => {
+            const parts = line.trim().split(/\s+/);
+            const pid = parseInt(parts[0], 10);
+            const cpu = parseFloat(parts[1]);
+            const memory = parseFloat(parts[2]);
+            const command = parts.slice(3).join(' ');
+
+            return {
+              pid,
+              name: command.split('/').pop() || command,
+              cpu,
+              memory,
+              command,
+              timestamp: new Date().toISOString(),
+            };
+          });
+        } catch (fallbackError) {
+          logger.error('Failed to get macOS process info with fallback:', fallbackError);
+          return [
+            {
+              pid: 0,
+              name: 'N/A',
+              cpu: 0,
+              memory: 0,
+              timestamp: new Date().toISOString(),
+              error: 'Process information is not available in this environment',
+            },
+          ];
+        }
+      }
+    } else if (platform === 'linux') {
+      // Linux - use ps command to get process information
+      try {
+        const output = execSync('ps -eo pid,pcpu,pmem,comm --sort=-pmem | head -n 11', { encoding: 'utf-8' })
+          .toString()
+          .trim();
+
+        // Skip the header line
+        const lines = output.split('\n').slice(1);
+
+        processes = lines.map((line: string) => {
+          const parts = line.trim().split(/\s+/);
+          const pid = parseInt(parts[0], 10);
+
+          // Normalize CPU percentage by dividing by CPU count
+          const cpu = parseFloat(parts[1]) / cpuCount;
+          const memory = parseFloat(parts[2]);
+          const command = parts.slice(3).join(' ');
+
+          return {
+            pid,
+            name: command.split('/').pop() || command,
+            cpu,
+            memory,
+            command,
+            timestamp: new Date().toISOString(),
+          };
+        });
+      } catch (error) {
+        logger.error('Failed to get Linux process info:', error);
+
+        // Try alternative command
+        try {
+          const output = execSync('top -b -n 1 | head -n 17', { encoding: 'utf-8' }).toString().trim();
+
+          // Parse top output - skip the first few lines of header
+          const lines = output.split('\n').slice(7);
+
+          processes = lines.map((line: string) => {
+            const parts = line.trim().split(/\s+/);
+            const pid = parseInt(parts[0], 10);
+            const cpu = parseFloat(parts[8]);
+            const memory = parseFloat(parts[9]);
+            const command = parts[11] || parts[parts.length - 1];
+
+            return {
+              pid,
+              name: command.split('/').pop() || command,
+              cpu,
+              memory,
+              command,
+              timestamp: new Date().toISOString(),
+            };
+          });
+        } catch (fallbackError) {
+          logger.error('Failed to get Linux process info with fallback:', fallbackError);
+          return [
+            {
+              pid: 0,
+              name: 'N/A',
+              cpu: 0,
+              memory: 0,
+              timestamp: new Date().toISOString(),
+              error: 'Process information is not available in this environment',
+            },
+          ];
+        }
+      }
+    } else if (platform === 'win32') {
+      // Windows - use PowerShell to get process information
+      try {
+        const output = execSync(
+          'powershell "Get-Process | Sort-Object -Property WorkingSet64 -Descending | Select-Object -First 10 Id, CPU, @{Name=\'Memory\';Expression={$_.WorkingSet64/1MB}}, ProcessName | ConvertTo-Json"',
+          { encoding: 'utf-8' },
+        )
+          .toString()
+          .trim();
+
+        const processData = JSON.parse(output);
+        const processArray = Array.isArray(processData) ? processData : [processData];
+
+        processes = processArray.map((proc: any) => ({
+          pid: proc.Id,
+          name: proc.ProcessName,
+
+          // Normalize CPU percentage by dividing by CPU count
+          cpu: (proc.CPU || 0) / cpuCount,
+          memory: proc.Memory,
+          timestamp: new Date().toISOString(),
+        }));
+      } catch (error) {
+        logger.error('Failed to get Windows process info:', error);
+
+        // Try alternative command using tasklist
+        try {
+          const output = execSync('tasklist /FO CSV', { encoding: 'utf-8' }).toString().trim();
+
+          // Parse CSV output - skip the header line
+          const lines = output.split('\n').slice(1);
+
+          processes = lines.slice(0, 10).map((line: string) => {
+            // Parse CSV format
+            const parts = line.split(',').map((part: string) => part.replace(/^"(.+)"$/, '$1'));
+            const pid = parseInt(parts[1], 10);
+            const memoryStr = parts[4].replace(/[^\d]/g, '');
+            const memory = parseInt(memoryStr, 10) / 1024; // Convert KB to MB
+
+            return {
+              pid,
+              name: parts[0],
+              cpu: 0, // tasklist doesn't provide CPU info
+              memory,
+              timestamp: new Date().toISOString(),
+            };
+          });
+        } catch (fallbackError) {
+          logger.error('Failed to get Windows process info with fallback:', fallbackError);
+          return [
+            {
+              pid: 0,
+              name: 'N/A',
+              cpu: 0,
+              memory: 0,
+              timestamp: new Date().toISOString(),
+              error: 'Process information is not available in this environment',
+            },
+          ];
+        }
+      }
+    } else {
+      logger.warn(`Unsupported platform: ${platform}, using browser fallback`);
+      return [
+        {
+          pid: 0,
+          name: 'N/A',
+          cpu: 0,
+          memory: 0,
+          timestamp: new Date().toISOString(),
+          error: 'Process information is not available in this environment',
+        },
+      ];
+    }
+
+    return processes;
+  } catch (error) {
+    logger.error('Failed to get process info:', error);
+
+    if (isDevelopment) {
+      return getMockProcessInfo();
+    }
+
+    return [
+      {
+        pid: 0,
+        name: 'N/A',
+        cpu: 0,
+        memory: 0,
+        timestamp: new Date().toISOString(),
+        error: 'Process information is not available in this environment',
+      },
+    ];
+  }
+};
+
+// Generate mock process information with realistic values
+const getMockProcessInfo = (): ProcessInfo[] => {
+  const timestamp = new Date().toISOString();
+
+  // Create some random variation in CPU usage
+  const randomCPU = () => Math.floor(Math.random() * 15);
+  const randomHighCPU = () => 15 + Math.floor(Math.random() * 25);
+
+  // Create some random variation in memory usage
+  const randomMem = () => Math.floor(Math.random() * 5);
+  const randomHighMem = () => 5 + Math.floor(Math.random() * 15);
+
+  return [
+    {
+      pid: 1,
+      name: 'Browser',
+      cpu: randomHighCPU(),
+      memory: 25 + randomMem(),
+      command: 'Browser Process',
+      timestamp,
+    },
+    {
+      pid: 2,
+      name: 'System',
+      cpu: 5 + randomCPU(),
+      memory: 10 + randomMem(),
+      command: 'System Process',
+      timestamp,
+    },
+    {
+      pid: 3,
+      name: 'upage',
+      cpu: randomHighCPU(),
+      memory: 15 + randomMem(),
+      command: 'UPage AI Process',
+      timestamp,
+    },
+    {
+      pid: 4,
+      name: 'node',
+      cpu: randomCPU(),
+      memory: randomHighMem(),
+      command: 'Node.js Process',
+      timestamp,
+    },
+    {
+      pid: 5,
+      name: 'wrangler',
+      cpu: randomCPU(),
+      memory: randomMem(),
+      command: 'Wrangler Process',
+      timestamp,
+    },
+    {
+      pid: 6,
+      name: 'vscode',
+      cpu: randomCPU(),
+      memory: 12 + randomMem(),
+      command: 'VS Code Process',
+      timestamp,
+    },
+    {
+      pid: 7,
+      name: 'chrome',
+      cpu: randomHighCPU(),
+      memory: 20 + randomMem(),
+      command: 'Chrome Browser',
+      timestamp,
+    },
+    {
+      pid: 8,
+      name: 'finder',
+      cpu: 1 + randomCPU(),
+      memory: 3 + randomMem(),
+      command: 'Finder Process',
+      timestamp,
+    },
+    {
+      pid: 10,
+      name: 'cloudflared',
+      cpu: randomCPU(),
+      memory: randomMem(),
+      command: 'Cloudflare Tunnel',
+      timestamp,
+    },
+  ];
+};
+
+export const processLoader: LoaderFunction = async ({ request: _request }) => {
+  try {
+    return json(getProcessInfo());
+  } catch (error) {
+    logger.error('Failed to get process info:', error);
+    return json(getMockProcessInfo(), { status: 500 });
+  }
+};
+
+export const processAction = async ({ request: _request }: ActionFunctionArgs) => {
+  try {
+    return json(getProcessInfo());
+  } catch (error) {
+    logger.error('Failed to get process info:', error);
+    return json(getMockProcessInfo(), { status: 500 });
+  }
+};

app/routes/api.system.$action/route.tsx

@@ -0,0 +1,53 @@
+import { type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
+import { errorResponse } from '~/utils/api-response';
+import { appInfoAction, appInfoLoader } from './app-info.server';
+import { diskAction, diskLoader } from './disk.server';
+import { gitInfoLoader } from './git-info.server';
+import { memoryAction, memoryLoader } from './memory.server';
+import { processAction, processLoader } from './process.server';
+
+export async function loader(args: LoaderFunctionArgs) {
+  const { params } = args;
+  if (params.action === 'git-info') {
+    return gitInfoLoader(args);
+  }
+
+  if (process.env.NODE_ENV !== 'development') {
+    return errorResponse(403, '无权限访问');
+  }
+
+  switch (params.action) {
+    case 'app-info':
+      return appInfoLoader(args);
+    case 'disk':
+      return diskLoader(args);
+    case 'memory':
+      return memoryLoader(args);
+    case 'process':
+      return processLoader(args);
+    default:
+      return errorResponse(404, '未找到API');
+  }
+}
+
+export async function action(args: ActionFunctionArgs) {
+  if (process.env.NODE_ENV !== 'development') {
+    return errorResponse(403, '无权限访问');
+  }
+
+  const { params } = args;
+
+  switch (params.action) {
+    case 'app-info':
+      return appInfoAction(args);
+    case 'disk':
+      return diskAction(args);
+    case 'memory':
+      return memoryAction(args);
+    case 'process':
+      return processAction(args);
+    case 'git-info':
+    default:
+      return errorResponse(404, '未找到API');
+  }
+}