Web UI Interface

Web UI Interface

#

In addition to its fast and responsive terminal TUI, pig features a modern, lightweight Web UI mode built right in.

Whether you prefer a graphical chat workspace in your desktop browser or need remote collaboration from mobile devices and tablets, Web mode provides a native-grade interactive experience.

---

Key Features

#
  • Zero External Runtime Dependencies: Built entirely on native PHP networking protocols (RFC 6455 WebSocket and HTTP/1.1), ready to run out of the box without any third-party application servers or external frameworks.
  • Native Interactive PTY Terminal Drawer: Zero-C-extension pseudo-terminal engine integrated with xterm.js, accessible anytime via Ctrl+</code> or <code>Cmd+, supporting full ncurses tools (vim, nvim, nano, htop, tmux, less).
  • SSH Node Workbench & SFTP Remote File Explorer: Server inventory, SHA-256 host key fingerprint detection and trust prompts, OpenSSH ~/.ssh/config discovery, remote PTY terminal streaming (ssh -tt), and SFTP remote directory browsing / online file editing (up to 512 KiB).
  • Process-Isolated Model (SessionPool): Every browser conversation tab runs as an isolated pig --mode rpc child subprocess. Multi-turn tasks execute concurrently without blocking each other, and single-session failures never affect other tabs.
  • Single Physical WebSocket Multiplexing: All tabs in the browser share one physical WebSocket connection tagged with tabId, avoiding browser 6-socket connection limits and reverse proxy connection storms.
  • Background Daemon Support (pig web start -d): Detaches cleanly via double-forking and posix_setsid(), keeping the web interface accessible even after closing the terminal or logging out of SSH.
  • Responsive & Mobile Ready: Seamlessly adapts to desktop monitors, tablets, and phones, automatically switching to a native slide-out hamburger drawer on mobile viewports.
  • Native Bilingual Multi-language Support (中 / EN): Built-in internationalization architecture with automatic browser language detection and instant zero-refresh language toggling in the top header.
  • Full Terminal Feature Parity: Supports built-in slash commands (/model, /tree, /name, /compact, /doctor, etc.), model thinking block folding, image attachments, and thumbnail previews.

---

Launching the Web UI

#

pig offers two distinct ways to start the Web UI:

#

When you want the Web UI running continuously in the background as a local or remote service that survives terminal closures, use the daemon management commands:

# 1. Start in the background as a daemon (default port: 8088 on 127.0.0.1)
pig web start -d

# Custom port and host (e.g. for LAN access)
pig web start -d --port=9000 --host=0.0.0.0

# 2. Check running status, PID, port, and active child processes
pig web status

# 3. Gracefully restart the web service
pig web restart -d

# 4. Stop the daemon and terminate all child session processes
pig web stop

Note: The daemon mode decouples from the controlling terminal via pcntl_fork() and posix_setsid(). Closing your terminal window or disconnecting SSH will not interrupt the service.

Option 2: Interactive Terminal Control & Preview

#

While working inside an interactive TUI session, you can manage and inspect the Web UI directly from the prompt:

/web [port]                         # Start in foreground and automatically open default browser
/web restart [--port=8088]          # Restart the Web UI server (smooth reload)
/web status                         # Inspect Web UI running status, PID, and port
/web stop                           # Stop the running Web UI server

Running /web in your terminal automatically launches your default web browser once the port binds, eliminating the need to copy-paste URLs! Background operations (/web start -d, /web status, /web restart) operate quietly in the terminal without opening unwanted browser windows.

---

Interface Layout & Usage

#
┌──────────────────────────────────────────────────────────┐
│  [+] [Tab 1: Optimize Query (running)] [Tab 2: Fix Bug]    │ ── Multi-session Tab Bar
├────────────────────────────┬─────────────────────────────┤
│ 📁 Workspace Sessions      │  👤 User: Refactor this class│
│                            │                             │
│ 2026-10-04 Initial setup   │  🤖 Assistant: Sure, here...│ ── Chat Transcript
│ 2026-10-04 Fix injection   │                             │
│                            │  🛠️ bash: git status         │
├────────────────────────────┴─────────────────────────────┤
│ [ 📎 Attach ] [ Type your message, press Enter to send.. ] │ ── Prompt Input
└──────────────────────────────────────────────────────────┘

1. Multi-Tab Concurrency

#
  • Click + to open a new conversation tab.
  • Each tab is an independent pig --mode rpc child process. Run extensive code generation in Tab 1 while discussing another task in Tab 2 simultaneously.
  • Click × on any tab to close the conversation and terminate or reap its idle subprocess.

2. Session History & Resume

#
  • The left sidebar lists all past sessions for the workspace (loaded from ~/.pig/agent/sessions/ and ~/.pi/agent/sessions/).
  • Clicking any session streams and reconstructs the message tree and token usage in milliseconds.

3. Model & Thinking Level Switching

#
  • The header displays the active model and reasoning level (e.g. (antigravity) gemini-3.8-flash • medium).
  • Click the selector dropdown to switch across any configured provider (Anthropic, Google, Copilot, Antigravity, or custom endpoints).

4. Keyboard Shortcuts & Input Experience (100% Aligned with Terminal TUI)

#
  • Enter: Submit and send the message directly, fully matching terminal TUI behavior (with IME composition guards so candidate confirmation never accidentally submits).
  • Shift+Enter: Insert a newline in the multiline input box with dynamic height expansion for composing code or long prompts.
  • Command+Enter (⌘+Enter) or Ctrl+Enter: Also submits and sends the message.
  • Hold ⌘ for Shortcuts HUD: Similar to Blink Shell / iPadOS, holding the ⌘ (Command) key on its own for ~0.85s fades in a centered frosted-glass shortcut cheat sheet, which disappears the moment ⌘ is released.

5. Slash Commands

#

Type / in the input field to trigger command autocompletion:

  • /model [name]: Switch the model
  • /name [title]: Rename the session
  • /compact: Compact long context
  • /doctor: Run system diagnostics

6. Internationalization & Language Pack Import/Export (Telegram-Style)

#

Click the [中 / EN] button in the top-right header to bring up the centered frosted-glass Language Settings modal:

  • Instant Display Language Switching: Click any language row to toggle between Simplified Chinese (default), English, or imported/extension locales with zero page reload.
  • 📤 Export Current Language Pack (.json): Download the active language as a flat JSON file, such as pig-locale-en.json (186 keys for the built-in en dictionary, plus label, author, version, and exported_at metadata), to serve as a translation template or offline backup.
  • 📥 Import Custom Language Pack (.json): Choose or drag-and-drop any Telegram-style JSON file; the frontend validates and persists it to localStorage, applying the new language immediately.
  • Extension Integration: Any language packs registered by pure PHP extensions via $pig->registerLocale() are automatically listed with an [Extension] badge.

7. Interactive Local PTY Terminal Drawer (WebTerminal)

#

Click the top-right Terminal button or press Ctrl+</code> (or <code>Cmd+ on macOS) anywhere on the page to slide out a full-featured multi-tab terminal drawer:

  • True Unix PTY Support: Driven by PHP's native pseudo-terminal engine with non-blocking micro-batching, providing full support for vim, nvim, nano, htop, tmux, and less.
  • Concurrent Terminals: Click the + button on the tab bar to open multiple concurrent terminal tabs with individual renaming and closing.
  • Native Terminal Feel: Automatic copy-on-select, right-click/hotkey paste, and dynamic resize adaptation (SIGWINCH).

8. SSH Remote Node Workbench & SFTP File Explorer (NodeWorkbench)

#

Click the top-right 🖥️ Nodes button to open the full-featured SSH and SFTP workbench modal:

  • Node Asset Inventory: Grouped tree view on the left for managing servers, with search, add, edit, and delete capabilities; passwords and passphrases are stored in encrypted isolation.
  • One-Click ~/.ssh/config Discovery: Automatically scans local OpenSSH configurations to import existing production servers and bastion hosts.
  • Host Key Fingerprint Verification (SHA-256): Prompts for trust on unknown host keys or key changes to prevent man-in-the-middle (MITM) attacks.
  • Remote SSH Terminal: Direct interactive terminal streaming via ssh -tt in a backend PTY process for remote shell tasks.
  • Online SFTP File Explorer & Editor: Visual file tree navigation with directory traversal, file viewing, and online editing/saving (capped at 512 KiB per file).

9. Scheduled Tasks

#

Click the Scheduled button at the top of the left sidebar to open the scheduled task manager:

  • Flexible Scheduling: Supports manual-only, hourly, daily, weekdays, weekly, once, or custom 5-field cron expressions in the browser's timezone.
  • Isolated Execution: Every run launches as a fresh conversation within the session pool, appearing in the sidebar with a clock icon.
  • Human-in-the-Loop Interaction: If a run encounters a hook question or confirmation prompt, it pauses waiting for input and illuminates a status dot in the sidebar; clicking the conversation allows seamless inspection and answering.
  • Sleep Catch-Up Recovery: Runs missed while the machine slept or the web daemon was stopped execute once upon waking, preventing burst floods.

---

Production Deployment & Reverse Proxy (Nginx)

#

When hosting pig on a remote server behind an Nginx reverse proxy with SSL, use this configuration:

server {
    listen 443 ssl http2;
    server_name pig.your-domain.com;

    ssl_certificate     /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:8088;
        proxy_http_version 1.1;

        # WebSocket upgrade support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Disable buffering for real-time SSE & WebSocket streaming
        proxy_buffering off;
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }
}