@elizaos/cli 1.3.0 → 1.3.2

package/templates/project-tee-starter/__tests__/tee-validation.test.ts

@@ -0,0 +1,295 @@
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { logger, type IAgentRuntime } from '@elizaos/core';
+
+// Mock logger to avoid console noise during tests
+const mockLogger = {
+  info: () => {},
+  warn: () => {},
+  error: () => {},
+  debug: () => {},
+};
+
+// We'll test the validation logic by importing the plugin and testing its init method
+import teeStarterPlugin from '../src/plugin';
+
+// Mock runtime for testing
+const mockRuntime = {} as IAgentRuntime;
+
+describe('TEE Environment Validation', () => {
+  // Store original environment variables
+  const originalEnv = { ...process.env };
+
+  beforeEach(() => {
+    // Clear relevant environment variables for clean test state
+    delete process.env.TEE_MODE;
+    delete process.env.TEE_VENDOR;
+    delete process.env.WALLET_SECRET_SALT;
+    // Also clear NODE_ENV to avoid test environment defaults
+    delete process.env.NODE_ENV;
+
+    // Mock logger to avoid noise
+    Object.assign(logger, mockLogger);
+  });
+
+  afterEach(() => {
+    // Restore original environment
+    process.env = { ...originalEnv };
+  });
+
+  describe('TEE_MODE Case Sensitivity', () => {
+    test('should reject lowercase tee_mode values', async () => {
+      const lowercaseValues = ['off', 'local', 'docker', 'production'];
+
+      for (const value of lowercaseValues) {
+        // Set the invalid lowercase value
+        process.env.NODE_ENV = 'production'; // Avoid test defaults
+        process.env.TEE_MODE = value;
+        process.env.TEE_VENDOR = 'phala'; // Valid vendor
+        process.env.WALLET_SECRET_SALT = 'test_salt_123';
+
+        // Attempt to initialize plugin - should fail
+        await expect(async () => {
+          await teeStarterPlugin.init?.({}, mockRuntime);
+        }).toThrow(`TEE_MODE must be one of: OFF, LOCAL, DOCKER, PRODUCTION`);
+      }
+    });
+
+    test('should accept uppercase TEE_MODE values', async () => {
+      const uppercaseValues = ['OFF', 'LOCAL', 'DOCKER', 'PRODUCTION'];
+
+      for (const value of uppercaseValues) {
+        // Set valid uppercase value
+        process.env.NODE_ENV = 'production'; // Avoid test defaults
+        process.env.TEE_MODE = value;
+        process.env.TEE_VENDOR = 'phala';
+        process.env.WALLET_SECRET_SALT = 'test_salt_123';
+
+        // Should not throw
+        let error = null;
+        try {
+          await teeStarterPlugin.init?.({}, mockRuntime);
+        } catch (e) {
+          error = e;
+        }
+        expect(error).toBeNull();
+      }
+    });
+
+    test('should provide helpful error message for common lowercase mistakes', async () => {
+      const testCases = [
+        { input: 'off', expected: 'OFF' },
+        { input: 'local', expected: 'LOCAL' },
+        { input: 'docker', expected: 'DOCKER' },
+        { input: 'production', expected: 'PRODUCTION' },
+      ];
+
+      for (const { input, expected } of testCases) {
+        process.env.NODE_ENV = 'production'; // Avoid test defaults
+        process.env.TEE_MODE = input;
+        process.env.TEE_VENDOR = 'phala';
+        process.env.WALLET_SECRET_SALT = 'test_salt_123';
+
+        try {
+          await teeStarterPlugin.init?.({}, mockRuntime);
+          expect.unreachable('Should have thrown validation error');
+        } catch (error) {
+          expect(error instanceof Error).toBe(true);
+          const errorMessage = (error as Error).message;
+          expect(errorMessage).toContain('TEE_MODE must be one of: OFF, LOCAL, DOCKER, PRODUCTION');
+          // The error should help users understand they need uppercase
+          expect(errorMessage).toMatch(/OFF|LOCAL|DOCKER|PRODUCTION/);
+        }
+      }
+    });
+  });
+
+  describe('TEE_VENDOR Validation', () => {
+    test('should only accept "phala" as TEE_VENDOR', async () => {
+      const invalidVendors = ['intel', 'amd', 'arm', 'unknown', 'PHALA', 'Phala'];
+
+      for (const vendor of invalidVendors) {
+        process.env.NODE_ENV = 'production'; // Avoid test defaults
+        process.env.TEE_MODE = 'OFF';
+        process.env.TEE_VENDOR = vendor;
+        process.env.WALLET_SECRET_SALT = 'test_salt_123';
+
+        await expect(async () => {
+          await teeStarterPlugin.init?.({}, mockRuntime);
+        }).toThrow('TEE_VENDOR must be: phala');
+      }
+    });
+
+    test('should accept "phala" as valid TEE_VENDOR', async () => {
+      process.env.NODE_ENV = 'production'; // Avoid test defaults
+      process.env.TEE_MODE = 'OFF';
+      process.env.TEE_VENDOR = 'phala';
+      process.env.WALLET_SECRET_SALT = 'test_salt_123';
+
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+  });
+
+  describe('WALLET_SECRET_SALT Validation', () => {
+    test('should require minimum salt length when explicitly provided', async () => {
+      // Note: Since we're in a test environment, we need to test the validation
+      // logic that happens before test defaults are applied
+      const shortSalts = ['short'];
+
+      for (const salt of shortSalts) {
+        // Remove argv test detection temporarily to test validation
+        const originalArgv = process.argv;
+        process.argv = ['node', 'script.js']; // Remove test from argv
+
+        process.env.NODE_ENV = 'production';
+        process.env.TEE_MODE = 'OFF';
+        process.env.TEE_VENDOR = 'phala';
+        process.env.WALLET_SECRET_SALT = salt;
+
+        try {
+          await expect(async () => {
+            await teeStarterPlugin.init?.({}, mockRuntime);
+          }).toThrow('Wallet secret salt must be at least 8 characters long for security');
+        } finally {
+          // Restore original argv
+          process.argv = originalArgv;
+        }
+      }
+    });
+
+    test('should accept valid salt length', async () => {
+      // Make sure we're not in test environment
+      process.env.NODE_ENV = 'production';
+      process.env.TEE_MODE = 'OFF';
+      process.env.TEE_VENDOR = 'phala';
+      process.env.WALLET_SECRET_SALT = 'valid_salt_123';
+
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+
+    test('should reject salt that is too long', async () => {
+      const longSalt = 'a'.repeat(129); // 129 characters (max is 128)
+
+      // Make sure we're not in test environment
+      process.env.NODE_ENV = 'production';
+      process.env.TEE_MODE = 'OFF';
+      process.env.TEE_VENDOR = 'phala';
+      process.env.WALLET_SECRET_SALT = longSalt;
+
+      await expect(async () => {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      }).toThrow('Wallet secret salt must not exceed 128 characters');
+    });
+  });
+
+  describe('Test Environment Defaults', () => {
+    test('should provide defaults in test environment when NODE_ENV=test', async () => {
+      // Set test environment
+      process.env.NODE_ENV = 'test';
+
+      // Don't set any TEE environment variables
+      delete process.env.TEE_MODE;
+      delete process.env.TEE_VENDOR;
+      delete process.env.WALLET_SECRET_SALT;
+
+      // Should not throw - test environment provides defaults
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+
+    test('should use provided values over defaults even in test environment', async () => {
+      process.env.NODE_ENV = 'test';
+      process.env.TEE_MODE = 'PRODUCTION';
+      process.env.TEE_VENDOR = 'phala';
+      process.env.WALLET_SECRET_SALT = 'explicit_test_salt_123';
+
+      // Should not throw and should use the explicit values
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    test('should handle undefined environment variables gracefully in test mode', async () => {
+      // Set test environment to get defaults
+      process.env.NODE_ENV = 'test';
+
+      // Explicitly set to undefined (simulating missing env vars)
+      process.env.TEE_MODE = undefined as any;
+      process.env.TEE_VENDOR = undefined as any;
+      process.env.WALLET_SECRET_SALT = undefined as any;
+
+      // Should use defaults and not throw in test environment
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+
+    test('should treat empty string environment variables as falsy and apply defaults in test mode', async () => {
+      // In test environment, empty strings are treated as falsy and defaults are applied
+      process.env.NODE_ENV = 'test';
+      process.env.TEE_MODE = ''; // Empty string is falsy, will use default 'OFF'
+      process.env.TEE_VENDOR = ''; // Empty string is falsy, will use default 'phala'
+      process.env.WALLET_SECRET_SALT = ''; // Empty string is falsy, will use default test salt
+
+      // Should NOT throw because defaults are applied for falsy values in test mode
+      let error = null;
+      try {
+        await teeStarterPlugin.init?.({}, mockRuntime);
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toBeNull();
+    });
+
+    test('should handle whitespace in environment variables', async () => {
+      // Remove test detection to ensure whitespace validation is tested
+      const originalArgv = process.argv;
+      const originalExpect = (global as any).expect;
+
+      try {
+        process.argv = ['node', 'script.js']; // Remove test from argv
+        delete (global as any).expect; // Remove expect global
+
+        process.env.NODE_ENV = 'production';
+        process.env.TEE_MODE = ' OFF '; // Whitespace around valid value
+        process.env.TEE_VENDOR = ' phala '; // Whitespace around valid value
+        process.env.WALLET_SECRET_SALT = ' test_salt_123 '; // Whitespace around valid value
+
+        // Whitespace should cause validation failure (no auto-trim)
+        await expect(async () => {
+          await teeStarterPlugin.init?.({}, mockRuntime);
+        }).toThrow();
+      } finally {
+        // Restore original values
+        process.argv = originalArgv;
+        (global as any).expect = originalExpect;
+      }
+    });
+  });
+});

package/templates/project-tee-starter/__tests__/vite-config-utils.ts

@@ -0,0 +1,39 @@
+import path from 'node:path';
+import fs from 'node:fs';
+
+/**
+ * Extracts the Vite output directory from vite.config.ts
+ */
+export async function getViteOutDir(rootDir: string): Promise<string> {
+  const viteConfigPath = path.join(rootDir, 'vite.config.ts');
+  const configContent = await fs.promises.readFile(viteConfigPath, 'utf-8');
+
+  // Extract the outDir value using regex
+  const outDirMatch = configContent.match(/outDir\s*:\s*['"`]([^'"`]+)['"`]/);
+  if (!outDirMatch) {
+    throw new Error('Could not find outDir in vite.config.ts');
+  }
+
+  let outDir = outDirMatch[1];
+
+  // Handle variable references like ${outDir}
+  if (outDir.includes('${')) {
+    // Look for the variable definition
+    const varMatch = configContent.match(/const\s+outDir\s*=\s*['"`]([^'"`]+)['"`]/);
+    if (varMatch) {
+      outDir = outDir.replace('${outDir}', varMatch[1]);
+    } else {
+      // Default fallback
+      outDir = 'dist/.vite';
+    }
+  }
+
+  // The outDir in vite.config.ts is relative to the root option (src/frontend)
+  // We need to normalize it to be relative to the project root
+  if (outDir.startsWith('../../')) {
+    // Convert ../../dist/frontend to dist/frontend
+    outDir = outDir.replace('../../', '');
+  }
+
+  return outDir;
+}

package/templates/project-tee-starter/docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3'
+version: '3.8'
 services:
   postgres:
     image: ankane/pgvector:latest
@@ -22,9 +22,9 @@ services:
   elizaos:
     image: ${DOCKER_IMAGE}
     container_name: elizaos
-    command: sh -c "bun run start"
     volumes:
       - /var/run/tappd.sock:/var/run/tappd.sock
+      - /var/run/dstack.sock:/var/run/dstack.sock
     environment:
       - OPENAI_API_KEY=${OPENAI_API_KEY}
       - SERVER_PORT=${SERVER_PORT}
@@ -39,6 +39,9 @@ services:
       - REDPILL_API_KEY=${REDPILL_API_KEY}
       - ELEVENLABS_API_KEY=${ELEVENLABS_API_KEY}
       - ELEVENLABS_VOICE_ID=${ELEVENLABS_VOICE_ID}
+      - ELIZA_UI_ENABLE=${ELIZA_UI_ENABLE:-true}
+      - NODE_ENV=${NODE_ENV:-production}
+      - LOG_LEVEL=${LOG_LEVEL:-info}
     ports:
       - '3000:3000'
       - '50000-50100:50000-50100/udp'

package/templates/{plugin-starter/dist → project-tee-starter}/index.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Agent Plugin View</title>
-    <script type="module" crossorigin src="./assets/index-D1cHX53P.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CgkejLs_.css">
+    <title>Mr. TEE Agent Plugin View</title>
   </head>
+
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/frontend/index.tsx"></script>
   </body>
 </html>

package/templates/project-tee-starter/package.json

@@ -33,31 +33,51 @@
     "GUIDE.md"
   ],
   "dependencies": {
-    "@elizaos/cli": "1.3.0",
-    "@elizaos/core": "1.3.0",
-    "@elizaos/plugin-redpill": "1.0.3",
-    "@elizaos/plugin-sql": "1.3.0",
+    "@elizaos/cli": "1.3.2",
+    "@elizaos/core": "1.3.2",
+    "@elizaos/plugin-bootstrap": "1.3.2",
+    "@elizaos/plugin-redpill": "1.2.1",
+    "@elizaos/plugin-sql": "1.3.2",
     "@phala/dstack-sdk": "0.1.11",
     "@solana/web3.js": "1.98.2",
+    "@tanstack/react-query": "^5.29.0",
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.1.10",
     "viem": "2.30.1",
     "zod": "3.24.2"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^24.1.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "jsdom": "^26.1.0",
     "prettier": "3.5.3",
-    "tsup": "8.5.0"
+    "tsup": "8.5.0",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.1"
   },
   "scripts": {
     "start": "elizaos start",
     "dev": "elizaos dev",
-    "build": "tsup",
-    "lint": "prettier --write ./src ./__tests__",
-    "test:component": "bun test",
-    "test:e2e": "bun test --port 3001",
-    "test": "bun run test:component && bun run test:e2e",
-    "test:coverage": "bun test --coverage",
-    "test:watch": "bun test --watch",
-    "format": "prettier --write ./src ./__tests__",
-    "format:check": "prettier --check ./src ./__tests__"
+    "build": "tsc --noEmit && vite build && tsup",
+    "lint": "prettier --write ./src",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "tsc --noEmit --watch",
+    "test:component": "bun run test:install && bun test",
+    "test:e2e": "bun run test:install && bun test __tests__/integration.test.ts",
+    "test:frontend": "bun run test:install && bun test __tests__/frontend.test.ts",
+    "test": "bun run test:install && bun run test:component && bun run test:e2e && bun run test:frontend",
+    "test:coverage": "bun run test:install && bun test --coverage",
+    "test:watch": "bun run test:install && bun test --watch",
+    "test:install": "node scripts/install-test-deps.js",
+    "format": "prettier --write ./src",
+    "format:check": "prettier --check ./src",
+    "check-all": "bun run type-check && bun run format:check && bun run test"
   },
   "publishConfig": {
     "access": "public"

package/templates/project-tee-starter/postcss.config.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: {},
+};

package/templates/project-tee-starter/scripts/install-test-deps.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env bun
+
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+const testDependencies = {
+  // Cypress dependencies removed - using bun test instead
+};
+
+function isInstalled(packageName) {
+  try {
+    const packageJsonPath = join(process.cwd(), 'package.json');
+    if (existsSync(packageJsonPath)) {
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+      const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+      return packageName in deps;
+    }
+  } catch (error) {
+    // Silent fail, will install if error
+  }
+  return false;
+}
+
+function installTestDependencies() {
+  const missingDeps = Object.entries(testDependencies)
+    .filter(([name]) => !isInstalled(name))
+    .map(([name, version]) => `${name}@${version}`);
+
+  if (missingDeps.length === 0) {
+    console.log('✓ Test dependencies already installed');
+    return;
+  }
+
+  console.log('Installing test dependencies...');
+  try {
+    const proc = Bun.spawnSync(['bun', 'add', '-d', ...missingDeps], {
+      stdout: 'inherit',
+      stderr: 'inherit',
+      cwd: process.cwd(),
+    });
+
+    if (proc.exitCode !== 0) {
+      throw new Error('bun add command failed');
+    }
+    console.log('✓ Test dependencies installed successfully');
+  } catch (error) {
+    console.error('Failed to install test dependencies:', error.message);
+    process.exit(1);
+  }
+}
+
+installTestDependencies();

package/templates/project-tee-starter/scripts/test-all.sh

@@ -0,0 +1,82 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}Starting comprehensive test suite for project-tee-starter...${NC}"
+
+# Function to run tests and capture results
+run_test() {
+    local test_name=$1
+    local test_command=$2
+    
+    echo -e "\n${BLUE}Running ${test_name}...${NC}"
+    
+    if eval "$test_command"; then
+        echo -e "${GREEN}✓ ${test_name} passed${NC}"
+        return 0
+    else
+        echo -e "${RED}✗ ${test_name} failed${NC}"
+        return 1
+    fi
+}
+
+# Track overall success
+all_passed=true
+
+# 1. Type checking
+if ! run_test "TypeScript type checking" "bun run type-check"; then
+    all_passed=false
+fi
+
+# 2. Build test
+if ! run_test "Build process" "bun run build"; then
+    all_passed=false
+    echo -e "${RED}Build failed, skipping further tests${NC}"
+    exit 1
+fi
+
+# 3. Unit tests
+if ! run_test "Unit tests" "bun test"; then
+    all_passed=false
+fi
+
+# 4. E2E tests (if server is running)
+if lsof -Pi :3000 -sTCP:LISTEN -t >/dev/null; then
+    if ! run_test "E2E tests" "elizaos test e2e"; then
+        all_passed=false
+    fi
+else
+    echo -e "${BLUE}Skipping E2E tests (server not running on port 3000)${NC}"
+fi
+
+# 5. Component tests with bun test
+if ! run_test "Component tests" "bun test __tests__/frontend.test.ts"; then
+    all_passed=false
+fi
+
+# 6. Build validation
+if ! run_test "Build output validation" "test -f dist/src/index.js && test -f dist/index.d.ts"; then
+    all_passed=false
+fi
+
+# 7. Frontend build validation
+if ! run_test "Frontend build validation" "test -f dist/frontend/index.html"; then
+    all_passed=false
+fi
+
+# Final report
+echo -e "\n${BLUE}========================================${NC}"
+if [ "$all_passed" = true ]; then
+    echo -e "${GREEN}All tests passed! 🎉${NC}"
+    exit 0
+else
+    echo -e "${RED}Some tests failed. Please review the output above.${NC}"
+    exit 1
+fi 

package/templates/project-tee-starter/src/frontend/index.css

@@ -0,0 +1,106 @@
+@import 'tailwindcss';
+@config "../../tailwind.config.js";
+
+@layer base {
+  :root {
+    --background: 0 0% 97.65%;
+    --foreground: 0 0% 12.55%;
+    --muted: 0 0% 93.73%;
+    --muted-foreground: 0 0% 39.22%;
+    --popover: 0 0% 98.82%;
+    --popover-foreground: 0 0% 12.55%;
+    --card: 0 0% 98.82%;
+    --card-foreground: 0 0% 12.55%;
+    --border: 0 0% 84.71%;
+    --input: 0 0% 94.12%;
+    --primary: 22.93 92.59% 52.35%;
+    --primary-foreground: 44 0% 100%;
+    --secondary: 34.05 100% 85.49%;
+    --secondary-foreground: 16.27 50.43% 22.94%;
+    --accent: 0 0% 90.98%;
+    --accent-foreground: 0 0% 12.55%;
+    --destructive: 10.16 77.87% 53.92%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 24.8 79.79% 63.14%;
+    --chart-1: 22.93 92.59% 52.35%;
+    --chart-2: 34.05 100% 85.49%;
+    --chart-3: 0 0% 90.98%;
+    --chart-4: 34.05 100% 88.49%;
+    --chart-5: 22.93 95.59% 52.35%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 6.67%;
+    --foreground: 0 0% 93.33%;
+    --muted: 0 0% 13.33%;
+    --muted-foreground: 0 0% 70.59%;
+    --popover: 0 0% 9.8%;
+    --popover-foreground: 0 0% 93.33%;
+    --card: 0 0% 9.8%;
+    --card-foreground: 0 0% 93.33%;
+    --border: 44 14% 11%;
+    --input: 0 0% 28.24%;
+    --primary: 22.93 92.59% 52.35%;
+    --primary-foreground: 29.51 0% 100%;
+    --secondary: 28.5 64.52% 12.16%;
+    --secondary-foreground: 29.51 100% 88.04%;
+    --accent: 0 0% 16.47%;
+    --accent-foreground: 0 0% 93.33%;
+    --destructive: 10.16 77.87% 53.92%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 23.11 59.8% 40%;
+    --chart-1: 22.93 92.59% 52.35%;
+    --chart-2: 28.5 64.52% 12.16%;
+    --chart-3: 0 0% 16.47%;
+    --chart-4: 28.5 64.52% 15.16%;
+    --chart-5: 22.93 95.59% 52.35%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Force dark mode */
+:root {
+  color-scheme: dark;
+}
+
+body {
+  @apply font-mono bg-background text-foreground;
+}
+
+/* TEE-specific styling */
+.tee-status-badge {
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+.tee-status-badge.connected {
+  @apply bg-green-900 text-green-300;
+}
+
+.tee-status-badge.disconnected {
+  @apply bg-red-900 text-red-300;
+}
+
+.tee-status-badge.loading {
+  @apply bg-yellow-900 text-yellow-300;
+}
+
+/* Loading animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}