local-operator-ui 0.1.0-beta.4 → 0.1.0

package/README.md

@@ -43,155 +43,33 @@ The Local Operator UI is a user interface for managing and interacting with the
 
 Before you begin, ensure you have the following installed:
 
-- **Node.js**: Version specified in `.nvmrc`. It's recommended to use [nvm](https://github.com/nvm-sh/nvm) for managing Node.js versions.
-- **yarn**: Installable via `npm install -g yarn`.
-- **Local Operator Backend**: The UI connects to the Local Operator backend API. See the [Local Operator GitHub repository](https://github.com/damianvtran/local-operator) for installation instructions.
+- **Node.js**: Version 22.13.1 or higher. It's recommended to use [nvm](https://github.com/nvm-sh/nvm) for managing Node.js versions.
+- **Local Operator Backend**: The UI connects to the Local Operator backend API. See the [Local Operator GitHub repository](https://github.com/damianvtran/local-operator) for installation instructions.  Install it globally or in a virtual environment with `pip install local-operator` and then boot it up on `localhost:1111` with `local-operator serve`.
 
-### Installation
+### NPM Installation
 
-**Clone the repository:**
+You can install and run Local Operator UI directly using [npx](https://docs.n8n.io/hosting/installation/npm/).
 
 ```bash
-git clone https://github.com/local-operator/local-operator-ui.git
-cd local-operator-ui
+# Install and run in one command
+npx local-operator-ui
 ```
 
-**Install dependencies:**
+This will download and execute the latest version of the Local Operator UI, launching the application immediately.
 
-```bash
-yarn install
-```
-
-**Configure environment variables:**
-
-Copy the `.env.template` file to `.env` and update the values as needed:
-
-```bash
-cp .env.template .env
-```
-
-The main environment variable is:
-
-- `VITE_LOCAL_OPERATOR_API_URL`: URL of the Local Operator backend API (default: `http://localhost:1111`)
-
-### Development
-
-For local development, follow these steps:
-
-**Start the development server:**
-
-```bash
-yarn dev
-```
-
-This command will start the Electron application in development mode, with hot reloading enabled for both the main process and the renderer process.
-
-### Production
-
-To build and run the application in production mode:
+### Manual Installation
 
-**Build and start the application:**
+Alternatively, without npx, you can install the package globally with standard npm:
 
 ```bash
-yarn start
-```
-
-This command will run the pre-build script and then start the Electron application in production mode, loading the compiled assets.
-
-## 🏗️ Project Structure
+# Install globally
+npm install -g local-operator-ui
 
-The project follows a modular architecture with clear separation of concerns:
-
-```
-local-operator-ui/
-├── .github/                    # GitHub configuration
-│   └── workflows/              # GitHub Actions workflows
-│       ├── ci.yml              # CI workflow configuration
-│       └── release.yml         # Release workflow configuration
-├── resources/                  # Application resources (icons, images)
-├── src/                        # Source code
-│   ├── main/                   # Electron main process
-│   │   └── index.ts            # Main process entry point
-│   ├── preload/                # Electron preload scripts
-│   │   ├── index.d.ts          # Type definitions
-│   │   └── index.ts            # Preload script
-│   └── renderer/               # Renderer process (React application)
-│       ├── index.html          # HTML template
-│       └── src/                # React application source
-│           ├── api/            # API clients and utilities
-│           │   ├── query-client.ts                # React Query client setup
-│           │   └── local-operator/               # Local Operator API client
-│           │       ├── agents-api.ts             # Agents API endpoints
-│           │       ├── chat-api.ts               # Chat API endpoints
-│           │       ├── config-api.ts             # Config API endpoints
-│           │       ├── credentials-api.ts        # Credentials API endpoints
-│           │       ├── health-api.ts             # Health API endpoints
-│           │       ├── jobs-api.ts               # Jobs API endpoints
-│           │       ├── types.ts                  # API type definitions
-│           │       └── index.ts                  # API client exports
-│           ├── assets/         # Static assets
-│           ├── components/     # React components
-│           │   ├── agents/     # Agent management components
-│           │   ├── chat/       # Chat interface components
-│           │   ├── common/     # Shared/common components
-│           │   ├── navigation/ # Navigation components
-│           │   └── settings/   # Settings components
-│           ├── hooks/          # Custom React hooks
-│           ├── store/          # State management (Zustand)
-│           ├── app.tsx         # Main application component
-│           ├── config.ts       # Application configuration
-│           ├── main.tsx        # Application entry point
-│           ├── theme.ts        # MUI theme configuration
-│           └── vite-env.d.ts   # Vite environment type definitions
-├── .env.template               # Environment variables template
-├── biome.json                  # Biome configuration
-├── electron.vite.config.js     # Electron Vite configuration
-├── eslint.config.js            # ESLint configuration
-├── GITHUB_ACTIONS.md           # GitHub Actions documentation
-├── package.json                # Project dependencies and scripts
-├── tsconfig.json               # TypeScript configuration
-└── README.md                   # Project documentation
+# Run the application
+local-operator-ui
 ```
 
-### Key Directories
-
-- **src/main**: Contains the Electron main process code
-- **src/preload**: Contains the Electron preload scripts
-- **src/renderer**: Contains the React application code
-  - **api**: API clients for communicating with the Local Operator backend
-  - **components**: React components organized by feature
-  - **hooks**: Custom React hooks for data fetching and state management
-  - **store**: Global state management using Zustand
-
-## 🛠️ Technology Stack
-
-The Local Operator UI is built with the following technologies:
-
-### Core Technologies
-
-- **Electron**: Cross-platform desktop application framework
-- **React**: UI library for building component-based interfaces
-- **TypeScript**: Typed superset of JavaScript for improved developer experience
-- **Vite**: Modern frontend build tool
-
-### UI Framework and Styling
-
-- **Material UI (MUI)**: React component library implementing Google's Material Design
-- **Styled Components**: CSS-in-JS library for component styling
-- **Emotion**: CSS-in-JS library used by MUI
-- **FontAwesome**: Icon library
-
-### State Management and Data Fetching
-
-- **Zustand**: Lightweight state management library
-- **React Query**: Data fetching and caching library
-- **Zod**: TypeScript-first schema validation
-
-### Development Tools
-
-- **Biome**: Fast linter and formatter for JavaScript and TypeScript
-- **ESLint**: JavaScript and TypeScript linter
-- **TypeScript**: Static type checking
+After installation, the application will automatically connect to the Local Operator backend API at `http://localhost:1111` by default.
 
 ## ✨ Features
 
@@ -224,67 +102,9 @@ The Local Operator UI provides a comprehensive interface for interacting with AI
 - Real-time status updates for long-running operations
 - Error handling and retry mechanisms
 
-## 🧪 Testing
-
-The project uses Jest for testing. To run tests:
-
-```bash
-yarn test
-```
-
-## 🔄 Continuous Integration and Deployment
-
-This project uses GitHub Actions for continuous integration and automated publishing to npm. The workflows include:
-
-- **CI**: Runs Biome linting and security audits on pushes to `main` and `dev-*` branches
-- **Release**: Automatically publishes the package to npm when a new GitHub Release is created
-
-For detailed information on setting up and using these workflows, see [GITHUB_ACTIONS.md](./GITHUB_ACTIONS.md).
-
-## 🔧 Linting and Formatting
-
-The project uses Biome for linting and formatting. To lint and format the code:
-
-```bash
-# Check for linting issues
-yarn lint
-
-# Fix linting issues
-yarn lint:fix
-
-# Format code
-yarn format
-
-# Fix formatting issues
-yarn format:fix
-```
-
 ## 🤝 Contributing
 
-Contributions are welcome! Here's how you can contribute:
-
-1. Fork the repository
-2. Create a new branch (`git checkout -b feature/your-feature-name`)
-3. Make your changes
-4. Run tests and linting (`yarn test && yarn lint`)
-5. Commit your changes (`git commit -m 'Add some feature'`)
-6. Push to the branch (`git push origin feature/your-feature-name`)
-7. Open a Pull Request
-
-Please ensure your code follows the project's coding standards:
-
-- Use TypeScript for all new code
-- Follow the existing code style and patterns
-- Write tests for new features
-- Update documentation as needed
-
-### Code Style Guidelines
-
-- Use `type` instead of `interface` for type definitions
-- Use kebab-case for file names and PascalCase for component names
-- Use named exports instead of default exports
-- Include JSDoc documentation where appropriate
-- Follow Biome linting conventions
+Contributions are welcome! Please see our [Contributing Guide](./CONTRIBUTING.md) for details on how to get started with development, code style guidelines, and our contribution process.
 
 ## 🐛 Troubleshooting
 
@@ -292,8 +112,8 @@ Please ensure your code follows the project's coding standards:
 
 #### Application fails to connect to the backend
 
-- Ensure the Local Operator backend is running
-- Check that the `VITE_LOCAL_OPERATOR_API_URL` environment variable is set correctly
+- Ensure the Local Operator backend is running and hosting on `http://localhost:1111`
+- Check that the `VITE_LOCAL_OPERATOR_API_URL` environment variable has not been set to a different URL.  This value is set automatically to `http://localhost:1111` if a custom `.env` doesn't specify otherwise.
 - Verify network connectivity between the UI and the backend
 
 #### Development server crashes

package/bin/local-operator-ui.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+/**
+ * Local Operator UI CLI
+ *
+ * This script serves as the entry point for the npx command.
+ * It launches the Electron app.
+ */
+
+const { spawn } = require("node:child_process");
+const path = require("node:path");
+const fs = require("node:fs");
+
+// Get the path to the electron executable
+const electronPath = require("electron");
+
+// Get the path to the main.js file
+const appPath = path.join(__dirname, "../out/main/index.js");
+
+// Check if the main.js file exists
+if (!fs.existsSync(appPath)) {
+	console.error("Error: Could not find the application entry point.");
+	console.error(
+		"This could happen if the application was not built correctly.",
+	);
+	console.error("Please report this issue to the package maintainer.");
+	process.exit(1);
+}
+
+// Launch the Electron app
+const child = spawn(electronPath, [appPath], {
+	stdio: "inherit",
+	windowsHide: false,
+});
+
+// Handle process exit
+child.on("close", (code) => {
+	process.exit(code);
+});
+
+// Handle errors
+child.on("error", (err) => {
+	console.error("Failed to start Electron application:", err);
+	process.exit(1);
+});
+
+// Handle process termination
+process.on("SIGINT", () => {
+	child.kill("SIGINT");
+});
+
+process.on("SIGTERM", () => {
+	child.kill("SIGTERM");
+});

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "local-operator-ui",
-	"version": "0.1.0-beta.4",
+	"version": "0.1.0",
 	"description": "User interface for the Local Operator agent environment",
 	"main": "./out/main/index.js",
+	"bin": {
+		"local-operator-ui": "./bin/local-operator-ui.js"
+	},
 	"license": "MIT",
 	"author": {
 		"name": "Damian Tran",
@@ -24,23 +27,30 @@
 	"bugs": {
 		"url": "https://github.com/damianvtran/local-operator-ui/issues"
 	},
-	"keywords": ["local-operator", "agent", "ui", "electron", "react"],
-	"files": ["out", "LICENSE", "README.md"],
+	"keywords": [
+		"local-operator",
+		"agent",
+		"python",
+		"tool use",
+		"ui",
+		"electron",
+		"react"
+	],
+	"files": ["out", "bin", "LICENSE", "README.md"],
 	"publishConfig": {
 		"access": "public"
 	},
-	"bin": {
-		"local-operator-ui": "./out/main/index.js"
-	},
 	"scripts": {
 		"start": "electron-vite preview",
 		"dev": "electron-vite dev",
-		"build": "electron-vite build && chmod +x ./out/main/index.js",
+		"build": "electron-vite build",
+		"postbuild": "chmod +x ./bin/local-operator-ui.js",
 		"lint": "npx @biomejs/biome check src",
 		"lint:fix": "npx @biomejs/biome check --apply src",
 		"format": "npx @biomejs/biome format src",
 		"format:fix": "npx @biomejs/biome format --write src",
-		"prepublishOnly": "npm run build"
+		"prepublishOnly": "npm run build",
+		"check-types": "tsc --noEmit"
 	},
 	"dependencies": {
 		"@electron-toolkit/utils": "^4.0.0",