@game_ryo/lsji 0.1.0 → 0.3.0

package/src/server/ui/src/styles.css

@@ -0,0 +1,260 @@
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #21262d;
+  --border: #30363d;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --accent: #58a6ff;
+  --accent-hover: #79c0ff;
+  --success: #3fb950;
+  --warning: #d29922;
+  --danger: #f85149;
+  --purple: #a371f7;
+}
+
+* { box-sizing: border-box; }
+
+body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
+
+#root { min-height: 100vh; display: flex; flex-direction: column; }
+
+.app { display: flex; flex-direction: column; min-height: 100vh; }
+
+.header {
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-left { display: flex; align-items: center; gap: 16px; }
+.logo { font-size: 18px; font-weight: 600; color: var(--accent); }
+.version { font-size: 12px; color: var(--text-secondary); background: var(--bg-tertiary); padding: 2px 8px; border-radius: 4px; }
+
+.header-right { display: flex; align-items: center; gap: 16px; }
+.connection-status { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
+.status-dot.disconnected { background: var(--danger); }
+
+.main { display: flex; flex: 1; overflow: hidden; }
+
+.sidebar {
+  width: 280px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.sidebar-section { padding: 16px; border-bottom: 1px solid var(--border); }
+.sidebar-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 12px; font-weight: 600; }
+
+.run-list { display: flex; flex-direction: column; gap: 8px; }
+.run-item {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.run-item:hover { border-color: var(--accent); }
+.run-item.active { border-color: var(--accent); background: rgba(88, 166, 255, 0.1); }
+.run-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
+.run-id { font-family: monospace; font-size: 12px; color: var(--accent); }
+.run-status { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 500; }
+.run-status.running { background: rgba(88, 166, 255, 0.2); color: var(--accent); }
+.run-status.completed { background: rgba(63, 185, 80, 0.2); color: var(--success); }
+.run-status.failed { background: rgba(248, 81, 73, 0.2); color: var(--danger); }
+.run-status.stopped { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
+.run-task { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.run-meta { font-size: 11px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 16px; }
+
+.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+.content-header {
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content-title { font-size: 16px; font-weight: 600; }
+.content-actions { display: flex; gap: 8px; }
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn:hover { background: var(--border); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: #0d1117; }
+.btn.primary:hover { background: var(--accent-hover); }
+.btn.danger { background: var(--danger); border-color: var(--danger); color: white; }
+.btn.success { background: var(--success); border-color: var(--success); color: white; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.panels { display: flex; flex: 1; overflow: hidden; }
+
+.panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.panel-header {
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-title { font-size: 13px; font-weight: 600; }
+.panel-content { flex: 1; overflow-y: auto; padding: 16px; }
+
+/* Thought Log */
+.thought-log { display: flex; flex-direction: column; gap: 8px; }
+.thought-entry {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  animation: slideIn 0.2s ease;
+}
+@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+.thought-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; color: var(--text-secondary); }
+.thought-type { font-weight: 600; text-transform: uppercase; }
+.thought-type.thought { color: var(--purple); }
+.thought-type.action { color: var(--accent); }
+.thought-type.observation { color: var(--success); }
+.thought-type.error { color: var(--danger); }
+.thought-content { font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
+.thought-tool { background: rgba(88, 166, 255, 0.1); padding: 8px; border-radius: 4px; margin-top: 8px; font-size: 11px; }
+
+/* Approval Queue */
+.approval-list { display: flex; flex-direction: column; gap: 12px; }
+.approval-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+}
+.approval-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
+.approval-action { font-weight: 600; color: var(--accent); font-family: monospace; font-size: 13px; }
+.approval-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 500; }
+.approval-badge.pending { background: rgba(210, 153, 34, 0.2); color: var(--warning); }
+.approval-context { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
+.approval-context pre { background: var(--bg-primary); padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 11px; }
+.approval-actions { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* Budget Panel */
+.budget-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.budget-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+}
+.budget-card.warning { border-color: var(--warning); }
+.budget-card.danger { border-color: var(--danger); }
+.budget-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px; }
+.budget-value { font-size: 24px; font-weight: 600; font-family: monospace; }
+.budget-value.warning { color: var(--warning); }
+.budget-value.danger { color: var(--danger); }
+.budget-details { font-size: 11px; color: var(--text-secondary); margin-top: 8px; display: flex; justify-content: space-between; }
+
+/* Plugins Panel */
+.plugin-list { display: flex; flex-direction: column; gap: 8px; }
+.plugin-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.plugin-info { display: flex; flex-direction: column; gap: 2px; }
+.plugin-name { font-weight: 500; }
+.plugin-version { font-size: 11px; color: var(--text-secondary); }
+.plugin-tools { font-size: 11px; color: var(--accent); }
+
+/* New Run Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+.modal-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
+.form-group { margin-bottom: 16px; }
+.form-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 6px; }
+.form-input, .form-textarea, .form-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+}
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.form-textarea { min-height: 100px; resize: vertical; font-family: monospace; }
+.form-row { display: flex; gap: 12px; }
+.form-row .form-group { flex: 1; }
+.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  text-align: center;
+  gap: 12px;
+}
+.empty-state svg { width: 48px; height: 48px; opacity: 0.5; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

package/src/server/ui/vite.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  root: '.',
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3456',
+      '/socket.io': {
+        target: 'http://localhost:3456',
+        ws: true,
+      },
+    },
+  },
+});

package/docs/README.md

@@ -1,43 +0,0 @@
-# Website
-
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-## Installation
-
-```bash
-npm install
-```
-
-**Note**: feel free to use the package manager of your choice.
-
-## Local Development
-
-```bash
-npm run start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-## Build
-
-```bash
-npm run build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-## Deployment
-
-Using SSH:
-
-```bash
-USE_SSH=true npm run deploy
-```
-
-Not using SSH:
-
-```bash
-GIT_USER=<Your GitHub username> npm run deploy
-```
-
-If you are using GitHub Pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/docs/blog/2019-05-28-first-blog-post.mdx

@@ -1,12 +0,0 @@
----
-slug: first-blog-post
-title: First Blog Post
-authors: [slorber, yangshun]
-tags: [hola, docusaurus]
----
-
-Lorem ipsum dolor sit amet...
-
-{/* truncate */}
-
-...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/docs/blog/2019-05-29-long-blog-post.mdx

@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: yangshun
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `{/*` `truncate` `*/}` comment to limit blog post size in the list view.
-
-{/* truncate */}
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/docs/blog/2021-08-01-mdx-blog-post.mdx

@@ -1,24 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-:::
-
-{/* truncate */}
-
-For example, use JSX to create an interactive button:
-
-```js
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-```
-
-<button onClick={() => alert('button clicked!')}>Click me!</button>

package/docs/blog/2021-08-26-welcome/index.mdx

@@ -1,29 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Here are a few tips you might find useful.
-
-{/* truncate */}
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

package/docs/blog/authors.yml

@@ -1,25 +0,0 @@
-yangshun:
-  name: Yangshun Tay
-  title: Ex-Meta Staff Engineer, Co-founder GreatFrontEnd
-  url: https://linkedin.com/in/yangshun
-  image_url: https://github.com/yangshun.png
-  page: true
-  socials:
-    x: yangshunz
-    linkedin: yangshun
-    github: yangshun
-    newsletter: https://www.greatfrontend.com
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png
-  page:
-    # customize the url of the author page at /blog/authors/<permalink>
-    permalink: '/all-sebastien-lorber-articles'
-  socials:
-    x: sebastienlorber
-    linkedin: sebastienlorber
-    github: slorber
-    newsletter: https://thisweekinreact.com

package/docs/blog/tags.yml

@@ -1,19 +0,0 @@
-facebook:
-  label: Facebook
-  permalink: /facebook
-  description: Facebook tag description
-
-hello:
-  label: Hello
-  permalink: /hello
-  description: Hello tag description
-
-docusaurus:
-  label: Docusaurus
-  permalink: /docusaurus
-  description: Docusaurus tag description
-
-hola:
-  label: Hola
-  permalink: /hola
-  description: Hola tag description

package/docs/docs/api/agent.md

@@ -1,151 +0,0 @@
----
-title: Agent API
-description: High-level agent orchestration
----
-
-# Agent API
-
-The `Agent` class provides high-level orchestration of Q-Learning, Storage, and Environment.
-
-## Import
-
-```typescript
-import { Agent } from 'lsji';
-```
-
-## Constructor
-
-```typescript
-const agent = new Agent({
-  qlearning: QLearning,    // Required: Q-Learning engine
-  storage: Storage,        // Required: Storage backend
-  env: Env                 // Optional: Environment for train/play
-});
-```
-
-## Methods
-
-### `start()`
-Enable the system for training and play.
-
-```typescript
-await agent.start();
-// Returns: { status: 'success', message: 'System STARTED' }
-```
-
-### `stop()`
-Disable the system (pauses training and play).
-
-```typescript
-await agent.stop();
-// Returns: { status: 'success', message: 'System STOPPED' }
-```
-
-### `status()`
-Get current system status and statistics.
-
-```typescript
-const status = await agent.status();
-// Returns:
-{
-  status: 'running' | 'stopped',
-  todayTotal: number,      // Battles today
-  limit: 90000,            // Daily limit
-  performance: [           // Per-mode statistics
-    { mode: 'train', total: 100, win_rate: 65.5 },
-    { mode: 'test', total: 50, win_rate: 72.0 }
-  ],
-  aiBrain: [               // Full Q-table
-    { state: '0', action: 0, q_value: 0.45 },
-    { state: '0', action: 1, q_value: 0.12 },
-    ...
-  ]
-}
-```
-
-### `train(options)`
-Train the agent.
-
-```typescript
-const result = await agent.train({
-  episodes: 200,           // Number of episodes (default: 200)
-  actionSelector: (episode, lastAction) => number,  // Custom pattern (optional)
-  batchSize: 200           // DB batch size (default: 200)
-});
-
-// Returns:
-{
-  episodes: 200,
-  wins: 85,
-  losses: 62,
-  draws: 53
-}
-```
-
-**Built-in Training Patterns:**
-```typescript
-import { TrainingPattern, getTrainingAction } from 'lsji';
-
-// Pattern 0: Random (default)
-await agent.train({ episodes: 500 });
-
-// Pattern 1: Always Rock
-await agent.train({ 
-  episodes: 500, 
-  actionSelector: (ep, last) => getTrainingAction(TrainingPattern.ALWAYS_ROCK, ep, last) 
-});
-
-// Pattern 2: Counter
-await agent.train({ 
-  episodes: 500, 
-  actionSelector: (ep, last) => getTrainingAction(TrainingPattern.COUNTER, ep, last) 
-});
-
-// Pattern 3: Sequential
-await agent.train({ 
-  episodes: 500, 
-  actionSelector: (ep, last) => getTrainingAction(TrainingPattern.SEQUENTIAL, ep, last) 
-});
-```
-
-### `play(options)`
-Play a single step against the agent.
-
-```typescript
-const result = await agent.play({
-  userAction: 0  // Optional: user action for envs that need it
-});
-
-// Returns:
-{
-  action: 1,              // Agent's chosen action
-  reward: 1,              // Reward received
-  done: false,            // Episode ended
-  info: { opponentAction: 0 }  // Environment-specific info
-}
-```
-
-### `setEnvironment(env)`
-Inject or change the environment at runtime.
-
-```typescript
-agent.setEnvironment(new MyCustomEnv());
-```
-
-## Example
-
-```typescript
-import { Agent, QLearning, createStorage, RockPaperScissorsEnv } from 'lsji';
-
-const storage = await createStorage('sqlite', { path: './agent.db' });
-const qlearning = new QLearning({ alpha: 0.1, gamma: 0.9, epsilon: 0.1, storage });
-const env = new RockPaperScissorsEnv({ opponent: 'random' });
-
-const agent = new Agent({ qlearning, storage, env });
-
-await agent.train({ episodes: 1000 });
-const result = await agent.play(0); // Play Rock
-console.log(`AI played: ${result.action}, Result: ${result.reward > 0 ? 'WIN' : result.reward < 0 ? 'LOSE' : 'DRAW'}`);
-
-await storage.close();
-```