local-ai-chat-frontend 1.0.0 → 1.2.0

package/README.md

@@ -40,7 +40,7 @@ Local LLM providers lack easy-to-deploy, cross-platform GUIs. local-ai-chat-fron
 
 ### User Experience
 
-- **Client-side storage** — API keys and endpoint configuration are persisted in IndexedDB and never leave your device.
+- **Client-side storage** — Settings and API keys are kept in this browser's IndexedDB (not encrypted). A key is sent only to the endpoint of its own provider; you can turn off sending it per provider, or turn off saving keys entirely on shared devices.
 - **Markdown rendering** — AI responses are rendered as Markdown via `marked`, sanitized with DOMPurify before display, supporting code blocks, lists, and formatting.
 - **Performance metrics** — See tokens per second and timestamp for each AI response.
 - **Conversation minimap** — A compact minimap beside the scrollbar shows all messages color-coded by sender. Click any block to jump to that message instantly.
@@ -53,7 +53,7 @@ Local LLM providers lack easy-to-deploy, cross-platform GUIs. local-ai-chat-fron
 
 ### Deployment
 
-- **npx one-liner** — Run instantly from GitHub without cloning: `npx https://github.com/hidao80/local-ai-chat-frontend`.
+- **npx one-liner** — Run instantly from GitHub without cloning: `npx local-ai-chat-frontend`.
 - **Docker-ready** — Production image serves the static build via nginx; a dev compose file is included for local development.
 
 ## Tech Stack
@@ -67,7 +67,7 @@ Local LLM providers lack easy-to-deploy, cross-platform GUIs. local-ai-chat-fron
 | Markdown | marked + DOMPurify (sanitization) |
 | Storage | IndexedDB (native) |
 | i18n | i18next / react-i18next |
-| Server | sirv-cli |
+| Server | Node `http` + sirv (with security headers) / nginx (Docker) |
 
 ### Key Technologies
 
@@ -82,7 +82,7 @@ Local LLM providers lack easy-to-deploy, cross-platform GUIs. local-ai-chat-fron
 ### Run instantly (no install)
 
 ```bash
-npx github:hidao80/local-ai-chat-frontend
+npx local-ai-chat-frontend
 ```
 
 > `bunx` does not reliably build `devDependencies` from a raw git ref, so `npx` is the recommended way to run this project directly from GitHub. If you use Bun, clone the repo and run `bun install && bun run build && bun start` instead.
@@ -90,8 +90,8 @@ npx github:hidao80/local-ai-chat-frontend
 ### Custom port / LAN access
 
 ```bash
-PORT=8080 npx github:hidao80/local-ai-chat-frontend
-HOST=0.0.0.0 PORT=3000 npx github:hidao80/local-ai-chat-frontend
+PORT=8080 npx local-ai-chat-frontend
+HOST=0.0.0.0 PORT=3000 npx local-ai-chat-frontend
 ```
 
 ### Run with Docker
@@ -145,7 +145,7 @@ The application supports multiple LLM providers with automatic model discovery:
 
 ### CORS Configuration
 
-**GPT4ALL**: Uses Vite proxy in development mode. When running via `npx` or `bun start`, sirv-cli serves with `--cors` enabled so the browser can reach `localhost:4891` directly.
+**GPT4ALL**: GPT4ALL has no CORS support, so the app reaches it through the Vite dev proxy (`bun run dev`). The production server (`npx` / `bun start`) and the Docker image do not proxy GPT4ALL.
 
 **Ollama**: Set environment variable before starting:
 ```bash
@@ -170,7 +170,7 @@ bun run build
 ### Type Check
 
 ```bash
-bunx tsc --noEmit
+bunx tsc -b
 ```
 
 ### Project Structure
@@ -178,7 +178,12 @@ bunx tsc --noEmit
 ```
 src/
 ├── components/
-│   └── ChatAndSettings.tsx  # Main UI components
+│   ├── Chat.tsx             # Chat view (send / stream loop)
+│   ├── ChatSidebar.tsx      # Session history sidebar
+│   ├── ConfirmModal.tsx     # Confirmation dialog
+│   ├── Minimap.tsx          # Chat minimap
+│   └── Settings.tsx         # Connection / model settings
+├── lib/                     # Non-UI helpers (API calls, storage, rendering) + unit tests
 ├── locales/
 │   ├── en.json              # English translations
 │   └── ja.json              # Japanese translations

package/bin/security-headers.json

@@ -0,0 +1,8 @@
+{
+  "Content-Security-Policy": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src *; media-src 'none'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; base-uri 'self'",
+  "X-Frame-Options": "DENY",
+  "X-Content-Type-Options": "nosniff",
+  "Referrer-Policy": "no-referrer",
+  "Permissions-Policy": "camera=(), microphone=(), geolocation=(), payment=(), usb=()",
+  "Cross-Origin-Opener-Policy": "same-origin"
+}

package/bin/start.js

@@ -1,25 +1,43 @@
 #!/usr/bin/env node
-import { spawn, spawnSync } from 'child_process';
+import { spawnSync } from 'child_process';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
-import { existsSync } from 'fs';
+import { existsSync, readFileSync } from 'fs';
+import { createServer } from 'http';
+import { isIP } from 'net';
+import { createRequire } from 'module';
+import sirv from 'sirv';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const rootDir = join(__dirname, '..');
 const distDir = join(rootDir, 'dist');
 
+// Validate environment variables before use (exit before starting on invalid values)
+const PORT = process.env.PORT || '3000';
+const HOST = process.env.HOST || 'localhost';
+const HOSTNAME = /^(?=.{1,253}$)[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?(?:\.[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
+
+if (!/^\d{1,5}$/.test(PORT) || Number(PORT) < 1 || Number(PORT) > 65535) {
+  console.error(`Invalid PORT: ${JSON.stringify(PORT)} (expected 1-65535)`);
+  process.exit(1);
+}
+if (!isIP(HOST) && !HOSTNAME.test(HOST)) {
+  console.error(`Invalid HOST: ${JSON.stringify(HOST)} (expected a hostname or IP address)`);
+  process.exit(1);
+}
+
 if (!existsSync(join(distDir, 'index.html'))) {
   console.log('  dist/ not found, building (first run)...');
-  const build = spawnSync('npx', ['vite', 'build'], { cwd: rootDir, stdio: 'inherit', shell: true });
+  // Run the bundled vite package directly with node, without a shell
+  const require = createRequire(import.meta.url);
+  const viteBin = join(dirname(require.resolve('vite/package.json')), 'bin', 'vite.js');
+  const build = spawnSync(process.execPath, [viteBin, 'build'], { cwd: rootDir, stdio: 'inherit' });
   if (build.status !== 0) {
     console.error('Build failed.');
     process.exit(build.status || 1);
   }
 }
 
-const PORT = process.env.PORT || '3000';
-const HOST = process.env.HOST || 'localhost';
-
 console.log('');
 console.log('  local-ai-chat-frontend');
 console.log('  ====================================');
@@ -35,24 +53,33 @@ console.log('    PORT=8080 npx https://github.com/hidao80/local-ai-chat-frontend
 console.log('    HOST=0.0.0.0 PORT=3000 npx https://github.com/hidao80/local-ai-chat-frontend  (LAN access)');
 console.log('');
 
-const sirv = spawn(
-  'npx',
-  ['sirv-cli', distDir, '--port', PORT, '--host', HOST, '--single', '--cors', '--dev'],
-  { stdio: 'inherit', shell: true }
+// Add security headers to every response (same values as nginx.conf)
+const securityHeaders = JSON.parse(
+  readFileSync(join(__dirname, 'security-headers.json'), 'utf8')
 );
+// single: unknown paths return index.html because this is an SPA
+const serve = sirv(distDir, { single: true, etag: true });
+
+const server = createServer((req, res) => {
+  for (const [name, value] of Object.entries(securityHeaders)) {
+    res.setHeader(name, value);
+  }
+  serve(req, res, () => {
+    res.statusCode = 404;
+    res.end('Not Found');
+  });
+});
 
-sirv.on('error', (err) => {
+server.on('error', (err) => {
   console.error('Failed to start server:', err.message);
   process.exit(1);
 });
 
-process.on('SIGINT', () => {
-  console.log('\n  Shutting down...');
-  sirv.kill('SIGINT');
-  process.exit(0);
-});
+server.listen(Number(PORT), HOST);
 
-process.on('SIGTERM', () => {
-  sirv.kill('SIGTERM');
-  process.exit(0);
-});
+const shutdown = () => {
+  console.log('\n  Shutting down...');
+  server.close(() => process.exit(0));
+};
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);