open-index/open-npm huggingface dataset:
npm package: @oh-my-ghaad/github
Description: GitHub adapter for Oh My GHAAD, providing GitHub-specific implementation for using GitHub repositories as JSON databases.
Latest version: 0.0.13

# @oh-my-ghaad/adapter-github

GitHub adapter for Oh My GHAAD, providing GitHub-specific implementation for using GitHub repositories as JSON databases.

## Overview

The GitHub adapter implements the core adapter interface to provide:
- GitHub repository access
- File operations (create, read, update, delete)
- OAuth integration
- Repository installation handling

## Installation

```bash
npm install @oh-my-ghaad/adapter-github @oh-my-ghaad/core
# or
yarn add @oh-my-ghaad/adapter-github @oh-my-ghaad/core
# or
pnpm add @oh-my-ghaad/adapter-github @oh-my-ghaad/core
```

## Basic Usage

```typescript
import { Engine } from '@oh-my-ghaad/core';
import { GithubAdapter } from '@oh-my-ghaad/adapter-github';

// Create the engine instance with the GitHub adapter
const engine = new Engine({
  adapters: [
    new GithubAdapter({
      clientId: "YOUR_GITHUB_CLIENT_ID",
      redirectUri: process.env.YOUR_GITHUB_REDIRECT_URI!,
      accessManagementUrl:
        "https://github.com/apps/[YOUR_GITHUB_APP_NAME]/installations/new",
    }),
  ],
  collections: [/* your collections */],
  appConfig: {
    persisted: true
  }
});
```

## Configuration

The GitHub adapter requires the following configuration:

- `clientId`: The client ID of your GitHub app
- `redirectUri`: The redirect URI of your GitHub app
- `accessManagementUrl`: The URL to the access management page of your GitHub app

## OAUTH

You will need to set up an OAuth app on GitHub. You will also need to set up a backend server to handle the OAuth flow since GitHub does not allow the implicit flow for OAuth apps.

See GitHub's [OAuth App documentation](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) for more details.

### Example Server Setup

```typescript
export async function POST(request: Request) {
  const { code } = await request.json();

  if (!code) {
    return new Response("Missing code", { status: 400 });
  }

  const response = await fetch("https://github.com/login/oauth/access_token", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      client_id: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID!,
      client_secret: process.env.GITHUB_CLIENT_SECRET!,
      code: code,
      redirect_uri: process.env.NEXT_PUBLIC_GITHUB_REDIRECT_URI!,
    }),
  });

  if (!response.ok) {
    return new Response("Failed to fetch token", { status: 500 });
  }

  const responseJson = await response.json();

  if (!responseJson.access_token) {
    return new Response("Failed to fetch token", { status: 500 });
  }

  return new Response(JSON.stringify(responseJson));
}

```


## Related Packages

- [@oh-my-ghaad/core](../core/README.md) - Core functionality
- [@oh-my-ghaad/react](../react/README.md) - React integration

For more examples and detailed usage, see the [main README](../../README.md) and the [demo app](../../apps/demo-app/README.md).
npm package: @oh-my-ghaad/gitlab
Description: GitHub adapter for Oh My GHAAD, providing GitHub-specific implementation for using GitHub repositories as JSON databases.
Latest version: 0.0.13

# @oh-my-ghaad/adapter-github

GitHub adapter for Oh My GHAAD, providing GitHub-specific implementation for using GitHub repositories as JSON databases.

## Overview

The GitHub adapter implements the core adapter interface to provide:
- GitHub repository access
- File operations (create, read, update, delete)
- OAuth integration
- Repository installation handling

## Installation

```bash
npm install @oh-my-ghaad/adapter-github @oh-my-ghaad/core
# or
yarn add @oh-my-ghaad/adapter-github @oh-my-ghaad/core
# or
pnpm add @oh-my-ghaad/adapter-github @oh-my-ghaad/core
```

## Basic Usage

```typescript
import { Engine } from '@oh-my-ghaad/core';
import { GithubAdapter } from '@oh-my-ghaad/adapter-github';

// Create the engine instance with the GitHub adapter
const engine = new Engine({
  adapters: [
    new GithubAdapter({
      clientId: "YOUR_GITHUB_CLIENT_ID",
      redirectUri: process.env.YOUR_GITHUB_REDIRECT_URI!,
      accessManagementUrl:
        "https://github.com/apps/[YOUR_GITHUB_APP_NAME]/installations/new",
    }),
  ],
  collections: [/* your collections */],
  appConfig: {
    persisted: true
  }
});
```

## Configuration

The GitHub adapter requires the following configuration:

- `clientId`: The client ID of your GitHub app
- `redirectUri`: The redirect URI of your GitHub app
- `accessManagementUrl`: The URL to the access management page of your GitHub app

## OAUTH

You will need to set up an OAuth app on GitHub. You will also need to set up a backend server to handle the OAuth flow since GitHub does not allow the implicit flow for OAuth apps.

See GitHub's [OAuth App documentation](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) for more details.

### Example Server Setup

```typescript
export async function POST(request: Request) {
  const { code } = await request.json();

  if (!code) {
    return new Response("Missing code", { status: 400 });
  }

  const response = await fetch("https://github.com/login/oauth/access_token", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      client_id: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID!,
      client_secret: process.env.GITHUB_CLIENT_SECRET!,
      code: code,
      redirect_uri: process.env.NEXT_PUBLIC_GITHUB_REDIRECT_URI!,
    }),
  });

  if (!response.ok) {
    return new Response("Failed to fetch token", { status: 500 });
  }

  const responseJson = await response.json();

  if (!responseJson.access_token) {
    return new Response("Failed to fetch token", { status: 500 });
  }

  return new Response(JSON.stringify(responseJson));
}

```


## Related Packages

- [@oh-my-ghaad/core](../core/README.md) - Core functionality
- [@oh-my-ghaad/react](../react/README.md) - React integration

For more examples and detailed usage, see the [main README](../../README.md) and the [demo app](../../apps/demo-app/README.md).
npm package: @oh-my-pi/anthropic-websearch
Description: Anthropic Claude web search tool for pi
Author: Can Bölük
Latest version: 1.3.3710

# @oh-my-pi/anthropic-websearch

Claude web search tool for [pi](https://github.com/badlogic/pi-mono).

Uses Anthropic's built-in `web_search_20250305` tool to search the web and synthesize answers with citations.

## Installation

```bash
omp install @oh-my-pi/anthropic-websearch
```

## Authentication

The plugin checks for credentials in this order:

1. **Explicit override**: `ANTHROPIC_SEARCH_API_KEY` / `ANTHROPIC_SEARCH_BASE_URL`
2. **models.json**: Provider with `api: "anthropic-messages"` in `~/.pi/agent/models.json`
3. **OAuth**: Anthropic OAuth credentials in `~/.pi/agent/auth.json` (Claude Code tokens supported)
4. **Fallback**: `ANTHROPIC_API_KEY` / `ANTHROPIC_BASE_URL`

This ordering prevents accidentally charging your console account if you have a proxy or OAuth set up.

### Using Claude Code OAuth tokens

If you're logged into Claude Code (`pi login`), the plugin will automatically use your OAuth token from `~/.pi/agent/auth.json`. OAuth tokens (`sk-ant-oat01-...`) are fully supported with proper Claude Code identity headers.

### Using a proxy

If your `~/.pi/agent/models.json` has a provider with `api: "anthropic-messages"`:

```json
{
  "providers": {
    "my-proxy": {
      "baseUrl": "http://localhost:4000",
      "apiKey": "none",
      "api": "anthropic-messages",
      "models": [...]
    }
  }
}
```

The plugin will automatically use `http://localhost:4000`.

### Direct API key

```bash
export ANTHROPIC_SEARCH_API_KEY=sk-ant-api03-xxx
```

## Tools

### `anthropic_web_search`

Search the web using Claude's built-in web search capability.

**Parameters:**

- `query` (required): The search query or question
- `system_prompt`: Guide the response style and focus
- `max_tokens`: Maximum tokens in response (default: 4096)

**Response includes:**

- Synthesized answer with inline citations
- List of sources with titles, URLs, and page ages
- Search queries Claude generated

## Configuration

| Variable  | Env                         | Description                                          |
| --------- | --------------------------- | ---------------------------------------------------- |
| `apiKey`  | `ANTHROPIC_SEARCH_API_KEY`  | API key (optional if using proxy/oauth)              |
| `baseUrl` | `ANTHROPIC_SEARCH_BASE_URL` | Base URL override                                    |
| `model`   | `ANTHROPIC_SEARCH_MODEL`    | Model to use (default: `claude-sonnet-4-5-20250514`) |

Configure via `omp config`:

```bash
# Set a different model
omp config @oh-my-pi/anthropic-websearch model claude-opus-4-20250514

# View current config
omp config @oh-my-pi/anthropic-websearch
```

Or via environment variables:

```bash
export ANTHROPIC_SEARCH_MODEL=claude-opus-4-20250514
```

## License

MIT
npm package: @oh-my-pi/init
Description: Initialize AGENTS.md documentation for a codebase
Author: Can Bölük
Latest version: 1.3.3710

# @oh-my-pi/init

Initialize AGENTS.md documentation for a codebase.

## Commands

### `/init`

Analyzes the codebase and creates an AGENTS.md file with:

- Build, lint, and test commands
- High-level code architecture
- Important context from existing documentation (README.md, Cursor rules, Copilot rules)

The generated file provides guidance to future Claude Code instances operating in the repository.
npm package: @oh-my-pi/perplexity
Description: Perplexity AI search tools for pi
Author: Can Bölük
Latest version: 1.3.3710

# @oh-my-pi/perplexity

Perplexity AI search tools for [pi](https://github.com/badlogic/pi-mono).

## Installation

```bash
omp install @oh-my-pi/perplexity
```

## Configuration

Set your Perplexity API key:

```bash
# Option 1: Environment variable
export PERPLEXITY_API_KEY=pplx-xxx

# Option 2: Add to ~/.env
echo "PERPLEXITY_API_KEY=pplx-xxx" >> ~/.env
```

Get your API key from [Perplexity API Settings](https://www.perplexity.ai/settings/api).

## Tools

### `perplexity_search`

Fast web search using Perplexity Sonar. Returns real-time answers with citations.

**Best for:** Quick facts, current events, straightforward questions

**Parameters:**

- `query` (required): The search query or question
- `search_recency_filter`: Filter by recency (`day`, `week`, `month`, `year`)
- `search_domain_filter`: Limit to specific domains (e.g., `["nature.com", "arxiv.org"]`)
- `search_context_size`: Amount of search context (`low`, `medium`, `high`)
- `return_related_questions`: Include follow-up question suggestions

### `perplexity_search_pro`

Advanced web search using Perplexity Sonar Pro. Returns comprehensive answers with 2x more sources.

**Best for:** Complex research, multi-step analysis, detailed comparisons

**Additional parameters:**

- `system_prompt`: Guide the response style and focus

## Pricing

| Model     | Input       | Output       | Per 1K Requests |
| --------- | ----------- | ------------ | --------------- |
| Sonar     | $1/M tokens | $1/M tokens  | $5-12           |
| Sonar Pro | $3/M tokens | $15/M tokens | $6-14           |

Request cost varies by `search_context_size` (low/medium/high).

## License

MIT
npm package: @oh-my-pi/subagents
Description: Task delegation system with specialized subagents (task, planner, explore, reviewer, browser)
Author: Can Bölük
Latest version: 1.3.3710

# Subagents Plugin

Task delegation system with specialized subagents for pi.

## Installation

```bash
omp install @oh-my-pi/subagents
```

## Contents

### Tool

- `tools/task/index.ts` - The Task tool for launching subagents

### Agents

- `agents/task.md` - General-purpose subagent for delegated tasks
- `agents/planner.md` - Software architect for designing implementation plans
- `agents/explore.md` - Fast read-only codebase scout
- `agents/reviewer.md` - Expert code reviewer
- `agents/browser.md` - Single-URL content fetcher and extractor

### Commands

- `commands/implement.md` - Implement a feature
- `commands/implement-with-critic.md` - Implement with critic review loop
- `commands/architect-plan.md` - Create an architecture plan
npm package: @oh-my-pi/user-prompt
Description: Interactive user prompting tool for gathering user input during execution
Author: Can Bölük
Latest version: 1.3.3710

# User Prompt Plugin

Interactive user prompting tool for gathering user input during agent execution.

## Installation

```bash
omp install @oh-my-pi/user-prompt
```

## Tool

### `user_prompt`

Asks the user questions during execution and returns their response. Useful for:

- Gathering user preferences or requirements
- Clarifying ambiguous instructions
- Getting decisions on implementation choices
- Offering choices about what direction to take

## Parameters

| Parameter  | Type    | Required | Description                                   |
| ---------- | ------- | -------- | --------------------------------------------- |
| `question` | string  | Yes      | The question to ask the user                  |
| `options`  | array   | Yes      | Array of `{label: string}` options to present |
| `multi`    | boolean | No       | Allow multiple selections (default: false)    |

## Usage Notes

- Users can always select "Other" to provide custom text input
- Use `multi: true` to allow multiple answers to be selected
- If you recommend a specific option, make that the first option and add "(Recommended)" at the end of the label

## Examples

### Single-choice question

```json
{
   "question": "Which database would you like to use?",
   "options": [{ "label": "PostgreSQL (Recommended)" }, { "label": "MySQL" }, { "label": "SQLite" }, { "label": "MongoDB" }]
}
```

### Multi-select question

```json
{
   "question": "Which features should I implement?",
   "options": [
      { "label": "Authentication" },
      { "label": "API endpoints" },
      { "label": "Database models" },
      { "label": "Unit tests" },
      { "label": "Documentation" }
   ],
   "multi": true
}
```

## Response Format

The tool returns the user's selection in a structured format:

- **Single selection**: `"User selected: PostgreSQL (Recommended)"`
- **Multi-selection**: `"User selected: Authentication, API endpoints, Unit tests"`
- **Custom input**: `"User provided custom input: Use Redis for caching"`
- **Cancelled**: `"User cancelled the selection"`

## How It Works

The plugin hooks into pi's interactive mode at runtime to provide custom TUI components. It:

1. Dynamically imports pi's theme for consistent styling
2. Locates the InteractiveMode instance to access the editor container
3. Swaps in custom components (MultiSelectList, SelectWithInput) when prompting
4. Restores the normal editor when done

This approach provides a seamless, native-feeling UI without requiring upstream changes to pi.
npm package: @ohae/events
Description: This package contained event system (implements a SimpleEventEmitter and ...)
Author: Roman Surmanidze
Latest version: 1.0.0

# @ohae/events
 
This package contained event system (implements a SimpleEventEmitter and ...)

!!! IN DEVELOPING !!!

## Installation

```
npm install @ohae/events --save
```

## Usage

### javascript commonjs modules
```javascript
const { SimpleEventEmitter, EventListener } = require('@ohae/events');
const emitter = new SimpleEventEmitter();

emitter.on("event1", function (data){
	console.log(data); // {value1: 1, value2: "1111"}
});
emitter.emit("event1", {value1: 1, value2: "1111"});


emitter.once("event2", function (data){
	console.log(data); // {value1: "1111", value2: false}
});
emitter.emit("event2", {value1: "1111", value2: false});
```

### javascript es modules
```javascript
import { SimpleEventEmitter } from '@ohae/events';
const emitter = new SimpleEventEmitter();

emitter.on("event1", function (data){
	console.log(data); // {value1: 1, value2: "1111"}
});
emitter.emit("event1", {value1: 1, value2: "1111"});


emitter.once("event2", function (data){
	console.log(data); // {value1: "1111", value2: false}
});
emitter.emit("event2", {value1: "1111", value2: false});
```

### typecript
```javascript
import { SimpleEventEmitter } from '@ohae/events';
const emitter: SimpleEventEmitter = new SimpleEventEmitter();

interface Data1 {
	value1: number,
	value2: string,
};

declare type Data2 = {
	value1: string,
	value3: any,
};

emitter.on("event1", function (data: Data1){
	console.log(data); // {value1: 1, value2: "1111"}
});
emitter.emit("event1", {value1: 1, value2: "1111"} as Data1);


emitter.once("event2", function (data: Data2){
	console.log(data); // {value1: "1111", value2: false}
});
emitter.emit("event2", {value1: "1111", value2: false} as Data2);

```

## License

MIT
npm package: @ohae/loader
Description: Loader (use it for control to load resources)
Author: Roman Surmanidze
Latest version: 1.0.0

# @ohae/loader
 
This package ...

!!! IN DEVELOPING !!!

## Installation

```
npm install @ohae/loader --save
```

## Usage

### javascript commonjs modules
```javascript
const { Loader } = require('@ohae/loader');
const loader = new Loader();
...
```

### javascript es modules
```javascript
import { Loader } from '@ohae/prng';
const loader = new Loader();
...

```

### typecript
```javascript
import { Loader } from '@ohae/prng';
const loader: Loader = new Loader();
...

```

## License

MIT
npm package: @ohae/prng
Description: PRNG`s (pseudo random number generators)
Author: Roman Surmanidze
Latest version: 1.5.2

# @ohae/prng
 
This package usage implements a PRNG (pseudo random number generator)
> It ensures repeatability of the generation result when using the same input data. This gives wide opportunities for its use in game development. For example, to ensure the generation of identical maps on the client side. To do this, you only need to provide clients with identical seeds.

!!! IN DEVELOPING !!!

## Installation

```
npm install @ohae/prng --save
```

## Usage


### javascript commonjs modules
```javascript
const { Prng } = require('@ohae/prng');
const { XXHash } = require('@ohae/prng-xx-hash');


const prngImplement = new XXHash();
const seed = 1234567;
const prng = new Prng(prngImplement, seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
```

### javascript es modules
```javascript
import { Prng } from '@ohae/prng';
import { XXHash } from '@ohae/prng-xx-hash';

const prngImplement = new XXHash();
const seed = 1234567;
const prng = new Prng(prngImplement, seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664

```

### typecript
```javascript
import { Prng, IPrng } from '@ohae/prng';
import { XXHash } from '@ohae/prng-xx-hash';

const prngImplement: IPrng = new XXHash();
const seed: number = 1234567;
const prng: IPrng = new Prng(prngImplement, seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664

```

## License

MIT
npm package: @ohae/prng-xx-hash
Description: This package implements a PRNG (pseudo random number generator) based on the xx_hash algorithm.
Author: Roman Surmanidze
Latest version: 1.5.0

# @ohae/prng-xx-hash
 
This package implements a PRNG (pseudo random number generator) based on the xx_hash algorithm
> It ensures repeatability of the generation result when using the same input data. This gives wide opportunities for its use in game development. For example, to ensure the generation of identical maps on the client side. To do this, you only need to provide clients with identical seeds.

## Installation

```
npm install @ohae/prng-xx-hash --save
```

## Usage


### javascript commonjs modules
```javascript
const { XXHash } = require('@ohae/prng-xx-hash');

const seed = 1234567;
const prng = new XXHash(seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
```

### javascript es modules
```javascript
import { XXHash } from '@ohae/prng-xx-hash';
const seed = 1234567;
const prng = new XXHash(seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664

```

### typecript
```typescript
import { XXHash } from '@ohae/prng-xx-hash';
const seed: number = 1234567;
const prng: XXHash = new XXHash(seed);

console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(1));	// 0.25214675354122806
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(2, 3));	// 0.5936155299641228
console.log(prng.random(4, 5, 6));	// 0.7994929356033664
console.log(prng.random(4, 5, 6));	// 0.7994929356033664

```

## License

MIT
npm package: @ohaeseong/react-progress-bar
Description: react simple progress bar
Author: ohaeseong
Latest version: 1.3.9

![](https://images.velog.io/images/alskt0419/post/7517c720-e26c-4b7c-82f0-c16fb1652ea2/progress_preview.gif)

https://www.npmjs.com/package/@ohaeseong/react-progress-bar

## Install

```
  yarn add @ohaeseong/react-progress-bar
```

## Usage

```
'use client' // If you want to use this package in Next.js, you have to configure it to render only on the client side.
import React from 'react';
import ProgressBar from '@ohaeseong/react-progress-bar';

function App() {

  return <ProgressBar value={80} max={100} width="100px" />; // This progress bar has 80% value
}

```

## Props

| Name                     | Type                                                | Default       | Description                                 |
| ------------------------ | --------------------------------------------------- | ------------- | ------------------------------------------- |
| value (required)         | number                                              | .             | Percentage of completed progress bar value. |
| max (required)           | number                                              | .             | Reference value.                  |
| width                    | string                                              | auto          | Width of the bar                            |
| height                   | string                                              | 15px          | Height of the bar                           |
| margin                   | string                                              | none          | Margin of the bar                           |
| color                    | string (color code)                                 | #E5E7E9       | Color of the "non-completed" bar            |
| trackColor               | string (color code)                                 | #706af3       | Color of the completed bar                  |
| borderRadius             | string                                              | 3px           | Border radius of the bar                    |
| labelColor               | string (color code)                                 | #f9f9f9       | Label color of the bar                      |
| labelSize                | string (1rem, 12px ...)                             | 0.8rem        | Label size of the bar                       |
| labelVisible             | boolean (true === show label, false === hide label) | false         | Visibility of the label                     |
| transitionDuration       | string (1s, 0.5s ...)                               | 1s            | Duration of the width transition            |
| transitionTimingFunction | string (ease, ease-in, ease-in-out ...)             | ease-in-out   | Timing function of the width transition     |
| labelAlignment           | string (top, bottom, null === center)               | null (center) | Position of the label                       |
npm package: @ohah/electron-mcp-server
Description: MCP server for Electron app automation via CDP. Agent-browser style compact refs. Use with any Electron app running --remote-debugging-port=9222.
Author: ohah
Latest version: 0.1.0-rc.6

# @ohah/electron-mcp-server

MCP server (Node bin) for Electron app automation via CDP. Use with any Electron app running `--remote-debugging-port=<port>`.

**MCP 사용 시 요구사항**

- **Node.js**: MCP 서버 실행에 필요 (npx 또는 전역 설치 시 Node 환경).
- **원격 디버깅 포트**: 앱 실행 시 `--remote-debugging-port=<port>` 필수. 권장 포트 **9222** (단일 앱), 여러 앱이면 **9229**, **9230** (서버는 9229→9230→9222→… 순 스캔).

## Install

```bash
npm install -g @ohah/electron-mcp-server
# or
npx -y @ohah/electron-mcp-server
```

## Cursor

In `.cursor/mcp.json`:

```json
{
  "mcpServers": {
    "electron-mcp": {
      "command": "npx",
      "args": ["-y", "@ohah/electron-mcp-server"]
    }
  }
}
```

## Requirement

- **Node.js**: required to run this MCP server (e.g. `npx` or global install).
- **Electron**: run your app with remote debugging. Recommended port **9222** (single app); for multiple apps use **9229**, **9230** (server scans 9229→9230→9222→…).

```bash
electron . --remote-debugging-port=9222
```

Then MCP tools can control it via Chrome DevTools Protocol.

## MCP clients

Cursor (`.cursor/mcp.json`) is shown above; the same `command`/`args` work in other MCP clients (e.g. Claude Desktop). This server exposes tools for Electron automation (CDP): list pages, take snapshot/screenshot, click, fill, navigate, console/network inspection, performance trace, etc. See the [repository README](https://github.com/ohah/electron-mcp-server) for development and tool details.
npm package: @ohah/hwpjs-win32-arm64-msvc
Description: HWP parser for Node.js, Web, and React Native
Author: ohah
Latest version: 0.1.0-rc.10

# `@ohah/hwpjs-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@ohah/hwpjs`
npm package: @ohah/hwpjs-win32-ia32-msvc
Description: HWP parser for Node.js, Web, and React Native
Author: ohah
Latest version: 0.1.0-rc.10

# `@ohah/hwpjs-win32-ia32-msvc`

This is the **i686-pc-windows-msvc** binary for `@ohah/hwpjs`
npm package: @ohah/hwpjs-win32-x64-msvc
Description: HWP parser for Node.js, Web, and React Native
Author: ohah
Latest version: 0.1.0-rc.10

# `@ohah/hwpjs-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@ohah/hwpjs`
npm package: @ohaidukova/react-tree-list
Description: react-tree-list is a lightweight react library for big lists and big tree lists
Author: Olga Haidukova
Latest version: 1.0.1

# react-tree-list

react-tree-list is a lightweight react library for big lists and big tree lists

![Table](./ReactTreeList.gif)

## Demo

[https://ohaidukova.github.io/react-tree-list/](https://ohaidukova.github.io/react-tree-list/)

## Installation

```
npm i @ohaidukova/react-tree-list
```

## Example

```js
import { List, IRowRenderer, TDataBase } from '@ohaidukova/react-tree-list';
import { treeData } from '../data';

interface IData extends TDataBase<'id'> {
    deep: string;
    name: string;
    type: string;
    count: number;
    children?: IData[];
}

const rowRenderer: IRowRenderer<IData> = ({ rowData, style }) => {
    return (
        <div
            style={{
                ...style,
                paddingTop: '5px',
                paddingBottom: '5px',
                borderBottom: '2px solid gray',
                width: '100%',
            }}
        >
            <span
                style={{ padding: '0 10px' }}
            >{`${rowData.name}, ${rowData.id}`}</span>
        </div>
    );
};

export const App = () => {
    return (
        <div
            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
        >
            <div style={{ padding: '50px' }}>React tree data</div>
            <div style={{ flex: 'auto' }}>
                <List<'id', IData>
                    data={treeData}
                    height={500}
                    rowHeight={30}
                    rowRenderer={rowRenderer}
                    uniqueFieldName="id"
                    childrenFieldName="children"
                />
            </div>
        </div>
    );
};

```

## API

| **Property**      | **Type** | **Required** | **Description**                                                                    |
| :---------------- | :------- | :----------: | :--------------------------------------------------------------------------------- |
| data              | array    |      +       | Array of objects with a unique field name, interface IData extends TDataBase<'id'> |
| height            | number   |      +       | Height of the block for the table                                                  |
| rowHeight         | number   |      +       | Height of the row                                                                  |
| overscanRowCount  | number   |              | How many rows we need to render below the visible area, by default 10              |
| uniqueFieldName   | string   |      +       | Name of the field with unique data                                                 |
| childrenFieldName | string   |      +       | Name of the field with nested data                                                 |
| rowRenderer       | function |      +       | Function for displaying rows, interface IRowRenderer                               |
| expandedData      | object   |              | Object with data of expanded rows, interface IExpandedChildrenData                 |
npm package: @ohakutsu/merry-christmas
Description: Merry Christmas! This package displays Christmas ASCII art.
Author: ohakutsu
Latest version: 1.0.8

# @ohakutsu/merry-christmas

Merry Christmas!
This package displays Christmas ASCII art.

## Usage

```bash
$ npx @ohakutsu/merry-christmas

　。　　 ☆　。　　　
　　☆。／＼。 。　　
　／＼／*’＼ 。　　　
　／*’＼,’*,＼ 。　　　
　~~∥~~~∥~~。.:*:・’

 Merry Christmas!
```
npm package: @ohanapediatrics/react-time-range
Description: A flexible time range selector for React
Author: Peter Joseph
Latest version: 2.3.0

# React-Time-Range

A simple react component for selecting start and end time ranges, with validation.

If you need to adjust days and months, and not specifically time, you can pass in your own calendar components as children so that they appear beside each of the time selector drop-downs.

![alt text](https://i.imgur.com/D4BHEXy.png "React Time Range")

Installation
-----

```
npm install react-time-range
```

Dependencies
-----
- React.JS
- Moment.JS

Usage
-----

```
import TimeRange from 'react-time-range';
import moment from 'moment';

<TimeRange
	startMoment={this.state.startTime}
	endMoment={this.state.endTime}
	onChange={this.returnFunction}
/>
```

Component Props
-----

| Property | Type | Default | Description |
|:---|:---|:---|:---|
| `use24Hours` | bool | false | Select drop-downs display 12 hour or 24 hour time. |
| `startLabel` | string | "Start:" | Text label that appears before the start time select drop-down. |
| `endLabel` | string | "End:" | Text label that appears before the end time select drop-down. |
| `startMoment` | string | undefined | A moment ISO 8601 time string representing the start time. |
| `endMoment` | string | undefined | A moment ISO 8601 time string representing the end time. |
| `minuteIncrement` | Number | 30 | Defines the increments in time that should appear in the drop-down menus. Increments must be one of the following `1, 2, 5, 10, 15, 20, 30, 60` minutes. |
| `sameIsValid` | boolean | true | If both the start and end times are the same, this may or may not be considered a valid time range. |
| `className` | string | undefined | Prop for handling custom styling of the component. |
| `onClick` | function | undefined | Return function that is called when one of the time drop-down menus is clicked. |
| `onChange` | function | undefined | Return function that is called when one of the values in the time drop-down menu changes. |
| `showErrors` | boolean | true | Display an error message when the input times are considered invalid. |
| `equalTimeError` | string | "Please enter a valid time. Start and End times cannot be equal." | Error string that is rendered when both start and time values are the same, and this is considered invalid when `sameIsValid={true}`|
| `endTimeError` | string | "Please enter a valid time. End time cannot be before start time." | Error string that is rendered when the selected end time occurs before the start time.|
| `onStartTimeClick` | function | undefined | Return function that is called when the start time drop-down menu is clicked. |
| `onStartTimeChange` | function | undefined | Return function that is called when the start time drop-down value is changed. |
| `onEndTimeClick` | function | undefined | Return function that is called when the end time drop-down menu is clicked. |
| `onEndTimeChange` | function | undefined | Return function that is called when the end time drop-down value is changed. |
npm package: @ohanapediatrics/react-volume-meter
Description: A volume meter React component
Author: Dan Rumney
Latest version: 2.9.0
Deprecated: use @ahanapediatrics scope instead

# react-volume-meter
A volume meter react component

## Installation

```
npm install react-volume-meter
```

## Example

Run `npx styleguidist server`, then navigate to http://localhost:6060 to
see some examples.

## Overview

This component animates a volume meter through an HTML5 `canvas` element.
It takes a Web Audio node as input, creates an `AnalyserNode`, and
computes the volume, which it then displays through the `canvas` element.

## Props

### audioContext

An instance of either `window.audioContext` or `window.webkitAudioContext`,
depending on your browser.
If you use the Web Audio API elsewhere on the page, be sure to pass the
instance of `AudioContext` to this component, since you should
generally only have one instantiation per page.

### src

Optional, although the animation won't start properly without it.
A Web Audio Node object that implements the `connect` method.
For example, you can call `audioContext.createMediaStreamSource(stream)`
to create a node from the stream object returned by a `navigator.getUserMedia`
recording.

### width

The width of the canvas in pixels. The canvas adjusts its animation
automatically but is designed to look best when its width:height
ratio is 3:2.

### height

The height of the canvas in pixels. The canvas adjusts its animation
automatically but is designed to look best when its width:height
ratio is 3:2.

### maxVolume

Optional. The maximum volume level for the volume meter. Its theoretical
maximum is 255 but chances are you'll never get that high in normal use.
When the volume exceeds the `maxVolume` level, the final bar of the
meter turns red. Defaults to 50, which seems to work well for microphone
recordings of normal human speech.

### style

Optional. Style of the canvas element.

### blocks

The number of blocks to include on the meter. The width of each block
scales according to the width of the meter. Defaults to 5

### shape

The shape of the meter - either `VM_FLAT` for a flat meter
or `VM_STEPPED` for a stepped meter. Defaults to `VM_STEPPED`
npm package: @ohanaui/react
Description: Polymorphic, type-safe DOM elements.
Author: Durk Steed Jr.
Latest version: 1.0.4

# @ohanaui/react

Polymorphic, type-safe DOM elements.

## Installation

```bash
npm install @ohanaui/react
```

## Rendering DOM Elements

Use `ohana` to render any DOM element:

```tsx
import { ohana } from "@ohanaui/react";

<ohana.div />;
```

## Typing Props

Use `OhanaProps` to define props including native DOM attributes and `asChild`:

```ts
import type { OhanaProps } from "@ohanaui/react";

type ComponentProps = OhanaProps<"div">;
```

## Example Use Case

The following example shows how Ohana may be used to enable polymorphism for a React component:

```tsx
import type { OhanaProps } from "@ohanaui/react";
import { ohana } from "@ohanaui/react";

type ComponentProps = OhanaProps<"div">;

const Component = ({ children, ...props }: ComponentProps) => (
  <ohana.div className="bg-black text-white" {...props}>
    {children}
  </ohana.div>
);

// renders as <div>
<Component>
  Children
</Component>

// renders as <a>
<Component asChild>
  <ohana.a href="/ohanaui">
    Children
  </ohana.a>
</Component>
```