mcp-ide 0.1.0

package/.claude-plugin/commands/logs.md

@@ -0,0 +1,14 @@
+---
+allowed-tools: mcp__ide__get_logs, mcp__ide__list_processes
+---
+
+Get logs for process: $ARGUMENTS
+
+If no process name is specified, first list available processes and ask which one.
+
+Show the last 50 lines by default. Highlight any lines containing "error", "Error", or "ERROR" in red.
+
+Options the user might provide:
+- Process name as first argument
+- "all" to show combined stdout and stderr
+- A number to change the tail count (e.g., "100" for last 100 lines)

package/.claude-plugin/commands/restart.md

@@ -0,0 +1,11 @@
+---
+allowed-tools: mcp__ide__restart_process, mcp__ide__list_processes, mcp__ide__get_status
+---
+
+Restart process: $ARGUMENTS
+
+If no process name is specified, first list available processes with their current status and ask which one to restart.
+
+After restarting, wait a moment and check the new status to confirm the process started successfully.
+
+If the process was crashed, mention that it has been restarted and is now running.

package/.claude-plugin/commands/status.md

@@ -0,0 +1,15 @@
+---
+allowed-tools: mcp__ide__list_processes, mcp__ide__get_status
+---
+
+List all processes and their current status using the IDE MCP tools.
+
+Show a formatted table with columns: Name, Port, Status, Health.
+
+Use these status indicators:
+- Running/Ready: green checkmark
+- Crashed: red X
+- Starting: yellow spinner
+- Pending: gray circle
+
+If a process has a health check configured, show its health status.

package/.claude-plugin/hooks/hooks.json

@@ -0,0 +1,14 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "${CLAUDE_PLUGIN_ROOT}/.claude-plugin/scripts/session-context.sh"
+          }
+        ]
+      }
+    ]
+  }
+}

package/.claude-plugin/marketplace.json

@@ -0,0 +1,21 @@
+{
+  "name": "claude-ide",
+  "owner": {
+    "name": "buremba"
+  },
+  "metadata": {
+    "description": "Interactive Development Environment for Claude Code",
+    "version": "0.1.0"
+  },
+  "plugins": [
+    {
+      "name": "ide",
+      "source": "./",
+      "description": "Interactive Development Environment: create terminal/process panes, show interactive forms and questions, TUI dashboards, manage dev servers from mide.yaml.",
+      "version": "0.1.0",
+      "author": {
+        "name": "buremba"
+      }
+    }
+  ]
+}

package/.claude-plugin/mcp.json

@@ -0,0 +1,9 @@
+{
+  "ide": {
+    "command": "node",
+    "args": ["${CLAUDE_PLUGIN_ROOT}/dist/index.js"],
+    "env": {
+      "CLAUDE_IDE_STATUS_ENABLED": "true"
+    }
+  }
+}

package/.claude-plugin/plugin.json

@@ -0,0 +1,15 @@
+{
+  "name": "ide",
+  "version": "0.1.0",
+  "description": "Interactive Development Environment: terminal panes, interactive forms/questions, process management, TUI dashboards",
+  "author": {
+    "name": "buremba"
+  },
+  "repository": "https://github.com/buremba/claude-ide",
+  "license": "MIT",
+  "keywords": ["process", "ide", "dev-server", "terminal", "interactive"],
+  "mcpServers": "./.claude-plugin/mcp.json",
+  "commands": "./.claude-plugin/commands/",
+  "skills": "./.claude-plugin/skills/",
+  "hooks": "./.claude-plugin/hooks/hooks.json"
+}

package/.claude-plugin/scripts/session-context.sh

@@ -0,0 +1,142 @@
+#!/bin/bash
+# Inject MIDE context at session start
+
+# Get workspace from stdin JSON
+INPUT=$(cat)
+WORKSPACE=$(echo "$INPUT" | jq -r '.cwd // empty' 2>/dev/null)
+[ -z "$WORKSPACE" ] && WORKSPACE=$(pwd)
+
+# Check for mide.yaml
+CONFIG_FILE=""
+if [ -f "$WORKSPACE/mide.yaml" ]; then
+  CONFIG_FILE="$WORKSPACE/mide.yaml"
+elif [ -f "$WORKSPACE/mide.yml" ]; then
+  CONFIG_FILE="$WORKSPACE/mide.yml"
+fi
+
+if [ -n "$CONFIG_FILE" ]; then
+  PROJECT=$(basename "$WORKSPACE" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9_-]/-/g')
+  SESSION="mide-$PROJECT"
+
+  # Check if tmux session exists
+  if tmux has-session -t "$SESSION" 2>/dev/null; then
+    echo "MIDE session: $SESSION (attach: tmux attach -t $SESSION)"
+    echo ""
+
+    # Extract process names, ports, and descriptions from mide.yaml
+    # Format: process_name|port|description
+    SERVICES=$(awk '
+/^processes:/ { in_proc=1; next }
+in_proc && /^  [a-zA-Z0-9_-]+:/ {
+  if (proc != "" && port != "") print proc"|"port"|"desc
+  proc = $0; sub(/:.*/, "", proc); sub(/^  /, "", proc)
+  port = ""; desc = ""
+}
+in_proc && /^    port:/ { port = $0; sub(/^    port: */, "", port) }
+in_proc && /^    description:/ { desc = $0; sub(/^    description: */, "", desc) }
+END { if (proc != "" && port != "") print proc"|"port"|"desc }
+    ' "$CONFIG_FILE")
+
+    # Show Services section if any processes have ports
+    if [ -n "$SERVICES" ]; then
+      echo "Services:"
+      echo "$SERVICES" | while IFS='|' read -r name port desc; do
+        if [ -n "$desc" ]; then
+          echo "  $name: http://localhost:$port - $desc"
+        else
+          echo "  $name: http://localhost:$port"
+        fi
+      done
+      echo ""
+    fi
+
+    # Extract process names from mide.yaml (keys under 'processes:')
+    # Skip empty lines, exit when hitting next top-level key
+    PROC_NAMES=$(awk '/^processes:/{found=1; next} found && /^$/{next} found && /^[^ ]/{exit} found && /^  [a-zA-Z0-9_-]+:/{gsub(/:.*/, ""); gsub(/^  /, ""); print}' "$CONFIG_FILE")
+
+    # Get pane count
+    PANE_COUNT=$(tmux list-panes -t "$SESSION" -F "#{pane_index}" | wc -l | tr -d ' ')
+
+    # Convert process names to array
+    idx=0
+    for PROC_NAME in $PROC_NAMES; do
+      if [ $idx -ge $PANE_COUNT ]; then
+        break
+      fi
+
+      # Capture last 2 non-empty lines from pane
+      LAST_LINES=$(tmux capture-pane -t "$SESSION:0.$idx" -p 2>/dev/null | grep -v '^$' | tail -2)
+
+      echo "[$PROC_NAME]"
+      if [ -n "$LAST_LINES" ]; then
+        echo "$LAST_LINES" | sed 's/^/  /'
+      else
+        echo "  (no output)"
+      fi
+
+      idx=$((idx + 1))
+    done
+
+    # List available ink files from both project and global locations
+    PROJECT_INK_DIR="$WORKSPACE/.mide/interactive"
+    GLOBAL_INK_DIR="$HOME/.mide/interactive"
+
+    PROJECT_INK=""
+    GLOBAL_INK=""
+
+    if [ -d "$PROJECT_INK_DIR" ]; then
+      PROJECT_INK=$(find "$PROJECT_INK_DIR" -maxdepth 1 \( -name "*.tsx" -o -name "*.jsx" \) -exec basename {} \; 2>/dev/null | sort)
+    fi
+
+    if [ -d "$GLOBAL_INK_DIR" ]; then
+      GLOBAL_INK=$(find "$GLOBAL_INK_DIR" -maxdepth 1 \( -name "*.tsx" -o -name "*.jsx" \) -exec basename {} \; 2>/dev/null | sort)
+    fi
+
+    if [ -n "$PROJECT_INK" ] || [ -n "$GLOBAL_INK" ]; then
+      echo ""
+      echo "Available ink files (for show_interaction):"
+      if [ -n "$PROJECT_INK" ]; then
+        echo "  Project (.mide/interactive/):"
+        echo "$PROJECT_INK" | sed 's/^/    /'
+      fi
+      if [ -n "$GLOBAL_INK" ]; then
+        echo "  Global (~/.mide/interactive/):"
+        echo "$GLOBAL_INK" | sed 's/^/    /'
+      fi
+    fi
+
+    echo ""
+    echo "Use /ide:start to manage processes and create terminals."
+  else
+    echo "MIDE project detected but session not running."
+    echo "Processes will start when MCP tools are used."
+
+    # Still show ink files even if session not running
+    PROJECT_INK_DIR="$WORKSPACE/.mide/interactive"
+    GLOBAL_INK_DIR="$HOME/.mide/interactive"
+
+    PROJECT_INK=""
+    GLOBAL_INK=""
+
+    if [ -d "$PROJECT_INK_DIR" ]; then
+      PROJECT_INK=$(find "$PROJECT_INK_DIR" -maxdepth 1 \( -name "*.tsx" -o -name "*.jsx" \) -exec basename {} \; 2>/dev/null | sort)
+    fi
+
+    if [ -d "$GLOBAL_INK_DIR" ]; then
+      GLOBAL_INK=$(find "$GLOBAL_INK_DIR" -maxdepth 1 \( -name "*.tsx" -o -name "*.jsx" \) -exec basename {} \; 2>/dev/null | sort)
+    fi
+
+    if [ -n "$PROJECT_INK" ] || [ -n "$GLOBAL_INK" ]; then
+      echo ""
+      echo "Available ink files (for show_interaction):"
+      if [ -n "$PROJECT_INK" ]; then
+        echo "  Project (.mide/interactive/):"
+        echo "$PROJECT_INK" | sed 's/^/    /'
+      fi
+      if [ -n "$GLOBAL_INK" ]; then
+        echo "  Global (~/.mide/interactive/):"
+        echo "$GLOBAL_INK" | sed 's/^/    /'
+      fi
+    fi
+  fi
+fi

package/.claude-plugin/skills/start/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: start
+description: "Start dev environment, create terminals/panes, show Ink components and interactive forms, manage processes. Triggers: start dev, run server, create terminal, open pane, ink component, ask question, show form, interactive input, process status, dashboard, TUI."
+allowed-tools: mcp__plugin_ide_ide__*
+---
+
+# IDE Start Skill
+
+Start and manage your development environment with terminals, processes, interactive Ink components, and dashboards.
+
+## Starting the Environment
+
+When the user wants to start their dev environment, use `list_processes` to initialize and show all processes from `mide.yaml`. This will:
+1. Create the tmux session
+2. Start all auto-start processes
+3. Open the terminal window (if configured)
+
+```
+list_processes()  // Initializes environment and shows status
+```
+
+## Terminal & Pane Tools
+
+### `create_pane`
+Create a terminal pane running any command. Use for dev servers, build commands, or any shell process.
+```
+create_pane(name: "dev-server", command: "npm run dev")
+create_pane(name: "tests", command: "npm test --watch", group: "tools")
+```
+
+### `remove_pane`
+Remove a terminal pane by name.
+
+## Interactive Ink Components
+
+### `show_interaction`
+Show interactive Ink components for user input, TUI dashboards, or any terminal UI.
+
+**Schema mode** - Define forms inline (no file needed):
+```
+show_interaction(
+  schema: {
+    questions: [
+      { question: "What's your name?", header: "Name", inputType: "text" },
+      { question: "Select role", header: "Role", options: [
+        { label: "Developer", description: "Write code" },
+        { label: "Designer", description: "Create designs" }
+      ]}
+    ]
+  },
+  title: "User Setup"
+)
+```
+
+**File mode** - Run custom Ink components (.tsx/.jsx files):
+```
+show_interaction(ink_file: "color-picker.tsx", title: "Pick a Color")
+show_interaction(ink_file: "dashboard.tsx")
+```
+
+File resolution order:
+1. Absolute paths used as-is
+2. Project `.mide/interactive/` directory
+3. Global `~/.mide/interactive/` directory
+
+### `get_interaction_result`
+Get result from a non-blocking interaction (when `block: false`).
+
+### `cancel_interaction`
+Cancel a pending interaction.
+
+## Writing Custom Ink Components
+
+Create `.tsx` files in `.mide/interactive/` (project) or `~/.mide/interactive/` (global):
+
+```tsx
+import { Box, Text, useInput, useApp } from 'ink';
+import { useState } from 'react';
+
+// onComplete is injected globally - call it to return data
+declare const onComplete: (result: unknown) => void;
+
+function MyComponent() {
+  const { exit } = useApp();
+  const [value, setValue] = useState('');
+
+  useInput((input, key) => {
+    if (key.return) {
+      onComplete({ selected: value });  // Return data to Claude
+      exit();                            // Close the component
+    }
+    if (key.escape) {
+      onComplete({ cancelled: true });
+      exit();
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>My Interactive Component</Text>
+      <Text>Press Enter to confirm, Escape to cancel</Text>
+    </Box>
+  );
+}
+
+export default MyComponent;  // Must have default export
+```
+
+**Available imports:**
+- `ink` - Box, Text, useInput, useApp, useFocus, Newline, Spacer, Static, Transform
+- `ink-text-input` - TextInput component
+- `ink-select-input` - SelectInput component
+- `react` - useState, useEffect, useMemo, useCallback, etc.
+
+**Key patterns:**
+- `useInput((input, key) => {...})` - Handle keyboard input
+- `useApp().exit()` - Close the component
+- `onComplete(data)` - Return result to Claude (global function)
+- `useState` - Manage component state
+
+### `set_status`
+Update the terminal window title/status indicator.
+
+## Process Management (requires `mide.yaml`)
+
+- `list_processes` - Overview of all processes (also initializes environment)
+- `get_status` - Detailed status of a single process
+- `get_logs` - Get stdout/stderr logs
+- `get_url` - Get the preview URL for a process
+- `start_process` - Start a stopped process
+- `stop_process` - Stop a running process
+- `restart_process` - Restart a process
+
+## When to Use
+
+| User Intent | Tool |
+|-------------|------|
+| "start dev environment" | `list_processes` |
+| "run a command in terminal" | `create_pane` |
+| "ask user a question" | `show_interaction` with schema |
+| "show a color picker" | `show_interaction` with ink_file |
+| "create an ink component" | Write .tsx file, then `show_interaction` |
+| "check if server is running" | `get_status` |
+| "show me the logs" | `get_logs` |
+| "restart the API" | `restart_process` |
+
+## Best Practices
+
+1. Use `list_processes` first to initialize the environment
+2. Use `show_interaction` for structured user input instead of asking in chat
+3. For simple questions, use schema mode (no file needed)
+4. For complex UIs, create Ink components in `.mide/interactive/`
+5. Use `create_pane` for long-running processes you want visible
+6. Check process status before suggesting restarts

package/README.md

@@ -0,0 +1,220 @@
+# mcp-ide
+
+Interactive Development Environment for Claude Code. Create terminal/process panes, show interactive Ink components & forms, manage dev servers, build TUI dashboards.
+
+## Installation
+
+```bash
+npm install -g mcp-ide
+```
+
+Or use with npx:
+```bash
+npx mcp-ide
+```
+
+## Quick Start
+
+1. Create an `mide.yaml` in your project:
+
+```yaml
+processes:
+  api:
+    command: npm run dev
+    port: 3000
+
+  frontend:
+    command: npm run dev
+    cwd: ./frontend
+```
+
+2. Add to your Claude Code MCP config:
+
+```json
+{
+  "mcpServers": {
+    "ide": {
+      "command": "npx",
+      "args": ["-y", "mcp-ide"]
+    }
+  }
+}
+```
+
+3. Use `/ide:start` or ask Claude to manage your dev environment:
+
+```
+> /ide:start
+> "start my dev servers"
+> "show me the API logs"
+> "restart the frontend"
+```
+
+## MCP Tools
+
+### Process Management
+
+| Tool | Description |
+|------|-------------|
+| `list_processes` | List all processes with status |
+| `start_process(name)` | Start a process |
+| `stop_process(name)` | Stop a process |
+| `restart_process(name)` | Restart a process |
+| `get_status(name)` | Get detailed status |
+| `get_logs(name, tail?)` | Get process logs |
+| `get_url(name)` | Get process URL |
+
+### Terminal Panes
+
+| Tool | Description |
+|------|-------------|
+| `create_pane(name, command, group?)` | Create a terminal pane |
+| `remove_pane(name)` | Remove a terminal pane |
+| `set_status(message)` | Update window title/status |
+
+### Interactive Ink Components
+
+| Tool | Description |
+|------|-------------|
+| `show_interaction(schema?, ink_file?, title?, block?)` | Show interactive form or Ink component |
+| `get_interaction_result(id, block?)` | Get result from non-blocking interaction |
+| `cancel_interaction(id)` | Cancel an active interaction |
+
+**Schema mode** - Define forms inline:
+```typescript
+show_interaction({
+  schema: {
+    questions: [
+      { question: "What's your name?", header: "Name", inputType: "text" },
+      { question: "Select role", header: "Role", options: [
+        { label: "Developer" },
+        { label: "Designer" }
+      ]}
+    ]
+  },
+  title: "User Setup"
+})
+```
+
+**File mode** - Run custom Ink components:
+```typescript
+show_interaction({
+  ink_file: "color-picker.tsx",  // Relative to .mide/interactive/
+  title: "Pick a Color",
+  block: true
+})
+// Returns: { action: "accept", result: { color: "blue" } }
+```
+
+## Writing Ink Components
+
+Create `.tsx` files in `.mide/interactive/` (project) or `~/.mide/interactive/` (global):
+
+```tsx
+import { Box, Text, useInput, useApp } from 'ink';
+import { useState } from 'react';
+
+declare const onComplete: (result: unknown) => void;
+
+function ColorPicker() {
+  const { exit } = useApp();
+  const [selected, setSelected] = useState(0);
+  const colors = ['red', 'green', 'blue'];
+
+  useInput((input, key) => {
+    if (key.upArrow) setSelected(s => (s - 1 + colors.length) % colors.length);
+    if (key.downArrow) setSelected(s => (s + 1) % colors.length);
+    if (key.return) {
+      onComplete({ color: colors[selected] });
+      exit();
+    }
+    if (key.escape) {
+      onComplete({ cancelled: true });
+      exit();
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>Pick a color:</Text>
+      {colors.map((color, i) => (
+        <Text key={color} color={i === selected ? 'cyan' : 'white'}>
+          {i === selected ? '> ' : '  '}{color}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+export default ColorPicker;
+```
+
+**Available imports:** `ink`, `ink-text-input`, `ink-select-input`, `react`
+
+**Key patterns:**
+- `onComplete(data)` - Return result to Claude (global function)
+- `useApp().exit()` - Close the component
+- `useInput((input, key) => {...})` - Handle keyboard
+
+See `.mide/interactive/color-picker.tsx` for a complete example.
+
+## Configuration
+
+### Process Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `command` | string | required | Shell command to run |
+| `cwd` | string | config dir | Working directory |
+| `port` | number | auto-detect | Fixed port (injected as `$PORT`) |
+| `autoStart` | boolean | true | Start automatically |
+| `env` | object | {} | Environment variables |
+| `envFile` | string | none | Path to .env file |
+| `restartPolicy` | string | "onFailure" | `always`, `onFailure`, or `never` |
+| `maxRestarts` | number | 5 | Max restart attempts |
+| `healthCheck` | string | none | HTTP path for health checks |
+| `dependsOn` | string/array | none | Process dependencies |
+
+### Settings
+
+```yaml
+settings:
+  logBufferSize: 1000        # Log lines to keep per process
+  healthCheckInterval: 10000  # Health check interval (ms)
+  autoAttachTerminal: true    # Auto-open terminal on start
+  terminalApp: auto           # auto, ghostty, iterm, kitty, terminal
+  layout: grid                # grid, horizontal, vertical, main-left, main-top
+```
+
+### Layout
+
+```yaml
+# Simple presets
+layout: grid        # Automatic grid (default)
+layout: horizontal  # Side by side
+layout: vertical    # Stacked
+
+# Grouped layouts
+layout:
+  type: rows
+  groups:
+    servers: [frontend, backend]
+    tools: [worker, api]
+```
+
+### Dependencies
+
+```yaml
+processes:
+  db:
+    command: docker compose up postgres
+    port: 5432
+
+  api:
+    command: npm run dev
+    dependsOn: db
+```
+
+## License
+
+MIT

package/dist/bookmark-manager.d.ts

@@ -0,0 +1,12 @@
+export interface Bookmark {
+    name: string;
+    url: string;
+}
+/**
+ * Enable the bookmarks bar in Chrome preferences
+ */
+export declare function enableBookmarksBar(userDataDir: string): void;
+/**
+ * Write bookmarks to Chrome's Bookmarks file format
+ */
+export declare function writeBookmarks(userDataDir: string, bookmarks: Bookmark[]): void;