Compare commits
12 Commits
v0.1.52-wi
...
v0.1.64-wi
| Author | SHA1 | Date | |
|---|---|---|---|
| 550159fc63 | |||
| e3c874bc75 | |||
| 6cae0e7feb | |||
| b566446b75 | |||
| 601a2db3cf | |||
| b795e27251 | |||
| 19d4cbce27 | |||
| 946ea03956 | |||
| ba4cb4176d | |||
| 4b56610ff5 | |||
| db51abb970 | |||
| d947824436 |
@@ -20,6 +20,18 @@ jobs:
|
|||||||
build-linux:
|
build-linux:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
|
- name: Install Node.js
|
||||||
|
run: |
|
||||||
|
if command -v node >/dev/null 2>&1; then
|
||||||
|
echo "Node.js already installed: $(node --version)"
|
||||||
|
else
|
||||||
|
echo "Installing Node.js 22..."
|
||||||
|
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
|
||||||
|
sudo apt-get install -y nodejs
|
||||||
|
fi
|
||||||
|
node --version
|
||||||
|
npm --version
|
||||||
|
|
||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
with:
|
with:
|
||||||
@@ -61,29 +73,35 @@ jobs:
|
|||||||
xdg-utils
|
xdg-utils
|
||||||
|
|
||||||
- name: Install Rust stable
|
- name: Install Rust stable
|
||||||
uses: dtolnay/rust-toolchain@stable
|
run: |
|
||||||
|
if command -v rustup >/dev/null 2>&1; then
|
||||||
- name: Rust cache
|
echo "Rust already installed: $(rustc --version)"
|
||||||
uses: swatinem/rust-cache@v2
|
rustup update stable
|
||||||
with:
|
rustup default stable
|
||||||
workspaces: "./app/src-tauri -> target"
|
else
|
||||||
|
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain stable
|
||||||
- name: Install Node.js
|
fi
|
||||||
uses: actions/setup-node@v4
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
with:
|
rustc --version
|
||||||
node-version: "22"
|
cargo --version
|
||||||
|
|
||||||
- name: Install frontend dependencies
|
- name: Install frontend dependencies
|
||||||
working-directory: ./app
|
working-directory: ./app
|
||||||
run: npm ci
|
run: |
|
||||||
|
rm -rf node_modules
|
||||||
|
npm install
|
||||||
|
|
||||||
- name: Install Tauri CLI
|
- name: Install Tauri CLI
|
||||||
working-directory: ./app
|
working-directory: ./app
|
||||||
run: npx tauri --version || npm install @tauri-apps/cli
|
run: |
|
||||||
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
|
npx tauri --version || npm install @tauri-apps/cli
|
||||||
|
|
||||||
- name: Build Tauri app
|
- name: Build Tauri app
|
||||||
working-directory: ./app
|
working-directory: ./app
|
||||||
run: npx tauri build
|
run: |
|
||||||
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
|
npx tauri build
|
||||||
|
|
||||||
- name: Collect artifacts
|
- name: Collect artifacts
|
||||||
run: |
|
run: |
|
||||||
@@ -119,6 +137,107 @@ jobs:
|
|||||||
"${GITEA_URL}/api/v1/repos/${REPO}/releases/${RELEASE_ID}/assets?name=${filename}"
|
"${GITEA_URL}/api/v1/repos/${REPO}/releases/${RELEASE_ID}/assets?name=${filename}"
|
||||||
done
|
done
|
||||||
|
|
||||||
|
build-macos:
|
||||||
|
runs-on: macos-latest
|
||||||
|
steps:
|
||||||
|
- name: Install Node.js
|
||||||
|
run: |
|
||||||
|
if command -v node >/dev/null 2>&1; then
|
||||||
|
echo "Node.js already installed: $(node --version)"
|
||||||
|
else
|
||||||
|
echo "Installing Node.js 22 via Homebrew..."
|
||||||
|
brew install node@22
|
||||||
|
brew link --overwrite node@22
|
||||||
|
fi
|
||||||
|
node --version
|
||||||
|
npm --version
|
||||||
|
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
with:
|
||||||
|
fetch-depth: 0
|
||||||
|
|
||||||
|
- name: Compute version
|
||||||
|
id: version
|
||||||
|
run: |
|
||||||
|
COMMIT_COUNT=$(git rev-list --count HEAD)
|
||||||
|
VERSION="0.1.${COMMIT_COUNT}"
|
||||||
|
echo "VERSION=${VERSION}" >> $GITHUB_OUTPUT
|
||||||
|
echo "Computed version: ${VERSION}"
|
||||||
|
|
||||||
|
- name: Set app version
|
||||||
|
run: |
|
||||||
|
VERSION="${{ steps.version.outputs.VERSION }}"
|
||||||
|
sed -i '' "s/\"version\": \".*\"/\"version\": \"${VERSION}\"/" app/src-tauri/tauri.conf.json
|
||||||
|
sed -i '' "s/\"version\": \".*\"/\"version\": \"${VERSION}\"/" app/package.json
|
||||||
|
sed -i '' "s/^version = \".*\"/version = \"${VERSION}\"/" app/src-tauri/Cargo.toml
|
||||||
|
echo "Patched version to ${VERSION}"
|
||||||
|
|
||||||
|
- name: Install Rust stable
|
||||||
|
run: |
|
||||||
|
if command -v rustup >/dev/null 2>&1; then
|
||||||
|
echo "Rust already installed: $(rustc --version)"
|
||||||
|
rustup update stable
|
||||||
|
rustup default stable
|
||||||
|
else
|
||||||
|
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --default-toolchain stable
|
||||||
|
fi
|
||||||
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
|
rustup target add aarch64-apple-darwin x86_64-apple-darwin
|
||||||
|
rustc --version
|
||||||
|
cargo --version
|
||||||
|
|
||||||
|
- name: Install frontend dependencies
|
||||||
|
working-directory: ./app
|
||||||
|
run: |
|
||||||
|
rm -rf node_modules
|
||||||
|
npm install
|
||||||
|
|
||||||
|
- name: Install Tauri CLI
|
||||||
|
working-directory: ./app
|
||||||
|
run: |
|
||||||
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
|
npx tauri --version || npm install @tauri-apps/cli
|
||||||
|
|
||||||
|
- name: Build Tauri app (universal)
|
||||||
|
working-directory: ./app
|
||||||
|
run: |
|
||||||
|
export PATH="$HOME/.cargo/bin:$PATH"
|
||||||
|
npx tauri build --target universal-apple-darwin
|
||||||
|
|
||||||
|
- name: Collect artifacts
|
||||||
|
run: |
|
||||||
|
mkdir -p artifacts
|
||||||
|
cp app/src-tauri/target/universal-apple-darwin/release/bundle/dmg/*.dmg artifacts/ 2>/dev/null || true
|
||||||
|
cp app/src-tauri/target/universal-apple-darwin/release/bundle/macos/*.app.tar.gz artifacts/ 2>/dev/null || true
|
||||||
|
ls -la artifacts/
|
||||||
|
|
||||||
|
- name: Upload to Gitea release
|
||||||
|
if: gitea.event_name == 'push'
|
||||||
|
env:
|
||||||
|
TOKEN: ${{ secrets.REGISTRY_TOKEN }}
|
||||||
|
run: |
|
||||||
|
TAG="v${{ steps.version.outputs.VERSION }}-mac"
|
||||||
|
# Create release
|
||||||
|
curl -s -X POST \
|
||||||
|
-H "Authorization: token ${TOKEN}" \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d "{\"tag_name\": \"${TAG}\", \"name\": \"Triple-C v${{ steps.version.outputs.VERSION }} (macOS)\", \"body\": \"Automated build from commit ${{ gitea.sha }}\"}" \
|
||||||
|
"${GITEA_URL}/api/v1/repos/${REPO}/releases" > release.json
|
||||||
|
RELEASE_ID=$(cat release.json | grep -o '"id":[0-9]*' | head -1 | grep -o '[0-9]*')
|
||||||
|
echo "Release ID: ${RELEASE_ID}"
|
||||||
|
# Upload each artifact
|
||||||
|
for file in artifacts/*; do
|
||||||
|
[ -f "$file" ] || continue
|
||||||
|
filename=$(basename "$file")
|
||||||
|
echo "Uploading ${filename}..."
|
||||||
|
curl -s -X POST \
|
||||||
|
-H "Authorization: token ${TOKEN}" \
|
||||||
|
-H "Content-Type: application/octet-stream" \
|
||||||
|
--data-binary "@${file}" \
|
||||||
|
"${GITEA_URL}/api/v1/repos/${REPO}/releases/${RELEASE_ID}/assets?name=${filename}"
|
||||||
|
done
|
||||||
|
|
||||||
build-windows:
|
build-windows:
|
||||||
runs-on: windows-latest
|
runs-on: windows-latest
|
||||||
defaults:
|
defaults:
|
||||||
|
|||||||
@@ -21,6 +21,9 @@ jobs:
|
|||||||
- name: Checkout
|
- name: Checkout
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Set up QEMU
|
||||||
|
uses: docker/setup-qemu-action@v3
|
||||||
|
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@v3
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
@@ -36,6 +39,7 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
context: ./container
|
context: ./container
|
||||||
file: ./container/Dockerfile
|
file: ./container/Dockerfile
|
||||||
|
platforms: linux/amd64,linux/arm64
|
||||||
push: ${{ gitea.event_name == 'push' }}
|
push: ${{ gitea.event_name == 'push' }}
|
||||||
tags: |
|
tags: |
|
||||||
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
|
${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
|
||||||
|
|||||||
53
BUILDING.md
53
BUILDING.md
@@ -1,6 +1,6 @@
|
|||||||
# Building Triple-C
|
# Building Triple-C
|
||||||
|
|
||||||
Triple-C is a Tauri v2 desktop application with a React/TypeScript frontend and a Rust backend. This guide covers building the app from source on Linux and Windows.
|
Triple-C is a Tauri v2 desktop application with a React/TypeScript frontend and a Rust backend. This guide covers building the app from source on Linux, macOS, and Windows.
|
||||||
|
|
||||||
## Prerequisites (All Platforms)
|
## Prerequisites (All Platforms)
|
||||||
|
|
||||||
@@ -79,6 +79,57 @@ Build artifacts are located in `app/src-tauri/target/release/bundle/`:
|
|||||||
| Debian pkg | `deb/*.deb` |
|
| Debian pkg | `deb/*.deb` |
|
||||||
| RPM pkg | `rpm/*.rpm` |
|
| RPM pkg | `rpm/*.rpm` |
|
||||||
|
|
||||||
|
## macOS
|
||||||
|
|
||||||
|
### 1. Install prerequisites
|
||||||
|
|
||||||
|
- **Xcode Command Line Tools** — required for the C/C++ toolchain and system headers:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
xcode-select --install
|
||||||
|
```
|
||||||
|
|
||||||
|
No additional system libraries are needed — macOS includes WebKit natively.
|
||||||
|
|
||||||
|
### 2. Install Rust targets (universal binary)
|
||||||
|
|
||||||
|
To build a universal binary that runs on both Apple Silicon and Intel Macs:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
rustup target add aarch64-apple-darwin x86_64-apple-darwin
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Install frontend dependencies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd app
|
||||||
|
npm ci
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Build
|
||||||
|
|
||||||
|
For a universal binary (recommended for distribution):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx tauri build --target universal-apple-darwin
|
||||||
|
```
|
||||||
|
|
||||||
|
For the current architecture only (faster, for local development):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx tauri build
|
||||||
|
```
|
||||||
|
|
||||||
|
Build artifacts are located in `app/src-tauri/target/universal-apple-darwin/release/bundle/` (or `target/release/bundle/` for single-arch builds):
|
||||||
|
|
||||||
|
| Format | Path |
|
||||||
|
|--------|------|
|
||||||
|
| DMG | `dmg/*.dmg` |
|
||||||
|
| macOS App | `macos/*.app` |
|
||||||
|
| macOS App (compressed) | `macos/*.app.tar.gz` |
|
||||||
|
|
||||||
|
> **Note:** The app is not signed or notarized. On first launch, macOS Gatekeeper may block it. Right-click the app and select "Open" to bypass, or remove the quarantine attribute: `xattr -cr /Applications/Triple-C.app`
|
||||||
|
|
||||||
## Windows
|
## Windows
|
||||||
|
|
||||||
### 1. Install prerequisites
|
### 1. Install prerequisites
|
||||||
|
|||||||
115
CLAUDE.md
Normal file
115
CLAUDE.md
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
Triple-C (Claude-Code-Container) is a Tauri v2 desktop application that sandboxes Claude Code inside Docker containers. It has two main parts: a React/TypeScript frontend, a Rust backend, and a Docker container image definition.
|
||||||
|
|
||||||
|
## Build & Development Commands
|
||||||
|
|
||||||
|
All frontend/tauri commands run from the `app/` directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd app
|
||||||
|
npm ci # Install dependencies (required first time)
|
||||||
|
npx tauri dev # Launch app in dev mode with hot reload (Vite on port 1420)
|
||||||
|
npx tauri build # Production build (outputs to src-tauri/target/release/bundle/)
|
||||||
|
npm run build # Frontend-only build (tsc + vite)
|
||||||
|
npm run test # Run Vitest once
|
||||||
|
npm run test:watch # Run Vitest in watch mode
|
||||||
|
```
|
||||||
|
|
||||||
|
Rust backend is compiled automatically by `tauri dev`/`tauri build`. To check Rust independently:
|
||||||
|
```bash
|
||||||
|
cd app/src-tauri
|
||||||
|
cargo check # Type-check without full build
|
||||||
|
cargo build # Build Rust backend only
|
||||||
|
```
|
||||||
|
|
||||||
|
Container image:
|
||||||
|
```bash
|
||||||
|
docker build -t triple-c-sandbox ./container
|
||||||
|
```
|
||||||
|
|
||||||
|
### Linux Build Dependencies (Ubuntu/Debian)
|
||||||
|
```bash
|
||||||
|
sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev libsoup-3.0-dev patchelf libssl-dev pkg-config build-essential
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Two-Process Model (Tauri IPC)
|
||||||
|
|
||||||
|
- **React frontend** (`app/src/`) renders UI in the OS webview
|
||||||
|
- **Rust backend** (`app/src-tauri/src/`) handles Docker API, credential storage, and terminal I/O
|
||||||
|
- Communication uses two patterns:
|
||||||
|
- `invoke()` — request/response for discrete operations (CRUD, start/stop containers)
|
||||||
|
- `emit()`/`listen()` — event streaming for continuous data (terminal I/O)
|
||||||
|
|
||||||
|
### Terminal I/O Flow
|
||||||
|
|
||||||
|
```
|
||||||
|
User keystroke → xterm.js onData() → invoke("terminal_input") → mpsc channel → docker exec stdin
|
||||||
|
docker exec stdout → tokio task → emit("terminal-output-{sessionId}") → listen() → xterm.js write()
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend Structure (`app/src/`)
|
||||||
|
|
||||||
|
- **`store/appState.ts`** — Single Zustand store for all app state (projects, sessions, UI)
|
||||||
|
- **`hooks/`** — All Tauri IPC calls are encapsulated in hooks (`useTerminal`, `useProjects`, `useDocker`, `useSettings`)
|
||||||
|
- **`lib/tauri-commands.ts`** — Typed `invoke()` wrappers; TypeScript types in `lib/types.ts` must match Rust models
|
||||||
|
- **`components/terminal/TerminalView.tsx`** — xterm.js integration with WebGL rendering, URL detection for OAuth flow
|
||||||
|
- **`components/layout/`** — TopBar (tabs + status), Sidebar (project list), StatusBar
|
||||||
|
- **`components/projects/`** — ProjectCard, ProjectList, AddProjectDialog
|
||||||
|
- **`components/settings/`** — Settings panels for API keys, Docker, AWS
|
||||||
|
|
||||||
|
### Backend Structure (`app/src-tauri/src/`)
|
||||||
|
|
||||||
|
- **`commands/`** — Tauri command handlers (docker, project, settings, terminal). These are the IPC entry points called by `invoke()`.
|
||||||
|
- **`docker/`** — Docker API layer using bollard:
|
||||||
|
- `client.rs` — Singleton Docker connection via `OnceLock`
|
||||||
|
- `container.rs` — Container lifecycle (create, start, stop, remove, inspect)
|
||||||
|
- `exec.rs` — PTY exec sessions with bidirectional stdin/stdout streaming
|
||||||
|
- `image.rs` — Image build/pull with progress streaming
|
||||||
|
- **`models/`** — Serde structs (`Project`, `AuthMode`, `BedrockConfig`, `ContainerInfo`, `AppSettings`). These define the IPC contract with the frontend.
|
||||||
|
- **`storage/`** — Persistence: `projects_store.rs` (JSON file with atomic writes), `secure.rs` (OS keychain via `keyring` crate), `settings_store.rs`
|
||||||
|
|
||||||
|
### Container (`container/`)
|
||||||
|
|
||||||
|
- **`Dockerfile`** — Ubuntu 24.04 base with Claude Code, Node.js 22, Python 3.12, Rust, Docker CLI, git, gh, AWS CLI v2, ripgrep, pnpm, uv, ruff pre-installed
|
||||||
|
- **`entrypoint.sh`** — UID/GID remapping to match host user, SSH key setup, git config, docker socket permissions, then `sleep infinity`
|
||||||
|
- **`triple-c-scheduler`** — Bash-based scheduled task system for recurring Claude Code invocations
|
||||||
|
|
||||||
|
### Container Lifecycle
|
||||||
|
|
||||||
|
Containers use a **stop/start** model (not create/destroy). Installed packages persist across stops. The `.claude` config dir uses a named Docker volume (`triple-c-claude-config-{projectId}`) so OAuth tokens survive even container resets.
|
||||||
|
|
||||||
|
### Authentication
|
||||||
|
|
||||||
|
Per-project, independently configured:
|
||||||
|
- **Anthropic (OAuth)** — `claude login` in terminal, token persists in config volume
|
||||||
|
- **AWS Bedrock** — Static keys, profile, or bearer token injected as env vars
|
||||||
|
|
||||||
|
## Styling
|
||||||
|
|
||||||
|
- **Tailwind CSS v4** with the Vite plugin (`@tailwindcss/vite`). No separate tailwind config file.
|
||||||
|
- All colors use CSS custom properties in `index.css` `:root` (e.g., `--bg-primary`, `--text-secondary`, `--accent`)
|
||||||
|
- `color-scheme: dark` is set on `:root` for native dark-mode controls
|
||||||
|
- **Do not** add a global `* { padding: 0 }` reset — Tailwind v4 uses CSS `@layer`, and unlayered CSS overrides all layered utilities
|
||||||
|
|
||||||
|
## Key Conventions
|
||||||
|
|
||||||
|
- Frontend types in `lib/types.ts` must stay in sync with Rust structs in `models/`
|
||||||
|
- Tauri commands are registered in `lib.rs` via `.invoke_handler(tauri::generate_handler![...])`
|
||||||
|
- Tauri v2 permissions are declared in `capabilities/default.json` — new IPC commands need permission grants there
|
||||||
|
- The `projects.json` file uses atomic writes (write to `.tmp`, then `rename()`). Corrupted files are backed up to `.bak`.
|
||||||
|
- Cross-platform paths: Docker socket is `/var/run/docker.sock` on Linux/macOS, `//./pipe/docker_engine` on Windows
|
||||||
|
|
||||||
|
## Testing
|
||||||
|
|
||||||
|
Frontend tests use Vitest with jsdom environment and React Testing Library. Setup file at `src/test/setup.ts`. Run a single test file:
|
||||||
|
```bash
|
||||||
|
cd app
|
||||||
|
npx vitest run src/path/to/test.test.ts
|
||||||
|
```
|
||||||
397
HOW-TO-USE.md
Normal file
397
HOW-TO-USE.md
Normal file
@@ -0,0 +1,397 @@
|
|||||||
|
# How to Use Triple-C
|
||||||
|
|
||||||
|
Triple-C (Claude-Code-Container) is a desktop application that runs Claude Code inside isolated Docker containers. Each project gets its own sandboxed environment with bind-mounted directories, so Claude only has access to the files you explicitly provide.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
### Docker
|
||||||
|
|
||||||
|
Triple-C requires a running Docker daemon. Install one of the following:
|
||||||
|
|
||||||
|
| Platform | Option | Link |
|
||||||
|
|----------|--------|------|
|
||||||
|
| **Windows** | Docker Desktop | https://docs.docker.com/desktop/install/windows-install/ |
|
||||||
|
| **macOS** | Docker Desktop | https://docs.docker.com/desktop/install/mac-install/ |
|
||||||
|
| **Linux** | Docker Engine | https://docs.docker.com/engine/install/ |
|
||||||
|
| **Linux** | Docker Desktop (alternative) | https://docs.docker.com/desktop/install/linux/ |
|
||||||
|
|
||||||
|
After installation, verify Docker is running:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker info
|
||||||
|
```
|
||||||
|
|
||||||
|
> **Windows note:** Docker Desktop must be running before launching Triple-C. The app communicates with Docker through the named pipe at `//./pipe/docker_engine`.
|
||||||
|
|
||||||
|
> **Linux note:** Your user must have permission to access the Docker socket (`/var/run/docker.sock`). Either add your user to the `docker` group (`sudo usermod -aG docker $USER`, then log out and back in) or run Docker in rootless mode.
|
||||||
|
|
||||||
|
### Claude Code Account
|
||||||
|
|
||||||
|
You need access to Claude Code through one of:
|
||||||
|
|
||||||
|
- **Anthropic account** — Sign up at https://claude.ai and use `claude login` (OAuth) inside the terminal
|
||||||
|
- **AWS Bedrock** — An AWS account with Bedrock access and Claude models enabled
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## First Launch
|
||||||
|
|
||||||
|
### 1. Get the Container Image
|
||||||
|
|
||||||
|
When you first open Triple-C, go to the **Settings** tab in the sidebar. Under **Docker**, you'll see:
|
||||||
|
|
||||||
|
- **Docker Status** — Should show "Connected" (green). If it shows "Not Available", make sure Docker is running.
|
||||||
|
- **Image Status** — Will show "Not Found" on first launch.
|
||||||
|
|
||||||
|
Choose an **Image Source**:
|
||||||
|
|
||||||
|
| Source | Description | When to Use |
|
||||||
|
|--------|-------------|-------------|
|
||||||
|
| **Registry** | Pulls the pre-built image from `repo.anhonesthost.net` | Fastest setup — recommended for most users |
|
||||||
|
| **Local Build** | Builds the image locally from the embedded Dockerfile | If you can't reach the registry, or want a custom build |
|
||||||
|
| **Custom** | Use any Docker image you specify | Advanced — bring your own sandbox image |
|
||||||
|
|
||||||
|
Click **Pull Image** (for Registry/Custom) or **Build Image** (for Local Build). A progress log will stream below the button. When complete, the status changes to "Ready" (green).
|
||||||
|
|
||||||
|
### 2. Create Your First Project
|
||||||
|
|
||||||
|
Switch to the **Projects** tab in the sidebar and click the **+** button.
|
||||||
|
|
||||||
|
1. **Project Name** — Give it a meaningful name (e.g., "my-web-app").
|
||||||
|
2. **Folders** — Click **Browse** to select a directory on your host machine. This directory will be mounted into the container at `/workspace/<folder-name>`. You can add multiple folders with the **+** button at the bottom of the folder list.
|
||||||
|
3. Click **Add Project**.
|
||||||
|
|
||||||
|
### 3. Start the Container
|
||||||
|
|
||||||
|
Select your project in the sidebar and click **Start**. The status dot changes from gray (stopped) to orange (starting) to green (running).
|
||||||
|
|
||||||
|
### 4. Open a Terminal
|
||||||
|
|
||||||
|
Click the **Terminal** button (highlighted in accent color) to open an interactive terminal session. A new tab appears in the top bar and an xterm.js terminal loads in the main area.
|
||||||
|
|
||||||
|
Claude Code launches automatically with `--dangerously-skip-permissions` inside the sandboxed container.
|
||||||
|
|
||||||
|
### 5. Authenticate
|
||||||
|
|
||||||
|
**Anthropic (OAuth) — default:**
|
||||||
|
|
||||||
|
1. Type `claude login` or `/login` in the terminal.
|
||||||
|
2. Claude prints an OAuth URL. Triple-C detects long URLs and shows a clickable toast at the top of the terminal — click **Open** to open it in your browser.
|
||||||
|
3. Complete the login in your browser. The token is saved and persists across container stops and resets.
|
||||||
|
|
||||||
|
**AWS Bedrock:**
|
||||||
|
|
||||||
|
1. Stop the container first (settings can only be changed while stopped).
|
||||||
|
2. In the project card, switch the auth mode to **Bedrock**.
|
||||||
|
3. Expand the **Config** panel and fill in your AWS credentials (see [AWS Bedrock Configuration](#aws-bedrock-configuration) below).
|
||||||
|
4. Start the container again.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Interface
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ TopBar [ Terminal Tabs ] Docker ● Image ●│
|
||||||
|
├────────────┬────────────────────────────────────────┤
|
||||||
|
│ Sidebar │ │
|
||||||
|
│ │ Terminal View │
|
||||||
|
│ Projects │ (xterm.js) │
|
||||||
|
│ Settings │ │
|
||||||
|
│ │ │
|
||||||
|
├────────────┴────────────────────────────────────────┤
|
||||||
|
│ StatusBar X projects · X running · X terminals │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- **TopBar** — Terminal tabs for switching between sessions. Status dots on the right show Docker connection (green = connected) and image availability (green = ready).
|
||||||
|
- **Sidebar** — Toggle between the **Projects** list and **Settings** panel.
|
||||||
|
- **Terminal View** — Interactive terminal powered by xterm.js with WebGL rendering.
|
||||||
|
- **StatusBar** — Counts of total projects, running containers, and open terminal sessions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Project Management
|
||||||
|
|
||||||
|
### Project Status
|
||||||
|
|
||||||
|
Each project shows a colored status dot:
|
||||||
|
|
||||||
|
| Color | Status | Meaning |
|
||||||
|
|-------|--------|---------|
|
||||||
|
| Gray | Stopped | Container is not running |
|
||||||
|
| Orange | Starting / Stopping | Container is transitioning |
|
||||||
|
| Green | Running | Container is active, ready for terminals |
|
||||||
|
| Red | Error | Something went wrong (check error message) |
|
||||||
|
|
||||||
|
### Project Actions
|
||||||
|
|
||||||
|
Select a project in the sidebar to see its action buttons:
|
||||||
|
|
||||||
|
| Button | When Available | What It Does |
|
||||||
|
|--------|---------------|--------------|
|
||||||
|
| **Start** | Stopped | Creates (if needed) and starts the container |
|
||||||
|
| **Stop** | Running | Stops the container but preserves its state |
|
||||||
|
| **Terminal** | Running | Opens a new terminal session in this container |
|
||||||
|
| **Reset** | Stopped | Destroys and recreates the container from scratch |
|
||||||
|
| **Config** | Always | Toggles the configuration panel |
|
||||||
|
| **Remove** | Stopped | Deletes the project and its container (with confirmation) |
|
||||||
|
|
||||||
|
### Container Lifecycle
|
||||||
|
|
||||||
|
Containers use a **stop/start** model. When you stop a container, everything inside it is preserved — installed packages, modified files, downloaded tools. Starting it again resumes where you left off.
|
||||||
|
|
||||||
|
**Reset** removes the container and creates a fresh one. However, your Claude Code configuration (including OAuth tokens from `claude login`) is stored in a separate Docker volume and survives resets.
|
||||||
|
|
||||||
|
Only **Remove** deletes everything, including the config volume and any stored credentials.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Project Configuration
|
||||||
|
|
||||||
|
Click **Config** on a selected project to expand the configuration panel. Settings can only be changed when the container is **stopped** (an orange warning box appears if the container is running).
|
||||||
|
|
||||||
|
### Mounted Folders
|
||||||
|
|
||||||
|
Each project mounts one or more host directories into the container. The mount appears at `/workspace/<mount-name>` inside the container.
|
||||||
|
|
||||||
|
- Click **Browse** ("...") to change the host path
|
||||||
|
- Edit the mount name to control where it appears inside `/workspace/`
|
||||||
|
- Click **+** to add more folders, or **x** to remove one
|
||||||
|
- Mount names must be unique and use only letters, numbers, dashes, underscores, and dots
|
||||||
|
|
||||||
|
### SSH Keys
|
||||||
|
|
||||||
|
Specify the path to your SSH key directory (typically `~/.ssh`). Keys are mounted read-only and copied into the container with correct permissions. This enables `git clone` via SSH inside the container.
|
||||||
|
|
||||||
|
### Git Configuration
|
||||||
|
|
||||||
|
- **Git Name / Email** — Sets `git config user.name` and `user.email` inside the container.
|
||||||
|
- **Git HTTPS Token** — A personal access token (e.g., from GitHub) for HTTPS git operations. Stored securely in your OS keychain — never written to disk in plaintext.
|
||||||
|
|
||||||
|
### Allow Container Spawning
|
||||||
|
|
||||||
|
When enabled, the host Docker socket is mounted into the container so Claude Code can create sibling containers (e.g., for running databases, test environments). This is **off by default** for security.
|
||||||
|
|
||||||
|
> Toggling this requires stopping and restarting the container to take effect.
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
Click **Edit** to open the environment variables modal. Add key-value pairs that will be injected into the container. Per-project variables override global variables with the same key.
|
||||||
|
|
||||||
|
> Reserved prefixes (`ANTHROPIC_`, `AWS_`, `GIT_`, `HOST_`, `CLAUDE_`, `TRIPLE_C_`) are filtered out to prevent conflicts with internal variables.
|
||||||
|
|
||||||
|
### Port Mappings
|
||||||
|
|
||||||
|
Click **Edit** to map host ports to container ports. This is useful when Claude Code starts a web server or other service inside the container and you want to access it from your host browser.
|
||||||
|
|
||||||
|
Each mapping specifies:
|
||||||
|
- **Host Port** — The port on your machine (1–65535)
|
||||||
|
- **Container Port** — The port inside the container (1–65535)
|
||||||
|
- **Protocol** — TCP (default) or UDP
|
||||||
|
|
||||||
|
### Claude Instructions
|
||||||
|
|
||||||
|
Click **Edit** to write per-project instructions for Claude Code. These are written to `~/.claude/CLAUDE.md` inside the container and provide project-specific context. If you also have global instructions (in Settings), the global instructions come first, followed by the per-project instructions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## AWS Bedrock Configuration
|
||||||
|
|
||||||
|
To use Claude via AWS Bedrock instead of Anthropic's API, switch the auth mode to **Bedrock** on the project card.
|
||||||
|
|
||||||
|
### Authentication Methods
|
||||||
|
|
||||||
|
| Method | Fields | Use Case |
|
||||||
|
|--------|--------|----------|
|
||||||
|
| **Keys** | Access Key ID, Secret Access Key, Session Token (optional) | Direct credentials — simplest setup |
|
||||||
|
| **Profile** | AWS Profile name | Uses `~/.aws/config` and `~/.aws/credentials` on the host |
|
||||||
|
| **Token** | Bearer Token | Temporary bearer token authentication |
|
||||||
|
|
||||||
|
### Additional Bedrock Settings
|
||||||
|
|
||||||
|
- **AWS Region** — Required. The region where your Bedrock models are deployed (e.g., `us-east-1`).
|
||||||
|
- **Model ID** — Optional. Override the default Claude model (e.g., `anthropic.claude-sonnet-4-20250514-v1:0`).
|
||||||
|
|
||||||
|
### Global AWS Defaults
|
||||||
|
|
||||||
|
In **Settings > AWS Configuration**, you can set defaults that apply to all Bedrock projects:
|
||||||
|
|
||||||
|
- **AWS Config Path** — Path to your `~/.aws` directory. Click **Detect** to auto-find it.
|
||||||
|
- **Default Profile** — Select from profiles found in your AWS config.
|
||||||
|
- **Default Region** — Fallback region for projects that don't specify one.
|
||||||
|
|
||||||
|
Per-project settings always override these global defaults.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Settings
|
||||||
|
|
||||||
|
Access global settings via the **Settings** tab in the sidebar.
|
||||||
|
|
||||||
|
### Docker Settings
|
||||||
|
|
||||||
|
- **Docker Status** — Connection status to the Docker daemon.
|
||||||
|
- **Image Source** — Where to get the sandbox container image (Registry, Local Build, or Custom).
|
||||||
|
- **Pull / Build Image** — Download or build the image. Progress streams in real time.
|
||||||
|
- **Refresh** — Re-check Docker and image status.
|
||||||
|
|
||||||
|
### Container Timezone
|
||||||
|
|
||||||
|
Set the timezone for all containers (IANA format, e.g., `America/New_York`, `Europe/London`, `UTC`). Auto-detected from your host on first launch. This affects scheduled task timing inside containers.
|
||||||
|
|
||||||
|
### Global Claude Instructions
|
||||||
|
|
||||||
|
Instructions applied to **all** projects. Written to `~/.claude/CLAUDE.md` in every container, before any per-project instructions.
|
||||||
|
|
||||||
|
### Global Environment Variables
|
||||||
|
|
||||||
|
Environment variables applied to **all** project containers. Per-project variables with the same key take precedence.
|
||||||
|
|
||||||
|
### Updates
|
||||||
|
|
||||||
|
- **Current Version** — The installed version of Triple-C.
|
||||||
|
- **Auto-check** — Toggle automatic update checks (every 24 hours).
|
||||||
|
- **Check now** — Manually check for updates.
|
||||||
|
|
||||||
|
When an update is available, a pulsing **Update** button appears in the top bar. Click it to see release notes and download links.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Terminal Features
|
||||||
|
|
||||||
|
### Multiple Sessions
|
||||||
|
|
||||||
|
You can open multiple terminal sessions (even for the same project). Each session gets its own tab in the top bar. Click a tab to switch, or click the **x** on a tab to close it.
|
||||||
|
|
||||||
|
### URL Detection
|
||||||
|
|
||||||
|
When Claude Code prints a long URL (e.g., during `claude login`), Triple-C detects it and shows a toast notification at the top of the terminal with an **Open** button. Clicking it opens the URL in your default browser. The toast auto-dismisses after 30 seconds.
|
||||||
|
|
||||||
|
Shorter URLs in terminal output are also clickable directly.
|
||||||
|
|
||||||
|
### Image Paste
|
||||||
|
|
||||||
|
You can paste images from your clipboard into the terminal (Ctrl+V / Cmd+V). The image is uploaded to the container and the file path is injected into the terminal input so Claude Code can reference it.
|
||||||
|
|
||||||
|
### Terminal Rendering
|
||||||
|
|
||||||
|
The terminal uses WebGL for hardware-accelerated rendering of the active tab. Inactive tabs fall back to canvas rendering to conserve GPU resources. The terminal automatically resizes when you resize the window.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Scheduled Tasks (Inside the Container)
|
||||||
|
|
||||||
|
Once inside a running container terminal, you can set up recurring or one-time tasks using `triple-c-scheduler`. Tasks run as separate Claude Code sessions.
|
||||||
|
|
||||||
|
### Create a Recurring Task
|
||||||
|
|
||||||
|
```bash
|
||||||
|
triple-c-scheduler add --name "daily-review" --schedule "0 9 * * *" --prompt "Review open issues and summarize"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Create a One-Time Task
|
||||||
|
|
||||||
|
```bash
|
||||||
|
triple-c-scheduler add --name "migrate-db" --at "2026-03-05 14:00" --prompt "Run database migrations"
|
||||||
|
```
|
||||||
|
|
||||||
|
One-time tasks automatically remove themselves after execution.
|
||||||
|
|
||||||
|
### Manage Tasks
|
||||||
|
|
||||||
|
```bash
|
||||||
|
triple-c-scheduler list # List all tasks
|
||||||
|
triple-c-scheduler enable --id abc123 # Enable a task
|
||||||
|
triple-c-scheduler disable --id abc123 # Disable a task
|
||||||
|
triple-c-scheduler remove --id abc123 # Delete a task
|
||||||
|
triple-c-scheduler run --id abc123 # Trigger a task immediately
|
||||||
|
triple-c-scheduler logs --id abc123 # View logs for a task
|
||||||
|
triple-c-scheduler logs --tail 20 # View last 20 log entries (all tasks)
|
||||||
|
triple-c-scheduler notifications # View completion notifications
|
||||||
|
triple-c-scheduler notifications --clear # Clear notifications
|
||||||
|
```
|
||||||
|
|
||||||
|
### Cron Schedule Format
|
||||||
|
|
||||||
|
Standard 5-field cron: `minute hour day-of-month month day-of-week`
|
||||||
|
|
||||||
|
| Example | Meaning |
|
||||||
|
|---------|---------|
|
||||||
|
| `*/30 * * * *` | Every 30 minutes |
|
||||||
|
| `0 9 * * 1-5` | 9:00 AM on weekdays |
|
||||||
|
| `0 */2 * * *` | Every 2 hours |
|
||||||
|
| `0 0 1 * *` | Midnight on the 1st of each month |
|
||||||
|
|
||||||
|
### Working Directory
|
||||||
|
|
||||||
|
By default, tasks run in `/workspace`. Use `--working-dir` to specify a different directory:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
triple-c-scheduler add --name "test" --schedule "0 */6 * * *" --prompt "Run tests" --working-dir /workspace/my-project
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's Inside the Container
|
||||||
|
|
||||||
|
The sandbox container (Ubuntu 24.04) comes pre-installed with:
|
||||||
|
|
||||||
|
| Tool | Version | Purpose |
|
||||||
|
|------|---------|---------|
|
||||||
|
| Claude Code | Latest | AI coding assistant (the tool being sandboxed) |
|
||||||
|
| Node.js | 22 LTS | JavaScript/TypeScript development |
|
||||||
|
| pnpm | Latest | Fast Node.js package manager |
|
||||||
|
| Python | 3.12 | Python development |
|
||||||
|
| uv | Latest | Fast Python package manager |
|
||||||
|
| ruff | Latest | Python linter/formatter |
|
||||||
|
| Rust | Stable | Rust development (via rustup) |
|
||||||
|
| Docker CLI | Latest | Container management (when spawning is enabled) |
|
||||||
|
| git | Latest | Version control |
|
||||||
|
| GitHub CLI (gh) | Latest | GitHub integration |
|
||||||
|
| AWS CLI | v2 | AWS services and Bedrock |
|
||||||
|
| ripgrep | Latest | Fast code search |
|
||||||
|
| build-essential | — | C/C++ compiler toolchain |
|
||||||
|
| openssh-client | — | SSH for git and remote access |
|
||||||
|
|
||||||
|
You can install additional tools at runtime with `sudo apt install`, `pip install`, `npm install -g`, etc. Installed packages persist across container stops (but not across resets).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Docker is "Not Available"
|
||||||
|
|
||||||
|
- **Is Docker running?** Start Docker Desktop or the Docker daemon (`sudo systemctl start docker`).
|
||||||
|
- **Permissions?** On Linux, ensure your user is in the `docker` group or the socket is accessible.
|
||||||
|
- **Custom socket path?** If your Docker socket is not at the default location, set it in Settings. The app expects `/var/run/docker.sock` on Linux/macOS or `//./pipe/docker_engine` on Windows.
|
||||||
|
|
||||||
|
### Image is "Not Found"
|
||||||
|
|
||||||
|
- Click **Pull Image** or **Build Image** in Settings > Docker.
|
||||||
|
- If pulling fails, check your network connection and whether you can reach the registry.
|
||||||
|
- Try switching to **Local Build** as an alternative.
|
||||||
|
|
||||||
|
### Container Won't Start
|
||||||
|
|
||||||
|
- Check that the Docker image is "Ready" in Settings.
|
||||||
|
- Verify that the mounted folder paths exist on your host.
|
||||||
|
- Look at the error message displayed in red below the project card.
|
||||||
|
|
||||||
|
### OAuth Login URL Not Opening
|
||||||
|
|
||||||
|
- Triple-C detects long URLs printed by `claude login` and shows a toast with an **Open** button.
|
||||||
|
- If the toast doesn't appear, try scrolling up in the terminal — the URL may have already been printed.
|
||||||
|
- You can also manually copy the URL from the terminal output and paste it into your browser.
|
||||||
|
|
||||||
|
### File Permission Issues
|
||||||
|
|
||||||
|
- Triple-C automatically remaps the container user's UID/GID to match your host user, so files created inside the container should have the correct ownership on your host.
|
||||||
|
- If you see permission errors, try resetting the container (stop, then click **Reset**).
|
||||||
|
|
||||||
|
### Settings Won't Save
|
||||||
|
|
||||||
|
- Most project settings can only be changed when the container is **stopped**. Stop the container first, make your changes, then start it again.
|
||||||
|
- Some changes (like toggling Docker access or changing mounted folders) trigger an automatic container recreation on the next start.
|
||||||
@@ -72,3 +72,23 @@ pub async fn close_terminal_session(
|
|||||||
state.exec_manager.close_session(&session_id).await;
|
state.exec_manager.close_session(&session_id).await;
|
||||||
Ok(())
|
Ok(())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn paste_image_to_terminal(
|
||||||
|
session_id: String,
|
||||||
|
image_data: Vec<u8>,
|
||||||
|
state: State<'_, AppState>,
|
||||||
|
) -> Result<String, String> {
|
||||||
|
let container_id = state.exec_manager.get_container_id(&session_id).await?;
|
||||||
|
|
||||||
|
let timestamp = std::time::SystemTime::now()
|
||||||
|
.duration_since(std::time::UNIX_EPOCH)
|
||||||
|
.unwrap_or_default()
|
||||||
|
.as_millis();
|
||||||
|
let file_name = format!("clipboard_{}.png", timestamp);
|
||||||
|
|
||||||
|
state
|
||||||
|
.exec_manager
|
||||||
|
.write_file_to_container(&container_id, &file_name, &image_data)
|
||||||
|
.await
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
use bollard::container::UploadToContainerOptions;
|
||||||
use bollard::exec::{CreateExecOptions, ResizeExecOptions, StartExecResults};
|
use bollard::exec::{CreateExecOptions, ResizeExecOptions, StartExecResults};
|
||||||
use futures_util::StreamExt;
|
use futures_util::StreamExt;
|
||||||
use std::collections::HashMap;
|
use std::collections::HashMap;
|
||||||
@@ -212,4 +213,51 @@ impl ExecSessionManager {
|
|||||||
session.shutdown();
|
session.shutdown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub async fn get_container_id(&self, session_id: &str) -> Result<String, String> {
|
||||||
|
let sessions = self.sessions.lock().await;
|
||||||
|
let session = sessions
|
||||||
|
.get(session_id)
|
||||||
|
.ok_or_else(|| format!("Session {} not found", session_id))?;
|
||||||
|
Ok(session.container_id.clone())
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn write_file_to_container(
|
||||||
|
&self,
|
||||||
|
container_id: &str,
|
||||||
|
file_name: &str,
|
||||||
|
data: &[u8],
|
||||||
|
) -> Result<String, String> {
|
||||||
|
let docker = get_docker()?;
|
||||||
|
|
||||||
|
// Build a tar archive in memory containing the file
|
||||||
|
let mut tar_buf = Vec::new();
|
||||||
|
{
|
||||||
|
let mut builder = tar::Builder::new(&mut tar_buf);
|
||||||
|
let mut header = tar::Header::new_gnu();
|
||||||
|
header.set_size(data.len() as u64);
|
||||||
|
header.set_mode(0o644);
|
||||||
|
header.set_cksum();
|
||||||
|
builder
|
||||||
|
.append_data(&mut header, file_name, data)
|
||||||
|
.map_err(|e| format!("Failed to create tar entry: {}", e))?;
|
||||||
|
builder
|
||||||
|
.finish()
|
||||||
|
.map_err(|e| format!("Failed to finalize tar: {}", e))?;
|
||||||
|
}
|
||||||
|
|
||||||
|
docker
|
||||||
|
.upload_to_container(
|
||||||
|
container_id,
|
||||||
|
Some(UploadToContainerOptions {
|
||||||
|
path: "/tmp".to_string(),
|
||||||
|
..Default::default()
|
||||||
|
}),
|
||||||
|
tar_buf.into(),
|
||||||
|
)
|
||||||
|
.await
|
||||||
|
.map_err(|e| format!("Failed to upload file to container: {}", e))?;
|
||||||
|
|
||||||
|
Ok(format!("/tmp/{}", file_name))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ pub fn run() {
|
|||||||
commands::terminal_commands::terminal_input,
|
commands::terminal_commands::terminal_input,
|
||||||
commands::terminal_commands::terminal_resize,
|
commands::terminal_commands::terminal_resize,
|
||||||
commands::terminal_commands::close_terminal_session,
|
commands::terminal_commands::close_terminal_session,
|
||||||
|
commands::terminal_commands::paste_image_to_terminal,
|
||||||
// Updates
|
// Updates
|
||||||
commands::update_commands::get_app_version,
|
commands::update_commands::get_app_version,
|
||||||
commands::update_commands::check_for_updates,
|
commands::update_commands::check_for_updates,
|
||||||
|
|||||||
@@ -21,9 +21,10 @@ export default function TerminalView({ sessionId, active }: Props) {
|
|||||||
const fitRef = useRef<FitAddon | null>(null);
|
const fitRef = useRef<FitAddon | null>(null);
|
||||||
const webglRef = useRef<WebglAddon | null>(null);
|
const webglRef = useRef<WebglAddon | null>(null);
|
||||||
const detectorRef = useRef<UrlDetector | null>(null);
|
const detectorRef = useRef<UrlDetector | null>(null);
|
||||||
const { sendInput, resize, onOutput, onExit } = useTerminal();
|
const { sendInput, pasteImage, resize, onOutput, onExit } = useTerminal();
|
||||||
|
|
||||||
const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
|
const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
|
||||||
|
const [imagePasteMsg, setImagePasteMsg] = useState<string | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!containerRef.current) return;
|
if (!containerRef.current) return;
|
||||||
@@ -85,6 +86,40 @@ export default function TerminalView({ sessionId, active }: Props) {
|
|||||||
sendInput(sessionId, data);
|
sendInput(sessionId, data);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Handle image paste: intercept paste events with image data,
|
||||||
|
// upload to the container, and inject the file path into terminal input.
|
||||||
|
const handlePaste = (e: ClipboardEvent) => {
|
||||||
|
const items = e.clipboardData?.items;
|
||||||
|
if (!items) return;
|
||||||
|
|
||||||
|
for (const item of Array.from(items)) {
|
||||||
|
if (item.type.startsWith("image/")) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const blob = item.getAsFile();
|
||||||
|
if (!blob) return;
|
||||||
|
|
||||||
|
blob.arrayBuffer().then(async (buf) => {
|
||||||
|
try {
|
||||||
|
setImagePasteMsg("Uploading image...");
|
||||||
|
const data = new Uint8Array(buf);
|
||||||
|
const filePath = await pasteImage(sessionId, data);
|
||||||
|
// Inject the file path into terminal stdin
|
||||||
|
sendInput(sessionId, filePath);
|
||||||
|
setImagePasteMsg(`Image saved to ${filePath}`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Image paste failed:", err);
|
||||||
|
setImagePasteMsg("Image paste failed");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return; // Only handle the first image
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
containerRef.current.addEventListener("paste", handlePaste, { capture: true });
|
||||||
|
|
||||||
// Handle backend output -> terminal
|
// Handle backend output -> terminal
|
||||||
let aborted = false;
|
let aborted = false;
|
||||||
|
|
||||||
@@ -129,6 +164,7 @@ export default function TerminalView({ sessionId, active }: Props) {
|
|||||||
detector.dispose();
|
detector.dispose();
|
||||||
detectorRef.current = null;
|
detectorRef.current = null;
|
||||||
inputDisposable.dispose();
|
inputDisposable.dispose();
|
||||||
|
containerRef.current?.removeEventListener("paste", handlePaste, { capture: true });
|
||||||
outputPromise.then((fn) => fn?.());
|
outputPromise.then((fn) => fn?.());
|
||||||
exitPromise.then((fn) => fn?.());
|
exitPromise.then((fn) => fn?.());
|
||||||
if (resizeRafId !== null) cancelAnimationFrame(resizeRafId);
|
if (resizeRafId !== null) cancelAnimationFrame(resizeRafId);
|
||||||
@@ -179,6 +215,13 @@ export default function TerminalView({ sessionId, active }: Props) {
|
|||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [detectedUrl]);
|
}, [detectedUrl]);
|
||||||
|
|
||||||
|
// Auto-dismiss image paste message after 3 seconds
|
||||||
|
useEffect(() => {
|
||||||
|
if (!imagePasteMsg) return;
|
||||||
|
const timer = setTimeout(() => setImagePasteMsg(null), 3_000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [imagePasteMsg]);
|
||||||
|
|
||||||
const handleOpenUrl = useCallback(() => {
|
const handleOpenUrl = useCallback(() => {
|
||||||
if (detectedUrl) {
|
if (detectedUrl) {
|
||||||
openUrl(detectedUrl).catch((e) =>
|
openUrl(detectedUrl).catch((e) =>
|
||||||
@@ -200,6 +243,14 @@ export default function TerminalView({ sessionId, active }: Props) {
|
|||||||
onDismiss={() => setDetectedUrl(null)}
|
onDismiss={() => setDetectedUrl(null)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{imagePasteMsg && (
|
||||||
|
<div
|
||||||
|
className="absolute top-2 left-1/2 -translate-x-1/2 z-50 px-3 py-1.5 rounded-md text-xs font-medium bg-[#1f2937] text-[#e6edf3] border border-[#30363d] shadow-lg"
|
||||||
|
onClick={() => setImagePasteMsg(null)}
|
||||||
|
>
|
||||||
|
{imagePasteMsg}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div
|
<div
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
className="w-full h-full"
|
className="w-full h-full"
|
||||||
|
|||||||
@@ -49,6 +49,14 @@ export function useTerminal() {
|
|||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const pasteImage = useCallback(
|
||||||
|
async (sessionId: string, imageData: Uint8Array) => {
|
||||||
|
const bytes = Array.from(imageData);
|
||||||
|
return commands.pasteImageToTerminal(sessionId, bytes);
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
const onOutput = useCallback(
|
const onOutput = useCallback(
|
||||||
(sessionId: string, callback: (data: Uint8Array) => void) => {
|
(sessionId: string, callback: (data: Uint8Array) => void) => {
|
||||||
const eventName = `terminal-output-${sessionId}`;
|
const eventName = `terminal-output-${sessionId}`;
|
||||||
@@ -76,6 +84,7 @@ export function useTerminal() {
|
|||||||
open,
|
open,
|
||||||
close,
|
close,
|
||||||
sendInput,
|
sendInput,
|
||||||
|
pasteImage,
|
||||||
resize,
|
resize,
|
||||||
onOutput,
|
onOutput,
|
||||||
onExit,
|
onExit,
|
||||||
|
|||||||
@@ -47,6 +47,8 @@ export const terminalResize = (sessionId: string, cols: number, rows: number) =>
|
|||||||
invoke<void>("terminal_resize", { sessionId, cols, rows });
|
invoke<void>("terminal_resize", { sessionId, cols, rows });
|
||||||
export const closeTerminalSession = (sessionId: string) =>
|
export const closeTerminalSession = (sessionId: string) =>
|
||||||
invoke<void>("close_terminal_session", { sessionId });
|
invoke<void>("close_terminal_session", { sessionId });
|
||||||
|
export const pasteImageToTerminal = (sessionId: string, imageData: number[]) =>
|
||||||
|
invoke<string>("paste_image_to_terminal", { sessionId, imageData });
|
||||||
|
|
||||||
// Updates
|
// Updates
|
||||||
export const getAppVersion = () => invoke<string>("get_app_version");
|
export const getAppVersion = () => invoke<string>("get_app_version");
|
||||||
|
|||||||
@@ -2,12 +2,13 @@
|
|||||||
* Detects long URLs that span multiple hard-wrapped lines in PTY output.
|
* Detects long URLs that span multiple hard-wrapped lines in PTY output.
|
||||||
*
|
*
|
||||||
* The Linux PTY hard-wraps long lines with \r\n at the terminal column width,
|
* The Linux PTY hard-wraps long lines with \r\n at the terminal column width,
|
||||||
* which breaks xterm.js WebLinksAddon URL detection. This class reassembles
|
* which breaks xterm.js WebLinksAddon URL detection. This class flattens
|
||||||
* those wrapped URLs and fires a callback for ones >= 100 chars.
|
* the buffer (stripping PTY wraps, converting blank lines to spaces) and
|
||||||
|
* matches URLs with a single regex, firing a callback for ones >= 100 chars.
|
||||||
*
|
*
|
||||||
* Two-phase approach: when a URL candidate extends to the end of the buffer,
|
* When a URL match extends to the end of the flattened buffer, emission is
|
||||||
* emission is deferred (the rest of the URL may arrive in the next PTY chunk).
|
* deferred (more chunks may still be arriving). A confirmation timer emits
|
||||||
* A confirmation timer emits the pending URL if no further data arrives.
|
* the pending URL if no further data arrives within 500 ms.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const ANSI_RE =
|
const ANSI_RE =
|
||||||
@@ -57,38 +58,31 @@ export class UrlDetector {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private scan(): void {
|
private scan(): void {
|
||||||
|
// 1. Strip ANSI escape sequences
|
||||||
const clean = this.buffer.replace(ANSI_RE, "");
|
const clean = this.buffer.replace(ANSI_RE, "");
|
||||||
const lines = clean.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
|
|
||||||
|
|
||||||
// Remove trailing empty elements (artifacts of trailing \n from split)
|
// 2. Flatten the buffer:
|
||||||
while (lines.length > 0 && lines[lines.length - 1] === "") {
|
// - Blank lines (2+ consecutive line breaks) → space (real paragraph break / URL terminator)
|
||||||
lines.pop();
|
// - Remaining \r and \n → removed (PTY hard-wrap artifacts)
|
||||||
}
|
const flat = clean
|
||||||
|
.replace(/(\r?\n){2,}/g, " ")
|
||||||
|
.replace(/[\r\n]/g, "");
|
||||||
|
|
||||||
if (lines.length === 0) return;
|
if (!flat) return;
|
||||||
|
|
||||||
for (let i = 0; i < lines.length; i++) {
|
// 3. Match URLs on the flattened string — spans across wrapped lines naturally
|
||||||
const match = lines[i].match(/https?:\/\/[^\s'"]+/);
|
const urlRe = /https?:\/\/[^\s'"<>\x07]+/g;
|
||||||
if (!match) continue;
|
let m: RegExpExecArray | null;
|
||||||
|
|
||||||
// Start with the URL fragment found on this line
|
while ((m = urlRe.exec(flat)) !== null) {
|
||||||
let url = match[0];
|
const url = m[0];
|
||||||
let lastLineIndex = i;
|
|
||||||
|
|
||||||
// Concatenate subsequent continuation lines (non-empty, no spaces, no leading whitespace)
|
|
||||||
for (let j = i + 1; j < lines.length; j++) {
|
|
||||||
const next = lines[j];
|
|
||||||
if (!next || next.startsWith(" ") || next.includes(" ")) break;
|
|
||||||
url += next;
|
|
||||||
lastLineIndex = j;
|
|
||||||
i = j; // skip this line in the outer loop
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 4. Filter by length
|
||||||
if (url.length < MIN_URL_LENGTH) continue;
|
if (url.length < MIN_URL_LENGTH) continue;
|
||||||
|
|
||||||
// If the URL reaches the last line of the buffer, the rest may still
|
// 5. If the match extends to the very end of the flattened string,
|
||||||
// be arriving in the next PTY chunk — defer emission.
|
// more chunks may still be arriving — defer emission.
|
||||||
if (lastLineIndex >= lines.length - 1) {
|
if (m.index + url.length >= flat.length) {
|
||||||
this.pendingUrl = url;
|
this.pendingUrl = url;
|
||||||
this.confirmTimer = setTimeout(() => {
|
this.confirmTimer = setTimeout(() => {
|
||||||
this.confirmTimer = null;
|
this.confirmTimer = null;
|
||||||
@@ -97,7 +91,7 @@ export class UrlDetector {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// URL is clearly complete (more content follows it in the buffer)
|
// 6. URL is clearly complete (more content follows) — dedup + emit
|
||||||
this.pendingUrl = null;
|
this.pendingUrl = null;
|
||||||
if (url !== this.lastEmitted) {
|
if (url !== this.lastEmitted) {
|
||||||
this.lastEmitted = url;
|
this.lastEmitted = url;
|
||||||
@@ -105,7 +99,7 @@ export class UrlDetector {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Scan finished without finding a URL reaching the buffer end.
|
// Scan finished without a URL at the buffer end.
|
||||||
// If we had a pending URL from a previous scan, it's now confirmed complete.
|
// If we had a pending URL from a previous scan, it's now confirmed complete.
|
||||||
if (this.pendingUrl) {
|
if (this.pendingUrl) {
|
||||||
this.emitPending();
|
this.emitPending();
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
FROM ubuntu:24.04
|
FROM ubuntu:24.04
|
||||||
|
|
||||||
|
# Multi-arch: builds for linux/amd64 and linux/arm64 (Apple Silicon)
|
||||||
# Avoid interactive prompts during package install
|
# Avoid interactive prompts during package install
|
||||||
ENV DEBIAN_FRONTEND=noninteractive
|
ENV DEBIAN_FRONTEND=noninteractive
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user