init

router-app/.gitignore

@@ -0,0 +1 @@
+node_modules

router-app/pem/https-cert.pem

@@ -0,0 +1,15 @@
+-----BEGIN CERTIFICATE-----
+MIICXTCCAcagAwIBAgIJHsP036vqWER/MA0GCSqGSIb3DQEBBQUAMF8xCjAIBgNV
+BAMTASoxCzAJBgNVBAYTAkNOMREwDwYDVQQIEwhaaGVKaWFuZzERMA8GA1UEBxMI
+SGFuZ3pob3UxETAPBgNVBAoTCEVudmlzaW9uMQswCQYDVQQLEwJJVDAeFw0yNTAz
+MDcxNDIwMTJaFw0yNjAzMDcxNDIwMTJaMF8xCjAIBgNVBAMTASoxCzAJBgNVBAYT
+AkNOMREwDwYDVQQIEwhaaGVKaWFuZzERMA8GA1UEBxMISGFuZ3pob3UxETAPBgNV
+BAoTCEVudmlzaW9uMQswCQYDVQQLEwJJVDCBnzANBgkqhkiG9w0BAQEFAAOBjQAw
+gYkCgYEAquA2XnwduVSJHvnTW4r5yodz/joTPUi+r8kS/KJyR/NQ5xovtDY2gJoO
+nJk8qekcLKuofskIIu4HFsCE7AYBkQGaYmc+0cCQCmEpwivesbeMB0ydz+6NwLQn
+32HVjtMtx3gUcywGdMntiQb/P9FIhtE132wOmW9PeSl0dx/nyrUCAwEAAaMhMB8w
+HQYDVR0RBBYwFIIBKoIJbG9jYWxob3N0hwR/AAABMA0GCSqGSIb3DQEBBQUAA4GB
+AJsjIZgb6iE4OTXoEDiBPmHM+byWs20K2eCvi79V9/vns90IroBQfGirIsovv923
+SqjmdAFsZkRUbZvX99lBX0mmZK9KTE4K9YUm7bv+d8+fBPxAgNFSTRiSNBeNh0Lh
+HdJUiI/tzIfI6RRg1pFDC1tOG083Cl/YElN879w3Iipi
+-----END CERTIFICATE-----

router-app/pem/https-key.pem

@@ -0,0 +1,15 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIICXAIBAAKBgQCq4DZefB25VIke+dNbivnKh3P+OhM9SL6vyRL8onJH81DnGi+0
+NjaAmg6cmTyp6Rwsq6h+yQgi7gcWwITsBgGRAZpiZz7RwJAKYSnCK96xt4wHTJ3P
+7o3AtCffYdWO0y3HeBRzLAZ0ye2JBv8/0UiG0TXfbA6Zb095KXR3H+fKtQIDAQAB
+AoGADDEbL/qjFEoXzoH8tpdf4zdu60CxhrneASTTmfrtNH0D1LlllfIYSWy0hi/Y
+yDa9r+I/j2xAjF13XAQ4d66mBdjCRATLx/aL495o+e6NkIBEAgdP88hHm13F6gg+
+h8iMixs5mkwU41sghnCYeBqlziKPi8fsoTmhK0VETFUtDQECQQDT0kZ7OCEVNcz0
+LAUPO7ukeHAYnGYns+Q3F3kgonzHPGflClH5dsg0NS1HFQj6Ny2oyUupjNePOCJK
+88zNehIlAkEAzoO9zrE+AoTPleVpe7TAUlZB1YMa7W1C5owjyEkv4TjIe8mpwWM/
+9vVe+SGUnc6DZy6xkk5zWmA2w18SexXJUQJBAJQbcyy1EmzCMYyJOwBrw8g8biTH
+NqaMIgZjY05uTtEAa6S6kpbbdyEKDZ6mFqDd9A8QsNbco9yAY3oE/i6uLAECQHOt
+a9aphZiXmEfYl3uJxejZFEtrAtxXxY+qlCiOhllcG0Drt0DyPVQyIZ7fZoX2tbhI
+eYMAmrDXEBXj3VBA5eECQCLGpQKqo06QwP2qZ9mEaPB9KvVcABo97b9Lf7VUqcJx
+tFWRSlpeICpDQZHqX92nwoD/2fGCH3br3o94k1oyApI=
+-----END RSA PRIVATE KEY-----

router-app/src/app.ts

@@ -0,0 +1,21 @@
+import { App } from '@kevisual/router';
+import { httpsConfig } from './modules/config';
+export const app = new App({
+  serverOptions: {
+    httpType: 'https',
+    httpsCert: httpsConfig.cert.toString(),
+    httpsKey: httpsConfig.key.toString(),
+  },
+});
+app
+  .route({
+    path: 'demo',
+  })
+  .define(async (ctx) => {
+    ctx.body = 'hello world';
+  })
+  .addTo(app);
+console.log('httpsConfig', `https://localhost:51015/api/router?path=demo`);
+app.listen(51015, () => {
+  console.log('Router App is running on https://localhost:51015');
+});

router-app/src/modules/config.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import path from 'path';
+
+const pemDir = path.join(process.cwd(), 'router-app', 'pem');
+
+export const httpsConfig = {
+  key: fs.readFileSync(path.join(pemDir, 'https-key.pem')),
+  cert: fs.readFileSync(path.join(pemDir, 'https-cert.pem')),
+};

router-app/src/modules/config/index.ts

@@ -0,0 +1,108 @@
+import path from 'path';
+import { homedir } from 'os';
+import fs from 'fs';
+import { checkFileExists, createDir } from '../file';
+
+export const kevisualUrl = 'https://kevisual.xiongxiao.me';
+const configDir = createDir(path.join(homedir(), '.config/envision'));
+export const configPath = path.join(configDir, 'assistant-config.json');
+export const appConfigPath = path.join(configDir, 'assistant-app-config.json');
+export const appDir = createDir(path.join(configDir, 'assistant-app/frontend'));
+export const LocalElectronAppUrl = 'https://assistant.app/user/tiptap/';
+
+type AssistantConfig = {
+  pageApi?: string; // https://kevisual.silkyai.cn
+  loadURL?: string; // https://assistant.app/user/tiptap/
+  proxy?: { user: string; key: string; path: string }[];
+};
+let assistantConfig: AssistantConfig;
+export const getConfig = () => {
+  try {
+    if (!checkFileExists(configPath)) {
+      fs.writeFileSync(configPath, JSON.stringify({ proxy: [] }, null, 2));
+      return {
+        loadURL: LocalElectronAppUrl,
+        pageApi: '',
+        proxy: [],
+      };
+    }
+    assistantConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    return assistantConfig;
+  } catch (error) {
+    console.error(error);
+    return {
+      loadURL: LocalElectronAppUrl,
+      pageApi: '',
+      proxy: [],
+    };
+  }
+};
+export const getCacheAssistantConfig = () => {
+  if (assistantConfig) {
+    return assistantConfig;
+  }
+  return getConfig();
+};
+
+export const setConfig = (config?: AssistantConfig) => {
+  if (!config) {
+    return assistantConfig;
+  }
+  assistantConfig = config;
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+  return assistantConfig;
+};
+type AppConfig = {
+  list: any[];
+};
+/**
+ * 应用配置
+ * @returns
+ */
+export const getAppConfig = (): AppConfig => {
+  if (!checkFileExists(appConfigPath)) {
+    return {
+      list: [],
+    };
+  }
+  return JSON.parse(fs.readFileSync(appConfigPath, 'utf8'));
+};
+
+export const setAppConfig = (config: AppConfig) => {
+  fs.writeFileSync(appConfigPath, JSON.stringify(config, null, 2));
+  return config;
+};
+
+export const addAppConfig = (app: any) => {
+  const config = getAppConfig();
+  const assistantConfig = getCacheAssistantConfig();
+  const _apps = config.list;
+  const _proxy = assistantConfig.proxy || [];
+  const { user, key } = app;
+  const newProxyInfo = {
+    user,
+    key,
+    path: `/${user}/${key}`,
+  };
+  const _proxyIndex = _proxy.findIndex((_proxy: any) => _proxy.path === newProxyInfo.path);
+  if (_proxyIndex !== -1) {
+    _proxy[_proxyIndex] = newProxyInfo;
+  } else {
+    _proxy.push(newProxyInfo);
+  }
+
+  const _app = _apps.findIndex((_app: any) => _app.id === app.id);
+  if (_app !== -1) {
+    _apps[_app] = app;
+  } else {
+    _apps.push(app);
+  }
+  setAppConfig({ ...config, list: _apps });
+  setConfig({ ...assistantConfig, proxy: _proxy });
+  return config;
+};
+
+export const getAppList = () => {
+  const config = getAppConfig();
+  return config.list || [];
+};

router-app/src/modules/file/index.ts

@@ -0,0 +1,20 @@
+import fs from 'fs';
+
+export const checkFileExists = (filePath: string, checkIsFile = false) => {
+  try {
+    fs.accessSync(filePath);
+    if (checkIsFile) {
+      return fs.statSync(filePath).isFile();
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const createDir = (dirPath: string) => {
+  if (!checkFileExists(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+  return dirPath;
+};

router-app/src/proxy/index.ts

@@ -0,0 +1,5 @@
+import http from 'http';
+
+export const handleRequest = async (req: http.IncomingMessage, res: http.ServerResponse) => {
+   
+}

router-app/src/scripts/create-sign.ts

@@ -0,0 +1,18 @@
+import { createCert } from '@kevisual/router/sign';
+import { writeFileSync } from 'fs';
+import path from 'path';
+const pemDir = path.join(process.cwd(), 'router-app', 'pem');
+
+const { key, cert } = createCert([
+  {
+    name: 'commonName',
+    value: 'localhost',
+  },
+  {
+    name: 'organizationName',
+    value: 'kevisual',
+  },
+]);
+
+writeFileSync(path.join(pemDir, 'https-key.pem'), key);
+writeFileSync(path.join(pemDir, 'https-cert.pem'), cert);

router-app/static/download.ts

@@ -0,0 +1,18 @@
+import fs from 'fs';
+
+const apps = [
+  { user: 'root', key: 'enter', version: '1.0.0' }, //
+  { user: 'root', key: 'packages', version: '1.0.0' },
+];
+
+const baseURL = 'https://kevisual.silkyai.cn';
+
+const downloadApps = () => {
+  //
+};
+
+export const downloadLink = async (url: string, path: string) => {
+  const res = await fetch(url);
+  const blob = await res.blob();
+  fs.writeFileSync(path, Buffer.from(await blob.arrayBuffer()));
+};

router-app/static/enter/electron.js

@@ -0,0 +1,23 @@
+export const checkIsElectron = () => {
+  return typeof window !== 'undefined' && typeof window.electron === 'object';
+};
+export const getElectron = () => {
+  return window.electron;
+};
+export const saveAppConfig = async (config) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  const saveResult = await electron.ipcRenderer.invoke('save-app-config', config);
+  return saveResult;
+};
+export const relunch = async () => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+};

router-app/static/enter/index.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page Enter Configuration</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            padding: 1.5rem;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        .container {
+            max-width: 42rem;
+            margin: 0 auto;
+        }
+
+        .header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .header svg {
+            width: 2rem;
+            height: 2rem;
+            color: #d97706;
+            animation: spin 8s linear infinite;
+        }
+
+        .header h1 {
+            font-size: 1.875rem;
+            font-weight: bold;
+            color: #92400e;
+        }
+
+        .form-container {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(8px);
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(217, 119, 6, 0.1);
+            padding: 2rem;
+            transition: all 0.3s ease;
+        }
+
+        .form-container:hover {
+            box-shadow: 0 8px 12px rgba(217, 119, 6, 0.15);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #92400e;
+            margin-bottom: 0.25rem;
+        }
+
+        input[type="text"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid #fbbf24;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        input[type="text"]:focus {
+            outline: none;
+            border-color: #d97706;
+            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
+        }
+
+        button {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            background-color: #d97706;
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        button:hover {
+            background-color: #b45309;
+        }
+
+        .particles {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+
+        .particle {
+            position: absolute;
+            color: #fbbf24;
+            opacity: 0.3;
+            animation: float 5s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) rotate(0deg);
+            }
+            50% {
+                transform: translateY(-20px) rotate(10deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="particles" id="particles"></div>
+    
+    <div class="container">
+        <div class="header">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                <circle cx="12" cy="12" r="3"/>
+            </svg>
+            <h1>Page Enter Configuration</h1>
+        </div>
+
+        <div class="form-container">
+            <form id="configForm">
+                <div class="form-group">
+                    <label for="pageApi">Page Enter Api</label>
+                    <input type="text" id="pageApi" placeholder="Enter page api configuration">
+                </div>
+
+                <button type="submit" id="save-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                        <polyline points="17 21 17 13 7 13 7 21"/>
+                        <polyline points="7 3 7 8 15 8"/>
+                    </svg>
+                    Save Configuration
+                </button>
+            </form>
+            <div id="save-result"></div>
+        </div>
+    </div>
+
+    <script>
+        // Create floating particles
+        function createParticles() {
+            const particles = document.getElementById('particles');
+            const particleCount = 20;
+
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.innerHTML = `
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
+                        <path d="M5 3v4"/>
+                        <path d="M19 17v4"/>
+                        <path d="M3 5h4"/>
+                        <path d="M17 19h4"/>
+                    </svg>
+                `;
+                
+                const size = 10 + Math.random() * 20;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                particle.style.animationDuration = `${5 + Math.random() * 5}s`;
+                particle.style.animationDelay = `${Math.random() * 5}s`;
+                
+                particles.appendChild(particle);
+            }
+        }
+
+        // Initialize particles
+        createParticles();
+
+        // Form handling
+  
+    </script>
+    <script src="./main.js" type="module"></script>
+</body>
+</html>

router-app/static/enter/main.js

@@ -0,0 +1,28 @@
+import { saveAppConfig } from './electron.js';
+
+window.onload = async () => {
+  const config = await saveAppConfig();
+  const pageApi = document.getElementById('pageApi');
+  const saveResult = document.getElementById('save-result');
+  pageApi.value = config?.pageApi || 'https://kevisual.silkyai.cn';
+  console.log('config', config);
+  const form = document.getElementById('configForm');
+
+  // Handle form submission
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const config = {
+      pageApi: pageApi.value,
+    };
+    const result = await saveAppConfig(config);
+
+    const newPageApi = result?.pageApi || '';
+    saveResult.innerHTML = `<h1>保存成功</h1>
+    <p>new pageApi: ${newPageApi}</p>
+    <button id="relunch">重启</button>`;
+    const relunchButton = document.getElementById('relunch');
+    relunchButton.addEventListener('click', () => {
+      window.electron.ipcRenderer.invoke('relunch');
+    });
+  });
+};

router-app/static/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Config Page</title>
+</head>
+
+<body>
+  <h1>配置完成后重启</h1>
+  <button id="restart">重启</button>
+</body>
+
+<script>
+  const restart = document.getElementById('restart');
+  restart.addEventListener('click', () => {
+    window.electron.ipcRenderer.invoke('relunch');
+  });
+</script>
+
+</html>

router-app/static/packages/config.js

@@ -0,0 +1,3 @@
+export const config = {
+  appListUrl: 'http://localhost:4005/api/router?path=app&key=public-list',
+};

router-app/static/packages/electron.js

@@ -0,0 +1,45 @@
+export const checkIsElectron = () => {
+  return typeof window !== 'undefined' && typeof window.electron === 'object';
+};
+export const getElectron = () => {
+  return window.electron;
+};
+export const getAppList = async () => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('electron', electron);
+  const appList = await electron.ipcRenderer.invoke('get-app-list');
+
+  console.log('appList', appList);
+  return appList;
+};
+
+export const installApp = async (app) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('installApp', app);
+  const result = await electron.ipcRenderer.invoke('install-app', app);
+  console.log('installApp result', result);
+  return result;
+};
+
+export const uninstallApp = async (app) => {
+  const check = checkIsElectron();
+  if (!check) {
+    console.log('not electron');
+    return [];
+  }
+  const electron = getElectron();
+  console.log('uninstallApp', app);
+  const result = await electron.ipcRenderer.invoke('uninstall-app', app);
+  console.log('uninstallApp result', result);
+  return result;
+};

router-app/static/packages/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Package Manager</title>
+    <link rel="stylesheet" href="./style.css">
+    <script type="module" src="./electron.js"></script>
+</head>
+<body>
+    <div id="app">
+        <h1>Package Manager</h1>
+        <div id="package-list" class="package-list"></div>
+    </div>
+    <script type="module" src="./main.js"></script>
+</body>
+</html>

router-app/static/packages/main.js

@@ -0,0 +1,158 @@
+import { config } from './config.js';
+import { getAppList, installApp, uninstallApp } from './electron.js';
+let installedPackages = [];
+let allPackages = [];
+// Store for installed packages
+// const installedPackages = [
+//   { user: 'test', key: 'test-key', version: '1.0.0' },
+//   { user: 'demo', key: 'demo-package', version: '1.2.0' },
+// ];
+
+// Function to fetch packages from API
+async function fetchPackages() {
+  try {
+    // Currently using mock data
+    // TODO: Uncomment the following code when API is ready
+    const response = await fetch(config.appListUrl);
+    const result = await response.json();
+    if (result.code === 200) {
+      return result.data;
+    }
+    throw new Error('Failed to fetch packages');
+  } catch (error) {
+    console.error('Error fetching packages:', error);
+    return [];
+  }
+}
+
+// Mock data for testing
+const mockPackages = [
+  {
+    id: '1',
+    title: 'Demo Package 1',
+    description: 'A test package for demonstration',
+    version: '1.0.0',
+    user: 'test',
+    key: 'test-key',
+  },
+  {
+    id: '2',
+    title: 'Demo Package 2',
+    description: 'Another test package with updates',
+    version: '2.0.0',
+    user: 'demo',
+    key: 'demo-package',
+  },
+  {
+    id: '3',
+    title: 'New Package',
+    description: "A package that hasn't been installed yet",
+    version: '1.0.0',
+    user: 'demo',
+    key: 'new-package',
+  },
+];
+
+// Function to check if a package is installed
+async function getPackageStatus(pkg) {
+  const installed = installedPackages.find((p) => p.user === pkg.user && p.key === pkg.key);
+
+  if (!installed) return 'not-installed';
+  if (installed.version !== pkg.version) return 'update-available';
+  return 'installed';
+}
+
+// Function to create a package card
+async function createPackageCard(pkg) {
+  const status = await getPackageStatus(pkg);
+  const card = document.createElement('div');
+  card.className = 'package-card';
+
+  card.innerHTML = `
+      <h2>${pkg.title}</h2>
+      <p class="description">${pkg.description}</p>
+      <div class="package-info">
+          <span>Version: ${pkg.version}</span>
+          <span>User: ${pkg.user}</span>
+      </div>
+      <div class="actions">
+          ${getActionButton(status, pkg)}
+          ${status !== 'not-installed' ? `<button class="button button-uninstall" onclick="handleUninstall('${pkg.id}')">Uninstall</button>` : ''}
+      </div>
+  `;
+
+  return card;
+}
+
+// Function to get the appropriate action button based on status
+function getActionButton(status, pkg) {
+  switch (status) {
+    case 'not-installed':
+      return `<button class="button button-install" onclick="handleInstall('${pkg.id}')">Install</button>`;
+    case 'update-available':
+      return `<button class="button button-update" onclick="handleUpdate('${pkg.id}')">Update</button>`;
+    case 'installed':
+      return `<button class="button button-reinstall" onclick="handleReinstall('${pkg.id}')">Reinstall</button>`;
+  }
+}
+
+// Action handlers
+window.handleInstall = async (id) => {
+  console.log('Installing package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleUpdate = async (id) => {
+  console.log('Updating package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleReinstall = async (id) => {
+  console.log('Reinstalling package:', id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    await installApp(pkg);
+    renderPackages();
+  }
+};
+
+window.handleUninstall = async (id) => {
+  console.log('Uninstalling package:', id);
+  // const pkg = mockPackages.find((p) => p.id === id);
+  const pkg = allPackages.find((p) => p.id === id);
+  if (pkg) {
+    // TODO: Replace with actual API call
+    const index = installedPackages.findIndex((p) => p.user === pkg.user && p.key === pkg.key);
+    await uninstallApp(pkg);
+    if (index !== -1) {
+      installedPackages.splice(index, 1);
+      renderPackages();
+    }
+  }
+};
+
+// Render packages
+async function renderPackages() {
+  const packageList = document.getElementById('package-list');
+  packageList.innerHTML = '';
+  const installed = await getAppList();
+  installedPackages = installed;
+  for (const pkg of allPackages) {
+    packageList.appendChild(await createPackageCard(pkg));
+  }
+}
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', async () => {
+  const packages = await fetchPackages();
+  allPackages = packages;
+  renderPackages();
+});

router-app/static/packages/style.css

@@ -0,0 +1,115 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  background-color: #fff8e1;
+  color: #213547;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1 {
+  text-align: center;
+  color: #ff8f00;
+}
+
+.package-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.package-card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(255, 143, 0, 0.1);
+  border: 1px solid #ffe0b2;
+}
+
+.package-card h2 {
+  margin: 0 0 0.5rem 0;
+  color: #f57c00;
+}
+
+.package-card .description {
+  color: #666;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+  max-height: 6em;
+}
+
+.package-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.button-install {
+  background-color: #ffa000;
+  color: white;
+}
+
+.button-update {
+  background-color: #ff8f00;
+  color: white;
+}
+
+.button-reinstall {
+  background-color: #ffb300;
+  color: white;
+}
+
+.button-uninstall {
+  background-color: #ff6f00;
+  color: white;
+}
+
+.button:hover {
+  opacity: 0.9;
+}
+
+.button:disabled {
+  background-color: #ffe0b2;
+  cursor: not-allowed;
+}
+
+.error-message {
+  text-align: center;
+  color: #ff6f00;
+  padding: 2rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(255, 143, 0, 0.1);
+  grid-column: 1 / -1;
+}