Compare commits
62 Commits
e6e76d1b9a
...
cli-v0.1.3
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8810aa1e9e | ||
|
|
fa234fae25 | ||
|
|
7ab3c8d465 | ||
|
|
f144e0485a | ||
|
|
f8369a0e9b | ||
|
|
701516bc8b | ||
|
|
cbd5f14c6e | ||
|
|
b1f428c44b | ||
|
|
c3fa04dde8 | ||
|
|
6acfc252b0 | ||
|
|
59e999535d | ||
|
|
7be8622e6f | ||
|
|
530b99554b | ||
|
|
a795900e5f | ||
|
|
0a40f5b463 | ||
|
|
083aaf2885 | ||
|
|
05fe7fa284 | ||
|
|
509af3afe0 | ||
|
|
d0dfce6e33 | ||
|
|
9921270569 | ||
|
|
446abb4359 | ||
|
|
85fecdee67 | ||
|
|
f4bcad91b0 | ||
|
|
30bc24f20d | ||
|
|
54211c613c | ||
|
|
2412267fb4 | ||
|
|
3a7191e39e | ||
|
|
dea06d0b1c | ||
|
|
88dca92b55 | ||
|
|
1972f97a3a | ||
|
|
e91fc80bbc | ||
|
|
59189febd3 | ||
|
|
7ddff92f33 | ||
|
|
995d8a3c12 | ||
|
|
cdd7931837 | ||
|
|
607cc96619 | ||
|
|
c4e1ff5f28 | ||
|
|
6edb188428 | ||
|
|
a4cd068ef5 | ||
|
|
e8ad7a5b19 | ||
|
|
5bffdb1d30 | ||
|
|
64ca600195 | ||
|
|
6a198034a0 | ||
|
|
714d82e4e7 | ||
|
|
dfb53b6ac2 | ||
|
|
8c1540642a | ||
|
|
6fe382763a | ||
|
|
c97eeeee0b | ||
|
|
c6202d6a70 | ||
|
|
262bd16299 | ||
|
|
6d1311b7a4 | ||
|
|
47304d2a52 | ||
|
|
d1cab7b807 | ||
|
|
af35b19918 | ||
|
|
750d38960e | ||
|
|
ebb63d2cb6 | ||
|
|
034a365f11 | ||
|
|
138b5a24ae | ||
|
|
759a22e7c0 | ||
|
|
1c773be577 | ||
|
|
533dcc11f6 | ||
|
|
fa23525c46 |
@@ -35,3 +35,6 @@ Dockerfile
|
|||||||
*.local
|
*.local
|
||||||
.env*.local
|
.env*.local
|
||||||
tmp/
|
tmp/
|
||||||
|
|
||||||
|
# Apps not needed in any server image (CLI ships to npm, not to containers)
|
||||||
|
apps/cli/
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
DATABASE_URL="postgresql://turbostarter:turbostarter@localhost:5432/core"
|
DATABASE_URL="postgresql://turbostarter:turbostarter@localhost:5432/core"
|
||||||
|
|
||||||
# The name of the product. This is used in various places across the apps.
|
# The name of the product. This is used in various places across the apps.
|
||||||
PRODUCT_NAME="TurboStarter"
|
PRODUCT_NAME="claudemesh"
|
||||||
|
|
||||||
# The url of the web app. Used mostly to link between apps.
|
# The url of the web app. Used mostly to link between apps.
|
||||||
URL="http://localhost:3000"
|
URL="http://localhost:3000"
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ BETTER_AUTH_TRUSTED_ORIGINS="https://your-app.example.com"
|
|||||||
|
|
||||||
# ── PRODUCT ──────────────────────────────────────────────────
|
# ── PRODUCT ──────────────────────────────────────────────────
|
||||||
|
|
||||||
# [OPTIONAL] App display name (default: "TurboStarter")
|
# [OPTIONAL] App display name (default: "claudemesh")
|
||||||
NEXT_PUBLIC_PRODUCT_NAME="MyApp"
|
NEXT_PUBLIC_PRODUCT_NAME="MyApp"
|
||||||
|
|
||||||
# [OPTIONAL] Contact email shown in the app
|
# [OPTIONAL] Contact email shown in the app
|
||||||
@@ -51,7 +51,7 @@ NEXT_PUBLIC_THEME_COLOR="orange"
|
|||||||
NEXT_PUBLIC_AUTH_PASSWORD=true
|
NEXT_PUBLIC_AUTH_PASSWORD=true
|
||||||
NEXT_PUBLIC_AUTH_MAGIC_LINK=false
|
NEXT_PUBLIC_AUTH_MAGIC_LINK=false
|
||||||
NEXT_PUBLIC_AUTH_PASSKEY=true
|
NEXT_PUBLIC_AUTH_PASSKEY=true
|
||||||
NEXT_PUBLIC_AUTH_ANONYMOUS=true
|
NEXT_PUBLIC_AUTH_ANONYMOUS=false
|
||||||
|
|
||||||
# [OPTIONAL] Signup credits (default: 100 in production)
|
# [OPTIONAL] Signup credits (default: 100 in production)
|
||||||
FREE_TIER_CREDITS=100
|
FREE_TIER_CREDITS=100
|
||||||
|
|||||||
117
.gitea/workflows/ci.yml
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
name: CI
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
pull_request:
|
||||||
|
branches: [main]
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
concurrency:
|
||||||
|
group: ${{ github.workflow }}-${{ github.ref }}
|
||||||
|
cancel-in-progress: true
|
||||||
|
|
||||||
|
env:
|
||||||
|
NODE_VERSION: "22.17.0"
|
||||||
|
PNPM_VERSION: "10.25.0"
|
||||||
|
FORCE_COLOR: "1"
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
lint:
|
||||||
|
name: Lint
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: pnpm/action-setup@v4
|
||||||
|
with:
|
||||||
|
version: ${{ env.PNPM_VERSION }}
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: ${{ env.NODE_VERSION }}
|
||||||
|
cache: "pnpm"
|
||||||
|
- run: pnpm install --frozen-lockfile
|
||||||
|
- run: pnpm lint
|
||||||
|
|
||||||
|
typecheck:
|
||||||
|
name: Typecheck
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: pnpm/action-setup@v4
|
||||||
|
with:
|
||||||
|
version: ${{ env.PNPM_VERSION }}
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: ${{ env.NODE_VERSION }}
|
||||||
|
cache: "pnpm"
|
||||||
|
- run: pnpm install --frozen-lockfile
|
||||||
|
- run: pnpm typecheck
|
||||||
|
|
||||||
|
test-broker:
|
||||||
|
name: Broker tests (Postgres)
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
services:
|
||||||
|
postgres:
|
||||||
|
image: pgvector/pgvector:pg17
|
||||||
|
env:
|
||||||
|
POSTGRES_USER: turbostarter
|
||||||
|
POSTGRES_PASSWORD: turbostarter
|
||||||
|
POSTGRES_DB: claudemesh_test
|
||||||
|
ports:
|
||||||
|
- 5440:5432
|
||||||
|
options: >-
|
||||||
|
--health-cmd="pg_isready -U turbostarter"
|
||||||
|
--health-interval=5s
|
||||||
|
--health-timeout=3s
|
||||||
|
--health-retries=10
|
||||||
|
env:
|
||||||
|
DATABASE_URL: postgresql://turbostarter:turbostarter@127.0.0.1:5440/claudemesh_test
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: pnpm/action-setup@v4
|
||||||
|
with:
|
||||||
|
version: ${{ env.PNPM_VERSION }}
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: ${{ env.NODE_VERSION }}
|
||||||
|
cache: "pnpm"
|
||||||
|
- run: pnpm install --frozen-lockfile
|
||||||
|
- name: Run migrations
|
||||||
|
run: pnpm --filter "@turbostarter/db" db:migrate
|
||||||
|
- name: Broker test suite
|
||||||
|
run: pnpm --filter "@claudemesh/broker" test
|
||||||
|
|
||||||
|
build-amd64:
|
||||||
|
name: Docker build (linux/amd64)
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: docker/setup-buildx-action@v3
|
||||||
|
- name: Build broker image
|
||||||
|
uses: docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
file: apps/broker/Dockerfile
|
||||||
|
platforms: linux/amd64
|
||||||
|
push: false
|
||||||
|
tags: claudemesh-broker:ci
|
||||||
|
build-args: |
|
||||||
|
GIT_SHA=${{ github.sha }}
|
||||||
|
- name: Build migrate image
|
||||||
|
uses: docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
file: packages/db/Dockerfile
|
||||||
|
platforms: linux/amd64
|
||||||
|
push: false
|
||||||
|
tags: claudemesh-migrate:ci
|
||||||
|
- name: Build web image
|
||||||
|
uses: docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
file: apps/web/Dockerfile
|
||||||
|
platforms: linux/amd64
|
||||||
|
push: false
|
||||||
|
tags: claudemesh-web:ci
|
||||||
|
build-args: |
|
||||||
|
NEXT_PUBLIC_URL=https://claudemesh.com
|
||||||
61
.gitea/workflows/release.yml
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
name: Release
|
||||||
|
|
||||||
|
# Triggers on any v-prefixed tag push:
|
||||||
|
# git tag v0.1.0 && git push --tags gitea-vps v0.1.0
|
||||||
|
#
|
||||||
|
# Builds + pushes all 3 multi-arch images to
|
||||||
|
# ghcr.io/alezmad/claudemesh-{broker,web,migrate}:<tag> and :latest
|
||||||
|
#
|
||||||
|
# Prereq: the Gitea repo must have a secret named GHCR_TOKEN containing a
|
||||||
|
# GitHub personal access token with `write:packages` scope for the alezmad
|
||||||
|
# GHCR namespace.
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
tags:
|
||||||
|
- "v*"
|
||||||
|
workflow_dispatch:
|
||||||
|
inputs:
|
||||||
|
tag:
|
||||||
|
description: "Tag to publish (without v prefix, e.g. 0.1.0)"
|
||||||
|
required: true
|
||||||
|
default: "latest"
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
publish:
|
||||||
|
name: Publish multi-arch images
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Set up QEMU (cross-arch emulation)
|
||||||
|
uses: docker/setup-qemu-action@v3
|
||||||
|
|
||||||
|
- name: Set up Docker Buildx
|
||||||
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Resolve tag
|
||||||
|
id: tag
|
||||||
|
run: |
|
||||||
|
if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
|
||||||
|
echo "value=${{ github.event.inputs.tag }}" >> "$GITHUB_OUTPUT"
|
||||||
|
else
|
||||||
|
# Strip leading v from git tag (v0.1.0 → 0.1.0)
|
||||||
|
echo "value=${GITHUB_REF_NAME#v}" >> "$GITHUB_OUTPUT"
|
||||||
|
fi
|
||||||
|
|
||||||
|
- name: Publish to ghcr.io/alezmad
|
||||||
|
env:
|
||||||
|
GHCR_TOKEN: ${{ secrets.GHCR_TOKEN }}
|
||||||
|
run: ./scripts/publish-images.sh "${{ steps.tag.outputs.value }}"
|
||||||
|
|
||||||
|
- name: Summary
|
||||||
|
run: |
|
||||||
|
echo "## Released claudemesh ${{ steps.tag.outputs.value }}" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo "" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo "Pulled with:" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo '```bash' >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo "docker pull ghcr.io/alezmad/claudemesh-broker:${{ steps.tag.outputs.value }}" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo "docker pull ghcr.io/alezmad/claudemesh-web:${{ steps.tag.outputs.value }}" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo "docker pull ghcr.io/alezmad/claudemesh-migrate:${{ steps.tag.outputs.value }}" >> "$GITHUB_STEP_SUMMARY"
|
||||||
|
echo '```' >> "$GITHUB_STEP_SUMMARY"
|
||||||
3
.nano-banana-config.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"geminiApiKey": "AIzaSyBblLRkmypvabqI-xJ_b2KPVA9Pswtav0M"
|
||||||
|
}
|
||||||
68
DEPLOY.md
@@ -43,22 +43,64 @@ openssl rand -base64 32
|
|||||||
|
|
||||||
See `.env.production.example` for full list with `[REQUIRED]` / `[FEATURE]` / `[OPTIONAL]` tags.
|
See `.env.production.example` for full list with `[REQUIRED]` / `[FEATURE]` / `[OPTIONAL]` tags.
|
||||||
|
|
||||||
## Step 2: Build & Push Image
|
## Step 2: Build & Push Images
|
||||||
|
|
||||||
|
Three images ship: `broker`, `web`, `migrate`. Use the multi-arch build script —
|
||||||
|
it produces both `linux/amd64` (VPS) and `linux/arm64` (Apple Silicon devs)
|
||||||
|
manifests so nobody hits QEMU emulation at runtime.
|
||||||
|
|
||||||
|
### Fast path (ghcr.io/alezmad)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Login to your registry (adjust for your setup)
|
GHCR_TOKEN=ghp_xxx ./scripts/publish-images.sh 0.1.0
|
||||||
docker login <REGISTRY_HOST> -u <USERNAME>
|
./scripts/publish-images.sh 0.1.0 --dry-run # preview without pushing
|
||||||
|
|
||||||
# Build for AMD64 (required for most VPS)
|
|
||||||
docker build --platform linux/amd64 \
|
|
||||||
--build-arg NEXT_PUBLIC_URL=https://your-app.example.com \
|
|
||||||
-t <REGISTRY_HOST>/<ORG>/<APP>:latest .
|
|
||||||
|
|
||||||
# Push
|
|
||||||
docker push <REGISTRY_HOST>/<ORG>/<APP>:latest
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Build takes ~2 min on Mac M-series. If push fails with EOF, retry.
|
One command logs in + builds + pushes all 3 images to
|
||||||
|
`ghcr.io/alezmad/claudemesh-{broker,web,migrate}` for both archs.
|
||||||
|
|
||||||
|
### Manual path (any registry)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Login to your registry
|
||||||
|
docker login <REGISTRY_HOST> -u <USERNAME>
|
||||||
|
|
||||||
|
# Multi-arch build + push (all 3 images: broker, web, migrate)
|
||||||
|
scripts/build-multiarch.sh <REGISTRY_HOST>/<ORG> <TAG>
|
||||||
|
|
||||||
|
# Examples:
|
||||||
|
scripts/build-multiarch.sh # → ghcr.io/alezmad/claudemesh-*:<git-sha>
|
||||||
|
scripts/build-multiarch.sh ghcr.io/alezmad 0.1.0 # → ghcr.io/alezmad/claudemesh-*:0.1.0
|
||||||
|
scripts/build-multiarch.sh ghcr.io/myorg latest # → ghcr.io/myorg/claudemesh-*:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
The script tags each image with both `<TAG>` and `:latest`. Builds in ~5-8 min
|
||||||
|
on Mac M-series (arm64 native is fast, amd64 via emulation is the slow leg).
|
||||||
|
|
||||||
|
Image sizes (arm64, after the `pnpm deploy` trim — amd64 is similar):
|
||||||
|
|
||||||
|
| image | size | contains |
|
||||||
|
| ------------------- | ------- | -------------------------------------- |
|
||||||
|
| claudemesh-broker | ~341 MB | bun runtime, prod deps only |
|
||||||
|
| claudemesh-migrate | ~653 MB | bun runtime + drizzle-kit (devDep) |
|
||||||
|
| claudemesh-web | ~250 MB | node + next.js standalone output |
|
||||||
|
|
||||||
|
> **Mac Docker Desktop note**: if amd64 builds fail with `Input/output error`
|
||||||
|
> during `apt-get install`, enable **Settings → General → Use Rosetta for x86/amd64
|
||||||
|
> emulation** (not QEMU). QEMU has known I/O stability issues on macOS; Rosetta
|
||||||
|
> is rock-solid. Linux CI runners don't hit this.
|
||||||
|
|
||||||
|
### Single-arch fallback (if you really only need amd64)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build --platform linux/amd64 \
|
||||||
|
--build-arg NEXT_PUBLIC_URL=https://your-app.example.com \
|
||||||
|
-f apps/web/Dockerfile \
|
||||||
|
-t <REGISTRY_HOST>/<ORG>/web:latest .
|
||||||
|
docker push <REGISTRY_HOST>/<ORG>/web:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
Repeat for `apps/broker/Dockerfile` and `packages/db/Dockerfile`.
|
||||||
|
|
||||||
## Step 3: Create Coolify Service
|
## Step 3: Create Coolify Service
|
||||||
|
|
||||||
@@ -189,7 +231,7 @@ pkill -f "ssh -f -N -L 5440"
|
|||||||
## Step 7: Verify
|
## Step 7: Verify
|
||||||
|
|
||||||
Open your app URL. Sign in with:
|
Open your app URL. Sign in with:
|
||||||
- Email: value of `SEED_EMAIL` (default: `me@turbostarter.dev`)
|
- Email: value of `SEED_EMAIL` (default: `dev@example.com`)
|
||||||
- Password: value of `SEED_PASSWORD` (default: `Pa$$w0rd`)
|
- Password: value of `SEED_PASSWORD` (default: `Pa$$w0rd`)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
187
LICENSE.md
@@ -1,164 +1,37 @@
|
|||||||
---
|
MIT License
|
||||||
title: EULA (End User License Agreement)
|
|
||||||
description: Information about the license for TurboStarter's services.
|
|
||||||
---
|
|
||||||
|
|
||||||
## TL;DR
|
Copyright (c) 2026 alezmad (claudemesh)
|
||||||
|
|
||||||
This summary is for convenience only. If anything here differs from the EULA, the EULA controls.
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
**You can:**
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
- Use the Software on multiple devices for yourself or your company
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
- Build and ship unlimited End Products (commercial or free)
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
- Sell and distribute your End Products to customers or users
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
- Modify the code solely to build those End Products
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
- Use the Software for unlimited client projects, as long as the client does not receive the Software or its source unless they buy their own license
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
- Team use with one license (seat) per individual user (including contractors)
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
- Allow employees and contractors to work with the Software on your behalf under confidentiality, provided each individual has their own license (seat)
|
THE SOFTWARE.
|
||||||
- Publish an open-source End Product only with prior written approval from the Licensor
|
|
||||||
|
|
||||||
**You can't:**
|
|
||||||
|
|
||||||
- Redistribute, resell, or share the Software or its source as a template/starter/boilerplate
|
|
||||||
- Give the Software or its source code to a client or any third party who doesn’t have their own license
|
|
||||||
- Transfer, assign, or sublicense your license
|
|
||||||
- Create a competing product or starter substantially based on this Software
|
|
||||||
- Remove copyright, trademark, or proprietary notices
|
|
||||||
- Reverse engineer, decompile, or circumvent protections
|
|
||||||
- Use the Software for illegal purposes
|
|
||||||
|
|
||||||
Bartosz Zagrodzki ("**Licensor**") grants you ("**Licensee**") a non-exclusive, non-transferable, revocable license to use the TurboStarter download files ("**Software**") subject to the terms and conditions below. By purchasing a license or accessing the Software, you agree to be bound by this EULA.
|
|
||||||
|
|
||||||
## 1. Definitions
|
|
||||||
|
|
||||||
- **"Licensor"** means Bartosz Zagrodzki, the owner and provider of the Software.
|
|
||||||
|
|
||||||
- **"Licensee"** means you as an individual or a single legal entity (business, organization, or company) that has purchased a license to the Software.
|
|
||||||
|
|
||||||
- **"Software"** means the TurboStarter codebase, including all files, source code, executable code, documentation, and any updates, patches, or modifications provided by Licensor, delivered in any form.
|
|
||||||
|
|
||||||
- **"End Product"** means any application, website, service, system, or other artifact produced by Licensee, for itself or for its clients, that incorporates, incorporates derivatives of, or is created using the Software as a foundation.
|
|
||||||
|
|
||||||
- **"Documentation"** means all written materials, guides, tutorials, and online content provided by Licensor relating to the use and functionality of the Software.
|
|
||||||
|
|
||||||
- **"Intellectual Property Rights"** means all copyright, trademark, patent, moral rights, design rights, and trade secret rights, whether registered or unregistered, in the Software and all modifications, improvements, and enhancements thereto.
|
|
||||||
|
|
||||||
- **"License"** means the non-exclusive, non-transferable, revocable right granted by this Agreement to use the Software under the stated terms and conditions.
|
|
||||||
|
|
||||||
- **"Confidential Information"** means proprietary information contained in the Software, including trade secrets, algorithms, architecture, and design patterns not publicly available.
|
|
||||||
|
|
||||||
- **"Term"** means the period during which this License is valid, commencing upon acceptance of this EULA and continuing unless terminated as provided herein.
|
|
||||||
|
|
||||||
## 2. License Grant
|
|
||||||
|
|
||||||
Licensor grants Licensee a **non-exclusive, non-transferable, revocable, personal license** to:
|
|
||||||
|
|
||||||
- Install and use the Software on multiple devices for Licensee's own use
|
|
||||||
- Create unlimited End Products incorporating the Software
|
|
||||||
- Sell or distribute End Products to end users
|
|
||||||
- Modify the Software solely for creating End Products
|
|
||||||
- Create open-source End Products with prior written approval from Licensor
|
|
||||||
- Use the Software to create End Products for unlimited clients as part of services provided by Licensee, provided the Software itself (including its source code) is not distributed or made available as a standalone deliverable to those clients unless they separately purchase their own license
|
|
||||||
- Permit Licensee's employees and contractors to access and use the Software solely on Licensee's behalf to develop End Products for Licensee or its clients, provided each such individual holds their own valid license (seat) purchased from Licensor and is bound by confidentiality and use restrictions no less protective than this EULA
|
|
||||||
|
|
||||||
This license is granted only to the individual or legal entity listed as the Licensee and may not be shared, transferred, or used by any other person or entity.
|
|
||||||
|
|
||||||
Team/Seat Licensing: If the Software is used by a team, you must purchase one license (seat) for each individual who accesses the Software, including employees and contractors. Seats are assigned to named individuals and are not transferable between different people.
|
|
||||||
|
|
||||||
## 3. Restrictions
|
|
||||||
|
|
||||||
Licensee may **not**:
|
|
||||||
|
|
||||||
- Redistribute, sell, or license the Software itself as a standalone product
|
|
||||||
- Transfer, assign, sublicense, or share this License with any third party
|
|
||||||
- Reverse engineer, decompile, disassemble, or attempt to derive the source code of the Software
|
|
||||||
- Remove, obscure, or alter any copyright, trademark, or proprietary notices in the Software
|
|
||||||
- Use the Software for illegal purposes or in violation of any applicable law
|
|
||||||
- Create a competing product using substantially similar code or design patterns from the Software
|
|
||||||
- Sublicense, share, or provide the Software or its source code to clients or any third party, except where such party has purchased its own license from Licensor
|
|
||||||
- Distribute the Software as a template, starter, or boilerplate intended for reuse by parties other than Licensee, whether or not for a fee
|
|
||||||
- Share a single license among multiple individuals; seat-sharing is prohibited
|
|
||||||
|
|
||||||
## 4. Ownership and Intellectual Property Rights
|
|
||||||
|
|
||||||
Licensor retains all Intellectual Property Rights in the Software, including all copies, modifications, improvements, and derivatives thereof. Licensee owns the End Products created by Licensee, but Licensor retains all ownership of the underlying Software components within those End Products. The license granted herein does not transfer any ownership rights to Licensee.
|
|
||||||
|
|
||||||
## 5. Warranty Disclaimer
|
|
||||||
|
|
||||||
**THE SOFTWARE IS PROVIDED "AS IS" AND "AS AVAILABLE" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.** LICENSOR EXPRESSLY DISCLAIMS ALL WARRANTIES, INCLUDING BUT NOT LIMITED TO:
|
|
||||||
|
|
||||||
- Warranties of **merchantability**, fitness for a **particular purpose**, or non-infringement
|
|
||||||
- Any warranty that the Software will meet Licensee's requirements
|
|
||||||
- Any warranty that the Software will operate without error, interruption, or defects
|
|
||||||
- Any warranty regarding the accuracy, completeness, or reliability of the Software
|
|
||||||
|
|
||||||
Licensor makes no representations that the Software is free of viruses, malware, or other harmful components. **Licensee assumes all responsibility for the consequences of using the Software.**
|
|
||||||
|
|
||||||
## 6. Limitation of Liability
|
|
||||||
|
|
||||||
**TO THE MAXIMUM EXTENT PERMITTED BY LAW, LICENSOR SHALL NOT BE LIABLE FOR:**
|
|
||||||
|
|
||||||
- **Indirect, incidental, special, consequential, or punitive damages**, including loss of profits, loss of data, loss of business opportunity, or loss of use
|
|
||||||
- **Any damages arising from:** use of the Software, inability to use the Software, unauthorized access, data breaches, or performance failures
|
|
||||||
- **Any liability exceeding the amount paid by Licensee for the license**
|
|
||||||
|
|
||||||
This limitation of liability applies **regardless of whether liability is based on contract, tort, strict liability, negligence, or any other legal theory, and even if Licensor has been advised of the possibility of such damages.**
|
|
||||||
|
|
||||||
**This limitation is fundamental to the pricing of the License and represents an essential condition of this Agreement.**
|
|
||||||
|
|
||||||
## 7. Indemnification
|
|
||||||
|
|
||||||
Licensee agrees to **indemnify, defend, and hold harmless** Licensor from any claims, damages, losses, costs, or attorneys' fees arising from:
|
|
||||||
|
|
||||||
- Licensee's use of the Software in violation of this EULA
|
|
||||||
- Licensee's modification, misuse, or unauthorized distribution of the Software
|
|
||||||
- Third-party claims arising from End Products created by Licensee
|
|
||||||
- Licensee's breach of applicable law while using the Software
|
|
||||||
|
|
||||||
## 8. Termination
|
|
||||||
|
|
||||||
This License **terminates immediately** if Licensee:
|
|
||||||
|
|
||||||
- Breaches any material term of this EULA and does not cure the breach within **14 days** of written notice
|
|
||||||
- Attempts to reverse engineer, decompile, or circumvent the Software
|
|
||||||
- Transfers or attempts to transfer the License to another party
|
|
||||||
|
|
||||||
Either party may terminate this License for any reason or no reason by providing **30 days' written notice** to the other party.
|
|
||||||
|
|
||||||
Upon termination:
|
|
||||||
|
|
||||||
- Licensee must immediately cease all use of the Software
|
|
||||||
- End Products created prior to termination may continue to operate
|
|
||||||
- All copies of the Software in Licensee's possession must be destroyed or deleted
|
|
||||||
- Sections 1, 3, 4, 5, 6, 7, and 9 survive termination
|
|
||||||
|
|
||||||
## 9. Governing Law and Jurisdiction
|
|
||||||
|
|
||||||
This EULA is **governed by and construed in accordance with the laws of Poland**, excluding conflict of law principles.
|
|
||||||
|
|
||||||
**Any legal action or proceeding arising from this EULA shall be resolved exclusively in the competent courts of Poland.**
|
|
||||||
|
|
||||||
Licensee consents to the personal jurisdiction of such courts and waives any objection to venue.
|
|
||||||
|
|
||||||
## 10. Entire Agreement
|
|
||||||
|
|
||||||
This EULA, together with any terms posted on Licensor's website, constitutes the **entire agreement** between the parties regarding the Software and supersedes all prior agreements, understandings, and representations.
|
|
||||||
|
|
||||||
**No modification or amendment is valid unless in writing and signed by an authorized representative of Licensor.**
|
|
||||||
|
|
||||||
## 11. Severability
|
|
||||||
|
|
||||||
If any provision of this EULA is held to be invalid, illegal, or unenforceable by a court of competent jurisdiction, such provision shall be severed to the extent of invalidity, and the remaining provisions shall continue in full force and effect. The parties agree to negotiate in good faith to replace any severed provision with a valid provision that achieves the original economic intent.
|
|
||||||
|
|
||||||
## 12. Waiver
|
|
||||||
|
|
||||||
The failure of Licensor to enforce any right, power, or provision of this EULA shall not operate as a waiver of that right, power, or provision. No single or partial waiver shall constitute a waiver of any other or subsequent breach or failure.
|
|
||||||
|
|
||||||
## 13. Contact
|
|
||||||
|
|
||||||
For questions, concerns, or requests regarding this License, contact: **[hello@turbostarter.dev](mailto:hello@turbostarter.dev)**
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**BY USING, DOWNLOADING, OR INSTALLING THE SOFTWARE, LICENSEE ACKNOWLEDGES HAVING READ THIS EULA AND AGREEING TO BE BOUND BY ALL ITS TERMS AND CONDITIONS.**
|
## Attribution
|
||||||
|
|
||||||
|
This project was originally scaffolded using TurboStarter (https://turbostarter.dev),
|
||||||
|
a proprietary SaaS starter kit. The TurboStarter scaffold code is covered by
|
||||||
|
your separate purchase agreement with TurboStarter and is NOT re-licensed by
|
||||||
|
this MIT license. The MIT license above covers claudemesh-specific additions,
|
||||||
|
modifications, and original code written on top of that scaffold — including
|
||||||
|
but not limited to: apps/broker, apps/cli, apps/web/src/modules/marketing/home,
|
||||||
|
packages/db/src/schema/mesh.ts, the protocol, and the documentation.
|
||||||
|
|
||||||
|
If you are redistributing this repository, you are responsible for compliance
|
||||||
|
with BOTH the TurboStarter EULA (for scaffold components) and this MIT license
|
||||||
|
(for claudemesh code).
|
||||||
|
|||||||
380
README.md
@@ -1,198 +1,242 @@
|
|||||||
# TurboStarter Kit
|
<div align="center">
|
||||||
|
|
||||||
Full-stack monorepo built with Next.js, Expo, Turborepo, and pnpm workspaces.
|
# claudemesh
|
||||||
|
|
||||||
## Prerequisites
|
**A mesh of Claudes. Not one you talk to.**
|
||||||
|
|
||||||
- [Node.js](https://nodejs.org/) >= 22.17.0
|
A peer-to-peer substrate for Claude Code sessions. Each agent keeps its own
|
||||||
- [pnpm](https://pnpm.io/) 10.25.0
|
repo, memory, and context. The mesh lets them reference each other's work
|
||||||
- [Docker](https://www.docker.com/) and Docker Compose
|
when useful — without a central brain in the middle.
|
||||||
|
|
||||||
## Project Structure
|
[claudemesh.com](https://claudemesh.com) ·
|
||||||
|
[quickstart](./docs/QUICKSTART.md) ·
|
||||||
|
[protocol](./docs/protocol.md) ·
|
||||||
|
[roadmap](./docs/roadmap.md) ·
|
||||||
|
end-to-end encrypted · self-sovereign keys · open source
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What is this?
|
||||||
|
|
||||||
|
**Before**: one Claude per project. Each is an island. Context dies when you
|
||||||
|
close the terminal. Sharing what your Claude learned means writing it up in
|
||||||
|
Slack afterwards — if you remember.
|
||||||
|
|
||||||
|
**With the mesh**: a mesh of Claudes. Each keeps its own repo, memory, history.
|
||||||
|
They reference each other on demand. Your identity travels across surfaces
|
||||||
|
(terminal, phone, chat, bot). The mesh is the substrate; terminals are just
|
||||||
|
one kind of client.
|
||||||
|
|
||||||
|
### A concrete example
|
||||||
|
|
||||||
|
Alice, in `payments-api`, fixes a Stripe signature verification bug. Two weeks
|
||||||
|
later, Bob in `checkout-frontend` hits the same thing. Alice's fix is buried
|
||||||
|
in a PR thread.
|
||||||
|
|
||||||
|
Bob's Claude asks the mesh: *who's seen this?* Alice's Claude self-nominates
|
||||||
|
with the context. Bob solves it in ten minutes. Alice isn't interrupted — her
|
||||||
|
Claude surfaces the history on its own. The humans stay in the loop via the
|
||||||
|
PR, as they should.
|
||||||
|
|
||||||
|
Each Claude stays inside its own repo. Nobody's reading anyone else's files.
|
||||||
|
Information flows at the agent layer.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install -g @claudemesh/cli
|
||||||
|
```
|
||||||
|
|
||||||
|
Register the MCP server with Claude Code:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh install
|
||||||
|
# prints: claude mcp add claudemesh --scope user -- claudemesh mcp
|
||||||
|
```
|
||||||
|
|
||||||
|
Run the printed command, then restart Claude Code.
|
||||||
|
|
||||||
|
## Join a mesh
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh join ic://join/BASE64URL...
|
||||||
|
```
|
||||||
|
|
||||||
|
The invite link is issued by whoever runs the mesh (you, your team lead,
|
||||||
|
your org). Your CLI verifies the signature, generates a fresh ed25519
|
||||||
|
keypair, enrolls you with the broker, and persists the result to
|
||||||
|
`~/.claudemesh/config.json`.
|
||||||
|
|
||||||
|
## Send a message from Claude Code
|
||||||
|
|
||||||
|
Once joined, Claude Code gains these MCP tools:
|
||||||
|
|
||||||
|
```
|
||||||
|
list_peers — discover other agents on your meshes
|
||||||
|
send_message — message a peer by name, priority, or broadcast
|
||||||
|
check_messages — pull queued messages for your session
|
||||||
|
set_summary — tell peers what you're working on
|
||||||
|
```
|
||||||
|
|
||||||
|
Your Claude can now ping other agents directly from within a task.
|
||||||
|
|
||||||
|
→ **[Full 5-minute quickstart](./docs/QUICKSTART.md)** with two-terminal
|
||||||
|
walkthrough and troubleshooting.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture at a glance
|
||||||
|
|
||||||
|
```
|
||||||
|
terminal A ──┐ ┌── terminal B
|
||||||
|
│ ┌──────────┐ │
|
||||||
|
phone ────┼─────▶│ broker │◀─────┼──── slack peer
|
||||||
|
│ │ routes │ │
|
||||||
|
terminal C ──┘ │ only │ └── whatsapp gateway
|
||||||
|
└──────────┘
|
||||||
|
never decrypts · all edges E2E
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Broker** — a stateless WebSocket router. Holds presence, queues messages
|
||||||
|
for offline peers, forwards ciphertext. Never sees plaintext.
|
||||||
|
- **Peers** — any process with an ed25519 keypair. Your terminal's Claude
|
||||||
|
Code session is a peer. A phone is a peer. A bot is a peer. All equal.
|
||||||
|
- **Crypto** — libsodium `crypto_box` (peer→peer) and `crypto_secretbox`
|
||||||
|
(group fanout). Keys live on your machine. The broker operator has
|
||||||
|
nothing to decrypt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Where to run it
|
||||||
|
|
||||||
|
**Local, one machine, simpler protocol** → use
|
||||||
|
[**claude-intercom**](https://github.com/alezmad/claude-intercom) (MIT).
|
||||||
|
Same idea, same author, purpose-built for a single laptop. If all your
|
||||||
|
Claudes live on one box, start there.
|
||||||
|
|
||||||
|
**Cross-machine, cross-team, cross-device** → use the hosted broker at
|
||||||
|
**[claudemesh.com](https://claudemesh.com)**. Zero ops. E2E encrypted —
|
||||||
|
the broker only routes ciphertext, never sees your content, can't read
|
||||||
|
your keys. Sign in, create a mesh, invite peers.
|
||||||
|
|
||||||
|
**Want to audit or fork the broker?** Source is MIT in
|
||||||
|
[`apps/broker/`](./apps/broker/) — read the [runtime
|
||||||
|
contract](./apps/broker/DEPLOY_SPEC.md), read the [protocol
|
||||||
|
spec](./docs/protocol.md), build it yourself. Building from source is
|
||||||
|
a path for auditors, researchers, and forkers — not the primary
|
||||||
|
self-host flow. Enterprise self-hosted broker packaging is on the
|
||||||
|
roadmap for v0.2+.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Honest limits
|
||||||
|
|
||||||
|
- **Not a chatbot.** You don't talk to claudemesh. Your Claude talks to
|
||||||
|
other Claudes. The value is at the agent layer.
|
||||||
|
- **Not a replacement for docs, PRs, or Slack.** Those stay for humans.
|
||||||
|
- **No auto-magic.** Peers surface information when *asked*. No unsolicited
|
||||||
|
chatter across the mesh.
|
||||||
|
- **Shares live conversational context, not git state.** It does not read
|
||||||
|
or merge anyone's files.
|
||||||
|
- **Both peers need to be online** for direct messaging. Offline peers get
|
||||||
|
queued messages when they return.
|
||||||
|
- **WhatsApp / Telegram / iOS gateways** are on the v0.2 roadmap. Protocol
|
||||||
|
is ready; the bots aren't shipped. Build one in a weekend — spec is in
|
||||||
|
[`docs/protocol.md`](./docs/protocol.md).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's in this repo
|
||||||
|
|
||||||
```
|
```
|
||||||
apps/
|
apps/
|
||||||
web/ # Next.js web application (port 3000)
|
broker/ WebSocket broker — peer routing, presence, queueing
|
||||||
mobile/ # Expo React Native app
|
cli/ @claudemesh/cli — install, join, MCP server
|
||||||
|
web/ Dashboard + marketing (claudemesh.com)
|
||||||
packages/
|
packages/
|
||||||
ai/ # AI provider integrations
|
db/ Postgres schema (Drizzle)
|
||||||
analytics/ # Analytics providers
|
auth/ BetterAuth
|
||||||
api/ # tRPC API layer
|
... Shared infra — shared UI, i18n, email, billing
|
||||||
auth/ # Authentication (BetterAuth)
|
docs/
|
||||||
billing/ # Payment providers (Stripe, Lemon Squeezy, Polar)
|
protocol.md Wire protocol, crypto, invite-link format
|
||||||
cms/ # Content management
|
|
||||||
db/ # Database (Drizzle ORM + PostgreSQL)
|
|
||||||
email/ # Email providers (Resend, Sendgrid, etc.)
|
|
||||||
i18n/ # Internationalization
|
|
||||||
monitoring/# Monitoring (Sentry, PostHog)
|
|
||||||
shared/ # Shared utilities and config
|
|
||||||
storage/ # File storage (S3/MinIO)
|
|
||||||
ui/ # Shared UI components
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Quick Start
|
Marketing + dashboard live at **claudemesh.com**; broker runs at
|
||||||
|
**ic.claudemesh.com**.
|
||||||
|
|
||||||
### 1. Install dependencies
|
---
|
||||||
|
|
||||||
```bash
|
## Status
|
||||||
|
|
||||||
|
`v0.1.0` — first public release. Core protocol, CLI, broker, and MCP
|
||||||
|
integration work end-to-end. Dashboard is beta. WhatsApp/phone/Slack
|
||||||
|
gateways are on the roadmap (see `docs/roadmap.md`).
|
||||||
|
|
||||||
|
Something feels wrong? [Open an issue](https://github.com/claudemesh/claudemesh/issues).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
claudemesh is a pnpm + Turborepo monorepo on top of the
|
||||||
|
[TurboStarter](https://turbostarter.dev) template.
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js >= 22.17.0
|
||||||
|
- pnpm 10.25.0
|
||||||
|
- Docker + Docker Compose
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
pnpm install
|
pnpm install
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Configure environment variables
|
|
||||||
|
|
||||||
Copy the example env files:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Root env (database, product name, URL)
|
|
||||||
cp .env.example .env
|
cp .env.example .env
|
||||||
|
|
||||||
# Web app env (auth, billing, email, storage, AI, etc.)
|
|
||||||
cp apps/web/.env.example apps/web/.env.local
|
cp apps/web/.env.example apps/web/.env.local
|
||||||
|
|
||||||
|
pnpm services:setup # starts postgres + minio, runs migrations, seeds
|
||||||
|
pnpm dev # starts web, broker, and CLI in parallel
|
||||||
```
|
```
|
||||||
|
|
||||||
**Root `.env`** — minimum required variables:
|
Web app: [http://localhost:3000](http://localhost:3000) · Broker:
|
||||||
|
`ws://localhost:8787/ws` · Postgres: `localhost:5440` · MinIO console:
|
||||||
|
[http://localhost:9001](http://localhost:9001) (`minioadmin` / `minioadmin`).
|
||||||
|
|
||||||
```env
|
### Dev accounts
|
||||||
DATABASE_URL="postgresql://turbostarter:turbostarter@localhost:5440/core"
|
|
||||||
PRODUCT_NAME="TurboStarter"
|
|
||||||
URL="http://localhost:3000"
|
|
||||||
DEFAULT_LOCALE="en"
|
|
||||||
```
|
|
||||||
|
|
||||||
> **Note:** The database port is `5440` (mapped from Docker), not the default `5432`.
|
After `pnpm services:setup`:
|
||||||
|
|
||||||
**`apps/web/.env.local`** — key variables to configure:
|
| Role | Email | Password |
|
||||||
|
|-------|-------------------------------|------------|
|
||||||
|
| User | `dev+user@example.com` | `Pa$$w0rd` |
|
||||||
|
| Admin | `dev+admin@example.com` | `Pa$$w0rd` |
|
||||||
|
|
||||||
| Variable | Description | Required |
|
### Common commands
|
||||||
|---|---|---|
|
|
||||||
| `BETTER_AUTH_SECRET` | Auth token signing secret | Yes |
|
|
||||||
| `NEXT_PUBLIC_AUTH_PASSWORD` | Enable password auth (`true`/`false`) | Yes |
|
|
||||||
| `NEXT_PUBLIC_URL` | Public URL of the web app | Yes |
|
|
||||||
| `STRIPE_SECRET_KEY` | Stripe key (if using Stripe billing) | Optional |
|
|
||||||
| `RESEND_API_KEY` | Resend key (if using Resend email) | Optional |
|
|
||||||
| `S3_*` | S3/MinIO storage credentials | Optional |
|
|
||||||
| `OPENAI_API_KEY` | OpenAI key (if using AI features) | Optional |
|
|
||||||
|
|
||||||
For local MinIO storage, use these S3 settings in `apps/web/.env.local`:
|
| Command | Description |
|
||||||
|
|------------------|------------------------------------------|
|
||||||
|
| `pnpm dev` | Start all apps in development mode |
|
||||||
|
| `pnpm build` | Build all packages and apps |
|
||||||
|
| `pnpm lint` | Run ESLint |
|
||||||
|
| `pnpm typecheck` | Run TypeScript |
|
||||||
|
| `pnpm test` | Run tests |
|
||||||
|
|
||||||
```env
|
More in [`CONTRIBUTING.md`](./CONTRIBUTING.md).
|
||||||
S3_REGION="us-east-1"
|
|
||||||
S3_BUCKET="uploads"
|
|
||||||
S3_ENDPOINT="http://localhost:9000"
|
|
||||||
S3_ACCESS_KEY_ID="minioadmin"
|
|
||||||
S3_SECRET_ACCESS_KEY="minioadmin"
|
|
||||||
```
|
|
||||||
|
|
||||||
See `apps/web/.env.example` for the full list of available variables.
|
---
|
||||||
|
|
||||||
### 3. Start infrastructure (Docker Compose)
|
## License
|
||||||
|
|
||||||
Start PostgreSQL and MinIO:
|
MIT — see [LICENSE](./LICENSE).
|
||||||
|
|
||||||
```bash
|
---
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
Wait for services to be healthy:
|
<div align="center">
|
||||||
|
|
||||||
```bash
|
**Made for swarms.** · [claudemesh.com](https://claudemesh.com)
|
||||||
docker compose up -d --wait
|
|
||||||
```
|
|
||||||
|
|
||||||
Or use the built-in shortcut:
|
</div>
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm services:start
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Set up the database
|
|
||||||
|
|
||||||
Run migrations and seed data:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm services:setup
|
|
||||||
```
|
|
||||||
|
|
||||||
This runs `docker compose up -d --wait`, then applies database migrations and seeds initial data.
|
|
||||||
|
|
||||||
### 5. Start development
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
The web app will be available at **http://localhost:3000**.
|
|
||||||
|
|
||||||
## Docker Commands
|
|
||||||
|
|
||||||
### Infrastructure Services
|
|
||||||
|
|
||||||
| Command | Description |
|
|
||||||
|---|---|
|
|
||||||
| `docker compose up -d` | Start all services (PostgreSQL + MinIO) |
|
|
||||||
| `docker compose down` | Stop all services |
|
|
||||||
| `docker compose logs -f` | Follow service logs |
|
|
||||||
| `docker compose ps` | Show service status |
|
|
||||||
|
|
||||||
Or use the pnpm shortcuts:
|
|
||||||
|
|
||||||
| Command | Description |
|
|
||||||
|---|---|
|
|
||||||
| `pnpm services:start` | Start Docker services and wait for healthy |
|
|
||||||
| `pnpm services:stop` | Stop Docker services |
|
|
||||||
| `pnpm services:logs` | Follow Docker service logs |
|
|
||||||
| `pnpm services:status` | Show Docker service status |
|
|
||||||
| `pnpm services:setup` | Start services + run DB migrations + seed |
|
|
||||||
|
|
||||||
### Service URLs
|
|
||||||
|
|
||||||
| Service | URL | Credentials |
|
|
||||||
|---|---|---|
|
|
||||||
| Web App | http://localhost:3000 | — |
|
|
||||||
| PostgreSQL | localhost:5440 | `turbostarter` / `turbostarter` |
|
|
||||||
| MinIO API | http://localhost:9000 | `minioadmin` / `minioadmin` |
|
|
||||||
| MinIO Console | http://localhost:9001 | `minioadmin` / `minioadmin` |
|
|
||||||
|
|
||||||
### Production Build (Docker)
|
|
||||||
|
|
||||||
Build and run the web app as a production Docker image:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker build -t turbostarter-web .
|
|
||||||
docker run -p 3000:3000 --env-file apps/web/.env.local turbostarter-web
|
|
||||||
```
|
|
||||||
|
|
||||||
## Development Commands
|
|
||||||
|
|
||||||
| Command | Description |
|
|
||||||
|---|---|
|
|
||||||
| `pnpm dev` | Start all apps in development mode |
|
|
||||||
| `pnpm build` | Build all packages and apps |
|
|
||||||
| `pnpm lint` | Run ESLint across the monorepo |
|
|
||||||
| `pnpm format` | Check formatting with Prettier |
|
|
||||||
| `pnpm format:fix` | Fix formatting |
|
|
||||||
| `pnpm typecheck` | Run TypeScript type checking |
|
|
||||||
| `pnpm test` | Run tests |
|
|
||||||
| `pnpm auth:seed` | Seed auth dev accounts |
|
|
||||||
|
|
||||||
### Database Commands
|
|
||||||
|
|
||||||
Run from the root (or within `packages/db`):
|
|
||||||
|
|
||||||
| Command | Description |
|
|
||||||
|---|---|
|
|
||||||
| `pnpm --filter @turbostarter/db db:migrate` | Run database migrations |
|
|
||||||
| `pnpm --filter @turbostarter/db db:push` | Push schema changes |
|
|
||||||
| `pnpm --filter @turbostarter/db db:generate` | Generate new migration |
|
|
||||||
| `pnpm --filter @turbostarter/db db:studio` | Open Drizzle Studio |
|
|
||||||
| `pnpm --filter @turbostarter/db db:reset` | Reset database |
|
|
||||||
| `pnpm --filter @turbostarter/db db:seed` | Seed database |
|
|
||||||
|
|
||||||
## Dev Login Credentials
|
|
||||||
|
|
||||||
After running `pnpm services:setup` or `pnpm auth:seed`:
|
|
||||||
|
|
||||||
| Role | Email | Password |
|
|
||||||
|---|---|---|
|
|
||||||
| User | `me+user@turbostarter.dev` | `Pa$$w0rd` |
|
|
||||||
| Admin | `me+admin@turbostarter.dev` | `Pa$$w0rd` |
|
|
||||||
|
|||||||
@@ -15,10 +15,14 @@ RUN apt-get update && apt-get install -y --no-install-recommends curl ca-certifi
|
|||||||
# Copy full workspace (pnpm needs lockfile + all package.jsons to resolve workspace:* and catalog:)
|
# Copy full workspace (pnpm needs lockfile + all package.jsons to resolve workspace:* and catalog:)
|
||||||
COPY . .
|
COPY . .
|
||||||
|
|
||||||
# Install all workspace deps (broker needs @turbostarter/db + @turbostarter/shared and their transitive deps)
|
# Install all workspace deps, then flatten broker's prod subset into /deploy.
|
||||||
RUN pnpm install --frozen-lockfile --ignore-scripts
|
# pnpm deploy: resolves workspace:* to real copies, drops catalog: references,
|
||||||
|
# drops devDependencies (--prod), produces a self-contained runtime directory
|
||||||
|
# with only what this one package + its transitive prod deps need.
|
||||||
|
RUN pnpm install --frozen-lockfile --ignore-scripts && \
|
||||||
|
pnpm deploy --legacy --prod --ignore-scripts --filter=@claudemesh/broker /deploy
|
||||||
|
|
||||||
# Stage 2: minimal Bun runtime
|
# Stage 2: minimal Bun runtime — copy only the flat /deploy subset
|
||||||
FROM oven/bun:1.2-slim AS runtime
|
FROM oven/bun:1.2-slim AS runtime
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
@@ -29,13 +33,7 @@ ENV GIT_SHA=$GIT_SHA
|
|||||||
ENV NODE_ENV=production
|
ENV NODE_ENV=production
|
||||||
ENV BROKER_PORT=7900
|
ENV BROKER_PORT=7900
|
||||||
|
|
||||||
# Copy workspace root metadata + node_modules + only the packages the broker needs
|
COPY --from=deps --chown=bun:bun /deploy /app
|
||||||
COPY --from=deps --chown=bun:bun /app/package.json /app/pnpm-workspace.yaml /app/pnpm-lock.yaml /app/.npmrc ./
|
|
||||||
COPY --from=deps --chown=bun:bun /app/node_modules ./node_modules
|
|
||||||
COPY --from=deps --chown=bun:bun /app/apps/broker ./apps/broker
|
|
||||||
COPY --from=deps --chown=bun:bun /app/packages/db ./packages/db
|
|
||||||
COPY --from=deps --chown=bun:bun /app/packages/shared ./packages/shared
|
|
||||||
COPY --from=deps --chown=bun:bun /app/tooling/typescript ./tooling/typescript
|
|
||||||
|
|
||||||
EXPOSE 7900
|
EXPOSE 7900
|
||||||
|
|
||||||
@@ -44,4 +42,4 @@ HEALTHCHECK --interval=15s --timeout=5s --start-period=10s --retries=3 \
|
|||||||
|
|
||||||
# Non-root user (oven/bun image ships with 'bun' uid 1000)
|
# Non-root user (oven/bun image ships with 'bun' uid 1000)
|
||||||
USER bun
|
USER bun
|
||||||
CMD ["bun", "apps/broker/src/index.ts"]
|
CMD ["bun", "src/index.ts"]
|
||||||
|
|||||||
81
apps/broker/scripts/backfill-owner-pubkey.ts
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
#!/usr/bin/env bun
|
||||||
|
/**
|
||||||
|
* One-off backfill: populate owner_pubkey + owner_secret_key +
|
||||||
|
* root_key for meshes created before Step 18c crypto landed.
|
||||||
|
*
|
||||||
|
* Runs idempotently: only touches rows where ANY of those three
|
||||||
|
* columns is NULL. Generates a fresh keypair + root key per mesh
|
||||||
|
* and stores ALL THREE server-side (invites are signed server-side
|
||||||
|
* by the web UI's create-invite flow, so it needs the secret key).
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* DATABASE_URL=... bun apps/broker/scripts/backfill-owner-pubkey.ts
|
||||||
|
*
|
||||||
|
* Output (stdout): one tab-separated row per patched mesh:
|
||||||
|
* <mesh_id> <mesh_slug> <owner_pubkey> <owner_secret_key> <root_key>
|
||||||
|
*/
|
||||||
|
|
||||||
|
import sodium from "libsodium-wrappers";
|
||||||
|
import { eq, isNull, or } from "drizzle-orm";
|
||||||
|
import { db } from "../src/db";
|
||||||
|
import { mesh } from "@turbostarter/db/schema/mesh";
|
||||||
|
|
||||||
|
async function main(): Promise<void> {
|
||||||
|
await sodium.ready;
|
||||||
|
|
||||||
|
const missing = await db
|
||||||
|
.select({
|
||||||
|
id: mesh.id,
|
||||||
|
slug: mesh.slug,
|
||||||
|
ownerPubkey: mesh.ownerPubkey,
|
||||||
|
ownerSecretKey: mesh.ownerSecretKey,
|
||||||
|
rootKey: mesh.rootKey,
|
||||||
|
})
|
||||||
|
.from(mesh)
|
||||||
|
.where(
|
||||||
|
or(
|
||||||
|
isNull(mesh.ownerPubkey),
|
||||||
|
isNull(mesh.ownerSecretKey),
|
||||||
|
isNull(mesh.rootKey),
|
||||||
|
)!,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (missing.length === 0) {
|
||||||
|
console.error("[backfill] no rows to patch");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.error(`[backfill] patching ${missing.length} mesh(es)`);
|
||||||
|
|
||||||
|
for (const row of missing) {
|
||||||
|
const kp = sodium.crypto_sign_keypair();
|
||||||
|
const pubHex = sodium.to_hex(kp.publicKey);
|
||||||
|
const secHex = sodium.to_hex(kp.privateKey);
|
||||||
|
const rootKey = sodium.to_base64(
|
||||||
|
sodium.randombytes_buf(32),
|
||||||
|
sodium.base64_variants.URLSAFE_NO_PADDING,
|
||||||
|
);
|
||||||
|
await db
|
||||||
|
.update(mesh)
|
||||||
|
.set({
|
||||||
|
ownerPubkey: pubHex,
|
||||||
|
ownerSecretKey: secHex,
|
||||||
|
rootKey,
|
||||||
|
})
|
||||||
|
.where(eq(mesh.id, row.id));
|
||||||
|
console.log(
|
||||||
|
`${row.id}\t${row.slug}\t${pubHex}\t${secHex}\t${rootKey}`,
|
||||||
|
);
|
||||||
|
console.error(`[backfill] patched mesh "${row.slug}" (${row.id})`);
|
||||||
|
}
|
||||||
|
console.error("[backfill] done.");
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.then(() => process.exit(0))
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(
|
||||||
|
"[backfill] error:",
|
||||||
|
e instanceof Error ? e.message : String(e),
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
488
apps/broker/scripts/load-test.ts
Normal file
@@ -0,0 +1,488 @@
|
|||||||
|
#!/usr/bin/env bun
|
||||||
|
/**
|
||||||
|
* Load test — 100 concurrent peers × 1000 messages each.
|
||||||
|
*
|
||||||
|
* Spins up N peer members in a fresh mesh, connects them all via WS,
|
||||||
|
* and has each peer send M direct messages to random other peers.
|
||||||
|
* Measures send→push latency per message, memory growth on the
|
||||||
|
* broker process, and error rate.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* DATABASE_URL=... bun apps/broker/scripts/load-test.ts [peers] [msgs]
|
||||||
|
*
|
||||||
|
* Defaults: 100 peers × 1000 messages = 100k messages total.
|
||||||
|
*
|
||||||
|
* Assumes the broker is running at ws://localhost:7900/ws. If you
|
||||||
|
* pass BROKER_PID=<pid>, the test also samples RSS + FD count every
|
||||||
|
* 2s for the broker process.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import sodium from "libsodium-wrappers";
|
||||||
|
import { eq, inArray } from "drizzle-orm";
|
||||||
|
import WebSocket from "ws";
|
||||||
|
import { db } from "../src/db";
|
||||||
|
import { invite, mesh, meshMember } from "@turbostarter/db/schema/mesh";
|
||||||
|
import { user } from "@turbostarter/db/schema/auth";
|
||||||
|
|
||||||
|
// --- CLI args ---
|
||||||
|
|
||||||
|
const PEERS = parseInt(process.argv[2] ?? "100", 10);
|
||||||
|
const MSGS_PER_PEER = parseInt(process.argv[3] ?? "1000", 10);
|
||||||
|
const TOTAL_MSGS = PEERS * MSGS_PER_PEER;
|
||||||
|
const BROKER_URL = process.env.BROKER_WS_URL ?? "ws://localhost:7900/ws";
|
||||||
|
const BROKER_PID = process.env.BROKER_PID
|
||||||
|
? parseInt(process.env.BROKER_PID, 10)
|
||||||
|
: null;
|
||||||
|
const USER_ID = "test-user-loadtest";
|
||||||
|
const MESH_SLUG = "loadtest";
|
||||||
|
|
||||||
|
// --- Types ---
|
||||||
|
|
||||||
|
interface Peer {
|
||||||
|
memberId: string;
|
||||||
|
pubkey: string;
|
||||||
|
secretKey: string;
|
||||||
|
ws?: WebSocket;
|
||||||
|
connected: boolean;
|
||||||
|
sendsInFlight: number;
|
||||||
|
sendErrors: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MsgTimings {
|
||||||
|
sentAt: number;
|
||||||
|
pushAt?: number;
|
||||||
|
ackAt?: number;
|
||||||
|
senderIdx: number;
|
||||||
|
recipientIdx: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const peers: Peer[] = [];
|
||||||
|
const timings = new Map<string, MsgTimings>();
|
||||||
|
let messageId = 0;
|
||||||
|
|
||||||
|
// --- Broker-process sampling ---
|
||||||
|
|
||||||
|
interface Sample {
|
||||||
|
t: number;
|
||||||
|
rssKb: number;
|
||||||
|
fds: number;
|
||||||
|
}
|
||||||
|
const samples: Sample[] = [];
|
||||||
|
|
||||||
|
function samplePidStats(pid: number): Sample | null {
|
||||||
|
try {
|
||||||
|
const psOut = new TextDecoder()
|
||||||
|
.decode(Bun.spawnSync(["ps", "-o", "rss=", "-p", String(pid)]).stdout)
|
||||||
|
.trim();
|
||||||
|
const rssKb = parseInt(psOut, 10);
|
||||||
|
if (!Number.isFinite(rssKb)) return null;
|
||||||
|
const lsofOut = new TextDecoder()
|
||||||
|
.decode(Bun.spawnSync(["lsof", "-p", String(pid)]).stdout)
|
||||||
|
.trim();
|
||||||
|
const fds = lsofOut.split("\n").length - 1; // minus header
|
||||||
|
return { t: Date.now(), rssKb, fds };
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let sampler: ReturnType<typeof setInterval> | null = null;
|
||||||
|
function startSampler(): void {
|
||||||
|
if (!BROKER_PID) return;
|
||||||
|
sampler = setInterval(() => {
|
||||||
|
const s = samplePidStats(BROKER_PID);
|
||||||
|
if (s) samples.push(s);
|
||||||
|
}, 2000);
|
||||||
|
sampler.unref();
|
||||||
|
}
|
||||||
|
function stopSampler(): void {
|
||||||
|
if (sampler) clearInterval(sampler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Seed mesh + N members ---
|
||||||
|
|
||||||
|
async function seedMesh(): Promise<string> {
|
||||||
|
await sodium.ready;
|
||||||
|
const [existingUser] = await db
|
||||||
|
.select({ id: user.id })
|
||||||
|
.from(user)
|
||||||
|
.where(eq(user.id, USER_ID));
|
||||||
|
if (!existingUser) {
|
||||||
|
await db.insert(user).values({
|
||||||
|
id: USER_ID,
|
||||||
|
name: "Load Test User",
|
||||||
|
email: "loadtest@claudemesh.test",
|
||||||
|
emailVerified: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drop prior loadtest mesh (cascades to members).
|
||||||
|
await db.delete(mesh).where(eq(mesh.slug, MESH_SLUG));
|
||||||
|
|
||||||
|
const kpOwner = sodium.crypto_sign_keypair();
|
||||||
|
const [m] = await db
|
||||||
|
.insert(mesh)
|
||||||
|
.values({
|
||||||
|
name: "Load Test",
|
||||||
|
slug: MESH_SLUG,
|
||||||
|
ownerUserId: USER_ID,
|
||||||
|
ownerPubkey: sodium.to_hex(kpOwner.publicKey),
|
||||||
|
visibility: "private",
|
||||||
|
transport: "managed",
|
||||||
|
tier: "free",
|
||||||
|
})
|
||||||
|
.returning({ id: mesh.id });
|
||||||
|
if (!m) throw new Error("mesh insert failed");
|
||||||
|
|
||||||
|
console.error(`[seed] created mesh ${m.id} (${MESH_SLUG})`);
|
||||||
|
console.error(`[seed] generating ${PEERS} keypairs + member rows…`);
|
||||||
|
|
||||||
|
// Batch-insert 100 members.
|
||||||
|
const rows = [];
|
||||||
|
for (let i = 0; i < PEERS; i++) {
|
||||||
|
const kp = sodium.crypto_sign_keypair();
|
||||||
|
rows.push({
|
||||||
|
meshId: m.id,
|
||||||
|
userId: USER_ID,
|
||||||
|
peerPubkey: sodium.to_hex(kp.publicKey),
|
||||||
|
displayName: `peer-${i}`,
|
||||||
|
role: "member" as const,
|
||||||
|
_secretKey: sodium.to_hex(kp.privateKey),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const inserted = await db
|
||||||
|
.insert(meshMember)
|
||||||
|
.values(rows.map(({ _secretKey: _s, ...r }) => r))
|
||||||
|
.returning({ id: meshMember.id, peerPubkey: meshMember.peerPubkey });
|
||||||
|
for (let i = 0; i < inserted.length; i++) {
|
||||||
|
peers.push({
|
||||||
|
memberId: inserted[i]!.id,
|
||||||
|
pubkey: inserted[i]!.peerPubkey,
|
||||||
|
secretKey: rows[i]!._secretKey,
|
||||||
|
connected: false,
|
||||||
|
sendsInFlight: 0,
|
||||||
|
sendErrors: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.error(`[seed] ${peers.length} members inserted`);
|
||||||
|
return m.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function cleanupMesh(): Promise<void> {
|
||||||
|
// Cascade deletes members + presences + messages.
|
||||||
|
await db.delete(mesh).where(eq(mesh.slug, MESH_SLUG));
|
||||||
|
// Mop up any loadtest users' stray presence rows (belt and braces).
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- WS client logic ---
|
||||||
|
|
||||||
|
function signHello(
|
||||||
|
meshId: string,
|
||||||
|
memberId: string,
|
||||||
|
pubkey: string,
|
||||||
|
secretHex: string,
|
||||||
|
): { timestamp: number; signature: string } {
|
||||||
|
const ts = Date.now();
|
||||||
|
const canonical = `${meshId}|${memberId}|${pubkey}|${ts}`;
|
||||||
|
const sig = sodium.to_hex(
|
||||||
|
sodium.crypto_sign_detached(
|
||||||
|
sodium.from_string(canonical),
|
||||||
|
sodium.from_hex(secretHex),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
return { timestamp: ts, signature: sig };
|
||||||
|
}
|
||||||
|
|
||||||
|
function encryptDirect(
|
||||||
|
message: string,
|
||||||
|
recipientPubHex: string,
|
||||||
|
senderSecretHex: string,
|
||||||
|
): { nonce: string; ciphertext: string } {
|
||||||
|
const recipientPub = sodium.crypto_sign_ed25519_pk_to_curve25519(
|
||||||
|
sodium.from_hex(recipientPubHex),
|
||||||
|
);
|
||||||
|
const senderSec = sodium.crypto_sign_ed25519_sk_to_curve25519(
|
||||||
|
sodium.from_hex(senderSecretHex),
|
||||||
|
);
|
||||||
|
const nonce = sodium.randombytes_buf(sodium.crypto_box_NONCEBYTES);
|
||||||
|
const ciphertext = sodium.crypto_box_easy(
|
||||||
|
sodium.from_string(message),
|
||||||
|
nonce,
|
||||||
|
recipientPub,
|
||||||
|
senderSec,
|
||||||
|
);
|
||||||
|
return {
|
||||||
|
nonce: sodium.to_base64(nonce, sodium.base64_variants.ORIGINAL),
|
||||||
|
ciphertext: sodium.to_base64(ciphertext, sodium.base64_variants.ORIGINAL),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connectPeer(
|
||||||
|
idx: number,
|
||||||
|
meshId: string,
|
||||||
|
): Promise<void> {
|
||||||
|
const p = peers[idx]!;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const ws = new WebSocket(BROKER_URL);
|
||||||
|
p.ws = ws;
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
reject(new Error(`peer ${idx} hello_ack timeout`));
|
||||||
|
}, 10_000);
|
||||||
|
ws.on("open", () => {
|
||||||
|
const { timestamp, signature } = signHello(
|
||||||
|
meshId,
|
||||||
|
p.memberId,
|
||||||
|
p.pubkey,
|
||||||
|
p.secretKey,
|
||||||
|
);
|
||||||
|
ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
type: "hello",
|
||||||
|
meshId,
|
||||||
|
memberId: p.memberId,
|
||||||
|
pubkey: p.pubkey,
|
||||||
|
sessionId: `loadtest-${idx}`,
|
||||||
|
pid: process.pid,
|
||||||
|
cwd: `/tmp/loadtest-${idx}`,
|
||||||
|
timestamp,
|
||||||
|
signature,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
ws.on("message", (raw) => {
|
||||||
|
const msg = JSON.parse(raw.toString()) as Record<string, unknown>;
|
||||||
|
if (msg.type === "hello_ack") {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
p.connected = true;
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (msg.type === "ack") {
|
||||||
|
const clientId = String(msg.id ?? "");
|
||||||
|
const brokerId = String(msg.messageId ?? "");
|
||||||
|
const t = timings.get(clientId);
|
||||||
|
if (t) t.ackAt = Date.now();
|
||||||
|
// Index broker messageId → clientId so the push handler
|
||||||
|
// (below) can correlate — pushes only carry broker messageId.
|
||||||
|
if (brokerId) brokerIdToClientId.set(brokerId, clientId);
|
||||||
|
p.sendsInFlight -= 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (msg.type === "push") {
|
||||||
|
const brokerId = String(msg.messageId ?? "");
|
||||||
|
const clientId = brokerIdToClientId.get(brokerId);
|
||||||
|
if (clientId) {
|
||||||
|
const t = timings.get(clientId);
|
||||||
|
if (t && !t.pushAt) t.pushAt = Date.now();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
ws.on("error", () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
reject(new Error(`peer ${idx} ws error`));
|
||||||
|
});
|
||||||
|
ws.on("close", () => {
|
||||||
|
p.connected = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function connectAll(meshId: string): Promise<void> {
|
||||||
|
console.error(`[connect] opening ${PEERS} WS connections…`);
|
||||||
|
// Connect in batches of 20 to avoid thundering herd.
|
||||||
|
const BATCH = 20;
|
||||||
|
for (let i = 0; i < PEERS; i += BATCH) {
|
||||||
|
const batch = [];
|
||||||
|
for (let j = i; j < Math.min(i + BATCH, PEERS); j++) {
|
||||||
|
batch.push(connectPeer(j, meshId));
|
||||||
|
}
|
||||||
|
await Promise.all(batch);
|
||||||
|
await new Promise((r) => setTimeout(r, 50));
|
||||||
|
}
|
||||||
|
const connected = peers.filter((p) => p.connected).length;
|
||||||
|
console.error(`[connect] ${connected}/${PEERS} peers connected`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We need to correlate ack → push. Broker's ack carries the
|
||||||
|
// client-side id; push carries a broker-assigned messageId. We index
|
||||||
|
// timings by client-side id initially, then on ack we learn the
|
||||||
|
// broker messageId and create a second index pointing to same record.
|
||||||
|
const brokerIdToClientId = new Map<string, string>();
|
||||||
|
|
||||||
|
async function runSends(): Promise<void> {
|
||||||
|
console.error(
|
||||||
|
`[send] firing ${MSGS_PER_PEER} msgs per peer = ${TOTAL_MSGS} total…`,
|
||||||
|
);
|
||||||
|
const startedAt = Date.now();
|
||||||
|
|
||||||
|
// Each peer sends MSGS_PER_PEER msgs to random other peers.
|
||||||
|
await Promise.all(
|
||||||
|
peers.map(async (p, idx) => {
|
||||||
|
if (!p.ws || !p.connected) return;
|
||||||
|
for (let i = 0; i < MSGS_PER_PEER; i++) {
|
||||||
|
// Pick a random peer that's not self.
|
||||||
|
let targetIdx = Math.floor(Math.random() * PEERS);
|
||||||
|
if (targetIdx === idx) targetIdx = (targetIdx + 1) % PEERS;
|
||||||
|
const target = peers[targetIdx]!;
|
||||||
|
const clientId = `${idx}-${i}`;
|
||||||
|
const env = encryptDirect(
|
||||||
|
`msg-${clientId}`,
|
||||||
|
target.pubkey,
|
||||||
|
p.secretKey,
|
||||||
|
);
|
||||||
|
timings.set(clientId, {
|
||||||
|
sentAt: Date.now(),
|
||||||
|
senderIdx: idx,
|
||||||
|
recipientIdx: targetIdx,
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
p.ws.send(
|
||||||
|
JSON.stringify({
|
||||||
|
type: "send",
|
||||||
|
id: clientId,
|
||||||
|
targetSpec: target.pubkey,
|
||||||
|
priority: "now",
|
||||||
|
nonce: env.nonce,
|
||||||
|
ciphertext: env.ciphertext,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
p.sendsInFlight += 1;
|
||||||
|
} catch {
|
||||||
|
p.sendErrors += 1;
|
||||||
|
}
|
||||||
|
// Small breathing room so we don't overwhelm the ws buffer.
|
||||||
|
if (i % 100 === 0) await new Promise((r) => setTimeout(r, 1));
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const sent = Date.now() - startedAt;
|
||||||
|
console.error(`[send] all sends dispatched in ${sent}ms`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// We need broker messageId → client id correlation to measure push
|
||||||
|
// latency. Ack carries both (msg.id = clientId, msg.messageId = broker
|
||||||
|
// id). Update the ws message handler to populate the index.
|
||||||
|
// (Done inline above — we need to actually USE it.)
|
||||||
|
//
|
||||||
|
// Wire that in: on ack, brokerIdToClientId.set(messageId, clientId).
|
||||||
|
// On push, look up clientId by messageId, then record pushAt on
|
||||||
|
// timings.get(clientId).
|
||||||
|
|
||||||
|
async function waitForDrain(maxMs: number): Promise<void> {
|
||||||
|
const start = Date.now();
|
||||||
|
while (Date.now() - start < maxMs) {
|
||||||
|
const acked = [...timings.values()].filter((t) => t.ackAt).length;
|
||||||
|
const pushed = [...timings.values()].filter((t) => t.pushAt).length;
|
||||||
|
if (acked === TOTAL_MSGS && pushed === TOTAL_MSGS) return;
|
||||||
|
await new Promise((r) => setTimeout(r, 200));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Stats ---
|
||||||
|
|
||||||
|
function percentile(sorted: number[], p: number): number {
|
||||||
|
if (sorted.length === 0) return 0;
|
||||||
|
const i = Math.min(
|
||||||
|
sorted.length - 1,
|
||||||
|
Math.floor((p / 100) * sorted.length),
|
||||||
|
);
|
||||||
|
return sorted[i]!;
|
||||||
|
}
|
||||||
|
|
||||||
|
function report(): void {
|
||||||
|
const all = [...timings.values()];
|
||||||
|
const complete = all.filter((t) => t.pushAt && t.ackAt);
|
||||||
|
const timedOut = all.length - complete.length;
|
||||||
|
const latencies = complete
|
||||||
|
.map((t) => t.pushAt! - t.sentAt)
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const ackLatencies = complete
|
||||||
|
.map((t) => t.ackAt! - t.sentAt)
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
|
||||||
|
const rssMax = samples.length
|
||||||
|
? Math.max(...samples.map((s) => s.rssKb))
|
||||||
|
: null;
|
||||||
|
const rssMin = samples.length
|
||||||
|
? Math.min(...samples.map((s) => s.rssKb))
|
||||||
|
: null;
|
||||||
|
const fdMax = samples.length
|
||||||
|
? Math.max(...samples.map((s) => s.fds))
|
||||||
|
: null;
|
||||||
|
|
||||||
|
console.log("");
|
||||||
|
console.log("╔══════════════════════════════════════════════════════════╗");
|
||||||
|
console.log(`║ claudemesh broker load test — ${PEERS} peers × ${MSGS_PER_PEER} msgs ║`);
|
||||||
|
console.log("╚══════════════════════════════════════════════════════════╝");
|
||||||
|
console.log("");
|
||||||
|
console.log("Delivery:");
|
||||||
|
console.log(` sent: ${all.length}`);
|
||||||
|
console.log(` complete: ${complete.length} (${((100 * complete.length) / all.length).toFixed(2)}%)`);
|
||||||
|
console.log(` timed out: ${timedOut}`);
|
||||||
|
console.log("");
|
||||||
|
console.log("End-to-end latency (send → push):");
|
||||||
|
console.log(` p50: ${percentile(latencies, 50)} ms`);
|
||||||
|
console.log(` p95: ${percentile(latencies, 95)} ms`);
|
||||||
|
console.log(` p99: ${percentile(latencies, 99)} ms`);
|
||||||
|
console.log(` max: ${latencies[latencies.length - 1] ?? 0} ms`);
|
||||||
|
console.log("");
|
||||||
|
console.log("Send → ack latency (broker queue write):");
|
||||||
|
console.log(` p50: ${percentile(ackLatencies, 50)} ms`);
|
||||||
|
console.log(` p95: ${percentile(ackLatencies, 95)} ms`);
|
||||||
|
console.log(` p99: ${percentile(ackLatencies, 99)} ms`);
|
||||||
|
if (rssMax !== null) {
|
||||||
|
console.log("");
|
||||||
|
console.log("Broker process (via BROKER_PID):");
|
||||||
|
console.log(` RSS: ${(rssMin! / 1024).toFixed(1)} MB → ${(rssMax / 1024).toFixed(1)} MB`);
|
||||||
|
console.log(` max open FDs: ${fdMax}`);
|
||||||
|
console.log(` samples: ${samples.length}`);
|
||||||
|
}
|
||||||
|
console.log("");
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Main ---
|
||||||
|
|
||||||
|
async function main(): Promise<void> {
|
||||||
|
const meshId = await seedMesh();
|
||||||
|
startSampler();
|
||||||
|
try {
|
||||||
|
await connectAll(meshId);
|
||||||
|
await runSends();
|
||||||
|
const drainCap = parseInt(process.env.DRAIN_MS ?? "180000", 10);
|
||||||
|
console.error(`[drain] waiting for acks + pushes to settle (up to ${drainCap / 1000}s)…`);
|
||||||
|
await waitForDrain(drainCap);
|
||||||
|
report();
|
||||||
|
} finally {
|
||||||
|
stopSampler();
|
||||||
|
for (const p of peers) {
|
||||||
|
try {
|
||||||
|
p.ws?.close();
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await cleanupMesh();
|
||||||
|
}
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch((e) => {
|
||||||
|
console.error("[loadtest] error:", e);
|
||||||
|
if (e instanceof Error && e.cause) {
|
||||||
|
console.error("[loadtest] cause:", e.cause);
|
||||||
|
}
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wire ack→push correlation by sneaking the broker messageId into
|
||||||
|
// the client-side timings map. We need to edit the message handler
|
||||||
|
// inline above to record it; since the handler already reads msg.id
|
||||||
|
// for the ack path, we just ALSO use msg.id as the correlation key
|
||||||
|
// on push. The broker's push DOES echo clientId? NO — push only has
|
||||||
|
// broker's messageId. So we correlate via the ack phase: when ack
|
||||||
|
// arrives we map messageId→clientId, then on push we look it up.
|
||||||
|
// (The handler above already references this map; just uses the
|
||||||
|
// wrong variable. Fix: update handler to use brokerIdToClientId.)
|
||||||
|
void brokerIdToClientId;
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
# @claudemesh/cli
|
# claudemesh-cli
|
||||||
|
|
||||||
Client tool for claudemesh — install once per machine, join one or more
|
Client tool for claudemesh — install once per machine, join one or more
|
||||||
meshes, and your Claude Code sessions can talk to peers on demand.
|
meshes, and your Claude Code sessions can talk to peers on demand.
|
||||||
@@ -7,7 +7,7 @@ meshes, and your Claude Code sessions can talk to peers on demand.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
# From npm (once published)
|
# From npm (once published)
|
||||||
npm install -g @claudemesh/cli
|
npm install -g claudemesh-cli
|
||||||
|
|
||||||
# Or from the monorepo during dev
|
# Or from the monorepo during dev
|
||||||
cd apps/cli && bun link
|
cd apps/cli && bun link
|
||||||
@@ -25,9 +25,31 @@ Run the printed command, then restart Claude Code.
|
|||||||
## Join a mesh
|
## Join a mesh
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
claudemesh join ic://join/BASE64URL...
|
claudemesh join https://claudemesh.com/join/<token>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Launch Claude Code
|
||||||
|
|
||||||
|
For real-time **push messages** from peers (messages injected mid-turn
|
||||||
|
as `<channel source="claudemesh">` system reminders), launch with:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh launch
|
||||||
|
# or pass through any claude flags:
|
||||||
|
claudemesh launch --model opus
|
||||||
|
claudemesh launch --resume
|
||||||
|
```
|
||||||
|
|
||||||
|
Under the hood this runs:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claude --dangerously-load-development-channels server:claudemesh
|
||||||
|
```
|
||||||
|
|
||||||
|
Plain `claude` still works — the MCP tools are available — but incoming
|
||||||
|
messages are **pull-only** via the `check_messages` tool instead of
|
||||||
|
being pushed to Claude immediately.
|
||||||
|
|
||||||
The invite link is generated by whoever runs the mesh. It bundles the
|
The invite link is generated by whoever runs the mesh. It bundles the
|
||||||
mesh id, expiry, signing key, and role. Your CLI verifies it,
|
mesh id, expiry, signing key, and role. Your CLI verifies it,
|
||||||
generates a fresh keypair, enrolls you with the broker, and persists
|
generates a fresh keypair, enrolls you with the broker, and persists
|
||||||
@@ -36,8 +58,10 @@ the result to `~/.claudemesh/config.json`.
|
|||||||
## Commands
|
## Commands
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
claudemesh install # print MCP registration command
|
claudemesh install # register MCP + status hooks
|
||||||
claudemesh join <link> # join a mesh via invite link
|
claudemesh uninstall # remove MCP + status hooks
|
||||||
|
claudemesh launch [args] # launch Claude Code with push messages enabled
|
||||||
|
claudemesh join <url> # join a mesh via invite URL
|
||||||
claudemesh list # show joined meshes + identities
|
claudemesh list # show joined meshes + identities
|
||||||
claudemesh leave <slug> # leave a mesh
|
claudemesh leave <slug> # leave a mesh
|
||||||
claudemesh mcp # start MCP server (stdio — Claude Code only)
|
claudemesh mcp # start MCP server (stdio — Claude Code only)
|
||||||
|
|||||||
@@ -1,26 +1,55 @@
|
|||||||
{
|
{
|
||||||
"name": "@claudemesh/cli",
|
"name": "claudemesh-cli",
|
||||||
"version": "0.1.0",
|
"version": "0.1.3",
|
||||||
"private": true,
|
"description": "Claude Code MCP client for claudemesh — peer mesh messaging between Claude sessions.",
|
||||||
|
"keywords": [
|
||||||
|
"claude-code",
|
||||||
|
"mcp",
|
||||||
|
"model-context-protocol",
|
||||||
|
"claudemesh",
|
||||||
|
"peer-messaging",
|
||||||
|
"multi-agent"
|
||||||
|
],
|
||||||
|
"author": "Alejandro Gutiérrez",
|
||||||
|
"license": "MIT",
|
||||||
|
"homepage": "https://claudemesh.com",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/alezmad/claudemesh.git",
|
||||||
|
"directory": "apps/cli"
|
||||||
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"bin": {
|
"bin": {
|
||||||
"claudemesh": "./src/index.ts"
|
"claudemesh": "./dist/index.js"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"README.md",
|
||||||
|
"LICENSE"
|
||||||
|
],
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build": "bun build src/index.ts --target=node --outfile dist/index.js --banner \"#!/usr/bin/env node\" && chmod +x dist/index.js",
|
||||||
"clean": "git clean -xdf .cache .turbo dist node_modules",
|
"clean": "git clean -xdf .cache .turbo dist node_modules",
|
||||||
"dev": "bun --hot src/index.ts",
|
"dev": "bun --hot src/index.ts",
|
||||||
"start": "bun src/index.ts",
|
"start": "bun src/index.ts",
|
||||||
"format": "prettier --check . --ignore-path ../../.gitignore",
|
"format": "prettier --check . --ignore-path ../../.gitignore",
|
||||||
"lint": "eslint",
|
"lint": "eslint",
|
||||||
|
"prepublishOnly": "bun run build",
|
||||||
"test": "vitest run",
|
"test": "vitest run",
|
||||||
"typecheck": "tsc --noEmit"
|
"typecheck": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
"prettier": "@turbostarter/prettier-config",
|
"prettier": "@turbostarter/prettier-config",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@modelcontextprotocol/sdk": "1.27.1",
|
"@modelcontextprotocol/sdk": "1.27.1",
|
||||||
"libsodium-wrappers": "0.7.15",
|
"libsodium-wrappers": "0.7.15",
|
||||||
"ws": "8.20.0",
|
"ws": "8.20.0",
|
||||||
"zod": "catalog:"
|
"zod": "4.1.13"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@turbostarter/eslint-config": "workspace:*",
|
"@turbostarter/eslint-config": "workspace:*",
|
||||||
|
|||||||
212
apps/cli/src/commands/doctor.ts
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
/**
|
||||||
|
* `claudemesh doctor` — diagnostic checks.
|
||||||
|
*
|
||||||
|
* Walks through the install + runtime preconditions and prints each
|
||||||
|
* as pass/fail with a fix hint on failure. Exit 0 if everything
|
||||||
|
* passes, 1 otherwise.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { existsSync, readFileSync, statSync } from "node:fs";
|
||||||
|
import { homedir, platform } from "node:os";
|
||||||
|
import { join } from "node:path";
|
||||||
|
import { spawnSync } from "node:child_process";
|
||||||
|
import { loadConfig, getConfigPath } from "../state/config";
|
||||||
|
import { VERSION } from "../version";
|
||||||
|
|
||||||
|
interface Check {
|
||||||
|
name: string;
|
||||||
|
pass: boolean;
|
||||||
|
detail?: string;
|
||||||
|
fix?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkNode(): Check {
|
||||||
|
const major = Number(process.versions.node.split(".")[0]);
|
||||||
|
return {
|
||||||
|
name: "Node.js >= 20",
|
||||||
|
pass: major >= 20,
|
||||||
|
detail: `v${process.versions.node}`,
|
||||||
|
fix: "Install Node 20 or newer (https://nodejs.org)",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkClaudeOnPath(): Check {
|
||||||
|
const res =
|
||||||
|
platform() === "win32"
|
||||||
|
? spawnSync("where", ["claude"])
|
||||||
|
: spawnSync("sh", ["-c", "command -v claude"]);
|
||||||
|
const onPath = res.status === 0;
|
||||||
|
const location = onPath ? res.stdout.toString().trim().split("\n")[0] : undefined;
|
||||||
|
return {
|
||||||
|
name: "claude binary on PATH",
|
||||||
|
pass: onPath,
|
||||||
|
detail: location,
|
||||||
|
fix: "Install Claude Code (https://claude.com/claude-code)",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkMcpRegistered(): Check {
|
||||||
|
const claudeConfig = join(homedir(), ".claude.json");
|
||||||
|
if (!existsSync(claudeConfig)) {
|
||||||
|
return {
|
||||||
|
name: "claudemesh MCP registered in ~/.claude.json",
|
||||||
|
pass: false,
|
||||||
|
fix: "Run `claudemesh install`",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const cfg = JSON.parse(readFileSync(claudeConfig, "utf-8")) as {
|
||||||
|
mcpServers?: Record<string, unknown>;
|
||||||
|
};
|
||||||
|
const registered = Boolean(cfg.mcpServers?.["claudemesh"]);
|
||||||
|
return {
|
||||||
|
name: "claudemesh MCP registered in ~/.claude.json",
|
||||||
|
pass: registered,
|
||||||
|
fix: registered ? undefined : "Run `claudemesh install`",
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
name: "claudemesh MCP registered in ~/.claude.json",
|
||||||
|
pass: false,
|
||||||
|
detail: e instanceof Error ? e.message : String(e),
|
||||||
|
fix: "Check ~/.claude.json for JSON parse errors",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkHooksRegistered(): Check {
|
||||||
|
const settings = join(homedir(), ".claude", "settings.json");
|
||||||
|
if (!existsSync(settings)) {
|
||||||
|
return {
|
||||||
|
name: "Status hooks registered in ~/.claude/settings.json",
|
||||||
|
pass: false,
|
||||||
|
fix: "Run `claudemesh install` (remove --no-hooks)",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const raw = readFileSync(settings, "utf-8");
|
||||||
|
const has = raw.includes("claudemesh hook ");
|
||||||
|
return {
|
||||||
|
name: "Status hooks registered in ~/.claude/settings.json",
|
||||||
|
pass: has,
|
||||||
|
fix: has ? undefined : "Run `claudemesh install` (remove --no-hooks)",
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
name: "Status hooks registered in ~/.claude/settings.json",
|
||||||
|
pass: false,
|
||||||
|
detail: e instanceof Error ? e.message : String(e),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkConfigFile(): Check {
|
||||||
|
const path = getConfigPath();
|
||||||
|
if (!existsSync(path)) {
|
||||||
|
return {
|
||||||
|
name: "~/.claudemesh/config.json exists and parses",
|
||||||
|
pass: true,
|
||||||
|
detail: "not created yet (fine — no meshes joined)",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
loadConfig();
|
||||||
|
const st = statSync(path);
|
||||||
|
const mode = (st.mode & 0o777).toString(8);
|
||||||
|
const secure = platform() === "win32" || mode === "600";
|
||||||
|
return {
|
||||||
|
name: "~/.claudemesh/config.json parses + chmod 0600",
|
||||||
|
pass: secure,
|
||||||
|
detail: platform() === "win32" ? "chmod skipped on Windows" : `0${mode}`,
|
||||||
|
fix: secure ? undefined : `chmod 600 ${path}`,
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
name: "~/.claudemesh/config.json exists and parses",
|
||||||
|
pass: false,
|
||||||
|
detail: e instanceof Error ? e.message : String(e),
|
||||||
|
fix: "Inspect or delete ~/.claudemesh/config.json and re-join",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkKeypairs(): Check {
|
||||||
|
try {
|
||||||
|
const cfg = loadConfig();
|
||||||
|
if (cfg.meshes.length === 0) {
|
||||||
|
return {
|
||||||
|
name: "Mesh keypairs valid",
|
||||||
|
pass: true,
|
||||||
|
detail: "no meshes joined",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
for (const m of cfg.meshes) {
|
||||||
|
if (m.pubkey.length !== 64 || !/^[0-9a-f]+$/.test(m.pubkey)) {
|
||||||
|
return {
|
||||||
|
name: "Mesh keypairs valid",
|
||||||
|
pass: false,
|
||||||
|
detail: `${m.slug}: pubkey malformed`,
|
||||||
|
fix: `Leave + re-join the mesh: claudemesh leave ${m.slug}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (m.secretKey.length !== 128 || !/^[0-9a-f]+$/.test(m.secretKey)) {
|
||||||
|
return {
|
||||||
|
name: "Mesh keypairs valid",
|
||||||
|
pass: false,
|
||||||
|
detail: `${m.slug}: secret key malformed`,
|
||||||
|
fix: `Leave + re-join the mesh: claudemesh leave ${m.slug}`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
name: "Mesh keypairs valid",
|
||||||
|
pass: true,
|
||||||
|
detail: `${cfg.meshes.length} mesh(es)`,
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
return {
|
||||||
|
name: "Mesh keypairs valid",
|
||||||
|
pass: false,
|
||||||
|
detail: e instanceof Error ? e.message : String(e),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function runDoctor(): Promise<void> {
|
||||||
|
const useColor =
|
||||||
|
!process.env.NO_COLOR && process.env.TERM !== "dumb" && process.stdout.isTTY;
|
||||||
|
const dim = (s: string): string => (useColor ? `\x1b[2m${s}\x1b[22m` : s);
|
||||||
|
const green = (s: string): string => (useColor ? `\x1b[32m${s}\x1b[39m` : s);
|
||||||
|
const red = (s: string): string => (useColor ? `\x1b[31m${s}\x1b[39m` : s);
|
||||||
|
|
||||||
|
console.log(`claudemesh doctor (v${VERSION})`);
|
||||||
|
console.log("─".repeat(60));
|
||||||
|
|
||||||
|
const checks: Check[] = [
|
||||||
|
checkNode(),
|
||||||
|
checkClaudeOnPath(),
|
||||||
|
checkMcpRegistered(),
|
||||||
|
checkHooksRegistered(),
|
||||||
|
checkConfigFile(),
|
||||||
|
checkKeypairs(),
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const c of checks) {
|
||||||
|
const mark = c.pass ? green("✓") : red("✗");
|
||||||
|
const detail = c.detail ? dim(` (${c.detail})`) : "";
|
||||||
|
console.log(`${mark} ${c.name}${detail}`);
|
||||||
|
if (!c.pass && c.fix) {
|
||||||
|
console.log(dim(` → ${c.fix}`));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const failing = checks.filter((c) => !c.pass);
|
||||||
|
console.log("");
|
||||||
|
if (failing.length === 0) {
|
||||||
|
console.log(green("All checks passed."));
|
||||||
|
process.exit(0);
|
||||||
|
} else {
|
||||||
|
console.log(red(`${failing.length} check(s) failed.`));
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
123
apps/cli/src/commands/hook.ts
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
/**
|
||||||
|
* `claudemesh hook <status>` — Claude Code hook handler.
|
||||||
|
*
|
||||||
|
* Registered as a Stop + UserPromptSubmit hook by `claudemesh install`.
|
||||||
|
* On each turn boundary, Claude Code invokes:
|
||||||
|
*
|
||||||
|
* Stop → `claudemesh hook idle`
|
||||||
|
* UserPromptSubmit → `claudemesh hook working`
|
||||||
|
*
|
||||||
|
* We read the Claude Code hook JSON payload from stdin (contains cwd +
|
||||||
|
* session_id), then POST `/hook/set-status` to EVERY joined mesh's
|
||||||
|
* broker with {cwd, pid, status, session_id}. Each broker looks up
|
||||||
|
* its local presence row by (pid, cwd) and updates status.
|
||||||
|
*
|
||||||
|
* Fire-and-forget, silent. Hooks must NEVER block Claude Code or
|
||||||
|
* surface errors to the user. Debug logging available via
|
||||||
|
* CLAUDEMESH_HOOK_DEBUG=1.
|
||||||
|
*
|
||||||
|
* Why send to every broker? A user joined to multiple meshes has
|
||||||
|
* one presence row per mesh, each on its own broker. A turn boundary
|
||||||
|
* updates the status on every broker where this session is active.
|
||||||
|
* Brokers that don't have a matching presence just queue the signal
|
||||||
|
* in pending_status (harmless, TTL-swept).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { loadConfig } from "../state/config";
|
||||||
|
|
||||||
|
const DEBUG = process.env.CLAUDEMESH_HOOK_DEBUG === "1";
|
||||||
|
|
||||||
|
function debug(msg: string): void {
|
||||||
|
if (DEBUG) console.error(`[claudemesh-hook] ${msg}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** WS URL → HTTP URL (same host, swap scheme). */
|
||||||
|
function wsToHttp(wsUrl: string): string {
|
||||||
|
try {
|
||||||
|
const u = new URL(wsUrl);
|
||||||
|
const httpScheme = u.protocol === "wss:" ? "https:" : "http:";
|
||||||
|
return `${httpScheme}//${u.host}`;
|
||||||
|
} catch {
|
||||||
|
return wsUrl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function readStdinJson(): Promise<Record<string, unknown>> {
|
||||||
|
if (process.stdin.isTTY) return {};
|
||||||
|
const chunks: Uint8Array[] = [];
|
||||||
|
const reader = process.stdin;
|
||||||
|
try {
|
||||||
|
for await (const chunk of reader) {
|
||||||
|
chunks.push(chunk as Uint8Array);
|
||||||
|
if (chunks.reduce((n, c) => n + c.length, 0) > 256 * 1024) break;
|
||||||
|
}
|
||||||
|
const raw = Buffer.concat(chunks).toString("utf-8").trim();
|
||||||
|
if (!raw) return {};
|
||||||
|
return JSON.parse(raw) as Record<string, unknown>;
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function postHook(
|
||||||
|
brokerWsUrl: string,
|
||||||
|
body: Record<string, unknown>,
|
||||||
|
): Promise<void> {
|
||||||
|
const base = wsToHttp(brokerWsUrl);
|
||||||
|
try {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const t = setTimeout(() => controller.abort(), 1000);
|
||||||
|
await fetch(`${base}/hook/set-status`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
signal: controller.signal,
|
||||||
|
}).finally(() => clearTimeout(t));
|
||||||
|
} catch (e) {
|
||||||
|
debug(`post failed ${base}: ${e instanceof Error ? e.message : e}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function runHook(args: string[]): Promise<void> {
|
||||||
|
const status = args[0];
|
||||||
|
if (!status || !["idle", "working", "dnd"].includes(status)) {
|
||||||
|
// Silent no-op — we never want a hook to surface an error.
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read Claude Code's stdin payload for cwd + session_id.
|
||||||
|
const stdinTimeout = new Promise<Record<string, unknown>>((r) =>
|
||||||
|
setTimeout(() => r({}), 500),
|
||||||
|
);
|
||||||
|
const payload = await Promise.race([readStdinJson(), stdinTimeout]);
|
||||||
|
const cwd =
|
||||||
|
(typeof payload.cwd === "string" && payload.cwd) ||
|
||||||
|
process.env.CLAUDE_PROJECT_DIR ||
|
||||||
|
process.cwd();
|
||||||
|
const sessionId =
|
||||||
|
(typeof payload.session_id === "string" && payload.session_id) || "";
|
||||||
|
|
||||||
|
// Fan out to EVERY joined mesh's broker in parallel.
|
||||||
|
let config;
|
||||||
|
try {
|
||||||
|
config = loadConfig();
|
||||||
|
} catch (e) {
|
||||||
|
debug(`config load failed: ${e instanceof Error ? e.message : e}`);
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
if (config.meshes.length === 0) {
|
||||||
|
debug("no joined meshes, nothing to do");
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = { cwd, pid: process.ppid, status, session_id: sessionId };
|
||||||
|
debug(
|
||||||
|
`status=${status} cwd=${cwd} meshes=${config.meshes.length} session=${sessionId.slice(0, 8)}`,
|
||||||
|
);
|
||||||
|
|
||||||
|
// Dedupe by brokerUrl — if multiple meshes share a broker, one POST
|
||||||
|
// covers them (broker resolves presence by cwd+pid regardless).
|
||||||
|
const brokerUrls = [...new Set(config.meshes.map((m) => m.brokerUrl))];
|
||||||
|
await Promise.all(brokerUrls.map((url) => postHook(url, body)));
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
@@ -1,36 +1,361 @@
|
|||||||
/**
|
/**
|
||||||
* `claudemesh install` — print Claude Code MCP registration instructions.
|
* `claudemesh install` / `uninstall` — manage Claude Code MCP registration.
|
||||||
*
|
*
|
||||||
* In the v1 flow, users copy-paste a `claude mcp add ...` command.
|
* install:
|
||||||
* Later we'll auto-write the MCP entry to ~/.claude.json and hooks
|
* 1. Preflight: bun is on PATH, this package's MCP entry is on disk.
|
||||||
* to ~/.claude/settings.json (mirroring claude-intercom's installer).
|
* 2. Read ~/.claude.json (or empty object if absent).
|
||||||
|
* 3. Add/update `mcpServers.claudemesh` with the resolved entry path.
|
||||||
|
* 4. Write back with 0600 perms.
|
||||||
|
* 5. Verify via read-back, print success.
|
||||||
|
*
|
||||||
|
* uninstall:
|
||||||
|
* 1. Read ~/.claude.json (bail if missing).
|
||||||
|
* 2. Delete `mcpServers.claudemesh` if present.
|
||||||
|
* 3. Write back.
|
||||||
|
*
|
||||||
|
* Both are idempotent — re-running install is a no-op if the entry is
|
||||||
|
* already correct, and uninstall is a no-op if no entry exists.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import {
|
||||||
|
chmodSync,
|
||||||
|
existsSync,
|
||||||
|
mkdirSync,
|
||||||
|
readFileSync,
|
||||||
|
writeFileSync,
|
||||||
|
} from "node:fs";
|
||||||
|
import { homedir, platform } from "node:os";
|
||||||
|
import { dirname, join, resolve } from "node:path";
|
||||||
import { fileURLToPath } from "node:url";
|
import { fileURLToPath } from "node:url";
|
||||||
import { dirname, resolve } from "node:path";
|
import { spawnSync } from "node:child_process";
|
||||||
|
|
||||||
export function runInstall(): void {
|
const MCP_NAME = "claudemesh";
|
||||||
// Resolve the path to this package's own index.ts so the generated
|
const CLAUDE_CONFIG = join(homedir(), ".claude.json");
|
||||||
// command points at the right binary even when installed globally.
|
const CLAUDE_SETTINGS = join(homedir(), ".claude", "settings.json");
|
||||||
|
const HOOK_COMMAND_STOP = "claudemesh hook idle";
|
||||||
|
const HOOK_COMMAND_USER_PROMPT = "claudemesh hook working";
|
||||||
|
const HOOK_MARKER = "claudemesh hook ";
|
||||||
|
|
||||||
|
type McpEntry = {
|
||||||
|
command: string;
|
||||||
|
args?: string[];
|
||||||
|
env?: Record<string, string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface HookCommand {
|
||||||
|
type: "command";
|
||||||
|
command: string;
|
||||||
|
}
|
||||||
|
interface HookMatcher {
|
||||||
|
matcher?: string;
|
||||||
|
hooks: HookCommand[];
|
||||||
|
}
|
||||||
|
type HooksConfig = Record<string, HookMatcher[]>;
|
||||||
|
|
||||||
|
function readClaudeConfig(): Record<string, unknown> {
|
||||||
|
if (!existsSync(CLAUDE_CONFIG)) return {};
|
||||||
|
const text = readFileSync(CLAUDE_CONFIG, "utf-8").trim();
|
||||||
|
if (!text) return {};
|
||||||
|
try {
|
||||||
|
return JSON.parse(text) as Record<string, unknown>;
|
||||||
|
} catch (e) {
|
||||||
|
throw new Error(
|
||||||
|
`failed to parse ${CLAUDE_CONFIG}: ${e instanceof Error ? e.message : String(e)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeClaudeConfig(obj: Record<string, unknown>): void {
|
||||||
|
mkdirSync(dirname(CLAUDE_CONFIG), { recursive: true });
|
||||||
|
writeFileSync(
|
||||||
|
CLAUDE_CONFIG,
|
||||||
|
JSON.stringify(obj, null, 2) + "\n",
|
||||||
|
"utf-8",
|
||||||
|
);
|
||||||
|
try {
|
||||||
|
chmodSync(CLAUDE_CONFIG, 0o600);
|
||||||
|
} catch {
|
||||||
|
/* windows has no chmod */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Check `bun` is on PATH — OS-agnostic, node:child_process. */
|
||||||
|
function bunAvailable(): boolean {
|
||||||
|
const res =
|
||||||
|
platform() === "win32"
|
||||||
|
? spawnSync("where", ["bun"])
|
||||||
|
: spawnSync("sh", ["-c", "command -v bun"]);
|
||||||
|
return res.status === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Absolute path to this CLI's entry file. */
|
||||||
|
function resolveEntry(): string {
|
||||||
const here = fileURLToPath(import.meta.url);
|
const here = fileURLToPath(import.meta.url);
|
||||||
const entry = resolve(dirname(here), "..", "index.ts");
|
// When bundled (dist/index.js), this file IS the entry → return self.
|
||||||
|
// When running from source (src/index.ts via bun), walk up to the
|
||||||
|
// dir + resolve index.ts.
|
||||||
|
if (here.endsWith("/dist/index.js") || here.endsWith("\\dist\\index.js")) {
|
||||||
|
return here;
|
||||||
|
}
|
||||||
|
return resolve(dirname(here), "..", "index.ts");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build the MCP server entry for Claude Code's config.
|
||||||
|
*
|
||||||
|
* Two modes:
|
||||||
|
* - Installed globally (npm i -g claudemesh-cli): use `claudemesh`
|
||||||
|
* as the command, relies on it being on PATH.
|
||||||
|
* - Local dev (bun apps/cli/src/index.ts): use `bun <absolute-path>`.
|
||||||
|
*/
|
||||||
|
function buildMcpEntry(entryPath: string): McpEntry {
|
||||||
|
const isBundled = entryPath.endsWith("/dist/index.js") ||
|
||||||
|
entryPath.endsWith("\\dist\\index.js");
|
||||||
|
if (isBundled) {
|
||||||
|
return {
|
||||||
|
command: "claudemesh",
|
||||||
|
args: ["mcp"],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
command: "bun",
|
||||||
|
args: [entryPath, "mcp"],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function entriesEqual(a: McpEntry, b: McpEntry): boolean {
|
||||||
|
return (
|
||||||
|
a.command === b.command &&
|
||||||
|
JSON.stringify(a.args ?? []) === JSON.stringify(b.args ?? [])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function readClaudeSettings(): Record<string, unknown> {
|
||||||
|
if (!existsSync(CLAUDE_SETTINGS)) return {};
|
||||||
|
const text = readFileSync(CLAUDE_SETTINGS, "utf-8").trim();
|
||||||
|
if (!text) return {};
|
||||||
|
try {
|
||||||
|
return JSON.parse(text) as Record<string, unknown>;
|
||||||
|
} catch (e) {
|
||||||
|
throw new Error(
|
||||||
|
`failed to parse ${CLAUDE_SETTINGS}: ${e instanceof Error ? e.message : String(e)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeClaudeSettings(obj: Record<string, unknown>): void {
|
||||||
|
mkdirSync(dirname(CLAUDE_SETTINGS), { recursive: true });
|
||||||
|
writeFileSync(
|
||||||
|
CLAUDE_SETTINGS,
|
||||||
|
JSON.stringify(obj, null, 2) + "\n",
|
||||||
|
"utf-8",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a Stop + UserPromptSubmit hook entry to ~/.claude/settings.json,
|
||||||
|
* idempotent on the command string. Returns counts for reporting.
|
||||||
|
*/
|
||||||
|
function installHooks(): { added: number; unchanged: number } {
|
||||||
|
const settings = readClaudeSettings();
|
||||||
|
const hooks = ((settings.hooks ??= {}) as HooksConfig) ?? {};
|
||||||
|
let added = 0;
|
||||||
|
let unchanged = 0;
|
||||||
|
|
||||||
|
const ensure = (event: string, command: string): void => {
|
||||||
|
const list = (hooks[event] ??= []);
|
||||||
|
const alreadyPresent = list.some((entry) =>
|
||||||
|
(entry.hooks ?? []).some((h) => h.command === command),
|
||||||
|
);
|
||||||
|
if (alreadyPresent) {
|
||||||
|
unchanged += 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
list.push({ hooks: [{ type: "command", command }] });
|
||||||
|
added += 1;
|
||||||
|
};
|
||||||
|
ensure("Stop", HOOK_COMMAND_STOP);
|
||||||
|
ensure("UserPromptSubmit", HOOK_COMMAND_USER_PROMPT);
|
||||||
|
|
||||||
|
settings.hooks = hooks;
|
||||||
|
writeClaudeSettings(settings);
|
||||||
|
return { added, unchanged };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove every hook entry whose command contains "claudemesh hook "
|
||||||
|
* from ~/.claude/settings.json. Idempotent. Returns removed count.
|
||||||
|
*/
|
||||||
|
function uninstallHooks(): number {
|
||||||
|
if (!existsSync(CLAUDE_SETTINGS)) return 0;
|
||||||
|
const settings = readClaudeSettings();
|
||||||
|
const hooks = settings.hooks as HooksConfig | undefined;
|
||||||
|
if (!hooks) return 0;
|
||||||
|
let removed = 0;
|
||||||
|
for (const event of Object.keys(hooks)) {
|
||||||
|
const kept: HookMatcher[] = [];
|
||||||
|
for (const entry of hooks[event] ?? []) {
|
||||||
|
const filtered = (entry.hooks ?? []).filter(
|
||||||
|
(h) => !(h.command ?? "").includes(HOOK_MARKER),
|
||||||
|
);
|
||||||
|
removed += (entry.hooks ?? []).length - filtered.length;
|
||||||
|
if (filtered.length > 0) kept.push({ ...entry, hooks: filtered });
|
||||||
|
}
|
||||||
|
if (kept.length === 0) delete hooks[event];
|
||||||
|
else hooks[event] = kept;
|
||||||
|
}
|
||||||
|
settings.hooks = hooks;
|
||||||
|
writeClaudeSettings(settings);
|
||||||
|
return removed;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function runInstall(args: string[] = []): void {
|
||||||
|
const skipHooks = args.includes("--no-hooks");
|
||||||
|
console.log("claudemesh install");
|
||||||
|
console.log("------------------");
|
||||||
|
|
||||||
|
const entry = resolveEntry();
|
||||||
|
const isBundled = entry.endsWith("/dist/index.js") ||
|
||||||
|
entry.endsWith("\\dist\\index.js");
|
||||||
|
|
||||||
|
// Dev mode (running from src/) requires bun on PATH; bundled mode
|
||||||
|
// (npm install -g) just uses node + the claudemesh bin shim.
|
||||||
|
if (!isBundled && !bunAvailable()) {
|
||||||
|
console.error(
|
||||||
|
"✗ `bun` is not on PATH. Install Bun first: https://bun.com",
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
if (!existsSync(entry)) {
|
||||||
|
console.error(`✗ MCP entry not found at ${entry}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cfg = readClaudeConfig();
|
||||||
|
const servers =
|
||||||
|
((cfg.mcpServers ??= {}) as Record<string, McpEntry>) ?? {};
|
||||||
|
const desired = buildMcpEntry(entry);
|
||||||
|
const existing = servers[MCP_NAME];
|
||||||
|
let action: "added" | "updated" | "unchanged";
|
||||||
|
if (!existing) {
|
||||||
|
servers[MCP_NAME] = desired;
|
||||||
|
action = "added";
|
||||||
|
} else if (entriesEqual(existing, desired)) {
|
||||||
|
action = "unchanged";
|
||||||
|
} else {
|
||||||
|
servers[MCP_NAME] = desired;
|
||||||
|
action = "updated";
|
||||||
|
}
|
||||||
|
cfg.mcpServers = servers;
|
||||||
|
|
||||||
|
writeClaudeConfig(cfg);
|
||||||
|
|
||||||
|
// Read-back verification.
|
||||||
|
const verify = readClaudeConfig();
|
||||||
|
const verifyServers = (verify.mcpServers ?? {}) as Record<string, McpEntry>;
|
||||||
|
const stored = verifyServers[MCP_NAME];
|
||||||
|
if (!stored || !entriesEqual(stored, desired)) {
|
||||||
|
console.error(
|
||||||
|
`✗ post-write verification failed — ${CLAUDE_CONFIG} may be corrupt`,
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ANSI color helpers — stick to 8-color set so terminals without
|
||||||
|
// truecolor still render. Fall back to plain if NO_COLOR or dumb TERM.
|
||||||
|
const useColor =
|
||||||
|
!process.env.NO_COLOR && process.env.TERM !== "dumb" && process.stdout.isTTY;
|
||||||
|
const bold = (s: string) => (useColor ? `\x1b[1m${s}\x1b[22m` : s);
|
||||||
|
const yellow = (s: string) => (useColor ? `\x1b[33m${s}\x1b[39m` : s);
|
||||||
|
const dim = (s: string) => (useColor ? `\x1b[2m${s}\x1b[22m` : s);
|
||||||
|
|
||||||
|
console.log(`✓ MCP server "${MCP_NAME}" ${action}`);
|
||||||
|
console.log(dim(` config: ${CLAUDE_CONFIG}`));
|
||||||
|
console.log(
|
||||||
|
dim(
|
||||||
|
` command: ${desired.command}${desired.args?.length ? " " + desired.args.join(" ") : ""}`,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Hooks — status accuracy (Stop/UserPromptSubmit → POST /hook/set-status).
|
||||||
|
if (!skipHooks) {
|
||||||
|
try {
|
||||||
|
const { added, unchanged } = installHooks();
|
||||||
|
if (added > 0) {
|
||||||
|
console.log(
|
||||||
|
`✓ Hooks registered (Stop + UserPromptSubmit) → ${added} added, ${unchanged} already present`,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.log(`✓ Hooks already registered (${unchanged} present)`);
|
||||||
|
}
|
||||||
|
console.log(dim(` config: ${CLAUDE_SETTINGS}`));
|
||||||
|
} catch (e) {
|
||||||
|
console.error(
|
||||||
|
`⚠ hook registration failed: ${e instanceof Error ? e.message : String(e)}`,
|
||||||
|
);
|
||||||
|
console.error(
|
||||||
|
" (MCP is still installed — hooks just skip. Retry with --no-hooks to suppress.)",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(dim("· Hooks skipped (--no-hooks)"));
|
||||||
|
}
|
||||||
|
|
||||||
console.log("claudemesh — MCP registration");
|
|
||||||
console.log("------------------------------");
|
|
||||||
console.log("");
|
console.log("");
|
||||||
console.log("Register the MCP server with Claude Code:");
|
console.log(yellow(bold("⚠ RESTART CLAUDE CODE")) + yellow(" for MCP tools to appear."));
|
||||||
console.log("");
|
|
||||||
console.log(` claude mcp add claudemesh --scope user -- bun ${entry} mcp`);
|
|
||||||
console.log("");
|
|
||||||
console.log("Or if installed globally:");
|
|
||||||
console.log("");
|
|
||||||
console.log(` claude mcp add claudemesh --scope user -- claudemesh mcp`);
|
|
||||||
console.log("");
|
console.log("");
|
||||||
console.log(
|
console.log(
|
||||||
"After registering, restart Claude Code. Then join a mesh with:",
|
`Next: ${bold("claudemesh join https://claudemesh.com/join/<token>")}`,
|
||||||
);
|
);
|
||||||
console.log("");
|
console.log("");
|
||||||
console.log(" claudemesh join <invite-link>");
|
console.log(
|
||||||
console.log("");
|
yellow("⚠ For real-time push messages from peers, launch with:"),
|
||||||
console.log("(Auto-install of hooks + MCP entry will ship in a later step.)");
|
);
|
||||||
|
console.log(
|
||||||
|
` ${bold("claudemesh launch")}` +
|
||||||
|
dim(" (or: claude --dangerously-load-development-channels server:claudemesh)"),
|
||||||
|
);
|
||||||
|
console.log(
|
||||||
|
dim(" Plain `claude` still works — messages are then pull-only via check_messages."),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function runUninstall(): void {
|
||||||
|
console.log("claudemesh uninstall");
|
||||||
|
console.log("--------------------");
|
||||||
|
|
||||||
|
// MCP entry
|
||||||
|
if (existsSync(CLAUDE_CONFIG)) {
|
||||||
|
const cfg = readClaudeConfig();
|
||||||
|
const servers = cfg.mcpServers as
|
||||||
|
| Record<string, McpEntry>
|
||||||
|
| undefined;
|
||||||
|
if (servers && MCP_NAME in servers) {
|
||||||
|
delete servers[MCP_NAME];
|
||||||
|
cfg.mcpServers = servers;
|
||||||
|
writeClaudeConfig(cfg);
|
||||||
|
console.log(`✓ MCP server "${MCP_NAME}" removed`);
|
||||||
|
} else {
|
||||||
|
console.log(`· MCP server "${MCP_NAME}" not present`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log(`· no ${CLAUDE_CONFIG} — MCP entry skipped`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
try {
|
||||||
|
const removed = uninstallHooks();
|
||||||
|
if (removed > 0) {
|
||||||
|
console.log(`✓ Hooks removed (${removed} entries)`);
|
||||||
|
} else {
|
||||||
|
console.log("· No claudemesh hooks to remove");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(
|
||||||
|
`⚠ hook removal failed: ${e instanceof Error ? e.message : String(e)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("");
|
||||||
|
console.log("Restart Claude Code to drop the MCP connection + hooks.");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,9 +19,11 @@ import { hostname } from "node:os";
|
|||||||
export async function runJoin(args: string[]): Promise<void> {
|
export async function runJoin(args: string[]): Promise<void> {
|
||||||
const link = args[0];
|
const link = args[0];
|
||||||
if (!link) {
|
if (!link) {
|
||||||
console.error("Usage: claudemesh join <invite-link>");
|
console.error("Usage: claudemesh join <invite-url-or-token>");
|
||||||
console.error("");
|
console.error("");
|
||||||
console.error("Example: claudemesh join ic://join/eyJ2IjoxLC4uLn0");
|
console.error(
|
||||||
|
"Example: claudemesh join https://claudemesh.com/join/eyJ2IjoxLC4uLn0",
|
||||||
|
);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
94
apps/cli/src/commands/launch.ts
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* `claudemesh launch` — spawn `claude` with the dev-channel flag so the
|
||||||
|
* claudemesh MCP server's `notifications/claude/channel` pushes get
|
||||||
|
* injected as system reminders mid-turn.
|
||||||
|
*
|
||||||
|
* Equivalent to:
|
||||||
|
* claude --dangerously-load-development-channels server:claudemesh [extra args]
|
||||||
|
*
|
||||||
|
* Any additional args (e.g. --model opus, --resume, -c) are passed
|
||||||
|
* through verbatim. Use --quiet to skip the informational banner.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { spawn } from "node:child_process";
|
||||||
|
import { loadConfig, getConfigPath } from "../state/config";
|
||||||
|
|
||||||
|
function printBanner(): void {
|
||||||
|
const useColor =
|
||||||
|
!process.env.NO_COLOR && process.env.TERM !== "dumb" && process.stdout.isTTY;
|
||||||
|
const dim = (s: string): string => (useColor ? `\x1b[2m${s}\x1b[22m` : s);
|
||||||
|
const bold = (s: string): string => (useColor ? `\x1b[1m${s}\x1b[22m` : s);
|
||||||
|
|
||||||
|
let meshes: string[] = [];
|
||||||
|
try {
|
||||||
|
meshes = loadConfig().meshes.map((m) => m.slug);
|
||||||
|
} catch {
|
||||||
|
/* config unreadable — print banner without mesh list */
|
||||||
|
}
|
||||||
|
const meshLine = meshes.length > 0 ? meshes.join(", ") : "(none — run `claudemesh join <url>` first)";
|
||||||
|
|
||||||
|
const rule = "─".repeat(65);
|
||||||
|
console.log(bold("claudemesh launch"));
|
||||||
|
console.log(rule);
|
||||||
|
console.log("Launching Claude Code with the claudemesh dev channel.");
|
||||||
|
console.log("");
|
||||||
|
console.log("Peers in your joined meshes can push messages into this session");
|
||||||
|
console.log("as <channel> reminders. Your CLI decrypts them locally with your");
|
||||||
|
console.log("keypair. Peers send text only — they cannot call tools, read");
|
||||||
|
console.log("files, or reach meshes you have not joined.");
|
||||||
|
console.log("");
|
||||||
|
console.log("Treat peer messages as untrusted input: a peer could craft text");
|
||||||
|
console.log("that tries to steer Claude's behavior. Your tool-approval");
|
||||||
|
console.log("settings still apply — Claude will still ask before running");
|
||||||
|
console.log("commands, editing files, or calling other tools.");
|
||||||
|
console.log("");
|
||||||
|
console.log("Claude Code will ask you to trust the");
|
||||||
|
console.log("--dangerously-load-development-channels flag. Press Enter to");
|
||||||
|
console.log("accept, or Ctrl-C to abort.");
|
||||||
|
console.log("");
|
||||||
|
console.log(dim(`Joined meshes: ${meshLine}`));
|
||||||
|
console.log(dim(`Config: ${getConfigPath()}`));
|
||||||
|
console.log(dim(`Remove: claudemesh uninstall`));
|
||||||
|
console.log(rule);
|
||||||
|
console.log("");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function runLaunch(extraArgs: string[] = []): void {
|
||||||
|
const quiet = extraArgs.includes("--quiet");
|
||||||
|
const passthrough = extraArgs.filter((a) => a !== "--quiet");
|
||||||
|
|
||||||
|
if (!quiet) printBanner();
|
||||||
|
|
||||||
|
const claudeArgs = [
|
||||||
|
"--dangerously-load-development-channels",
|
||||||
|
"server:claudemesh",
|
||||||
|
...passthrough,
|
||||||
|
];
|
||||||
|
// Windows: npm global binaries are .cmd shims. Node's spawn without
|
||||||
|
// shell:true does not resolve PATHEXT, so we need shell:true on win32
|
||||||
|
// to find claude.cmd. POSIX stays shell-less to avoid quoting surprises.
|
||||||
|
const isWindows = process.platform === "win32";
|
||||||
|
const child = spawn("claude", claudeArgs, {
|
||||||
|
stdio: "inherit",
|
||||||
|
shell: isWindows,
|
||||||
|
});
|
||||||
|
|
||||||
|
child.on("error", (err: NodeJS.ErrnoException) => {
|
||||||
|
if (err.code === "ENOENT") {
|
||||||
|
console.error(
|
||||||
|
"✗ `claude` not found on PATH. Install Claude Code first: https://claude.com/claude-code",
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.error(`✗ failed to launch claude: ${err.message}`);
|
||||||
|
}
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
child.on("exit", (code, signal) => {
|
||||||
|
if (signal) {
|
||||||
|
process.kill(process.pid, signal);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
process.exit(code ?? 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -9,7 +9,9 @@ export function runList(): void {
|
|||||||
if (config.meshes.length === 0) {
|
if (config.meshes.length === 0) {
|
||||||
console.log("No meshes joined yet.");
|
console.log("No meshes joined yet.");
|
||||||
console.log("");
|
console.log("");
|
||||||
console.log("Join one with: claudemesh join <invite-link>");
|
console.log(
|
||||||
|
"Join one with: claudemesh join https://claudemesh.com/join/<token>",
|
||||||
|
);
|
||||||
console.log(`Config file: ${getConfigPath()}`);
|
console.log(`Config file: ${getConfigPath()}`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
103
apps/cli/src/commands/status.ts
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
/**
|
||||||
|
* `claudemesh status` — one-shot health report.
|
||||||
|
*
|
||||||
|
* Reports CLI version, config path + permissions, each joined mesh
|
||||||
|
* with broker reachability (WS handshake probe). Exit 0 if every
|
||||||
|
* mesh's broker is reachable, 1 otherwise.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { statSync, existsSync } from "node:fs";
|
||||||
|
import WebSocket from "ws";
|
||||||
|
import { loadConfig, getConfigPath } from "../state/config";
|
||||||
|
import { VERSION } from "../version";
|
||||||
|
|
||||||
|
interface MeshStatus {
|
||||||
|
slug: string;
|
||||||
|
brokerUrl: string;
|
||||||
|
pubkey: string;
|
||||||
|
reachable: boolean;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function probeBroker(url: string, timeoutMs = 4000): Promise<{ ok: boolean; error?: string }> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const ws = new WebSocket(url);
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
try { ws.terminate(); } catch { /* noop */ }
|
||||||
|
resolve({ ok: false, error: "timeout" });
|
||||||
|
}, timeoutMs);
|
||||||
|
ws.on("open", () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
try { ws.close(); } catch { /* noop */ }
|
||||||
|
resolve({ ok: true });
|
||||||
|
});
|
||||||
|
ws.on("error", (err) => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
resolve({ ok: false, error: err.message });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function runStatus(): Promise<void> {
|
||||||
|
const useColor =
|
||||||
|
!process.env.NO_COLOR && process.env.TERM !== "dumb" && process.stdout.isTTY;
|
||||||
|
const dim = (s: string): string => (useColor ? `\x1b[2m${s}\x1b[22m` : s);
|
||||||
|
const green = (s: string): string => (useColor ? `\x1b[32m${s}\x1b[39m` : s);
|
||||||
|
const red = (s: string): string => (useColor ? `\x1b[31m${s}\x1b[39m` : s);
|
||||||
|
|
||||||
|
console.log(`claudemesh status (v${VERSION})`);
|
||||||
|
console.log("─".repeat(60));
|
||||||
|
|
||||||
|
const configPath = getConfigPath();
|
||||||
|
let configPerms = "missing";
|
||||||
|
if (existsSync(configPath)) {
|
||||||
|
const st = statSync(configPath);
|
||||||
|
const mode = (st.mode & 0o777).toString(8).padStart(4, "0");
|
||||||
|
configPerms = mode === "0600" ? `${mode} ✓` : `${mode} ⚠ (expected 0600)`;
|
||||||
|
}
|
||||||
|
console.log(`Config: ${configPath} (${configPerms})`);
|
||||||
|
|
||||||
|
const config = loadConfig();
|
||||||
|
if (config.meshes.length === 0) {
|
||||||
|
console.log("");
|
||||||
|
console.log(dim("No meshes joined. Run `claudemesh join <invite-url>` to get started."));
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("");
|
||||||
|
console.log(`Meshes (${config.meshes.length}):`);
|
||||||
|
|
||||||
|
const results: MeshStatus[] = [];
|
||||||
|
for (const m of config.meshes) {
|
||||||
|
process.stdout.write(` ${m.slug.padEnd(20)} probing ${m.brokerUrl}… `);
|
||||||
|
const probe = await probeBroker(m.brokerUrl);
|
||||||
|
results.push({
|
||||||
|
slug: m.slug,
|
||||||
|
brokerUrl: m.brokerUrl,
|
||||||
|
pubkey: m.pubkey,
|
||||||
|
reachable: probe.ok,
|
||||||
|
error: probe.error,
|
||||||
|
});
|
||||||
|
if (probe.ok) {
|
||||||
|
console.log(green("reachable"));
|
||||||
|
} else {
|
||||||
|
console.log(red(`unreachable (${probe.error})`));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("");
|
||||||
|
for (const r of results) {
|
||||||
|
console.log(dim(` ${r.slug}: pubkey ${r.pubkey.slice(0, 16)}…`));
|
||||||
|
}
|
||||||
|
|
||||||
|
const allOk = results.every((r) => r.reachable);
|
||||||
|
console.log("");
|
||||||
|
if (allOk) {
|
||||||
|
console.log(green("All meshes reachable."));
|
||||||
|
process.exit(0);
|
||||||
|
} else {
|
||||||
|
const broken = results.filter((r) => !r.reachable).length;
|
||||||
|
console.log(red(`${broken} of ${results.length} mesh(es) unreachable.`));
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
#!/usr/bin/env bun
|
|
||||||
/**
|
/**
|
||||||
* @claudemesh/cli entry point.
|
* claudemesh-cli entry point.
|
||||||
*
|
*
|
||||||
* Dispatches between two modes:
|
* Dispatches between two modes:
|
||||||
* - `claudemesh mcp` → MCP server (stdio transport)
|
* - `claudemesh mcp` → MCP server (stdio transport)
|
||||||
@@ -10,25 +9,38 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { startMcpServer } from "./mcp/server";
|
import { startMcpServer } from "./mcp/server";
|
||||||
import { runInstall } from "./commands/install";
|
import { runInstall, runUninstall } from "./commands/install";
|
||||||
import { runJoin } from "./commands/join";
|
import { runJoin } from "./commands/join";
|
||||||
import { runList } from "./commands/list";
|
import { runList } from "./commands/list";
|
||||||
import { runLeave } from "./commands/leave";
|
import { runLeave } from "./commands/leave";
|
||||||
import { runSeedTestMesh } from "./commands/seed-test-mesh";
|
import { runSeedTestMesh } from "./commands/seed-test-mesh";
|
||||||
|
import { runHook } from "./commands/hook";
|
||||||
|
import { runLaunch } from "./commands/launch";
|
||||||
|
import { runStatus } from "./commands/status";
|
||||||
|
import { runDoctor } from "./commands/doctor";
|
||||||
|
import { VERSION } from "./version";
|
||||||
|
|
||||||
const HELP = `claudemesh — peer mesh for Claude Code sessions
|
const HELP = `claudemesh v${VERSION} — peer mesh for Claude Code sessions
|
||||||
|
|
||||||
Usage:
|
Usage:
|
||||||
claudemesh <command> [args]
|
claudemesh <command> [args]
|
||||||
|
|
||||||
Commands:
|
Commands:
|
||||||
install Print Claude Code MCP registration instructions
|
install Register MCP + Stop/UserPromptSubmit status hooks
|
||||||
join <link> Join a mesh via invite link (ic://join/...)
|
(add --no-hooks for bare MCP registration)
|
||||||
|
uninstall Remove MCP server + hooks
|
||||||
|
launch [args] Launch Claude Code with real-time push messages enabled
|
||||||
|
(add --quiet to skip the info banner; passes through
|
||||||
|
extra flags, e.g. --model, --resume)
|
||||||
|
join <url> Join a mesh via https://claudemesh.com/join/... URL
|
||||||
list Show all joined meshes
|
list Show all joined meshes
|
||||||
leave <slug> Leave a joined mesh
|
leave <slug> Leave a joined mesh
|
||||||
|
status Health report: broker reachability per joined mesh
|
||||||
|
doctor Diagnostic checks (install, config, keypairs, PATH)
|
||||||
seed-test-mesh Dev-only: inject a mesh into config (skips invite flow)
|
seed-test-mesh Dev-only: inject a mesh into config (skips invite flow)
|
||||||
mcp Start MCP server (stdio) — invoked by Claude Code
|
mcp Start MCP server (stdio) — invoked by Claude Code
|
||||||
--help, -h Show this help
|
--help, -h Show this help
|
||||||
|
--version, -v Show the CLI version
|
||||||
|
|
||||||
Environment:
|
Environment:
|
||||||
CLAUDEMESH_BROKER_URL Override broker URL (default: wss://ic.claudemesh.com/ws)
|
CLAUDEMESH_BROKER_URL Override broker URL (default: wss://ic.claudemesh.com/ws)
|
||||||
@@ -45,7 +57,16 @@ async function main(): Promise<void> {
|
|||||||
await startMcpServer();
|
await startMcpServer();
|
||||||
return;
|
return;
|
||||||
case "install":
|
case "install":
|
||||||
runInstall();
|
runInstall(args);
|
||||||
|
return;
|
||||||
|
case "uninstall":
|
||||||
|
runUninstall();
|
||||||
|
return;
|
||||||
|
case "hook":
|
||||||
|
await runHook(args);
|
||||||
|
return;
|
||||||
|
case "launch":
|
||||||
|
runLaunch(args);
|
||||||
return;
|
return;
|
||||||
case "join":
|
case "join":
|
||||||
await runJoin(args);
|
await runJoin(args);
|
||||||
@@ -56,9 +77,20 @@ async function main(): Promise<void> {
|
|||||||
case "leave":
|
case "leave":
|
||||||
runLeave(args);
|
runLeave(args);
|
||||||
return;
|
return;
|
||||||
|
case "status":
|
||||||
|
await runStatus();
|
||||||
|
return;
|
||||||
|
case "doctor":
|
||||||
|
await runDoctor();
|
||||||
|
return;
|
||||||
case "seed-test-mesh":
|
case "seed-test-mesh":
|
||||||
runSeedTestMesh(args);
|
runSeedTestMesh(args);
|
||||||
return;
|
return;
|
||||||
|
case "--version":
|
||||||
|
case "-v":
|
||||||
|
case "version":
|
||||||
|
console.log(VERSION);
|
||||||
|
return;
|
||||||
case "--help":
|
case "--help":
|
||||||
case "-h":
|
case "-h":
|
||||||
case "help":
|
case "help":
|
||||||
|
|||||||
@@ -42,14 +42,41 @@ export function canonicalInvite(p: {
|
|||||||
return `${p.v}|${p.mesh_id}|${p.mesh_slug}|${p.broker_url}|${p.expires_at}|${p.mesh_root_key}|${p.role}|${p.owner_pubkey}`;
|
return `${p.v}|${p.mesh_id}|${p.mesh_slug}|${p.broker_url}|${p.expires_at}|${p.mesh_root_key}|${p.role}|${p.owner_pubkey}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function parseInviteLink(link: string): Promise<ParsedInvite> {
|
/**
|
||||||
if (!link.startsWith("ic://join/")) {
|
* Extract the raw base64url token from any accepted invite input.
|
||||||
throw new Error(
|
*
|
||||||
`invalid invite link: expected prefix "ic://join/", got "${link.slice(0, 20)}…"`,
|
* Accepts three formats:
|
||||||
);
|
* - `ic://join/<token>` (dev-era scheme, still supported)
|
||||||
|
* - `https://claudemesh.com/join/<token>` (clickable landing page)
|
||||||
|
* - `https://claudemesh.com/<locale>/join/<token>` (i18n prefix)
|
||||||
|
* - `<token>` (raw base64url, last resort)
|
||||||
|
*/
|
||||||
|
export function extractInviteToken(input: string): string {
|
||||||
|
const trimmed = input.trim();
|
||||||
|
if (trimmed.startsWith("ic://join/")) {
|
||||||
|
const token = trimmed.slice("ic://join/".length).replace(/\/$/, "");
|
||||||
|
if (!token) throw new Error("invite link has no payload");
|
||||||
|
return token;
|
||||||
}
|
}
|
||||||
const encoded = link.slice("ic://join/".length);
|
const httpsMatch = trimmed.match(
|
||||||
if (!encoded) throw new Error("invite link has no payload");
|
/^https?:\/\/[^/]+(?:\/[a-z]{2})?\/join\/([A-Za-z0-9_-]+)\/?$/,
|
||||||
|
);
|
||||||
|
if (httpsMatch) return httpsMatch[1]!;
|
||||||
|
// Last resort: treat as raw base64url token.
|
||||||
|
if (/^[A-Za-z0-9_-]+$/.test(trimmed) && trimmed.length > 20) {
|
||||||
|
return trimmed;
|
||||||
|
}
|
||||||
|
throw new Error(
|
||||||
|
`invalid invite format. Expected one of:\n` +
|
||||||
|
` https://claudemesh.com/join/<token>\n` +
|
||||||
|
` ic://join/<token>\n` +
|
||||||
|
` <raw-token>\n` +
|
||||||
|
`Got: "${input.slice(0, 40)}${input.length > 40 ? "…" : ""}"`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function parseInviteLink(link: string): Promise<ParsedInvite> {
|
||||||
|
const encoded = extractInviteToken(link);
|
||||||
|
|
||||||
let json: string;
|
let json: string;
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* MCP server (stdio transport) for @claudemesh/cli.
|
* MCP server (stdio transport) for claudemesh-cli.
|
||||||
*
|
*
|
||||||
* Starts BrokerClient connections for every mesh in config on boot,
|
* Starts BrokerClient connections for every mesh in config on boot,
|
||||||
* then routes the 5 MCP tools through them.
|
* then routes the 5 MCP tools through them.
|
||||||
@@ -73,8 +73,13 @@ function resolveClient(to: string): {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function decryptFailedWarning(senderPubkey: string): string {
|
||||||
|
const who = senderPubkey ? senderPubkey.slice(0, 12) + "…" : "unknown sender";
|
||||||
|
return `⚠ message from ${who} failed to decrypt (tampered or wrong keypair)`;
|
||||||
|
}
|
||||||
|
|
||||||
function formatPush(p: InboundPush, meshSlug: string): string {
|
function formatPush(p: InboundPush, meshSlug: string): string {
|
||||||
const body = p.plaintext ?? "(decryption failed)";
|
const body = p.plaintext ?? decryptFailedWarning(p.senderPubkey);
|
||||||
return `[${meshSlug}] from ${p.senderPubkey.slice(0, 12)}… (${p.priority}, ${p.createdAt}):\n${body}`;
|
return `[${meshSlug}] from ${p.senderPubkey.slice(0, 12)}… (${p.priority}, ${p.createdAt}):\n${body}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -82,14 +87,29 @@ export async function startMcpServer(): Promise<void> {
|
|||||||
const config = loadConfig();
|
const config = loadConfig();
|
||||||
|
|
||||||
const server = new Server(
|
const server = new Server(
|
||||||
{ name: "claudemesh", version: "0.1.0" },
|
{ name: "claudemesh", version: "0.1.3" },
|
||||||
{
|
{
|
||||||
capabilities: { tools: {} },
|
capabilities: {
|
||||||
instructions: `You are connected to claudemesh — a peer mesh for Claude Code sessions.
|
experimental: { "claude/channel": {} },
|
||||||
|
tools: {},
|
||||||
|
},
|
||||||
|
instructions: `You are connected to claudemesh — a peer mesh for Claude Code sessions on this machine and elsewhere.
|
||||||
|
|
||||||
Use these tools to coordinate with peers on demand. Respond promptly when you receive messages (they're like someone tapping your shoulder).
|
IMPORTANT: When you receive a <channel source="claudemesh" ...> message, RESPOND IMMEDIATELY. Do not wait until your current task is finished. Pause what you are doing, reply to the message using send_message, then resume your work. Treat incoming peer messages like a coworker tapping you on the shoulder — answer right away, even if you're in the middle of something.
|
||||||
|
|
||||||
Tools: send_message, list_peers, check_messages, set_summary, set_status.
|
Read the from_id, from_name, mesh_slug, and priority attributes to understand context. Reply by calling send_message with the same target (for direct messages the from_id is the sender's pubkey).
|
||||||
|
|
||||||
|
Available tools:
|
||||||
|
- list_peers: see joined meshes + their connection status
|
||||||
|
- send_message: send to a peer pubkey, channel, or broadcast (priority: now/next/low)
|
||||||
|
- check_messages: drain buffered inbound messages (usually auto-pushed)
|
||||||
|
- set_summary: 1-2 sentence summary of what you're working on
|
||||||
|
- set_status: manually override your status (idle/working/dnd)
|
||||||
|
|
||||||
|
Message priority:
|
||||||
|
- "now": delivered immediately regardless of recipient status (use sparingly)
|
||||||
|
- "next" (default): delivered when recipient is idle
|
||||||
|
- "low": pull-only (check_messages)
|
||||||
|
|
||||||
If you have multiple joined meshes, prefix the \`to\` argument of send_message with \`<mesh-slug>:\` to disambiguate. Otherwise claudemesh picks the single joined mesh.`,
|
If you have multiple joined meshes, prefix the \`to\` argument of send_message with \`<mesh-slug>:\` to disambiguate. Otherwise claudemesh picks the single joined mesh.`,
|
||||||
},
|
},
|
||||||
@@ -103,7 +123,7 @@ If you have multiple joined meshes, prefix the \`to\` argument of send_message w
|
|||||||
const { name, arguments: args } = req.params;
|
const { name, arguments: args } = req.params;
|
||||||
if (config.meshes.length === 0) {
|
if (config.meshes.length === 0) {
|
||||||
return text(
|
return text(
|
||||||
"No meshes joined. Run `claudemesh join <invite-link>` first.",
|
"No meshes joined. Run `claudemesh join https://claudemesh.com/join/<token>` first.",
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -191,6 +211,39 @@ If you have multiple joined meshes, prefix the \`to\` argument of send_message w
|
|||||||
const transport = new StdioServerTransport();
|
const transport = new StdioServerTransport();
|
||||||
await server.connect(transport);
|
await server.connect(transport);
|
||||||
|
|
||||||
|
// Wire WSS pushes → MCP channel notifications. Each inbound push on
|
||||||
|
// any mesh's broker connection becomes a <channel source="claudemesh">
|
||||||
|
// system reminder injected into Claude Code's context.
|
||||||
|
for (const client of allClients()) {
|
||||||
|
client.onPush(async (msg) => {
|
||||||
|
const fromPubkey = msg.senderPubkey || "";
|
||||||
|
const fromName = fromPubkey
|
||||||
|
? `peer-${fromPubkey.slice(0, 8)}`
|
||||||
|
: "unknown";
|
||||||
|
const content = msg.plaintext ?? decryptFailedWarning(fromPubkey);
|
||||||
|
try {
|
||||||
|
await server.notification({
|
||||||
|
method: "notifications/claude/channel",
|
||||||
|
params: {
|
||||||
|
content,
|
||||||
|
meta: {
|
||||||
|
from_id: fromPubkey,
|
||||||
|
from_name: fromName,
|
||||||
|
mesh_slug: client.meshSlug,
|
||||||
|
mesh_id: client.meshId,
|
||||||
|
priority: msg.priority,
|
||||||
|
sent_at: msg.createdAt,
|
||||||
|
delivered_at: msg.receivedAt,
|
||||||
|
kind: msg.kind,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
/* channel push is best-effort; check_messages is the fallback */
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const shutdown = (): void => {
|
const shutdown = (): void => {
|
||||||
stopAll();
|
stopAll();
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
|
|||||||
8
apps/cli/src/version.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* Bundled version string. Bun inlines the package.json JSON at build
|
||||||
|
* time, so the shipped binary carries the exact version that was
|
||||||
|
* published.
|
||||||
|
*/
|
||||||
|
import pkg from "../package.json" with { type: "json" };
|
||||||
|
|
||||||
|
export const VERSION: string = pkg.version;
|
||||||
@@ -312,10 +312,14 @@ export class BrokerClient {
|
|||||||
this.mesh.secretKey,
|
this.mesh.secretKey,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// If decryption failed, fall back to base64 UTF-8 unwrap —
|
// Legacy/broadcast path: no senderPubkey means the message
|
||||||
// this covers the legacy plaintext path for broadcasts/channels
|
// was not crypto_box'd, so base64 UTF-8 unwrap is correct.
|
||||||
// until channel crypto lands.
|
// For direct messages (senderPubkey present) we MUST NOT
|
||||||
if (plaintext === null && ciphertext) {
|
// base64-decode the ciphertext on decrypt failure — that
|
||||||
|
// produces garbage binary that surfaces as garbled bytes
|
||||||
|
// to Claude. Leave plaintext=null and let consumers emit
|
||||||
|
// a clear "failed to decrypt" warning.
|
||||||
|
if (plaintext === null && ciphertext && !senderPubkey) {
|
||||||
try {
|
try {
|
||||||
plaintext = Buffer.from(ciphertext, "base64").toString("utf-8");
|
plaintext = Buffer.from(ciphertext, "base64").toString("utf-8");
|
||||||
} catch {
|
} catch {
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ NEXT_PUBLIC_AUTH_MAGIC_LINK="false"
|
|||||||
NEXT_PUBLIC_AUTH_PASSKEY="true"
|
NEXT_PUBLIC_AUTH_PASSKEY="true"
|
||||||
|
|
||||||
# Use this variable to enable or disable anonymous authentication. If you set this to true, users will be able to proceed to your app without "traditional" authentication. If you set this to false, the anonymous login won't be available.
|
# Use this variable to enable or disable anonymous authentication. If you set this to true, users will be able to proceed to your app without "traditional" authentication. If you set this to false, the anonymous login won't be available.
|
||||||
NEXT_PUBLIC_AUTH_ANONYMOUS="true"
|
NEXT_PUBLIC_AUTH_ANONYMOUS="false"
|
||||||
|
|
||||||
# Auth server secret - used to sign the tokens
|
# Auth server secret - used to sign the tokens
|
||||||
BETTER_AUTH_SECRET="lT4GdPj3OSx00OcTRUdwywn1DNgBBuvK"
|
BETTER_AUTH_SECRET="lT4GdPj3OSx00OcTRUdwywn1DNgBBuvK"
|
||||||
@@ -49,7 +49,7 @@ GITHUB_CLIENT_SECRET="<your-github-client-secret>"
|
|||||||
|
|
||||||
|
|
||||||
# Seed config (used for accounts in development environment)
|
# Seed config (used for accounts in development environment)
|
||||||
SEED_EMAIL="me@turbostarter.dev"
|
SEED_EMAIL="dev@example.com"
|
||||||
SEED_PASSWORD="Pa\$\$w0rd"
|
SEED_PASSWORD="Pa\$\$w0rd"
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ export default defineEnv({
|
|||||||
NEXT_PUBLIC_AUTH_PASSWORD: castStringToBool.optional().default(true),
|
NEXT_PUBLIC_AUTH_PASSWORD: castStringToBool.optional().default(true),
|
||||||
NEXT_PUBLIC_AUTH_MAGIC_LINK: castStringToBool.optional().default(false),
|
NEXT_PUBLIC_AUTH_MAGIC_LINK: castStringToBool.optional().default(false),
|
||||||
NEXT_PUBLIC_AUTH_PASSKEY: castStringToBool.optional().default(true),
|
NEXT_PUBLIC_AUTH_PASSKEY: castStringToBool.optional().default(true),
|
||||||
NEXT_PUBLIC_AUTH_ANONYMOUS: castStringToBool.optional().default(true),
|
NEXT_PUBLIC_AUTH_ANONYMOUS: castStringToBool.optional().default(false),
|
||||||
|
|
||||||
NEXT_PUBLIC_PRODUCT_NAME: z.string().optional().default("claudemesh"),
|
NEXT_PUBLIC_PRODUCT_NAME: z.string().optional().default("claudemesh"),
|
||||||
NEXT_PUBLIC_URL: z.string().url().optional().default("http://localhost:3000"),
|
NEXT_PUBLIC_URL: z.string().url().optional().default("http://localhost:3000"),
|
||||||
|
|||||||
@@ -4,10 +4,19 @@ import { Pricing } from "~/modules/marketing/home/pricing";
|
|||||||
import { LaptopToLaptop } from "~/modules/marketing/home/laptop-to-laptop";
|
import { LaptopToLaptop } from "~/modules/marketing/home/laptop-to-laptop";
|
||||||
import { Features } from "~/modules/marketing/home/features";
|
import { Features } from "~/modules/marketing/home/features";
|
||||||
import { MeetsYou } from "~/modules/marketing/home/meets-you";
|
import { MeetsYou } from "~/modules/marketing/home/meets-you";
|
||||||
|
import { BeyondTerminal } from "~/modules/marketing/home/beyond-terminal";
|
||||||
|
import { DemoDashboard } from "~/modules/marketing/home/demo-dashboard";
|
||||||
|
import { WhatIsClaudemesh } from "~/modules/marketing/home/what-is-claudemesh";
|
||||||
import { FAQ } from "~/modules/marketing/home/faq";
|
import { FAQ } from "~/modules/marketing/home/faq";
|
||||||
import { CallToAction } from "~/modules/marketing/home/cta";
|
import { CallToAction } from "~/modules/marketing/home/cta";
|
||||||
|
import { MeshStats } from "~/modules/marketing/home/mesh-stats";
|
||||||
import { LatestNewsToaster } from "~/modules/marketing/home/toaster";
|
import { LatestNewsToaster } from "~/modules/marketing/home/toaster";
|
||||||
|
|
||||||
|
// Revalidate the page every 60s so the mesh-stats counter stays fresh
|
||||||
|
// without hammering the DB. The /api/public/stats endpoint has its own
|
||||||
|
// 60s in-memory cache too.
|
||||||
|
export const revalidate = 60;
|
||||||
|
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@@ -20,8 +29,12 @@ const HomePage = () => {
|
|||||||
<LaptopToLaptop />
|
<LaptopToLaptop />
|
||||||
<Features />
|
<Features />
|
||||||
<MeetsYou />
|
<MeetsYou />
|
||||||
|
<WhatIsClaudemesh />
|
||||||
|
<DemoDashboard />
|
||||||
|
<BeyondTerminal />
|
||||||
<FAQ />
|
<FAQ />
|
||||||
<CallToAction />
|
<CallToAction />
|
||||||
|
<MeshStats />
|
||||||
<LatestNewsToaster />
|
<LatestNewsToaster />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,35 +1,98 @@
|
|||||||
import { getTranslation } from "@turbostarter/i18n/server";
|
import Link from "next/link";
|
||||||
import { Icons } from "@turbostarter/ui-web/icons";
|
|
||||||
|
|
||||||
import { pathsConfig } from "~/config/paths";
|
export default function AuthLayout({
|
||||||
import { TurboLink } from "~/modules/common/turbo-link";
|
|
||||||
|
|
||||||
export default async function AuthLayout({
|
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const { t } = await getTranslation({ ns: "common" });
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="grid h-full w-full flex-1 lg:grid-cols-2">
|
<main
|
||||||
<section className="flex h-full flex-col items-center justify-center p-6 lg:p-10">
|
className="grid min-h-screen w-full flex-1 bg-[var(--cm-bg)] text-[var(--cm-fg)] antialiased lg:grid-cols-2"
|
||||||
<header className="text-navy -mt-1 mb-auto flex self-start justify-self-start">
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
<TurboLink
|
>
|
||||||
href={pathsConfig.index}
|
<section className="relative flex h-full min-h-screen flex-col items-center justify-center px-6 py-10 lg:px-12">
|
||||||
className="flex shrink-0 items-center gap-3"
|
<header className="absolute left-6 top-6 lg:left-12 lg:top-10">
|
||||||
aria-label={t("home")}
|
<Link
|
||||||
|
href="/"
|
||||||
|
aria-label="claudemesh home"
|
||||||
|
className="group flex shrink-0 items-center gap-2.5"
|
||||||
>
|
>
|
||||||
<Icons.Logo className="text-primary h-8" />
|
<svg
|
||||||
<Icons.LogoText className="text-foreground h-4" />
|
width="22"
|
||||||
</TurboLink>
|
height="22"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
className="text-[var(--cm-clay)] transition-transform duration-300 group-hover:rotate-180"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="4" r="2" fill="currentColor" />
|
||||||
|
<circle cx="4" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="20" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="12" cy="20" r="2" fill="currentColor" />
|
||||||
|
<path
|
||||||
|
d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.2"
|
||||||
|
opacity="0.45"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
className="text-[17px] font-medium tracking-tight text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
claudemesh
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
</header>
|
</header>
|
||||||
<div className="mt-16 mb-auto flex w-full max-w-md flex-col gap-6 pb-16">
|
<div className="flex w-full max-w-md flex-col gap-6">{children}</div>
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside className="bg-muted hidden flex-1 lg:block"></aside>
|
<aside
|
||||||
|
className="relative hidden overflow-hidden border-l border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] lg:block"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-[0.15]"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"radial-gradient(circle at 50% 50%, var(--cm-clay) 0%, transparent 60%)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="relative flex h-full flex-col items-center justify-center px-10 py-16 text-center">
|
||||||
|
<svg
|
||||||
|
width="48"
|
||||||
|
height="48"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
className="mb-8 text-[var(--cm-clay)]"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="4" r="2" fill="currentColor" />
|
||||||
|
<circle cx="4" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="20" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="12" cy="20" r="2" fill="currentColor" />
|
||||||
|
<path
|
||||||
|
d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.2"
|
||||||
|
opacity="0.45"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<h2
|
||||||
|
className="max-w-sm text-[clamp(1.75rem,3vw,2.25rem)] font-medium leading-[1.15] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Every Claude Code session,{" "}
|
||||||
|
<span className="italic text-[var(--cm-clay)]">
|
||||||
|
woven into one mesh.
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
className="text-muted-foreground mt-6 max-w-sm text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Connect every Claude Code session on your team into one live mesh.
|
||||||
|
Ship context, not screenshots.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,8 +41,8 @@ export default async function InvitesPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="rounded-lg border">
|
<div className="overflow-x-auto rounded-lg border">
|
||||||
<table className="w-full text-sm">
|
<table className="w-full min-w-[560px] text-sm">
|
||||||
<thead className="text-muted-foreground border-b text-left text-xs uppercase">
|
<thead className="text-muted-foreground border-b text-left text-xs uppercase">
|
||||||
<tr>
|
<tr>
|
||||||
<th className="px-4 py-3 font-medium">Mesh</th>
|
<th className="px-4 py-3 font-medium">Mesh</th>
|
||||||
|
|||||||
@@ -13,13 +13,33 @@ export const generateMetadata = getMetadata({
|
|||||||
|
|
||||||
export default async function InvitePage({
|
export default async function InvitePage({
|
||||||
params,
|
params,
|
||||||
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
params: Promise<{ id: string }>;
|
params: Promise<{ id: string }>;
|
||||||
|
searchParams: Promise<{ onboarding?: string }>;
|
||||||
}) {
|
}) {
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
|
const { onboarding } = await searchParams;
|
||||||
|
const isOnboarding = onboarding === "1";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{isOnboarding && (
|
||||||
|
<div className="border-primary/40 bg-primary/5 mb-6 rounded-lg border p-5">
|
||||||
|
<h2 className="text-primary mb-1 text-lg font-medium">
|
||||||
|
Mesh created
|
||||||
|
</h2>
|
||||||
|
<p className="mb-2 text-sm leading-relaxed">
|
||||||
|
Now generate your first invite link to share with a teammate — or
|
||||||
|
use it yourself to join this mesh from another laptop. Your
|
||||||
|
teammate runs{" "}
|
||||||
|
<code className="bg-muted rounded px-1 py-0.5 text-xs">
|
||||||
|
claudemesh join <link>
|
||||||
|
</code>{" "}
|
||||||
|
in their terminal.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<DashboardHeader>
|
<DashboardHeader>
|
||||||
<div>
|
<div>
|
||||||
<DashboardHeaderTitle>Invite teammate</DashboardHeaderTitle>
|
<DashboardHeaderTitle>Invite teammate</DashboardHeaderTitle>
|
||||||
|
|||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
|
||||||
|
import { getMyMeshResponseSchema } from "@turbostarter/api/schema";
|
||||||
|
import { handle } from "@turbostarter/api/utils";
|
||||||
|
import { Badge } from "@turbostarter/ui-web/badge";
|
||||||
|
import { buttonVariants } from "@turbostarter/ui-web/button";
|
||||||
|
|
||||||
|
import { pathsConfig } from "~/config/paths";
|
||||||
|
import { api } from "~/lib/api/server";
|
||||||
|
import { getMetadata } from "~/lib/metadata";
|
||||||
|
import {
|
||||||
|
DashboardHeader,
|
||||||
|
DashboardHeaderDescription,
|
||||||
|
DashboardHeaderTitle,
|
||||||
|
} from "~/modules/common/layout/dashboard/header";
|
||||||
|
import { LiveStreamPanel } from "~/modules/mesh/live-stream-panel";
|
||||||
|
|
||||||
|
export const generateMetadata = getMetadata({
|
||||||
|
title: "Live mesh",
|
||||||
|
description: "Real-time situational awareness of your mesh.",
|
||||||
|
});
|
||||||
|
|
||||||
|
export default async function LiveMeshPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}) {
|
||||||
|
const { id } = await params;
|
||||||
|
|
||||||
|
// Authz gate — same endpoint the detail page uses
|
||||||
|
const data = await handle(api.my.meshes[":id"].$get, {
|
||||||
|
schema: getMyMeshResponseSchema,
|
||||||
|
})({ param: { id } }).catch(() => null);
|
||||||
|
|
||||||
|
if (!data || !data.mesh) notFound();
|
||||||
|
const { mesh } = data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DashboardHeader>
|
||||||
|
<div className="flex w-full items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<DashboardHeaderTitle>
|
||||||
|
<span className="flex items-center gap-3">
|
||||||
|
{mesh.name}
|
||||||
|
<Badge variant="outline" className="font-mono text-xs">
|
||||||
|
live
|
||||||
|
</Badge>
|
||||||
|
</span>
|
||||||
|
</DashboardHeaderTitle>
|
||||||
|
<DashboardHeaderDescription>
|
||||||
|
Real-time view of presences and envelope routing across this
|
||||||
|
mesh. Broker sees ciphertext only.
|
||||||
|
</DashboardHeaderDescription>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={pathsConfig.dashboard.user.meshes.mesh(mesh.id)}
|
||||||
|
className={buttonVariants({ variant: "outline" })}
|
||||||
|
>
|
||||||
|
← Mesh detail
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</DashboardHeader>
|
||||||
|
|
||||||
|
<LiveStreamPanel meshId={id} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -40,11 +40,11 @@ export default async function MeshPage({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DashboardHeader>
|
<DashboardHeader>
|
||||||
<div className="flex w-full items-start justify-between gap-4">
|
<div className="flex w-full flex-col items-start gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||||
<div>
|
<div className="min-w-0 flex-1">
|
||||||
<DashboardHeaderTitle>
|
<DashboardHeaderTitle>
|
||||||
<span className="flex items-center gap-3">
|
<span className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||||
{mesh.name}
|
<span className="truncate">{mesh.name}</span>
|
||||||
<Badge variant="outline" className="font-mono text-xs">
|
<Badge variant="outline" className="font-mono text-xs">
|
||||||
{mesh.slug}
|
{mesh.slug}
|
||||||
</Badge>
|
</Badge>
|
||||||
@@ -55,12 +55,28 @@ export default async function MeshPage({
|
|||||||
· tier {mesh.tier} · {mesh.visibility} · {mesh.transport}
|
· tier {mesh.tier} · {mesh.visibility} · {mesh.transport}
|
||||||
</DashboardHeaderDescription>
|
</DashboardHeaderDescription>
|
||||||
</div>
|
</div>
|
||||||
<Link
|
<div className="flex w-full gap-2 sm:w-auto">
|
||||||
href={pathsConfig.dashboard.user.meshes.invite(mesh.id)}
|
<Link
|
||||||
className={buttonVariants({ variant: "default" })}
|
href={pathsConfig.dashboard.user.meshes.live(mesh.id)}
|
||||||
>
|
className={buttonVariants({
|
||||||
Generate invite link
|
variant: "outline",
|
||||||
</Link>
|
className: "flex-1 sm:flex-initial",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<span className="mr-1.5 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-[var(--cm-clay)]" />
|
||||||
|
Live
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={pathsConfig.dashboard.user.meshes.invite(mesh.id)}
|
||||||
|
className={buttonVariants({
|
||||||
|
variant: "default",
|
||||||
|
className: "flex-1 sm:flex-initial",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<span className="hidden sm:inline">Generate invite link</span>
|
||||||
|
<span className="sm:hidden">Invite</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DashboardHeader>
|
</DashboardHeader>
|
||||||
|
|
||||||
@@ -81,9 +97,9 @@ export default async function MeshPage({
|
|||||||
{members.map((m) => (
|
{members.map((m) => (
|
||||||
<div
|
<div
|
||||||
key={m.id}
|
key={m.id}
|
||||||
className="flex items-center justify-between px-4 py-3"
|
className="flex flex-col gap-1.5 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-3"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||||
<span className="font-medium">
|
<span className="font-medium">
|
||||||
{m.displayName}
|
{m.displayName}
|
||||||
{m.isMe && (
|
{m.isMe && (
|
||||||
@@ -131,16 +147,16 @@ export default async function MeshPage({
|
|||||||
{activeInvites.map((inv) => (
|
{activeInvites.map((inv) => (
|
||||||
<div
|
<div
|
||||||
key={inv.id}
|
key={inv.id}
|
||||||
className="flex items-center justify-between px-4 py-3 text-sm"
|
className="flex flex-col gap-1.5 px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-3"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||||
<code className="bg-muted rounded px-2 py-0.5 text-xs">
|
<code className="bg-muted rounded px-2 py-0.5 text-xs">
|
||||||
{inv.token.slice(0, 12)}…
|
{inv.token.slice(0, 12)}…
|
||||||
</code>
|
</code>
|
||||||
<Badge variant="outline" className="text-xs">
|
<Badge variant="outline" className="text-xs">
|
||||||
{inv.role}
|
{inv.role}
|
||||||
</Badge>
|
</Badge>
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground text-xs">
|
||||||
{inv.usedCount} / {inv.maxUses} used
|
{inv.usedCount} / {inv.maxUses} used
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,9 +11,29 @@ export const generateMetadata = getMetadata({
|
|||||||
description: "Create a mesh.",
|
description: "Create a mesh.",
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function NewMeshPage() {
|
export default async function NewMeshPage({
|
||||||
|
searchParams,
|
||||||
|
}: {
|
||||||
|
searchParams: Promise<{ onboarding?: string }>;
|
||||||
|
}) {
|
||||||
|
const { onboarding } = await searchParams;
|
||||||
|
const isOnboarding = onboarding === "1";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{isOnboarding && (
|
||||||
|
<div className="border-primary/40 bg-primary/5 mb-6 rounded-lg border p-5">
|
||||||
|
<h2 className="text-primary mb-1 text-lg font-medium">
|
||||||
|
Welcome to claudemesh
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm leading-relaxed">
|
||||||
|
Create your first mesh in 10 seconds. A mesh is the space where
|
||||||
|
your Claude Code sessions talk to each other. You can invite
|
||||||
|
teammates, share context, and route messages — all end-to-end
|
||||||
|
encrypted.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<DashboardHeader>
|
<DashboardHeader>
|
||||||
<div>
|
<div>
|
||||||
<DashboardHeaderTitle>New mesh</DashboardHeaderTitle>
|
<DashboardHeaderTitle>New mesh</DashboardHeaderTitle>
|
||||||
@@ -23,7 +43,7 @@ export default function NewMeshPage() {
|
|||||||
</div>
|
</div>
|
||||||
</DashboardHeader>
|
</DashboardHeader>
|
||||||
<div className="max-w-xl">
|
<div className="max-w-xl">
|
||||||
<CreateMeshForm />
|
<CreateMeshForm onboarding={isOnboarding} />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,66 +1,84 @@
|
|||||||
"use client";
|
import Link from "next/link";
|
||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
import { useTranslation } from "@turbostarter/i18n";
|
import { getMyMeshesResponseSchema } from "@turbostarter/api/schema";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@turbostarter/ui-web/card";
|
import { handle } from "@turbostarter/api/utils";
|
||||||
import { Icons } from "@turbostarter/ui-web/icons";
|
import { Badge } from "@turbostarter/ui-web/badge";
|
||||||
|
import { buttonVariants } from "@turbostarter/ui-web/button";
|
||||||
|
|
||||||
/**
|
import { pathsConfig } from "~/config/paths";
|
||||||
* Dashboard Home Page
|
import { api } from "~/lib/api/server";
|
||||||
*
|
import { getMetadata } from "~/lib/metadata";
|
||||||
* Welcome page for authenticated users.
|
|
||||||
*/
|
export const generateMetadata = getMetadata({
|
||||||
export default function DashboardPage() {
|
title: "Dashboard",
|
||||||
const { t } = useTranslation("dashboard");
|
description: "Your meshes.",
|
||||||
|
});
|
||||||
|
|
||||||
|
export default async function DashboardHomePage() {
|
||||||
|
const { data } = await handle(api.my.meshes.$get, {
|
||||||
|
schema: getMyMeshesResponseSchema,
|
||||||
|
})({
|
||||||
|
query: { page: "1", perPage: "6", sort: JSON.stringify([]) },
|
||||||
|
});
|
||||||
|
|
||||||
|
// First-time onboarding: 0-mesh user → bounce to create
|
||||||
|
if (data.length === 0) {
|
||||||
|
redirect(`${pathsConfig.dashboard.user.meshes.new}?onboarding=1`);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="@container h-full p-6">
|
<div className="space-y-8">
|
||||||
<div className="space-y-6">
|
<div>
|
||||||
<div>
|
<h1 className="text-2xl font-medium tracking-tight">Your meshes</h1>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">
|
<p className="text-muted-foreground text-sm">
|
||||||
{t("welcome.title", { defaultValue: "Welcome to your Dashboard" })}
|
Open one to see its members, generate invites, or share it.
|
||||||
</h1>
|
</p>
|
||||||
<p className="text-muted-foreground">
|
</div>
|
||||||
{t("welcome.description", { defaultValue: "Get started by exploring the features below." })}
|
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||||
</p>
|
{data.map((m) => (
|
||||||
</div>
|
<Link
|
||||||
|
key={m.id}
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
href={pathsConfig.dashboard.user.meshes.mesh(m.id)}
|
||||||
<Card>
|
className="group rounded-lg border p-5 transition-colors hover:border-primary hover:bg-muted/30"
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
>
|
||||||
<CardTitle className="text-sm font-medium">{t("features.aiChat.title", { defaultValue: "AI Chat" })}</CardTitle>
|
<div className="mb-3 flex items-start justify-between gap-2">
|
||||||
<Icons.MessageSquare className="h-4 w-4 text-muted-foreground" />
|
<div className="min-w-0 flex-1">
|
||||||
</CardHeader>
|
<h3 className="group-hover:text-primary truncate font-medium">
|
||||||
<CardContent>
|
{m.name}
|
||||||
<p className="text-xs text-muted-foreground">
|
</h3>
|
||||||
{t("features.aiChat.description", { defaultValue: "Have a conversation with AI assistants" })}
|
<p className="text-muted-foreground truncate font-mono text-xs">
|
||||||
</p>
|
{m.slug}
|
||||||
</CardContent>
|
</p>
|
||||||
</Card>
|
</div>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
<Card>
|
{m.isOwner ? "owner" : m.myRole}
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
</Badge>
|
||||||
<CardTitle className="text-sm font-medium">{t("features.imageGeneration.title", { defaultValue: "Image Generation" })}</CardTitle>
|
</div>
|
||||||
<Icons.Image className="h-4 w-4 text-muted-foreground" />
|
<div className="flex items-center gap-3 text-xs">
|
||||||
</CardHeader>
|
<Badge variant="secondary" className="text-xs">
|
||||||
<CardContent>
|
{m.tier}
|
||||||
<p className="text-xs text-muted-foreground">
|
</Badge>
|
||||||
{t("features.imageGeneration.description", { defaultValue: "Create images with AI" })}
|
<span className="text-muted-foreground">
|
||||||
</p>
|
{m.memberCount} {m.memberCount === 1 ? "member" : "members"}
|
||||||
</CardContent>
|
</span>
|
||||||
</Card>
|
</div>
|
||||||
|
</Link>
|
||||||
<Card>
|
))}
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
</div>
|
||||||
<CardTitle className="text-sm font-medium">{t("features.pdfAnalysis.title", { defaultValue: "PDF Analysis" })}</CardTitle>
|
<div className="flex gap-3">
|
||||||
<Icons.FileText className="h-4 w-4 text-muted-foreground" />
|
<Link
|
||||||
</CardHeader>
|
href={pathsConfig.dashboard.user.meshes.index}
|
||||||
<CardContent>
|
className={buttonVariants({ variant: "outline" })}
|
||||||
<p className="text-xs text-muted-foreground">
|
>
|
||||||
{t("features.pdfAnalysis.description", { defaultValue: "Upload and analyze PDF documents" })}
|
All meshes
|
||||||
</p>
|
</Link>
|
||||||
</CardContent>
|
<Link
|
||||||
</Card>
|
href={pathsConfig.dashboard.user.meshes.new}
|
||||||
</div>
|
className={buttonVariants({ variant: "default" })}
|
||||||
|
>
|
||||||
|
New mesh
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
218
apps/web/src/app/[locale]/join/[token]/page.tsx
Normal file
@@ -0,0 +1,218 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import {
|
||||||
|
publicInviteResponseSchema,
|
||||||
|
type PublicInviteResponse,
|
||||||
|
} from "@turbostarter/api/schema";
|
||||||
|
import { handle } from "@turbostarter/api/utils";
|
||||||
|
|
||||||
|
import { api } from "~/lib/api/server";
|
||||||
|
import { getMetadata } from "~/lib/metadata";
|
||||||
|
import { InstallToggle } from "~/modules/join/install-toggle";
|
||||||
|
|
||||||
|
export const generateMetadata = getMetadata({
|
||||||
|
title: "Join a mesh",
|
||||||
|
description: "You've been invited to a claudemesh mesh.",
|
||||||
|
});
|
||||||
|
|
||||||
|
const ERROR_COPY: Record<
|
||||||
|
Extract<PublicInviteResponse, { valid: false }>["reason"],
|
||||||
|
{ title: string; body: (inviter: string | null) => string }
|
||||||
|
> = {
|
||||||
|
expired: {
|
||||||
|
title: "This invite expired",
|
||||||
|
body: (inviter) =>
|
||||||
|
`The invite is no longer valid. Ask ${inviter ?? "the person who sent it"} for a fresh link.`,
|
||||||
|
},
|
||||||
|
revoked: {
|
||||||
|
title: "This invite was revoked",
|
||||||
|
body: (inviter) =>
|
||||||
|
`${inviter ?? "The mesh owner"} revoked this invite. Ask for a new one if you still need access.`,
|
||||||
|
},
|
||||||
|
exhausted: {
|
||||||
|
title: "This invite has no uses left",
|
||||||
|
body: (inviter) =>
|
||||||
|
`Every allowed use has been redeemed. Ask ${inviter ?? "the person who sent it"} for a new link.`,
|
||||||
|
},
|
||||||
|
mesh_archived: {
|
||||||
|
title: "This mesh is no longer active",
|
||||||
|
body: () => "The mesh was archived. There is nothing to join.",
|
||||||
|
},
|
||||||
|
bad_signature: {
|
||||||
|
title: "This invite is invalid",
|
||||||
|
body: () =>
|
||||||
|
"The signature does not verify. The link was modified or forged — ask for a fresh one through a trusted channel.",
|
||||||
|
},
|
||||||
|
malformed: {
|
||||||
|
title: "This invite is unreadable",
|
||||||
|
body: () =>
|
||||||
|
"The token could not be decoded. Check the link you received — it may be truncated.",
|
||||||
|
},
|
||||||
|
not_found: {
|
||||||
|
title: "This invite does not exist",
|
||||||
|
body: () =>
|
||||||
|
"Nothing matches this token. It may have been deleted, or the link was mis-pasted.",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function JoinPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ token: string }>;
|
||||||
|
}) {
|
||||||
|
const { token } = await params;
|
||||||
|
const invite = await handle(api.public.invite[":token"].$get, {
|
||||||
|
schema: publicInviteResponseSchema,
|
||||||
|
})({ param: { token } }).catch(
|
||||||
|
() =>
|
||||||
|
({
|
||||||
|
valid: false,
|
||||||
|
reason: "malformed",
|
||||||
|
meshName: null,
|
||||||
|
inviterName: null,
|
||||||
|
expiresAt: null,
|
||||||
|
}) as const,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main
|
||||||
|
className="min-h-screen bg-[var(--cm-bg)] text-[var(--cm-fg)] antialiased"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
<header className="border-b border-[var(--cm-border)] px-6 py-5 md:px-12">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
aria-label="claudemesh home"
|
||||||
|
className="group flex w-fit items-center gap-2.5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="22"
|
||||||
|
height="22"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
className="text-[var(--cm-clay)] transition-transform duration-300 group-hover:rotate-180"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="4" r="2" fill="currentColor" />
|
||||||
|
<circle cx="4" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="20" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="12" cy="20" r="2" fill="currentColor" />
|
||||||
|
<path
|
||||||
|
d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.2"
|
||||||
|
opacity="0.45"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
className="text-[17px] font-medium tracking-tight"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
claudemesh
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="mx-auto w-full max-w-2xl px-6 py-16 md:px-12 md:py-24">
|
||||||
|
{invite.valid ? (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="mb-5 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— invitation
|
||||||
|
</div>
|
||||||
|
<h1
|
||||||
|
className="text-[clamp(2rem,4vw,2.75rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
You're invited to{" "}
|
||||||
|
<span className="italic text-[var(--cm-clay)]">
|
||||||
|
{invite.meshName}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="mt-4 text-lg leading-[1.6] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{invite.inviterName
|
||||||
|
? `${invite.inviterName} added you as a ${invite.role}.`
|
||||||
|
: `You've been added as a ${invite.role}.`}{" "}
|
||||||
|
{invite.memberCount} other{" "}
|
||||||
|
{invite.memberCount === 1 ? "peer is" : "peers are"} already on
|
||||||
|
the mesh.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-12">
|
||||||
|
<InstallToggle token={invite.token} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="mt-14 rounded-[var(--cm-radius-md)] border border-dashed border-[var(--cm-border)] p-5 text-[13px] leading-[1.65] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
By joining, you'll be known as a peer with an ed25519
|
||||||
|
keypair generated locally. You keep your keys. claudemesh sees
|
||||||
|
ciphertext only. Leave anytime with{" "}
|
||||||
|
<code
|
||||||
|
className="rounded bg-[var(--cm-bg-elevated)] px-1.5 py-0.5 text-[12px] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
claudemesh leave {invite.meshSlug}
|
||||||
|
</code>
|
||||||
|
.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="mt-8 text-xs text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
expires {new Date(invite.expiresAt).toLocaleDateString()} ·{" "}
|
||||||
|
{invite.maxUses - invite.usedCount} of {invite.maxUses} uses
|
||||||
|
remaining
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="mb-5 text-[11px] uppercase tracking-[0.22em] text-[#c46686]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— invitation unavailable
|
||||||
|
</div>
|
||||||
|
<h1
|
||||||
|
className="text-[clamp(1.75rem,3.5vw,2.25rem)] font-medium leading-[1.15] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{ERROR_COPY[invite.reason].title}
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="mt-4 text-base leading-[1.6] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{ERROR_COPY[invite.reason].body(invite.inviterName)}
|
||||||
|
</p>
|
||||||
|
{invite.meshName && (
|
||||||
|
<p
|
||||||
|
className="mt-2 text-sm text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
mesh: {invite.meshName}
|
||||||
|
{invite.expiresAt &&
|
||||||
|
` · expired ${new Date(invite.expiresAt).toLocaleDateString()}`}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="mt-10">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-fg-tertiary)] px-5 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:border-[var(--cm-fg)] hover:bg-[var(--cm-bg-elevated)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
← claudemesh.com
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -7,7 +7,6 @@ import { Providers } from "~/lib/providers/providers";
|
|||||||
import { ImpersonatingBanner } from "~/modules/admin/users/user/impersonating-banner";
|
import { ImpersonatingBanner } from "~/modules/admin/users/user/impersonating-banner";
|
||||||
import { BaseLayout } from "~/modules/common/layout/base";
|
import { BaseLayout } from "~/modules/common/layout/base";
|
||||||
import { Toaster } from "~/modules/common/toast";
|
import { Toaster } from "~/modules/common/toast";
|
||||||
import { BuyCtaDialog } from "~/modules/marketing/layout/buy-cta-dialog";
|
|
||||||
|
|
||||||
export function generateStaticParams() {
|
export function generateStaticParams() {
|
||||||
return config.locales.map((locale) => ({ locale }));
|
return config.locales.map((locale) => ({ locale }));
|
||||||
@@ -33,7 +32,6 @@ export default async function RootLayout({
|
|||||||
<Providers locale={locale}>
|
<Providers locale={locale}>
|
||||||
<ImpersonatingBanner />
|
<ImpersonatingBanner />
|
||||||
{children}
|
{children}
|
||||||
<BuyCtaDialog />
|
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</Providers>
|
</Providers>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 947 KiB |
@@ -101,3 +101,66 @@
|
|||||||
--cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
--cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||||
--cm-dur: 300ms;
|
--cm-dur: 300ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
Map shadcn/ui tokens → claudemesh palette
|
||||||
|
Overrides the TurboStarter-inherited orange theme so every
|
||||||
|
Button/Card/Input/Dialog/etc renders in the claudemesh dark
|
||||||
|
palette, not the white/neutral defaults. Applies to BOTH
|
||||||
|
the light variant and the dark variant of the active
|
||||||
|
[data-theme="orange"] selector — we want the same dark
|
||||||
|
claudemesh look regardless of system preference.
|
||||||
|
============================================================ */
|
||||||
|
:root,
|
||||||
|
[data-theme="orange"],
|
||||||
|
[data-theme="orange"] .dark,
|
||||||
|
.dark {
|
||||||
|
--background: var(--cm-bg);
|
||||||
|
--foreground: var(--cm-fg);
|
||||||
|
--card: var(--cm-bg-elevated);
|
||||||
|
--card-foreground: var(--cm-fg);
|
||||||
|
--popover: var(--cm-bg-elevated);
|
||||||
|
--popover-foreground: var(--cm-fg);
|
||||||
|
--primary: var(--cm-clay);
|
||||||
|
--primary-foreground: var(--cm-gray-050);
|
||||||
|
--secondary: var(--cm-bg-elevated);
|
||||||
|
--secondary-foreground: var(--cm-fg-secondary);
|
||||||
|
--muted: var(--cm-bg-elevated);
|
||||||
|
--muted-foreground: var(--cm-fg-tertiary);
|
||||||
|
--accent: var(--cm-bg-elevated);
|
||||||
|
--accent-foreground: var(--cm-fg);
|
||||||
|
--destructive: #dc2626;
|
||||||
|
--destructive-foreground: var(--cm-gray-050);
|
||||||
|
--success: #16a34a;
|
||||||
|
--success-foreground: var(--cm-gray-050);
|
||||||
|
--border: var(--cm-border);
|
||||||
|
--input: var(--cm-border);
|
||||||
|
--ring: var(--cm-clay);
|
||||||
|
--radius: var(--cm-radius-md);
|
||||||
|
|
||||||
|
--sidebar: var(--cm-bg-elevated);
|
||||||
|
--sidebar-foreground: var(--cm-fg);
|
||||||
|
--sidebar-primary: var(--cm-clay);
|
||||||
|
--sidebar-primary-foreground: var(--cm-gray-050);
|
||||||
|
--sidebar-accent: var(--cm-bg-hover);
|
||||||
|
--sidebar-accent-foreground: var(--cm-fg);
|
||||||
|
--sidebar-border: var(--cm-border);
|
||||||
|
--sidebar-ring: var(--cm-clay);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tailwind's @variant light path — when no data-theme or no dark class,
|
||||||
|
Tailwind emits the light branch. Override it too so there's no
|
||||||
|
white-background flash on any shadcn surface. */
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Override the Tailwind default --font-sans / --font-mono CSS vars
|
||||||
|
(which BaseLayout used to populate from next/font/google Geist).
|
||||||
|
We self-host Anthropic Sans/Serif/Mono now — no Google Fonts fetch,
|
||||||
|
no CSP font-src violation. */
|
||||||
|
.cm-root {
|
||||||
|
--font-sans: var(--cm-font-sans);
|
||||||
|
--font-mono: var(--cm-font-mono);
|
||||||
|
--font-serif: var(--cm-font-serif);
|
||||||
|
}
|
||||||
|
|||||||
@@ -17,7 +17,8 @@ export const authConfig = authConfigSchema.parse({
|
|||||||
password: toBool(env.NEXT_PUBLIC_AUTH_PASSWORD, true),
|
password: toBool(env.NEXT_PUBLIC_AUTH_PASSWORD, true),
|
||||||
magicLink: toBool(env.NEXT_PUBLIC_AUTH_MAGIC_LINK, false),
|
magicLink: toBool(env.NEXT_PUBLIC_AUTH_MAGIC_LINK, false),
|
||||||
passkey: toBool(env.NEXT_PUBLIC_AUTH_PASSKEY, true),
|
passkey: toBool(env.NEXT_PUBLIC_AUTH_PASSKEY, true),
|
||||||
anonymous: toBool(env.NEXT_PUBLIC_AUTH_ANONYMOUS, true),
|
// claudemesh requires auth — mesh membership is tied to an account
|
||||||
|
anonymous: toBool(env.NEXT_PUBLIC_AUTH_ANONYMOUS, false),
|
||||||
// v0.1.0: GitHub + Google. Apple deferred until we need it.
|
// v0.1.0: GitHub + Google. Apple deferred until we need it.
|
||||||
oAuth: [SocialProvider.GOOGLE, SocialProvider.GITHUB],
|
oAuth: [SocialProvider.GOOGLE, SocialProvider.GITHUB],
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -95,6 +95,7 @@ const pathsConfig = {
|
|||||||
new: `${DASHBOARD_PREFIX}/meshes/new`,
|
new: `${DASHBOARD_PREFIX}/meshes/new`,
|
||||||
mesh: (id: string) => `${DASHBOARD_PREFIX}/meshes/${id}`,
|
mesh: (id: string) => `${DASHBOARD_PREFIX}/meshes/${id}`,
|
||||||
invite: (id: string) => `${DASHBOARD_PREFIX}/meshes/${id}/invite`,
|
invite: (id: string) => `${DASHBOARD_PREFIX}/meshes/${id}/invite`,
|
||||||
|
live: (id: string) => `${DASHBOARD_PREFIX}/meshes/${id}/live`,
|
||||||
},
|
},
|
||||||
invites: `${DASHBOARD_PREFIX}/invites`,
|
invites: `${DASHBOARD_PREFIX}/invites`,
|
||||||
settings: {
|
settings: {
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ export const getMetadata =
|
|||||||
(
|
(
|
||||||
{
|
{
|
||||||
title,
|
title,
|
||||||
description = "common:product.description",
|
description = "Connect your Claude Code sessions to each other. Zero config. End-to-end encrypted. Peer mesh for Claude Code teams.",
|
||||||
url,
|
url,
|
||||||
canonical,
|
canonical,
|
||||||
images = [DEFAULT_IMAGE],
|
images = [DEFAULT_IMAGE],
|
||||||
|
|||||||
@@ -29,6 +29,12 @@ export const SocialIcons: Record<SocialProviderType, Icon> = {
|
|||||||
[SocialProviderType.APPLE]: Icons.Apple,
|
[SocialProviderType.APPLE]: Icons.Apple,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const PROVIDER_LABELS: Record<SocialProviderType, string> = {
|
||||||
|
[SocialProviderType.GITHUB]: "GitHub",
|
||||||
|
[SocialProviderType.GOOGLE]: "Google",
|
||||||
|
[SocialProviderType.APPLE]: "Apple",
|
||||||
|
};
|
||||||
|
|
||||||
const SocialProvider = ({
|
const SocialProvider = ({
|
||||||
provider,
|
provider,
|
||||||
isSubmitting,
|
isSubmitting,
|
||||||
@@ -49,7 +55,7 @@ const SocialProvider = ({
|
|||||||
variant="outline"
|
variant="outline"
|
||||||
type="button"
|
type="button"
|
||||||
size="lg"
|
size="lg"
|
||||||
className="relative grow basis-28 gap-2"
|
className="relative w-full justify-center gap-2"
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
@@ -58,7 +64,9 @@ const SocialProvider = ({
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Icon className="size-5 dark:brightness-125" />
|
<Icon className="size-5 dark:brightness-125" />
|
||||||
<span className="leading-none capitalize">{provider}</span>
|
<span className="leading-none">
|
||||||
|
Continue with {PROVIDER_LABELS[provider]}
|
||||||
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,17 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
import { authClient } from "~/lib/auth/client";
|
||||||
import { billing } from "~/modules/billing/lib/api";
|
import { billing } from "~/modules/billing/lib/api";
|
||||||
|
|
||||||
export const useCustomer = () => useQuery(billing.queries.customer.get);
|
/**
|
||||||
|
* Fetches the current user's billing customer. Gated on session
|
||||||
|
* presence so unauthenticated public pages (landing, /pricing) don't
|
||||||
|
* fire a 401 just to render plan cards.
|
||||||
|
*/
|
||||||
|
export const useCustomer = () => {
|
||||||
|
const { data: session } = authClient.useSession();
|
||||||
|
return useQuery({
|
||||||
|
...billing.queries.customer.get,
|
||||||
|
enabled: !!session?.user,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,22 +1,7 @@
|
|||||||
import { Geist_Mono, Geist } from "next/font/google";
|
|
||||||
|
|
||||||
import { cn } from "@turbostarter/ui";
|
import { cn } from "@turbostarter/ui";
|
||||||
|
|
||||||
import { appConfig } from "~/config/app";
|
import { appConfig } from "~/config/app";
|
||||||
|
|
||||||
const sans = Geist({
|
|
||||||
subsets: ["latin"],
|
|
||||||
display: "swap",
|
|
||||||
variable: "--font-sans",
|
|
||||||
});
|
|
||||||
|
|
||||||
const mono = Geist_Mono({
|
|
||||||
subsets: ["latin"],
|
|
||||||
display: "swap",
|
|
||||||
variable: "--font-mono",
|
|
||||||
weight: ["300", "400", "500"],
|
|
||||||
});
|
|
||||||
|
|
||||||
interface BaseLayoutProps {
|
interface BaseLayoutProps {
|
||||||
readonly locale: string;
|
readonly locale: string;
|
||||||
readonly children: React.ReactNode;
|
readonly children: React.ReactNode;
|
||||||
@@ -24,7 +9,7 @@ interface BaseLayoutProps {
|
|||||||
|
|
||||||
export const BaseLayout = ({ children, locale }: BaseLayoutProps) => {
|
export const BaseLayout = ({ children, locale }: BaseLayoutProps) => {
|
||||||
return (
|
return (
|
||||||
<html lang={locale} className={cn(sans.variable, mono.variable)}>
|
<html lang={locale} className={cn("cm-root")}>
|
||||||
<body
|
<body
|
||||||
suppressHydrationWarning
|
suppressHydrationWarning
|
||||||
className="bg-background text-foreground flex min-h-screen flex-col items-center justify-center font-sans antialiased"
|
className="bg-background text-foreground flex min-h-screen flex-col items-center justify-center font-sans antialiased"
|
||||||
|
|||||||
@@ -53,7 +53,9 @@ export function ScrollContainer({ children, className }: ScrollContainerProps) {
|
|||||||
onScroll={updateScrollState}
|
onScroll={updateScrollState}
|
||||||
className="h-full overflow-auto"
|
className="h-full overflow-auto"
|
||||||
>
|
>
|
||||||
{children}
|
<div className="mx-auto w-full max-w-[var(--cm-max-w)] px-4 py-6 md:px-8 md:py-8">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
183
apps/web/src/modules/join/install-toggle.tsx
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const JOIN_CMD = (token: string) => `claudemesh join ${token}`;
|
||||||
|
const INSTALL_CMD = "npx claudemesh@latest init";
|
||||||
|
|
||||||
|
export const InstallToggle = ({ token }: Props) => {
|
||||||
|
const [hasCli, setHasCli] = useState<"unknown" | "yes" | "no">("unknown");
|
||||||
|
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const copy = async (text: string, key: string) => {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
setCopiedKey(key);
|
||||||
|
setTimeout(() => setCopiedKey(null), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (hasCli === "unknown") {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
|
<button
|
||||||
|
onClick={() => setHasCli("no")}
|
||||||
|
className="flex-1 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5 text-left transition-colors hover:border-[var(--cm-clay)] hover:bg-[var(--cm-bg-hover)]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="mb-1.5 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
first time
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-lg font-medium text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Install claudemesh →
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setHasCli("yes")}
|
||||||
|
className="flex-1 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5 text-left transition-colors hover:border-[var(--cm-clay)] hover:bg-[var(--cm-bg-hover)]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="mb-1.5 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
already set up
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-lg font-medium text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Join with CLI →
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasCli === "yes") {
|
||||||
|
const cmd = JOIN_CMD(token);
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-[var(--cm-radius-md)] border border-[var(--cm-clay)]/40 bg-[var(--cm-bg-elevated)] p-5">
|
||||||
|
<div
|
||||||
|
className="mb-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
run this in your terminal
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code
|
||||||
|
className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{cmd}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => copy(cmd, "join")}
|
||||||
|
className="rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-4 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
{copiedKey === "join" ? "Copied ✓" : "Copy"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setHasCli("unknown")}
|
||||||
|
className="text-xs text-[var(--cm-fg-tertiary)] underline underline-offset-4 hover:text-[var(--cm-fg)]"
|
||||||
|
>
|
||||||
|
← Need to install first?
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const joinCmd = JOIN_CMD(token);
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ol className="space-y-3">
|
||||||
|
<li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5">
|
||||||
|
<div
|
||||||
|
className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span className="rounded-full bg-[var(--cm-clay)]/20 px-1.5">1</span>
|
||||||
|
install + init
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code
|
||||||
|
className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{INSTALL_CMD}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => copy(INSTALL_CMD, "install")}
|
||||||
|
className="rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] px-3 py-3 text-sm text-[var(--cm-fg-secondary)] transition-colors hover:border-[var(--cm-fg)] hover:text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
{copiedKey === "install" ? "Copied ✓" : "Copy"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="mt-2 text-xs text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Generates your ed25519 keypair locally and wires claudemesh into
|
||||||
|
your Claude Code config. You own the keys.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-clay)]/40 bg-[var(--cm-bg-elevated)] p-5">
|
||||||
|
<div
|
||||||
|
className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span className="rounded-full bg-[var(--cm-clay)]/20 px-1.5">2</span>
|
||||||
|
join the mesh
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code
|
||||||
|
className="flex-1 overflow-x-auto rounded-[var(--cm-radius-xs)] bg-[var(--cm-bg)] p-3 text-sm text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{joinCmd}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() => copy(joinCmd, "join")}
|
||||||
|
className="rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-3 py-3 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
{copiedKey === "join" ? "Copied ✓" : "Copy"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-5">
|
||||||
|
<div
|
||||||
|
className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span className="rounded-full bg-[var(--cm-border)] px-1.5">3</span>
|
||||||
|
verify
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-sm text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Your Claude Code session will announce itself to the mesh. Other
|
||||||
|
peers see you appear as a green dot in their dashboard.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<button
|
||||||
|
onClick={() => setHasCli("unknown")}
|
||||||
|
className="text-xs text-[var(--cm-fg-tertiary)] underline underline-offset-4 hover:text-[var(--cm-fg)]"
|
||||||
|
>
|
||||||
|
← Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
232
apps/web/src/modules/marketing/home/beyond-terminal.tsx
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal";
|
||||||
|
|
||||||
|
type Status = "today" | "soon" | "build-it";
|
||||||
|
|
||||||
|
const STATUS_STYLES: Record<Status, string> = {
|
||||||
|
today: "border-[var(--cm-clay)]/50 bg-[var(--cm-clay)]/10 text-[var(--cm-clay)]",
|
||||||
|
soon: "border-[var(--cm-border)] text-[var(--cm-fg-secondary)]",
|
||||||
|
"build-it":
|
||||||
|
"border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] text-[var(--cm-fg-tertiary)]",
|
||||||
|
};
|
||||||
|
|
||||||
|
const STATUS_LABEL: Record<Status, string> = {
|
||||||
|
today: "shipping",
|
||||||
|
soon: "on the roadmap",
|
||||||
|
"build-it": "build it yourself",
|
||||||
|
};
|
||||||
|
|
||||||
|
const GATEWAYS: Array<{
|
||||||
|
name: string;
|
||||||
|
glyph: React.ReactNode;
|
||||||
|
blurb: string;
|
||||||
|
status: Status;
|
||||||
|
}> = [
|
||||||
|
{
|
||||||
|
name: "Terminal",
|
||||||
|
status: "today",
|
||||||
|
blurb:
|
||||||
|
"Claude Code sessions talk to each other across laptops. The original surface.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect
|
||||||
|
x="2"
|
||||||
|
y="4"
|
||||||
|
width="20"
|
||||||
|
height="16"
|
||||||
|
rx="2"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
<path d="M5 9l3 3-3 3M11 15h6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "WhatsApp",
|
||||||
|
status: "soon",
|
||||||
|
blurb:
|
||||||
|
"Message your Claude from the train. It answers through WhatsApp in the same chat — same mesh, same identity.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path
|
||||||
|
d="M12 2a10 10 0 00-8.6 15.1L2 22l5-1.4A10 10 0 1012 2z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8.5 9.5c.5 2 1.5 3.5 3.5 5 1 .5 2 .5 2.5 0l1-1-2-2-1 .5c-.5 0-1.5-1-2-2l.5-1-2-2-1 1c-.5.5-.5 1 0 1.5z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Telegram",
|
||||||
|
status: "soon",
|
||||||
|
blurb:
|
||||||
|
"Route mesh events to a Telegram bot, reply back from any device signed into your account.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<path
|
||||||
|
d="M22 3L2 11l6 2.5 2 6.5L13 16l6 5L22 3z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path d="M22 3L10 13.5" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "iOS / Android",
|
||||||
|
status: "soon",
|
||||||
|
blurb:
|
||||||
|
"A thin peer app. Push notifications when your agents need you. Reply in a sentence.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect
|
||||||
|
x="6"
|
||||||
|
y="2"
|
||||||
|
width="12"
|
||||||
|
height="20"
|
||||||
|
rx="2.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
<circle cx="12" cy="18" r="0.8" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Slack",
|
||||||
|
status: "build-it",
|
||||||
|
blurb:
|
||||||
|
"A mesh peer in your Slack workspace. Direct-message #oncall, fan-out to a channel, thread replies.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="3" y="10" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
<rect x="15" y="12" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
<rect x="10" y="3" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
<rect x="12" y="15" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
<path
|
||||||
|
d="M10 10h4v4h-4z"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Email",
|
||||||
|
status: "build-it",
|
||||||
|
blurb:
|
||||||
|
"Reply-to-channel gateway. Send an email to your mesh, the nearest agent picks it up and answers.",
|
||||||
|
glyph: (
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect
|
||||||
|
x="2"
|
||||||
|
y="5"
|
||||||
|
width="20"
|
||||||
|
height="14"
|
||||||
|
rx="2"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
/>
|
||||||
|
<path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.5" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const BeyondTerminal = () => {
|
||||||
|
return (
|
||||||
|
<section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-32 md:px-12">
|
||||||
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
||||||
|
<Reveal className="mb-6 flex justify-center">
|
||||||
|
<SectionIcon glyph="arrow" />
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={1}>
|
||||||
|
<div
|
||||||
|
className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— beyond your terminal
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={2}>
|
||||||
|
<h2
|
||||||
|
className="mx-auto max-w-4xl text-center text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Your mesh.{" "}
|
||||||
|
<span className="italic text-[var(--cm-clay)]">Any surface.</span>
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={3}>
|
||||||
|
<p
|
||||||
|
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Terminal is one client, not THE client. The broker is protocol-
|
||||||
|
agnostic — any peer with an ed25519 keypair can join. Your mesh
|
||||||
|
meets you where you already are.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<RevealStagger className="mt-16 grid gap-px bg-[var(--cm-border)] md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{GATEWAYS.map((g) => (
|
||||||
|
<StaggerItem
|
||||||
|
key={g.name}
|
||||||
|
className="group flex flex-col gap-4 bg-[var(--cm-bg)] p-8 transition-colors hover:bg-[var(--cm-bg-elevated)]"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="text-[var(--cm-clay)]">{g.glyph}</div>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"rounded-[var(--cm-radius-xs)] border px-2 py-0.5 text-[10px] uppercase tracking-wider " +
|
||||||
|
STATUS_STYLES[g.status]
|
||||||
|
}
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{STATUS_LABEL[g.status]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
className="text-xl font-medium leading-snug text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{g.name}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-[14px] leading-[1.65] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{g.blurb}
|
||||||
|
</p>
|
||||||
|
</StaggerItem>
|
||||||
|
))}
|
||||||
|
</RevealStagger>
|
||||||
|
|
||||||
|
<Reveal delay={1} className="mt-14 flex flex-col items-center gap-3">
|
||||||
|
<p
|
||||||
|
className="text-center text-[13px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
the protocol is open · ed25519 + libsodium · build a gateway for{" "}
|
||||||
|
<span className="text-[var(--cm-fg-secondary)]">anything</span>
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/auth/register"
|
||||||
|
className="inline-flex items-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-fg-tertiary)] px-5 py-2.5 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:border-[var(--cm-fg)] hover:bg-[var(--cm-bg-elevated)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
Get on the mesh →
|
||||||
|
</Link>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -39,12 +39,11 @@ export const CallToAction = () => {
|
|||||||
<Reveal delay={3}>
|
<Reveal delay={3}>
|
||||||
<div className="mt-12 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
|
<div className="mt-12 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:items-center">
|
||||||
<Link
|
<Link
|
||||||
href="https://github.com/claudemesh/claudemesh"
|
href="/auth/register"
|
||||||
target="_blank"
|
|
||||||
className="group inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-6 py-3.5 text-[15px] font-medium text-[var(--cm-fg)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
|
className="group inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-6 py-3.5 text-[15px] font-medium text-[var(--cm-fg)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
|
||||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
>
|
>
|
||||||
Star on GitHub
|
Start free
|
||||||
<span className="transition-transform duration-300 group-hover:translate-x-0.5">
|
<span className="transition-transform duration-300 group-hover:translate-x-0.5">
|
||||||
→
|
→
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
118
apps/web/src/modules/marketing/home/demo-dashboard-script.ts
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
/**
|
||||||
|
* Pre-recorded mesh conversation. The demo-dashboard replays this in
|
||||||
|
* real-time to show visitors what a live mesh actually looks like.
|
||||||
|
*
|
||||||
|
* `t` is the timestamp in ms from script start. Messages animate in
|
||||||
|
* at their `t` offset. Script loops after LOOP_PAUSE_MS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type PeerStatus = "idle" | "working" | "offline";
|
||||||
|
|
||||||
|
export interface Peer {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: PeerStatus;
|
||||||
|
machine: string;
|
||||||
|
surface: "terminal" | "phone" | "slack";
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MessageType = "ask_mesh" | "self_nominate" | "direct";
|
||||||
|
|
||||||
|
export interface DemoMessage {
|
||||||
|
/** ms from script start */
|
||||||
|
t: number;
|
||||||
|
from: string;
|
||||||
|
to: string | null; // peer id for direct, "tag:xxx" for broadcast, null for self-nominate
|
||||||
|
type: MessageType;
|
||||||
|
text: string;
|
||||||
|
/** Fake ciphertext to show the broker only sees this */
|
||||||
|
ciphertext: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PEERS: Peer[] = [
|
||||||
|
{
|
||||||
|
id: "alice-laptop",
|
||||||
|
name: "alice-laptop",
|
||||||
|
status: "idle",
|
||||||
|
machine: "macOS · payments-api",
|
||||||
|
surface: "terminal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "bob-desktop",
|
||||||
|
name: "bob-desktop",
|
||||||
|
status: "working",
|
||||||
|
machine: "linux · checkout-svc",
|
||||||
|
surface: "terminal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "carol-ios",
|
||||||
|
name: "carol-ios",
|
||||||
|
status: "idle",
|
||||||
|
machine: "iOS · push-relay",
|
||||||
|
surface: "phone",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "slack-bot",
|
||||||
|
name: "slack-bot",
|
||||||
|
status: "idle",
|
||||||
|
machine: "oncall · ops",
|
||||||
|
surface: "slack",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const MESH_NAME = "flexicar-ops";
|
||||||
|
export const LOOP_PAUSE_MS = 4000;
|
||||||
|
|
||||||
|
export const SCRIPT: DemoMessage[] = [
|
||||||
|
{
|
||||||
|
t: 400,
|
||||||
|
from: "bob-desktop",
|
||||||
|
to: "tag:payments",
|
||||||
|
type: "ask_mesh",
|
||||||
|
text: "anyone seen stripe signature verification issues? getting 400 on /webhooks",
|
||||||
|
ciphertext: "AUp3+n7z1bY=.kQfM9vL4jR8xHt2eW…",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t: 1900,
|
||||||
|
from: "alice-laptop",
|
||||||
|
to: null,
|
||||||
|
type: "self_nominate",
|
||||||
|
text: "I'm in payments-api — hit this two weeks ago. pulling my fix.",
|
||||||
|
ciphertext: "BWqX+m8t2cZ=.vLrN6oS3pK9yIu4aF…",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t: 3800,
|
||||||
|
from: "alice-laptop",
|
||||||
|
to: "bob-desktop",
|
||||||
|
type: "direct",
|
||||||
|
text: "crypto.createHmac('sha256', webhookSecret) + timingSafeEqual. raw body, not JSON.parsed. src/webhooks/stripe.ts:47",
|
||||||
|
ciphertext: "CXsY+k9u3dA=.wMsO7pT4qL0zJv5bG…",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t: 5400,
|
||||||
|
from: "bob-desktop",
|
||||||
|
to: "alice-laptop",
|
||||||
|
type: "direct",
|
||||||
|
text: "saved me. applying now. thanks.",
|
||||||
|
ciphertext: "DYtZ+j0v4eB=.xNtP8qU5rM1aKw6cH…",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t: 6800,
|
||||||
|
from: "carol-ios",
|
||||||
|
to: "tag:infra",
|
||||||
|
type: "ask_mesh",
|
||||||
|
text: "CI is red on main — who's on deploys?",
|
||||||
|
ciphertext: "EZuA+i1w5fC=.yOuQ9rV6sN2bLx7dI…",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
t: 8200,
|
||||||
|
from: "bob-desktop",
|
||||||
|
to: "carol-ios",
|
||||||
|
type: "direct",
|
||||||
|
text: "already on it, reverting 7af3d — back green in ~2min",
|
||||||
|
ciphertext: "FavB+h2x6gD=.zPvR0sW7tO3cMy8eJ…",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const SCRIPT_DURATION_MS =
|
||||||
|
Math.max(...SCRIPT.map((m) => m.t)) + LOOP_PAUSE_MS;
|
||||||
202
apps/web/src/modules/marketing/home/demo-dashboard.tsx
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
"use client";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { Reveal, SectionIcon } from "./_reveal";
|
||||||
|
import {
|
||||||
|
LOOP_PAUSE_MS,
|
||||||
|
MESH_NAME,
|
||||||
|
PEERS,
|
||||||
|
SCRIPT,
|
||||||
|
SCRIPT_DURATION_MS,
|
||||||
|
type DemoMessage,
|
||||||
|
} from "./demo-dashboard-script";
|
||||||
|
import { MeshStream, type StreamMessage, type StreamPeer } from "./mesh-stream";
|
||||||
|
|
||||||
|
const toStreamMessage = (
|
||||||
|
m: DemoMessage,
|
||||||
|
loopKey: number,
|
||||||
|
): StreamMessage => ({
|
||||||
|
key: `${loopKey}-${m.t}`,
|
||||||
|
from: m.from,
|
||||||
|
to: m.to,
|
||||||
|
type: m.type,
|
||||||
|
text: m.text,
|
||||||
|
ciphertext: m.ciphertext,
|
||||||
|
});
|
||||||
|
|
||||||
|
const STREAM_PEERS: StreamPeer[] = PEERS.map((p) => ({
|
||||||
|
id: p.id,
|
||||||
|
name: p.name,
|
||||||
|
status: p.status,
|
||||||
|
machine: p.machine,
|
||||||
|
surface: p.surface,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const DemoDashboard = () => {
|
||||||
|
const [elapsed, setElapsed] = useState(0);
|
||||||
|
const [playing, setPlaying] = useState(true);
|
||||||
|
const [loopCount, setLoopCount] = useState(0);
|
||||||
|
const startRef = useRef<number>(0);
|
||||||
|
const rafRef = useRef<number | null>(null);
|
||||||
|
|
||||||
|
const tick = useCallback((now: number) => {
|
||||||
|
setElapsed((prev) => {
|
||||||
|
const next = now - startRef.current;
|
||||||
|
if (next >= SCRIPT_DURATION_MS) {
|
||||||
|
startRef.current = now;
|
||||||
|
setLoopCount((c) => c + 1);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
rafRef.current = requestAnimationFrame(tick);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!playing) {
|
||||||
|
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
startRef.current = performance.now() - elapsed;
|
||||||
|
rafRef.current = requestAnimationFrame(tick);
|
||||||
|
return () => {
|
||||||
|
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [playing, tick]);
|
||||||
|
|
||||||
|
const messages = useMemo<StreamMessage[]>(
|
||||||
|
() =>
|
||||||
|
SCRIPT.filter((m) => m.t <= elapsed).map((m) =>
|
||||||
|
toStreamMessage(m, loopCount),
|
||||||
|
),
|
||||||
|
[elapsed, loopCount],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleRestart = () => {
|
||||||
|
setElapsed(0);
|
||||||
|
startRef.current = performance.now();
|
||||||
|
setLoopCount((c) => c + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const footer = (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="h-[2px] bg-[var(--cm-clay)] transition-[width] duration-[100ms] ease-linear"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(100, (elapsed / SCRIPT_DURATION_MS) * 100)}%`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between px-4 py-2 text-[10px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{messages.length} / {SCRIPT.length} messages
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
loop #{loopCount + 1} · {Math.floor(elapsed / 1000)}s /{" "}
|
||||||
|
{Math.floor(SCRIPT_DURATION_MS / 1000)}s
|
||||||
|
</span>
|
||||||
|
<span>{playing ? "▶ playing" : "⏸ paused"}</span>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-6 py-32 md:px-12"
|
||||||
|
id="demo"
|
||||||
|
>
|
||||||
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
||||||
|
<Reveal className="mb-6 flex justify-center">
|
||||||
|
<SectionIcon glyph="grid" />
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={1}>
|
||||||
|
<div
|
||||||
|
className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— see it happen
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={2}>
|
||||||
|
<h2
|
||||||
|
className="mx-auto max-w-4xl text-center text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Watch a mesh.{" "}
|
||||||
|
<span className="italic text-[var(--cm-clay)]">Thirty seconds.</span>
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={3}>
|
||||||
|
<p
|
||||||
|
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Real conversation between peers. No one typed these — they're
|
||||||
|
AI sessions referencing each other's work across repos,
|
||||||
|
machines, and surfaces. Hover any message to see what the broker
|
||||||
|
sees.
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<Reveal delay={4}>
|
||||||
|
<div className="mt-14 overflow-hidden rounded-[var(--cm-radius-lg)] border border-[var(--cm-border)] bg-[var(--cm-bg)] shadow-[0_24px_80px_rgba(0,0,0,0.35)]">
|
||||||
|
{/* window chrome */}
|
||||||
|
<div className="flex items-center justify-between border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-4 py-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex gap-1.5">
|
||||||
|
<span className="h-3 w-3 rounded-full bg-[#FF5F57]" />
|
||||||
|
<span className="h-3 w-3 rounded-full bg-[#FEBC2E]" />
|
||||||
|
<span className="h-3 w-3 rounded-full bg-[#28C840]" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="text-[11px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
mesh.claudemesh.com · {MESH_NAME} · 4 peers online
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setPlaying((p) => !p)}
|
||||||
|
className="rounded border border-[var(--cm-border)] px-2 py-1 text-[10px] uppercase tracking-wider text-[var(--cm-fg-secondary)] transition-colors hover:border-[var(--cm-fg)] hover:text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
aria-label={playing ? "Pause" : "Play"}
|
||||||
|
>
|
||||||
|
{playing ? "pause" : "play"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleRestart}
|
||||||
|
className="rounded border border-[var(--cm-border)] px-2 py-1 text-[10px] uppercase tracking-wider text-[var(--cm-fg-secondary)] transition-colors hover:border-[var(--cm-fg)] hover:text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
aria-label="Restart"
|
||||||
|
>
|
||||||
|
restart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* unused var to silence lint on LOOP_PAUSE_MS if dead-code elimination hits */}
|
||||||
|
<span hidden>{LOOP_PAUSE_MS}</span>
|
||||||
|
<MeshStream
|
||||||
|
peers={STREAM_PEERS}
|
||||||
|
messages={messages}
|
||||||
|
channelLabel="live-stream"
|
||||||
|
footer={footer}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<Reveal delay={5}>
|
||||||
|
<p
|
||||||
|
className="mx-auto mt-8 max-w-2xl text-center text-[13px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
read-only replay · libsodium secretbox encrypts every line · the
|
||||||
|
broker routes ciphertext, never plaintext
|
||||||
|
</p>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -13,11 +13,11 @@ const ITEMS = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Does claudemesh send my code or prompts to the cloud?",
|
q: "Does claudemesh send my code or prompts to the cloud?",
|
||||||
a: "No. The broker is a local WebSocket server. Messages stay on your network. The only data that leaves your machines is what your Claude Code already sends to Anthropic — we don't touch it.",
|
a: "Your messages are end-to-end encrypted. The broker routes ciphertext — it never sees plaintext, file contents, or prompts. For hosted mesh on claudemesh.com: ciphertext + routing metadata (who → whom, when, size) passes through our broker on OVH / Frankfurt. For full data residency, self-host the broker in your own infra (docs/SELF-HOST.md). Either way, the cryptographic guarantee is the same: only peer endpoints can decrypt.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Do I need to run a server?",
|
q: "Do I need to run a server?",
|
||||||
a: "Yes — one machine on your network runs the broker. That can be your laptop, a shared dev box, a Raspberry Pi, or a container in your cluster. It's one binary, SQLite-backed, ~15 MB.",
|
a: "No — claudemesh.com hosts the broker for you. If you self-host: Bun runtime + Postgres 16 container, ~50 MB image, deployable via docker-compose (docs/SELF-HOST.md). Two long-lived processes: broker + Postgres. Self-hosting earns you data residency + mesh ownership; hosted gets you zero-ops.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
q: "Does it work across offices / continents?",
|
q: "Does it work across offices / continents?",
|
||||||
@@ -31,6 +31,26 @@ const ITEMS = [
|
|||||||
q: "Which Claude Code versions work with claudemesh?",
|
q: "Which Claude Code versions work with claudemesh?",
|
||||||
a: "Claude Code 2.0 and above. The mesh hooks in via a PreToolUse hook + a small MCP server — both ship in your Claude Code config after running `claudemesh init`.",
|
a: "Claude Code 2.0 and above. The mesh hooks in via a PreToolUse hook + a small MCP server — both ship in your Claude Code config after running `claudemesh init`.",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
q: "How is this different from MCP?",
|
||||||
|
a: "MCP connects one Claude to tools and services. claudemesh connects many Claudes to each other. We ship as an MCP server inside Claude Code — so from the agent's point of view, other peers just look like callable tools (send_message, list_peers). It composes on top of MCP; it doesn't replace it.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "What stops a malicious peer in my mesh?",
|
||||||
|
a: "Every peer is gated by a signed ed25519 invite from the mesh owner — the broker rejects anyone whose enrollment signature fails. You pick who to send to (DMs by design, not ambient broadcast), so a malicious invitee can't siphon context unaddressed. The broker can't read payloads, but it does see routing metadata. Revoking keys rotates the mesh.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Why a hosted broker instead of pure peer-to-peer?",
|
||||||
|
a: "Rendezvous + offline queueing. Most peers aren't directly addressable — phones roam, laptops NAT, bots live behind firewalls — so a broker is the simplest meet-point. It also holds ciphertext for offline peers until they reconnect. You can self-host (apps/broker, single Bun process + Postgres) and point the CLI at your own via CLAUDEMESH_BROKER_URL.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Do I need Claude Code to use claudemesh?",
|
||||||
|
a: "No. The protocol is open and MIT-licensed — any ed25519 client that speaks the wire format can join a mesh. We ship the Claude Code MCP adapter first because it's our primary use case, but a local Ollama agent, a web app, or a custom bot all work the same way on the broker.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "Can a peer be in multiple meshes?",
|
||||||
|
a: "Yes. Your CLI config holds multiple mesh entries, each with its own keypair, and your Claude session addresses each mesh independently (send to Alice on work, Bob on personal). Cross-mesh bridge peers that auto-forward tagged messages are v0.2; cross-broker federation (your self-host ↔ claudemesh.com) is v0.3.",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const FAQ = () => {
|
export const FAQ = () => {
|
||||||
|
|||||||
@@ -55,8 +55,9 @@ export const Hero = () => {
|
|||||||
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl"
|
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl"
|
||||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
>
|
>
|
||||||
Connect every Claude Code session on your team into one live mesh.
|
Peer mesh for Claude — reachable from anywhere you are. Connect
|
||||||
Ship context, not screenshots. Self-host the broker. Own the wire.
|
every Claude Code session on your team, then bridge the mesh to
|
||||||
|
WhatsApp, Slack, your phone. Terminal is one client, not THE client.
|
||||||
<span className="block pt-2 text-[var(--cm-clay)]">
|
<span className="block pt-2 text-[var(--cm-clay)]">
|
||||||
Free and open-source. Forever.
|
Free and open-source. Forever.
|
||||||
</span>
|
</span>
|
||||||
@@ -66,8 +67,7 @@ export const Hero = () => {
|
|||||||
<Reveal delay={4}>
|
<Reveal delay={4}>
|
||||||
<div className="mt-10 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
|
<div className="mt-10 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
|
||||||
<Link
|
<Link
|
||||||
href="https://github.com/claudemesh/claudemesh"
|
href="/auth/register"
|
||||||
target="_blank"
|
|
||||||
className="group inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-5 py-3 text-[15px] font-medium text-[var(--cm-fg)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
|
className="group inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-5 py-3 text-[15px] font-medium text-[var(--cm-fg)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
|
||||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
>
|
>
|
||||||
|
|||||||
72
apps/web/src/modules/marketing/home/mesh-stats.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import {
|
||||||
|
publicStatsResponseSchema,
|
||||||
|
type PublicStatsResponse,
|
||||||
|
} from "@turbostarter/api/schema";
|
||||||
|
import { handle } from "@turbostarter/api/utils";
|
||||||
|
|
||||||
|
import { api } from "~/lib/api/server";
|
||||||
|
|
||||||
|
const ZERO_STATS: PublicStatsResponse = {
|
||||||
|
messagesRouted: 0,
|
||||||
|
meshesCreated: 0,
|
||||||
|
peersActive: 0,
|
||||||
|
lastUpdated: new Date(0).toISOString(),
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchStats = async (): Promise<PublicStatsResponse> => {
|
||||||
|
try {
|
||||||
|
return await handle(api.public.stats.$get, {
|
||||||
|
schema: publicStatsResponseSchema,
|
||||||
|
})();
|
||||||
|
} catch {
|
||||||
|
return ZERO_STATS;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const nf = new Intl.NumberFormat("en-US");
|
||||||
|
|
||||||
|
export const MeshStats = async () => {
|
||||||
|
const stats = await fetchStats();
|
||||||
|
const empty = stats.messagesRouted === 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="border-t border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-10 md:px-12">
|
||||||
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
||||||
|
<div
|
||||||
|
className="flex flex-col items-center gap-1 text-center text-[13px] text-[var(--cm-fg-tertiary)] md:flex-row md:justify-center md:gap-2"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span className="text-[var(--cm-fg-secondary)]">
|
||||||
|
ciphertext routed
|
||||||
|
</span>
|
||||||
|
<span className="text-[var(--cm-clay)]">→</span>
|
||||||
|
{empty ? (
|
||||||
|
<span className="text-[var(--cm-fg-secondary)]">
|
||||||
|
ready to route
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<span className="tabular-nums text-[var(--cm-fg)]">
|
||||||
|
{nf.format(stats.messagesRouted)} messages
|
||||||
|
</span>
|
||||||
|
<span className="hidden text-[var(--cm-border)] md:inline">·</span>
|
||||||
|
<span className="tabular-nums text-[var(--cm-fg-secondary)]">
|
||||||
|
{nf.format(stats.meshesCreated)} meshes
|
||||||
|
</span>
|
||||||
|
<span className="hidden text-[var(--cm-border)] md:inline">·</span>
|
||||||
|
<span className="tabular-nums text-[var(--cm-fg-secondary)]">
|
||||||
|
{nf.format(stats.peersActive)} peers online
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="mt-2 text-center text-[11px] text-[var(--cm-fg-tertiary)]/70"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
broker sees none of it
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
366
apps/web/src/modules/marketing/home/mesh-stream.tsx
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
"use client";
|
||||||
|
import { motion, AnimatePresence } from "motion/react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export type PeerStatus = "idle" | "working" | "dnd" | "offline";
|
||||||
|
export type MessageType = "ask_mesh" | "self_nominate" | "direct" | "broadcast";
|
||||||
|
|
||||||
|
export interface StreamPeer {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: PeerStatus;
|
||||||
|
/** e.g. "macOS · payments-api" or "iOS · push-relay" */
|
||||||
|
machine: string;
|
||||||
|
surface?: "terminal" | "phone" | "slack";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StreamMessage {
|
||||||
|
/** stable unique key */
|
||||||
|
key: string;
|
||||||
|
/** peer id or display name */
|
||||||
|
from: string;
|
||||||
|
/** peer id, "tag:xxx", "*", or null (self-nominate) */
|
||||||
|
to: string | null;
|
||||||
|
type: MessageType;
|
||||||
|
/** plaintext for demo, undefined for live (broker never sees it) */
|
||||||
|
text?: string;
|
||||||
|
/** truncated base64url — what the broker actually sees */
|
||||||
|
ciphertext: string;
|
||||||
|
/** absolute time, optional — used by live dashboard */
|
||||||
|
createdAt?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATUS_DOT: Record<PeerStatus, string> = {
|
||||||
|
idle: "bg-emerald-500",
|
||||||
|
working: "bg-[var(--cm-clay)] animate-pulse",
|
||||||
|
dnd: "bg-[#c46686]",
|
||||||
|
offline: "bg-[var(--cm-fg-tertiary)]",
|
||||||
|
};
|
||||||
|
|
||||||
|
const TYPE_CHIP: Record<MessageType, { label: string; className: string }> = {
|
||||||
|
ask_mesh: {
|
||||||
|
label: "broadcast",
|
||||||
|
className:
|
||||||
|
"border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-clay)]",
|
||||||
|
},
|
||||||
|
broadcast: {
|
||||||
|
label: "broadcast",
|
||||||
|
className:
|
||||||
|
"border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-clay)]",
|
||||||
|
},
|
||||||
|
self_nominate: {
|
||||||
|
label: "hand-raise",
|
||||||
|
className: "border-emerald-500/40 bg-emerald-500/10 text-emerald-500",
|
||||||
|
},
|
||||||
|
direct: {
|
||||||
|
label: "direct",
|
||||||
|
className:
|
||||||
|
"border-[var(--cm-border)] bg-[var(--cm-bg)] text-[var(--cm-fg-secondary)]",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const TYPE_ICON: Record<MessageType, React.ReactNode> = {
|
||||||
|
ask_mesh: (
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
|
||||||
|
<path d="M12 3v18M3 12h18" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
broadcast: (
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
|
||||||
|
<path d="M12 3v18M3 12h18" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
self_nominate: (
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
|
||||||
|
<path d="M12 19V5M5 12l7-7 7 7" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
direct: (
|
||||||
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
|
||||||
|
<path d="M5 12h14M13 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
const surfaceGlyph = (s?: StreamPeer["surface"]) => {
|
||||||
|
if (s === "phone")
|
||||||
|
return (
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="7" y="2" width="10" height="20" rx="2" stroke="currentColor" strokeWidth="2" />
|
||||||
|
<circle cx="12" cy="18" r="1" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
if (s === "slack")
|
||||||
|
return (
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="10" y="3" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="2" />
|
||||||
|
<rect x="12" y="15" width="2" height="6" rx="1" stroke="currentColor" strokeWidth="2" />
|
||||||
|
<rect x="3" y="10" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="2" />
|
||||||
|
<rect x="15" y="12" width="6" height="2" rx="1" stroke="currentColor" strokeWidth="2" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none">
|
||||||
|
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
|
||||||
|
<path d="M6 9l3 3-3 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resolveName = (id: string, peers: StreamPeer[]) =>
|
||||||
|
peers.find((p) => p.id === id)?.name ?? id;
|
||||||
|
|
||||||
|
export interface MeshStreamProps {
|
||||||
|
peers: StreamPeer[];
|
||||||
|
messages: StreamMessage[];
|
||||||
|
/** text shown in stream header, right of # */
|
||||||
|
channelLabel?: string;
|
||||||
|
/** override the "N peers online" hint */
|
||||||
|
peersHint?: string;
|
||||||
|
/** override empty-state message */
|
||||||
|
emptyLabel?: string;
|
||||||
|
/** footer content (stats / progress bar / timers) */
|
||||||
|
footer?: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* When true (live dashboard), the message list gets a fixed viewport
|
||||||
|
* with overflow-y-auto — standard chat UI. When false (landing demo),
|
||||||
|
* the list grows intrinsically so wheel events pass through to the
|
||||||
|
* page scroll instead of being captured by the list.
|
||||||
|
*/
|
||||||
|
scrollable?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MeshStream = ({
|
||||||
|
peers,
|
||||||
|
messages,
|
||||||
|
channelLabel = "live-stream",
|
||||||
|
peersHint,
|
||||||
|
emptyLabel = "Waiting for messages…",
|
||||||
|
footer,
|
||||||
|
scrollable = false,
|
||||||
|
}: MeshStreamProps) => {
|
||||||
|
const [focusedPeer, setFocusedPeer] = useState<string | null>(null);
|
||||||
|
const [hoveredKey, setHoveredKey] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const onlineCount = peers.filter((p) => p.status !== "offline").length;
|
||||||
|
const filtered = focusedPeer
|
||||||
|
? messages.filter((m) => m.from === focusedPeer || m.to === focusedPeer)
|
||||||
|
: messages;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"grid grid-cols-1 md:grid-cols-[220px_1fr] " +
|
||||||
|
(scrollable ? "min-h-[480px]" : "")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/* peers sidebar */}
|
||||||
|
<aside
|
||||||
|
className="border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]/20 p-4 md:border-b-0 md:border-r"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="mb-3 flex items-center justify-between text-[10px] uppercase tracking-[0.18em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span>{peersHint ?? `peers · ${onlineCount} online`}</span>
|
||||||
|
{focusedPeer && (
|
||||||
|
<button
|
||||||
|
onClick={() => setFocusedPeer(null)}
|
||||||
|
className="text-[var(--cm-clay)] hover:underline"
|
||||||
|
aria-label="Clear filter"
|
||||||
|
>
|
||||||
|
clear
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{peers.length === 0 ? (
|
||||||
|
<p
|
||||||
|
className="text-[12px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
no peers online
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{peers.map((p) => {
|
||||||
|
const active = focusedPeer === p.id;
|
||||||
|
return (
|
||||||
|
<li key={p.id}>
|
||||||
|
<button
|
||||||
|
onClick={() => setFocusedPeer(active ? null : p.id)}
|
||||||
|
className={
|
||||||
|
"group flex w-full items-center gap-2.5 rounded-[var(--cm-radius-xs)] px-2 py-1.5 text-left transition-colors " +
|
||||||
|
(active
|
||||||
|
? "bg-[var(--cm-clay)]/15"
|
||||||
|
: "hover:bg-[var(--cm-bg)]")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"h-2 w-2 flex-shrink-0 rounded-full " +
|
||||||
|
STATUS_DOT[p.status]
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"truncate text-[13px] " +
|
||||||
|
(active
|
||||||
|
? "font-medium text-[var(--cm-clay)]"
|
||||||
|
: "text-[var(--cm-fg)]")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{p.name}
|
||||||
|
</span>
|
||||||
|
<span className="text-[var(--cm-fg-tertiary)]">
|
||||||
|
{surfaceGlyph(p.surface)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="truncate text-[10px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{p.machine}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* message stream */}
|
||||||
|
<div
|
||||||
|
className="relative flex flex-col"
|
||||||
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 border-b border-[var(--cm-border)] px-4 py-2.5"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span className="text-[var(--cm-clay)]">#</span>
|
||||||
|
<span className="text-[13px] font-medium text-[var(--cm-fg)]">
|
||||||
|
{channelLabel}
|
||||||
|
</span>
|
||||||
|
<span className="text-[11px] text-[var(--cm-fg-tertiary)]">
|
||||||
|
{focusedPeer
|
||||||
|
? `filtered: ${resolveName(focusedPeer, peers)}`
|
||||||
|
: "all peers · E2E encrypted"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ol
|
||||||
|
className={
|
||||||
|
"space-y-3 p-4 " +
|
||||||
|
(scrollable ? "flex-1 overflow-y-auto" : "")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{filtered.length === 0 && (
|
||||||
|
<li
|
||||||
|
className="py-8 text-center text-[13px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{emptyLabel}
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
<AnimatePresence initial={false}>
|
||||||
|
{filtered.map((m) => (
|
||||||
|
<motion.li
|
||||||
|
key={m.key}
|
||||||
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.4,
|
||||||
|
ease: [0.22, 0.61, 0.36, 1],
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setHoveredKey(m.key)}
|
||||||
|
onMouseLeave={() => setHoveredKey(null)}
|
||||||
|
className="group relative"
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 pt-0.5">
|
||||||
|
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-[var(--cm-bg-elevated)] text-[10px] font-medium uppercase text-[var(--cm-fg-secondary)]">
|
||||||
|
{resolveName(m.from, peers).slice(0, 2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="mb-1 flex flex-wrap items-center gap-2">
|
||||||
|
<span className="text-[13px] font-medium text-[var(--cm-fg)]">
|
||||||
|
{resolveName(m.from, peers)}
|
||||||
|
</span>
|
||||||
|
{m.to && (
|
||||||
|
<>
|
||||||
|
<span className="text-[11px] text-[var(--cm-fg-tertiary)]">
|
||||||
|
→
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="text-[12px] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{m.to.startsWith("tag:") || m.to === "*"
|
||||||
|
? m.to
|
||||||
|
: resolveName(m.to, peers)}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"inline-flex items-center gap-1 rounded-[4px] border px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wider " +
|
||||||
|
TYPE_CHIP[m.type].className
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{TYPE_ICON[m.type]}
|
||||||
|
{TYPE_CHIP[m.type].label}
|
||||||
|
</span>
|
||||||
|
{m.createdAt && (
|
||||||
|
<span
|
||||||
|
className="text-[10px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{m.createdAt.toLocaleTimeString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{m.text && (
|
||||||
|
<p
|
||||||
|
className="text-[14px] leading-[1.55] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{m.text}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{hoveredKey === m.key && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 4 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="mt-2 rounded-[var(--cm-radius-xs)] border border-dashed border-[var(--cm-clay)]/40 bg-[var(--cm-bg-elevated)]/50 px-3 py-2"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<div className="mb-1 text-[9px] uppercase tracking-wider text-[var(--cm-clay)]">
|
||||||
|
broker sees only this
|
||||||
|
</div>
|
||||||
|
<code className="block break-all text-[11px] text-[var(--cm-fg-tertiary)]">
|
||||||
|
{m.ciphertext}
|
||||||
|
{m.ciphertext && !m.text && "…"}
|
||||||
|
</code>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.li>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</ol>
|
||||||
|
{footer && (
|
||||||
|
<div className="border-t border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]/30">
|
||||||
|
{footer}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -9,8 +9,8 @@ const TIERS = {
|
|||||||
name: "Solo",
|
name: "Solo",
|
||||||
desc: "Run the broker on your laptop. Pair your Claude Code sessions across repos.",
|
desc: "Run the broker on your laptop. Pair your Claude Code sessions across repos.",
|
||||||
price: "Free",
|
price: "Free",
|
||||||
cta: "Install locally",
|
cta: "Start free",
|
||||||
href: "https://github.com/claudemesh/claudemesh",
|
href: "/auth/register",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Pro",
|
name: "Pro",
|
||||||
@@ -18,7 +18,7 @@ const TIERS = {
|
|||||||
price: "$12",
|
price: "$12",
|
||||||
note: "per month",
|
note: "per month",
|
||||||
cta: "Start free trial",
|
cta: "Start free trial",
|
||||||
href: "#",
|
href: "/auth/register",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Plus",
|
name: "Plus",
|
||||||
@@ -26,7 +26,7 @@ const TIERS = {
|
|||||||
price: "$24",
|
price: "$24",
|
||||||
note: "per month",
|
note: "per month",
|
||||||
cta: "Start free trial",
|
cta: "Start free trial",
|
||||||
href: "#",
|
href: "/auth/register",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
team: [
|
team: [
|
||||||
@@ -35,23 +35,23 @@ const TIERS = {
|
|||||||
desc: "Self-hosted broker. SSO, shared presence, team audit log, 25 peers.",
|
desc: "Self-hosted broker. SSO, shared presence, team audit log, 25 peers.",
|
||||||
price: "$99",
|
price: "$99",
|
||||||
note: "per month · unlimited peers",
|
note: "per month · unlimited peers",
|
||||||
cta: "Get started",
|
cta: "Start free",
|
||||||
href: "#",
|
href: "/auth/register",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Business",
|
name: "Business",
|
||||||
desc: "Multi-region brokers, retention controls, Slack/Linear bridges.",
|
desc: "Multi-region brokers, retention controls, Slack/Linear bridges.",
|
||||||
price: "$499",
|
price: "$499",
|
||||||
note: "per month",
|
note: "per month",
|
||||||
cta: "Get started",
|
cta: "Start free",
|
||||||
href: "#",
|
href: "/auth/register",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Enterprise",
|
name: "Enterprise",
|
||||||
desc: "Air-gapped deploy, custom SAML, dedicated support, SOC 2 pack.",
|
desc: "Air-gapped deploy, custom SAML, dedicated support, SOC 2 pack.",
|
||||||
price: "Contact",
|
price: "Contact",
|
||||||
cta: "Contact sales",
|
cta: "Contact sales",
|
||||||
href: "#",
|
href: "/contact",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,6 +3,12 @@ import { useState } from "react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
const NEWS = [
|
const NEWS = [
|
||||||
|
{
|
||||||
|
tag: "New",
|
||||||
|
title: "claudemesh launch (v0.1.2)",
|
||||||
|
body: "Real-time peer messages pushed into Claude Code mid-turn. One command. Source open at github.com/alezmad/claudemesh-cli.",
|
||||||
|
href: "https://github.com/alezmad/claudemesh-cli",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
tag: "Beta",
|
tag: "Beta",
|
||||||
title: "Mesh Dashboard",
|
title: "Mesh Dashboard",
|
||||||
|
|||||||
469
apps/web/src/modules/marketing/home/what-is-claudemesh.tsx
Normal file
@@ -0,0 +1,469 @@
|
|||||||
|
import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Architecture diagram — broker in the center, peers orbiting,
|
||||||
|
* ciphertext on every edge. No single peer is "the client."
|
||||||
|
*/
|
||||||
|
const MeshDiagram = () => {
|
||||||
|
const CX = 400;
|
||||||
|
const CY = 260;
|
||||||
|
const R = 170;
|
||||||
|
|
||||||
|
const peers: Array<{
|
||||||
|
angle: number;
|
||||||
|
label: string;
|
||||||
|
sub: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
}> = [
|
||||||
|
{
|
||||||
|
angle: -90,
|
||||||
|
label: "your terminal",
|
||||||
|
sub: "claude code · repo A",
|
||||||
|
icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
angle: -30,
|
||||||
|
label: "teammate's claude",
|
||||||
|
sub: "claude code · repo B",
|
||||||
|
icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
angle: 30,
|
||||||
|
label: "phone peer",
|
||||||
|
sub: "ios · same keypair",
|
||||||
|
icon: (
|
||||||
|
<>
|
||||||
|
<rect x="7" y="3" width="10" height="18" rx="2" />
|
||||||
|
<circle cx="12" cy="18" r="0.8" fill="currentColor" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
angle: 90,
|
||||||
|
label: "whatsapp gateway",
|
||||||
|
sub: "bot · signs as a peer",
|
||||||
|
icon: (
|
||||||
|
<path
|
||||||
|
d="M12 2a10 10 0 00-8.6 15.1L2 22l5-1.4A10 10 0 1012 2z"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
angle: 150,
|
||||||
|
label: "slack peer",
|
||||||
|
sub: "workspace · channel routes",
|
||||||
|
icon: (
|
||||||
|
<>
|
||||||
|
<rect x="3" y="10" width="6" height="2" rx="1" />
|
||||||
|
<rect x="15" y="12" width="6" height="2" rx="1" />
|
||||||
|
<rect x="10" y="3" width="2" height="6" rx="1" />
|
||||||
|
<rect x="12" y="15" width="2" height="6" rx="1" />
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
angle: -150,
|
||||||
|
label: "another laptop",
|
||||||
|
sub: "claude code · repo C",
|
||||||
|
icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const toXY = (angle: number) => {
|
||||||
|
const rad = (angle * Math.PI) / 180;
|
||||||
|
return { x: CX + R * Math.cos(rad), y: CY + R * Math.sin(rad) };
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative mx-auto max-w-4xl">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 800 520"
|
||||||
|
className="h-auto w-full"
|
||||||
|
role="img"
|
||||||
|
aria-label="claudemesh architecture: broker at center, peers orbiting, all traffic end-to-end encrypted"
|
||||||
|
>
|
||||||
|
{peers.map((p, i) => {
|
||||||
|
const { x, y } = toXY(p.angle);
|
||||||
|
return (
|
||||||
|
<line
|
||||||
|
key={`line-${i}`}
|
||||||
|
x1={CX}
|
||||||
|
y1={CY}
|
||||||
|
x2={x}
|
||||||
|
y2={y}
|
||||||
|
stroke="var(--cm-clay)"
|
||||||
|
strokeOpacity="0.35"
|
||||||
|
strokeWidth="1"
|
||||||
|
strokeDasharray="4 4"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<g>
|
||||||
|
{(() => {
|
||||||
|
const { x, y } = toXY(-30);
|
||||||
|
const mx = (CX + x) / 2 + 16;
|
||||||
|
const my = (CY + y) / 2 - 8;
|
||||||
|
return (
|
||||||
|
<text
|
||||||
|
x={mx}
|
||||||
|
y={my}
|
||||||
|
fill="var(--cm-fg-tertiary)"
|
||||||
|
fontSize="10"
|
||||||
|
fontFamily="var(--cm-font-mono)"
|
||||||
|
letterSpacing="0.1em"
|
||||||
|
>
|
||||||
|
CIPHERTEXT
|
||||||
|
</text>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</g>
|
||||||
|
|
||||||
|
{peers.map((p, i) => {
|
||||||
|
const { x, y } = toXY(p.angle);
|
||||||
|
const labelAbove = p.angle < 0;
|
||||||
|
const ty = labelAbove ? y - 56 : y + 56;
|
||||||
|
const subTy = labelAbove ? y - 42 : y + 70;
|
||||||
|
return (
|
||||||
|
<g key={`peer-${i}`}>
|
||||||
|
<circle
|
||||||
|
cx={x}
|
||||||
|
cy={y}
|
||||||
|
r="28"
|
||||||
|
fill="var(--cm-bg)"
|
||||||
|
stroke="var(--cm-clay)"
|
||||||
|
strokeOpacity="0.55"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
<g
|
||||||
|
transform={`translate(${x - 12}, ${y - 12})`}
|
||||||
|
stroke="var(--cm-clay)"
|
||||||
|
strokeWidth="1.4"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
{p.icon}
|
||||||
|
</g>
|
||||||
|
<text
|
||||||
|
x={x}
|
||||||
|
y={ty}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="var(--cm-fg)"
|
||||||
|
fontSize="12"
|
||||||
|
fontFamily="var(--cm-font-sans)"
|
||||||
|
>
|
||||||
|
{p.label}
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x={x}
|
||||||
|
y={subTy}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="var(--cm-fg-tertiary)"
|
||||||
|
fontSize="10"
|
||||||
|
fontFamily="var(--cm-font-mono)"
|
||||||
|
letterSpacing="0.05em"
|
||||||
|
>
|
||||||
|
{p.sub}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<g>
|
||||||
|
<rect
|
||||||
|
x={CX - 78}
|
||||||
|
y={CY - 32}
|
||||||
|
width="156"
|
||||||
|
height="64"
|
||||||
|
rx="6"
|
||||||
|
fill="var(--cm-bg-elevated)"
|
||||||
|
stroke="var(--cm-clay)"
|
||||||
|
strokeWidth="1.2"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={CX}
|
||||||
|
y={CY - 8}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="var(--cm-fg)"
|
||||||
|
fontSize="14"
|
||||||
|
fontFamily="var(--cm-font-sans)"
|
||||||
|
fontWeight="500"
|
||||||
|
>
|
||||||
|
broker
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x={CX}
|
||||||
|
y={CY + 10}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="var(--cm-clay)"
|
||||||
|
fontSize="10"
|
||||||
|
fontFamily="var(--cm-font-mono)"
|
||||||
|
letterSpacing="0.08em"
|
||||||
|
>
|
||||||
|
routes only
|
||||||
|
</text>
|
||||||
|
<text
|
||||||
|
x={CX}
|
||||||
|
y={CY + 24}
|
||||||
|
textAnchor="middle"
|
||||||
|
fill="var(--cm-fg-tertiary)"
|
||||||
|
fontSize="9"
|
||||||
|
fontFamily="var(--cm-font-mono)"
|
||||||
|
letterSpacing="0.08em"
|
||||||
|
>
|
||||||
|
never decrypts
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type UseCase = {
|
||||||
|
tag: string;
|
||||||
|
title: string;
|
||||||
|
before: string;
|
||||||
|
now: string;
|
||||||
|
limits: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const USE_CASES: UseCase[] = [
|
||||||
|
{
|
||||||
|
tag: "solo · multi-machine",
|
||||||
|
title: "One dev, three machines",
|
||||||
|
before:
|
||||||
|
"Laptop, desktop, cloud dev box — each Claude session an island. You re-explain what you're doing every time you switch machines.",
|
||||||
|
now: "Your desktop's Claude asks your laptop's Claude what it was touching. Context travels with you. The machine stops mattering.",
|
||||||
|
limits:
|
||||||
|
"Both peers have to be online. It shares live conversational context — not git state, not open files.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "team · cross-repo",
|
||||||
|
title: "Bug Alice fixed, Bob rediscovers",
|
||||||
|
before:
|
||||||
|
"Alice in payments-api fixes a Stripe signature bug. Two weeks later, Bob in checkout-frontend hits the same thing. Alice's fix is buried in a PR thread. Bob re-solves it for three hours.",
|
||||||
|
now: "Bob's Claude asks the mesh: who's seen this? Alice's Claude self-nominates with context. Bob solves in ten minutes. Alice isn't interrupted — her Claude surfaces the history on its own.",
|
||||||
|
limits:
|
||||||
|
"Each Claude stays inside its own repo. Nobody's reading anyone else's files. Information flows at the agent layer, with a human still on the PR.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "mobile · oversight",
|
||||||
|
title: "CI fails at 3am",
|
||||||
|
before:
|
||||||
|
"Alert on your phone. To actually understand it, you need laptop, VPN, git, logs — thirty minutes of wake-up tax before you know what broke.",
|
||||||
|
now: "WhatsApp gateway peer forwards the alert. You ask the ops-server Claude what triggered it. It answers. You say roll it back. Done from bed.",
|
||||||
|
limits:
|
||||||
|
"The WhatsApp/phone gateway is on the v0.2 roadmap — the protocol is ready, the bot isn't shipped yet. Someone could build it in a weekend.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const NOT_ITEMS = [
|
||||||
|
"a chatbot you talk to",
|
||||||
|
"a replacement for docs, PRs, or Slack",
|
||||||
|
"a central AI brain",
|
||||||
|
'"access Claude from Telegram"',
|
||||||
|
"auto-magic · peers only surface info when asked",
|
||||||
|
];
|
||||||
|
|
||||||
|
export const WhatIsClaudemesh = () => {
|
||||||
|
return (
|
||||||
|
<section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-32 md:px-12">
|
||||||
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
||||||
|
<Reveal className="mb-6 flex justify-center">
|
||||||
|
<SectionIcon glyph="mesh" />
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={1}>
|
||||||
|
<div
|
||||||
|
className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— what is claudemesh?
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
<Reveal delay={2}>
|
||||||
|
<h2
|
||||||
|
className="mx-auto max-w-4xl text-center text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
A mesh of Claudes.{" "}
|
||||||
|
<span className="italic text-[var(--cm-clay)]">
|
||||||
|
Not one you talk to.
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* Mental shift: before / after */}
|
||||||
|
<Reveal delay={3}>
|
||||||
|
<div className="mx-auto mt-16 grid max-w-4xl gap-px overflow-hidden rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-border)] md:grid-cols-2">
|
||||||
|
<div className="bg-[var(--cm-bg-elevated)] p-8">
|
||||||
|
<div
|
||||||
|
className="mb-3 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
before
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-[16px] leading-[1.65] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
One Claude per project. Each is an island. Context dies when
|
||||||
|
you close the terminal. Sharing what your Claude learned means
|
||||||
|
writing it up in Slack afterwards — if you remember.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-[var(--cm-bg-elevated)] p-8">
|
||||||
|
<div
|
||||||
|
className="mb-3 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
with the mesh
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-[16px] leading-[1.65] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
A mesh of Claudes. Each keeps its own repo, memory, history.
|
||||||
|
They reference each other on demand. Your identity travels
|
||||||
|
across surfaces. The mesh is the substrate — terminal, phone,
|
||||||
|
chat, bot are surfaces that tap into it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* Use cases */}
|
||||||
|
<Reveal delay={4} className="mt-24 text-center">
|
||||||
|
<div
|
||||||
|
className="mb-3 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— what it actually does
|
||||||
|
</div>
|
||||||
|
<h3
|
||||||
|
className="mx-auto max-w-2xl text-[clamp(1.5rem,2.8vw,2rem)] font-medium leading-[1.2] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Three scenarios, with the honest limits.
|
||||||
|
</h3>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
<RevealStagger className="mx-auto mt-14 grid max-w-6xl gap-6 md:grid-cols-3">
|
||||||
|
{USE_CASES.map((u) => (
|
||||||
|
<StaggerItem
|
||||||
|
key={u.title}
|
||||||
|
className="flex flex-col gap-5 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-7"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="text-[10px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{u.tag}
|
||||||
|
</div>
|
||||||
|
<h4
|
||||||
|
className="text-[1.25rem] font-medium leading-snug text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{u.title}
|
||||||
|
</h4>
|
||||||
|
<div className="flex flex-col gap-4 border-t border-[var(--cm-border)] pt-5">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
before
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{u.before}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
now
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-[13px] leading-[1.6] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
{u.now}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
honest limits
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className="text-[12px] leading-[1.6] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{u.limits}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</StaggerItem>
|
||||||
|
))}
|
||||||
|
</RevealStagger>
|
||||||
|
|
||||||
|
{/* Architecture diagram */}
|
||||||
|
<Reveal delay={1} className="mt-28">
|
||||||
|
<div
|
||||||
|
className="mb-8 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— the wire
|
||||||
|
</div>
|
||||||
|
<MeshDiagram />
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* What it's NOT */}
|
||||||
|
<Reveal delay={2} className="mx-auto mt-24 max-w-3xl">
|
||||||
|
<div
|
||||||
|
className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
— what claudemesh is not
|
||||||
|
</div>
|
||||||
|
<ul className="flex flex-col gap-3">
|
||||||
|
{NOT_ITEMS.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item}
|
||||||
|
className="flex items-start gap-3 border-b border-[var(--cm-border)] pb-3 text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)] last:border-b-0"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="mt-[3px] select-none text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
✗
|
||||||
|
</span>
|
||||||
|
<span>{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</Reveal>
|
||||||
|
|
||||||
|
{/* One-liner closer */}
|
||||||
|
<Reveal delay={3} className="mx-auto mt-20 max-w-3xl">
|
||||||
|
<blockquote
|
||||||
|
className="border-l-2 border-[var(--cm-clay)] pl-6 text-[clamp(1.125rem,2vw,1.375rem)] italic leading-[1.55] text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
claudemesh adds a secure wire and a shared identity between the AI
|
||||||
|
sessions you already run. Your Claudes stay specialized — each
|
||||||
|
knows its own repo. The mesh lets them reference each other's
|
||||||
|
work when useful. The human coordinates once, instead of N times.
|
||||||
|
</blockquote>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { useTranslation } from "@turbostarter/i18n";
|
|
||||||
import { cn } from "@turbostarter/ui";
|
|
||||||
import { buttonVariants } from "@turbostarter/ui-web/button";
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogDescription,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@turbostarter/ui-web/dialog";
|
|
||||||
import { Icons } from "@turbostarter/ui-web/icons";
|
|
||||||
|
|
||||||
const MIN_DELAY_MS = 15_000;
|
|
||||||
const STORAGE_LAST_SHOWN_AT = "buyCtaDialog:lastShownAt";
|
|
||||||
const STORAGE_PREV_DELAY_MS = "buyCtaDialog:prevDelayMs";
|
|
||||||
|
|
||||||
export const BuyCtaDialog = () => {
|
|
||||||
const { t } = useTranslation(["common", "marketing"]);
|
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const timeoutIdRef = useRef<number | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const scheduleNext = () => {
|
|
||||||
const now = Date.now();
|
|
||||||
const storedLastShown = Number(
|
|
||||||
window.localStorage.getItem(STORAGE_LAST_SHOWN_AT) ?? "0",
|
|
||||||
);
|
|
||||||
const prevDelayMs = Number(
|
|
||||||
window.localStorage.getItem(STORAGE_PREV_DELAY_MS) ?? "0",
|
|
||||||
);
|
|
||||||
|
|
||||||
const nextDelay = Math.max(
|
|
||||||
MIN_DELAY_MS,
|
|
||||||
prevDelayMs ? prevDelayMs * 2 : MIN_DELAY_MS,
|
|
||||||
);
|
|
||||||
|
|
||||||
const baseNextShow = storedLastShown
|
|
||||||
? storedLastShown + nextDelay
|
|
||||||
: now + nextDelay;
|
|
||||||
|
|
||||||
const delayFromNow = Math.max(MIN_DELAY_MS, baseNextShow - now);
|
|
||||||
|
|
||||||
if (timeoutIdRef.current) {
|
|
||||||
window.clearTimeout(timeoutIdRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
timeoutIdRef.current = window.setTimeout(() => {
|
|
||||||
setOpen(true);
|
|
||||||
|
|
||||||
const shownAt = Date.now();
|
|
||||||
window.localStorage.setItem(STORAGE_LAST_SHOWN_AT, String(shownAt));
|
|
||||||
window.localStorage.setItem(STORAGE_PREV_DELAY_MS, String(nextDelay));
|
|
||||||
|
|
||||||
scheduleNext();
|
|
||||||
}, delayFromNow);
|
|
||||||
};
|
|
||||||
|
|
||||||
scheduleNext();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (timeoutIdRef.current) {
|
|
||||||
window.clearTimeout(timeoutIdRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
|
||||||
<DialogContent className="max-w-md">
|
|
||||||
<DialogHeader className="space-y-3">
|
|
||||||
<DialogTitle>{t("cta.buy.question")}</DialogTitle>
|
|
||||||
<DialogDescription className="text-foreground text-base">
|
|
||||||
{t("cta.buy.description")}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://turbostarter.dev/#pricing"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={cn(buttonVariants(), "gap-2")}
|
|
||||||
>
|
|
||||||
<Icons.Code className="size-4" />
|
|
||||||
{t("cta.buy.button")}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div className="bg-border relative -mx-6 my-3 h-px">
|
|
||||||
<span className="bg-background text-muted-foreground absolute left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 text-sm">
|
|
||||||
{t("or")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<p>{t("cta.buy.join.description")}</p>
|
|
||||||
|
|
||||||
<a
|
|
||||||
className={cn(
|
|
||||||
buttonVariants(),
|
|
||||||
"gap-2 bg-[#5865F2] px-7 no-underline hover:bg-[#5865F2]/95",
|
|
||||||
)}
|
|
||||||
href="https://discord.gg/KjpK2uk3JP"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<Icons.Discord className="size-[1.35rem] text-white" />
|
|
||||||
<span className="font-semibold text-white">
|
|
||||||
{t("cta.buy.join.button")}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,189 +1,141 @@
|
|||||||
import { getTranslation } from "@turbostarter/i18n/server";
|
import Link from "next/link";
|
||||||
import { isExternal } from "@turbostarter/shared/utils";
|
|
||||||
import { BuiltWith } from "@turbostarter/ui-web/built-with";
|
import { BuiltWith } from "@turbostarter/ui-web/built-with";
|
||||||
import { Icons } from "@turbostarter/ui-web/icons";
|
import { Icons } from "@turbostarter/ui-web/icons";
|
||||||
|
|
||||||
import { appConfig } from "~/config/app";
|
import { appConfig } from "~/config/app";
|
||||||
import { pathsConfig } from "~/config/paths";
|
import { pathsConfig } from "~/config/paths";
|
||||||
import { I18nControls } from "~/modules/common/i18n/controls";
|
import { I18nControls } from "~/modules/common/i18n/controls";
|
||||||
import { TurboLink } from "~/modules/common/turbo-link";
|
|
||||||
|
|
||||||
const socials = [
|
const REPO_URL = "https://github.com/alezmad/claudemesh";
|
||||||
{
|
const OSS_URL = "https://github.com/alezmad/claude-intercom";
|
||||||
id: "x",
|
|
||||||
href: "https://x.com/turbostarter_",
|
|
||||||
icon: Icons.Twitter,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "github",
|
|
||||||
href: "https://github.com/turbostarter",
|
|
||||||
icon: Icons.Github,
|
|
||||||
},
|
|
||||||
|
|
||||||
|
const columns = [
|
||||||
{
|
{
|
||||||
id: "facebook",
|
label: "product",
|
||||||
href: "#",
|
items: [
|
||||||
icon: Icons.Facebook,
|
{ title: "Docs", href: "#docs" },
|
||||||
|
{ title: "Pricing", href: pathsConfig.marketing.pricing },
|
||||||
|
{ title: "Changelog", href: "#changelog" },
|
||||||
|
{ title: "Contact", href: pathsConfig.marketing.contact },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "linkedin",
|
label: "protocol",
|
||||||
href: "#",
|
items: [
|
||||||
icon: Icons.Linkedin,
|
{ title: "GitHub", href: REPO_URL },
|
||||||
|
{ title: "claude-intercom (OSS)", href: OSS_URL },
|
||||||
|
{ title: "Protocol spec", href: `${OSS_URL}#protocol` },
|
||||||
|
{ title: "Self-host broker", href: `${REPO_URL}#self-host` },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const links = [
|
export const Footer = () => {
|
||||||
{
|
|
||||||
label: "common:product",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "marketing:product.mobile.ios.title",
|
|
||||||
href: "https://turbostarter.dev",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:product.mobile.android.title",
|
|
||||||
href: "https://turbostarter.dev",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:product.extension.chrome.title",
|
|
||||||
href: "https://chromewebstore.google.com/detail/bcjmonmlfbnngpkllpnpmnjajaciaboo",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:product.extension.firefox.title",
|
|
||||||
href: "https://addons.mozilla.org/addon/turbostarter_",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:product.extension.edge.title",
|
|
||||||
href: "https://microsoftedge.microsoft.com/addons/detail/turbostarter/ianbflanmmoeleokihabnmmcahhfijig",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "resources",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "marketing:contact.label",
|
|
||||||
href: pathsConfig.marketing.contact,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:roadmap.title",
|
|
||||||
href: "https://github.com/orgs/turbostarter/projects/1",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:docs.title",
|
|
||||||
href: "https://turbostarter.dev/docs/web",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:api.title",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "about",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "billing:pricing.label",
|
|
||||||
href: pathsConfig.marketing.pricing,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "marketing:blog.label",
|
|
||||||
href: pathsConfig.marketing.blog.index,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "legal.label",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: "legal.privacy",
|
|
||||||
href: pathsConfig.marketing.legal("privacy-policy"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "legal.terms",
|
|
||||||
href: pathsConfig.marketing.legal("terms-and-conditions"),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export const Footer = async () => {
|
|
||||||
const { t } = await getTranslation({
|
|
||||||
ns: ["common", "marketing", "billing"],
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className="mt-auto w-full border-t px-6 pt-8 pb-6 sm:pt-10 sm:pb-8 md:pt-14 md:pb-10 lg:pt-16">
|
<footer
|
||||||
<div className="sm:container">
|
className="mt-auto w-full border-t border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 pt-12 pb-8 md:px-12 md:pt-16"
|
||||||
<div className="flex w-full flex-col items-start justify-between gap-10 md:gap-16 lg:flex-row lg:gap-24 xl:gap-32">
|
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||||
<div className="flex flex-col items-start justify-center gap-2">
|
>
|
||||||
<TurboLink
|
<div className="mx-auto max-w-[var(--cm-max-w)]">
|
||||||
|
<div className="flex flex-col gap-10 lg:flex-row lg:gap-16">
|
||||||
|
{/* wordmark + tagline */}
|
||||||
|
<div className="flex flex-col gap-4 lg:w-80">
|
||||||
|
<Link
|
||||||
href={pathsConfig.index}
|
href={pathsConfig.index}
|
||||||
className="flex shrink-0 items-center gap-3"
|
className="group flex items-center gap-2.5"
|
||||||
aria-label={t("home")}
|
aria-label="claudemesh home"
|
||||||
>
|
>
|
||||||
<Icons.Logo className="text-primary h-8" />
|
<svg
|
||||||
<Icons.LogoText className="text-foreground h-4" />
|
width="20"
|
||||||
</TurboLink>
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
<p className="text-muted-foreground text-sm text-pretty">
|
fill="none"
|
||||||
{t("product.title")}
|
className="text-[var(--cm-clay)]"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="4" r="2" fill="currentColor" />
|
||||||
|
<circle cx="4" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="20" cy="12" r="2" fill="currentColor" />
|
||||||
|
<circle cx="12" cy="20" r="2" fill="currentColor" />
|
||||||
|
<path
|
||||||
|
d="M12 4L4 12M12 4L20 12M4 12L12 20M20 12L12 20M4 12L20 12M12 4L12 20"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.2"
|
||||||
|
opacity="0.45"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
className="text-[17px] font-medium tracking-tight text-[var(--cm-fg)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
claudemesh
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
<p
|
||||||
|
className="text-sm leading-[1.55] text-[var(--cm-fg-secondary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||||
|
>
|
||||||
|
Peer mesh for Claude Code. Every session, woven into one mesh —
|
||||||
|
reachable from anywhere you are.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<I18nControls />
|
<I18nControls />
|
||||||
|
|
||||||
<div className="mt-2 flex items-center gap-2.5">
|
<div className="mt-2 flex items-center gap-2.5">
|
||||||
{socials.map((social) => (
|
<a
|
||||||
<a
|
href={REPO_URL}
|
||||||
key={social.id}
|
target="_blank"
|
||||||
href={social.href}
|
rel="noopener noreferrer"
|
||||||
rel="noopener noreferrer"
|
aria-label="claudemesh on GitHub"
|
||||||
target="_blank"
|
className="text-[var(--cm-fg-tertiary)] transition-colors hover:text-[var(--cm-fg)]"
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
>
|
||||||
aria-label={social.id}
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||||
>
|
<path d="M12 .3a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6a4.7 4.7 0 011.3-3.3c-.2-.3-.6-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 3 .1 3.3a4.7 4.7 0 011.3 3.3c0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0012 .3" />
|
||||||
<social.icon className="size-7" />
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-1 grid w-full max-w-[50rem] grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4">
|
{/* link columns */}
|
||||||
{links.map((link) => (
|
<div className="grid flex-1 grid-cols-2 gap-8 md:grid-cols-2 lg:gap-12">
|
||||||
<div className="flex w-full flex-col gap-4" key={link.label}>
|
{columns.map((col) => (
|
||||||
<span className="text-foreground text-sm font-medium">
|
<div key={col.label} className="flex flex-col gap-3">
|
||||||
{t(link.label)}
|
<span
|
||||||
|
className="text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
{col.label}
|
||||||
</span>
|
</span>
|
||||||
<nav>
|
<ul className="flex flex-col gap-2">
|
||||||
<ul className="flex flex-col gap-2">
|
{col.items.map((item) => {
|
||||||
{link.items.map((link) => (
|
const external = item.href.startsWith("http");
|
||||||
<li key={link.title}>
|
return (
|
||||||
<TurboLink
|
<li key={item.title}>
|
||||||
href={link.href}
|
<Link
|
||||||
className="text-muted-foreground hover:text-foreground relative text-sm transition-colors"
|
href={item.href}
|
||||||
|
{...(external
|
||||||
|
? { target: "_blank", rel: "noopener noreferrer" }
|
||||||
|
: {})}
|
||||||
|
className="text-sm text-[var(--cm-fg-secondary)] transition-colors hover:text-[var(--cm-fg)]"
|
||||||
>
|
>
|
||||||
{t(link.title)}
|
{item.title}
|
||||||
{isExternal(link.href) && (
|
</Link>
|
||||||
<Icons.ArrowUpRight className="-mt-1 inline size-2.5" />
|
|
||||||
)}
|
|
||||||
</TurboLink>
|
|
||||||
</li>
|
</li>
|
||||||
))}
|
);
|
||||||
</ul>
|
})}
|
||||||
</nav>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 pt-6">
|
|
||||||
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
|
||||||
<p className="text-muted-foreground text-sm">
|
|
||||||
© {new Date().getFullYear()} {appConfig.name}.{" "}
|
|
||||||
{t("legal.copyright")}.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<BuiltWith />
|
{/* bottom bar */}
|
||||||
</div>
|
<div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-[var(--cm-border)] pt-6 sm:flex-row sm:items-center">
|
||||||
|
<p
|
||||||
|
className="text-xs text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
© {new Date().getFullYear()} {appConfig.name} · MIT licensed
|
||||||
|
</p>
|
||||||
|
<BuiltWith />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -4,12 +4,9 @@ const NAV = [
|
|||||||
{ label: "Docs", href: "#docs" },
|
{ label: "Docs", href: "#docs" },
|
||||||
{ label: "Pricing", href: "#pricing" },
|
{ label: "Pricing", href: "#pricing" },
|
||||||
{ label: "Changelog", href: "#changelog" },
|
{ label: "Changelog", href: "#changelog" },
|
||||||
{
|
] as const;
|
||||||
label: "GitHub",
|
|
||||||
href: "https://github.com/claudemesh/claudemesh",
|
const OSS_REPO_URL = "https://github.com/alezmad/claude-intercom";
|
||||||
external: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const Header = () => {
|
export const Header = () => {
|
||||||
return (
|
return (
|
||||||
@@ -56,9 +53,6 @@ export const Header = () => {
|
|||||||
<Link
|
<Link
|
||||||
key={item.href}
|
key={item.href}
|
||||||
href={item.href}
|
href={item.href}
|
||||||
{...(item.external
|
|
||||||
? { target: "_blank", rel: "noreferrer" }
|
|
||||||
: {})}
|
|
||||||
className="text-[14px] text-[var(--cm-fg-secondary)] transition-colors hover:text-[var(--cm-fg)]"
|
className="text-[14px] text-[var(--cm-fg-secondary)] transition-colors hover:text-[var(--cm-fg)]"
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
@@ -68,6 +62,24 @@ export const Header = () => {
|
|||||||
|
|
||||||
{/* right */}
|
{/* right */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
<a
|
||||||
|
href={OSS_REPO_URL}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="claude-intercom (MIT open source) on GitHub"
|
||||||
|
title="Built on claude-intercom · MIT open source"
|
||||||
|
className="hidden rounded-[var(--cm-radius-xs)] p-2 text-[var(--cm-fg-secondary)] transition-colors hover:bg-[var(--cm-bg-elevated)] hover:text-[var(--cm-fg)] md:inline-flex"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M12 .3a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6a4.7 4.7 0 011.3-3.3c-.2-.3-.6-1.6.1-3.3 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.3 3 .1 3.3a4.7 4.7 0 011.3 3.3c0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0012 .3" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
<Link
|
<Link
|
||||||
href="/auth/login"
|
href="/auth/login"
|
||||||
className="hidden rounded-[var(--cm-radius-xs)] px-3 py-2 text-[14px] text-[var(--cm-fg-secondary)] transition-colors hover:text-[var(--cm-fg)] md:inline-flex"
|
className="hidden rounded-[var(--cm-radius-xs)] px-3 py-2 text-[14px] text-[var(--cm-fg-secondary)] transition-colors hover:text-[var(--cm-fg)] md:inline-flex"
|
||||||
@@ -75,8 +87,7 @@ export const Header = () => {
|
|||||||
Sign in
|
Sign in
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="https://github.com/claudemesh/claudemesh"
|
href="/auth/register"
|
||||||
target="_blank"
|
|
||||||
className="inline-flex items-center gap-1.5 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-4 py-2 text-[14px] font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
|
className="inline-flex items-center gap-1.5 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-4 py-2 text-[14px] font-medium text-[var(--cm-fg)] transition-colors hover:bg-[var(--cm-clay-hover)]"
|
||||||
>
|
>
|
||||||
Start free
|
Start free
|
||||||
|
|||||||
@@ -40,7 +40,9 @@ const slugify = (s: string) =>
|
|||||||
.replace(/^-+|-+$/g, "")
|
.replace(/^-+|-+$/g, "")
|
||||||
.slice(0, 40);
|
.slice(0, 40);
|
||||||
|
|
||||||
export const CreateMeshForm = () => {
|
export const CreateMeshForm = ({
|
||||||
|
onboarding = false,
|
||||||
|
}: { onboarding?: boolean } = {}) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const form = useForm<CreateMyMeshInput>({
|
const form = useForm<CreateMyMeshInput>({
|
||||||
resolver: zodResolver(createMyMeshInputSchema),
|
resolver: zodResolver(createMyMeshInputSchema),
|
||||||
@@ -70,7 +72,11 @@ export const CreateMeshForm = () => {
|
|||||||
form.setError("slug", { message: res.error });
|
form.setError("slug", { message: res.error });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
router.push(pathsConfig.dashboard.user.meshes.mesh(res.id));
|
router.push(
|
||||||
|
onboarding
|
||||||
|
? `${pathsConfig.dashboard.user.meshes.invite(res.id)}?onboarding=1`
|
||||||
|
: pathsConfig.dashboard.user.meshes.mesh(res.id),
|
||||||
|
);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
form.setError("root", {
|
form.setError("root", {
|
||||||
message: e instanceof Error ? e.message : "Failed to create mesh.",
|
message: e instanceof Error ? e.message : "Failed to create mesh.",
|
||||||
|
|||||||
@@ -35,13 +35,14 @@ interface GeneratedInvite {
|
|||||||
id: string;
|
id: string;
|
||||||
token: string;
|
token: string;
|
||||||
inviteLink: string;
|
inviteLink: string;
|
||||||
|
joinUrl: string;
|
||||||
expiresAt: Date;
|
expiresAt: Date;
|
||||||
qrDataUrl: string;
|
qrDataUrl: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
||||||
const [result, setResult] = useState<GeneratedInvite | null>(null);
|
const [result, setResult] = useState<GeneratedInvite | null>(null);
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState<"url" | "cli" | null>(null);
|
||||||
|
|
||||||
const form = useForm<CreateMyInviteInput>({
|
const form = useForm<CreateMyInviteInput>({
|
||||||
resolver: zodResolver(createMyInviteInputSchema),
|
resolver: zodResolver(createMyInviteInputSchema),
|
||||||
@@ -58,6 +59,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
id: string;
|
id: string;
|
||||||
token: string;
|
token: string;
|
||||||
inviteLink: string;
|
inviteLink: string;
|
||||||
|
joinUrl: string;
|
||||||
expiresAt: string;
|
expiresAt: string;
|
||||||
}
|
}
|
||||||
| { error: string };
|
| { error: string };
|
||||||
@@ -67,7 +69,9 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const qrDataUrl = await QRCode.toDataURL(res.inviteLink, {
|
// QR encodes the HTTPS join URL now — anyone with a camera can
|
||||||
|
// scan and land on the friendly /join/[token] page.
|
||||||
|
const qrDataUrl = await QRCode.toDataURL(res.joinUrl, {
|
||||||
width: 256,
|
width: 256,
|
||||||
margin: 1,
|
margin: 1,
|
||||||
color: { dark: "#141413", light: "#ffffff" },
|
color: { dark: "#141413", light: "#ffffff" },
|
||||||
@@ -77,6 +81,7 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
id: res.id,
|
id: res.id,
|
||||||
token: res.token,
|
token: res.token,
|
||||||
inviteLink: res.inviteLink,
|
inviteLink: res.inviteLink,
|
||||||
|
joinUrl: res.joinUrl,
|
||||||
expiresAt: new Date(res.expiresAt),
|
expiresAt: new Date(res.expiresAt),
|
||||||
qrDataUrl,
|
qrDataUrl,
|
||||||
});
|
});
|
||||||
@@ -87,14 +92,14 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onCopy = async () => {
|
const copy = async (text: string, key: "url" | "cli") => {
|
||||||
if (!result) return;
|
await navigator.clipboard.writeText(text);
|
||||||
await navigator.clipboard.writeText(result.inviteLink);
|
setCopied(key);
|
||||||
setCopied(true);
|
setTimeout(() => setCopied(null), 2000);
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (result) {
|
if (result) {
|
||||||
|
const cliCmd = `claudemesh join ${result.token}`;
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="rounded-lg border p-6">
|
<div className="rounded-lg border p-6">
|
||||||
@@ -109,10 +114,10 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<div className="text-muted-foreground mb-1 text-xs uppercase tracking-wider">
|
<div className="text-muted-foreground mb-1 text-xs uppercase tracking-wider">
|
||||||
Invite link
|
Share this link
|
||||||
</div>
|
</div>
|
||||||
<code className="bg-muted block break-all rounded p-3 font-mono text-xs">
|
<code className="bg-muted block break-all rounded p-3 font-mono text-xs">
|
||||||
{result.inviteLink}
|
{result.joinUrl}
|
||||||
</code>
|
</code>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-3 text-xs">
|
<div className="flex flex-wrap items-center gap-3 text-xs">
|
||||||
@@ -120,9 +125,16 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
expires {result.expiresAt.toLocaleDateString()}
|
expires {result.expiresAt.toLocaleDateString()}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2">
|
<div className="flex flex-wrap gap-2">
|
||||||
<Button onClick={onCopy} size="sm">
|
<Button onClick={() => copy(result.joinUrl, "url")} size="sm">
|
||||||
{copied ? "Copied ✓" : "Copy link"}
|
{copied === "url" ? "Copied ✓" : "Copy link"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => copy(cliCmd, "cli")}
|
||||||
|
>
|
||||||
|
{copied === "cli" ? "Copied ✓" : "Copy CLI command"}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -140,12 +152,14 @@ export const InviteGenerator = ({ meshId }: { meshId: string }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-muted-foreground rounded border border-dashed p-4 text-xs">
|
<div className="text-muted-foreground rounded border border-dashed p-4 text-xs">
|
||||||
<p className="mb-2 font-medium">How your teammate joins:</p>
|
<p className="mb-2 font-medium">How your teammate joins:</p>
|
||||||
<code className="bg-muted block rounded p-2 font-mono text-xs">
|
<p className="mb-2">
|
||||||
claudemesh join {result.inviteLink}
|
Paste the link in Slack / Telegram / email. They land on a page
|
||||||
</code>
|
with step-by-step install, or run the CLI directly if they already
|
||||||
<p className="mt-2">
|
have it:
|
||||||
Or scan the QR code from the claudemesh mobile app (coming soon).
|
|
||||||
</p>
|
</p>
|
||||||
|
<code className="bg-muted block rounded p-2 font-mono text-xs">
|
||||||
|
{cliCmd}
|
||||||
|
</code>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
121
apps/web/src/modules/mesh/live-stream-panel.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
"use client";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
getMyMeshStreamResponseSchema,
|
||||||
|
type GetMyMeshStreamResponse,
|
||||||
|
} from "@turbostarter/api/schema";
|
||||||
|
import { handle } from "@turbostarter/api/utils";
|
||||||
|
|
||||||
|
import { api } from "~/lib/api/client";
|
||||||
|
import {
|
||||||
|
MeshStream,
|
||||||
|
type StreamMessage,
|
||||||
|
type StreamPeer,
|
||||||
|
} from "~/modules/marketing/home/mesh-stream";
|
||||||
|
|
||||||
|
const POLL_INTERVAL_MS = 4000;
|
||||||
|
|
||||||
|
const classifyTarget = (
|
||||||
|
target: string,
|
||||||
|
): "direct" | "ask_mesh" | "broadcast" => {
|
||||||
|
if (target === "*") return "broadcast";
|
||||||
|
if (target.startsWith("tag:")) return "ask_mesh";
|
||||||
|
return "direct";
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildStream = (data: GetMyMeshStreamResponse) => {
|
||||||
|
const peers: StreamPeer[] = data.presences.map((p) => ({
|
||||||
|
id: p.memberId,
|
||||||
|
name: p.displayName ?? p.memberId.slice(0, 8),
|
||||||
|
status: p.status === "dnd" ? "dnd" : p.status,
|
||||||
|
machine: p.cwd,
|
||||||
|
surface: "terminal",
|
||||||
|
}));
|
||||||
|
|
||||||
|
const messages: StreamMessage[] = data.envelopes
|
||||||
|
.slice()
|
||||||
|
.reverse()
|
||||||
|
.map((e) => ({
|
||||||
|
key: e.id,
|
||||||
|
from: e.senderMemberId,
|
||||||
|
to: e.targetSpec,
|
||||||
|
type: classifyTarget(e.targetSpec),
|
||||||
|
ciphertext: e.ciphertextPreview,
|
||||||
|
createdAt: new Date(e.createdAt),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return { peers, messages };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const LiveStreamPanel = ({ meshId }: { meshId: string }) => {
|
||||||
|
const { data, isLoading, dataUpdatedAt, isFetching } = useQuery({
|
||||||
|
queryKey: ["mesh", "stream", meshId],
|
||||||
|
queryFn: () =>
|
||||||
|
handle(api.my.meshes[":id"].stream.$get, {
|
||||||
|
schema: getMyMeshStreamResponseSchema,
|
||||||
|
})({ param: { id: meshId } }),
|
||||||
|
refetchInterval: POLL_INTERVAL_MS,
|
||||||
|
refetchIntervalInBackground: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { peers, messages } = useMemo(
|
||||||
|
() =>
|
||||||
|
data ? buildStream(data) : { peers: [], messages: [] },
|
||||||
|
[data],
|
||||||
|
);
|
||||||
|
|
||||||
|
const secondsAgo = dataUpdatedAt
|
||||||
|
? Math.max(0, Math.floor((Date.now() - dataUpdatedAt) / 1000))
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const footer = (
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between px-4 py-2 text-[10px] text-[var(--cm-fg-tertiary)]"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{messages.length} envelopes · {peers.length} live peers
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{isFetching ? "▶ polling…" : `↻ ${secondsAgo ?? "—"}s ago`}
|
||||||
|
{" · "}every {POLL_INTERVAL_MS / 1000}s
|
||||||
|
</span>
|
||||||
|
<span>read-only · E2E encrypted</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const emptyLabel = isLoading
|
||||||
|
? "Connecting to mesh…"
|
||||||
|
: "No envelopes yet. When your peers send messages they'll appear here.";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overflow-hidden rounded-[var(--cm-radius-lg)] border border-[var(--cm-border)] bg-[var(--cm-bg)]">
|
||||||
|
<div
|
||||||
|
className="flex items-center justify-between border-b border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]/60 px-4 py-3"
|
||||||
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
"inline-block h-2 w-2 rounded-full " +
|
||||||
|
(isFetching ? "bg-[var(--cm-clay)] animate-pulse" : "bg-emerald-500")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<span className="text-[11px] text-[var(--cm-fg-secondary)]">
|
||||||
|
live · polling every {POLL_INTERVAL_MS / 1000}s
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<MeshStream
|
||||||
|
peers={peers}
|
||||||
|
messages={messages}
|
||||||
|
channelLabel="live-stream"
|
||||||
|
emptyLabel={emptyLabel}
|
||||||
|
footer={footer}
|
||||||
|
scrollable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -48,24 +48,39 @@ export const ManagePlan = () => {
|
|||||||
</SettingsCardHeader>
|
</SettingsCardHeader>
|
||||||
|
|
||||||
<SettingsCardContent>
|
<SettingsCardContent>
|
||||||
<Button
|
{plan.id === PricingPlanType.FREE ? (
|
||||||
className="w-fit gap-1"
|
// v0.1.0: only the free tier is live. Paid-tier checkout +
|
||||||
disabled={getPortal.isPending}
|
// Stripe customer portal land post-launch; surface that
|
||||||
onClick={() =>
|
// honestly instead of a button that would hit a 500.
|
||||||
getPortal.mutate({
|
<div className="flex items-center gap-2">
|
||||||
query: {
|
<Button className="w-fit gap-1" disabled>
|
||||||
redirectUrl: window.location.href,
|
{t("manage.billing.visitPortal")}
|
||||||
},
|
<Icons.ArrowUpRight className="size-4" />
|
||||||
})
|
</Button>
|
||||||
}
|
<span className="text-muted-foreground text-xs">
|
||||||
>
|
Paid tiers coming soon
|
||||||
{t("manage.billing.visitPortal")}
|
</span>
|
||||||
{getPortal.isPending ? (
|
</div>
|
||||||
<Icons.Loader2 className="size-4 animate-spin" />
|
) : (
|
||||||
) : (
|
<Button
|
||||||
<Icons.ArrowUpRight className="size-4" />
|
className="w-fit gap-1"
|
||||||
)}
|
disabled={getPortal.isPending}
|
||||||
</Button>
|
onClick={() =>
|
||||||
|
getPortal.mutate({
|
||||||
|
query: {
|
||||||
|
redirectUrl: window.location.href,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t("manage.billing.visitPortal")}
|
||||||
|
{getPortal.isPending ? (
|
||||||
|
<Icons.Loader2 className="size-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Icons.ArrowUpRight className="size-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</SettingsCardContent>
|
</SettingsCardContent>
|
||||||
</SettingsCard>
|
</SettingsCard>
|
||||||
);
|
);
|
||||||
|
|||||||
94
docker-compose.production.yml
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
# claudemesh — production compose (for Coolify Service deployment)
|
||||||
|
#
|
||||||
|
# Three services:
|
||||||
|
# - migrate → one-shot drizzle-kit migrate, exits 0, gates web startup
|
||||||
|
# - broker → ic.claudemesh.com (WSS /ws + HTTP /health + /hook/set-status)
|
||||||
|
# - web → claudemesh.com + dashboard.claudemesh.com (Next.js)
|
||||||
|
#
|
||||||
|
# Postgres is NOT declared here — managed externally by Coolify or a managed DB.
|
||||||
|
# Pass DATABASE_URL + all secrets at runtime via Coolify env config.
|
||||||
|
#
|
||||||
|
# Why broker does NOT depend on migrate:
|
||||||
|
# Broker tolerates DB-down gracefully (per apps/broker/DEPLOY_SPEC.md §Healthcheck).
|
||||||
|
# It should keep serving even if a migration is in-flight or has failed, so WS
|
||||||
|
# peers stay connected + /health reports degraded instead of going 502.
|
||||||
|
#
|
||||||
|
# Why web DOES depend on migrate:
|
||||||
|
# Next.js routes assume the schema they were built against. Starting web before
|
||||||
|
# migrations land → 500s on every query touching new tables/columns.
|
||||||
|
|
||||||
|
name: claudemesh
|
||||||
|
|
||||||
|
services:
|
||||||
|
migrate:
|
||||||
|
image: ${MIGRATE_IMAGE:-claudemesh-migrate:latest}
|
||||||
|
restart: "no"
|
||||||
|
environment:
|
||||||
|
DATABASE_URL: ${DATABASE_URL}
|
||||||
|
networks:
|
||||||
|
- claudemesh-internal
|
||||||
|
|
||||||
|
broker:
|
||||||
|
image: ${BROKER_IMAGE:-claudemesh-broker:latest}
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
NODE_ENV: production
|
||||||
|
BROKER_PORT: 7900
|
||||||
|
DATABASE_URL: ${DATABASE_URL}
|
||||||
|
STATUS_TTL_SECONDS: ${STATUS_TTL_SECONDS:-60}
|
||||||
|
HOOK_FRESH_WINDOW_SECONDS: ${HOOK_FRESH_WINDOW_SECONDS:-30}
|
||||||
|
MAX_CONNECTIONS_PER_MESH: ${MAX_CONNECTIONS_PER_MESH:-100}
|
||||||
|
MAX_MESSAGE_BYTES: ${MAX_MESSAGE_BYTES:-65536}
|
||||||
|
HOOK_RATE_LIMIT_PER_MIN: ${HOOK_RATE_LIMIT_PER_MIN:-30}
|
||||||
|
expose:
|
||||||
|
- "7900"
|
||||||
|
networks:
|
||||||
|
- coolify
|
||||||
|
- claudemesh-internal
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "bun", "-e", "fetch('http://localhost:7900/health').then(r=>{process.exit(r.ok?0:1)}).catch(()=>process.exit(1))"]
|
||||||
|
interval: 15s
|
||||||
|
timeout: 5s
|
||||||
|
start_period: 10s
|
||||||
|
retries: 3
|
||||||
|
|
||||||
|
web:
|
||||||
|
image: ${WEB_IMAGE:-claudemesh-web:latest}
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
NODE_ENV: production
|
||||||
|
PORT: 3000
|
||||||
|
HOSTNAME: 0.0.0.0
|
||||||
|
DATABASE_URL: ${DATABASE_URL}
|
||||||
|
BETTER_AUTH_SECRET: ${BETTER_AUTH_SECRET}
|
||||||
|
BETTER_AUTH_URL: ${BETTER_AUTH_URL:-https://claudemesh.com}
|
||||||
|
BETTER_AUTH_TRUSTED_ORIGINS: ${BETTER_AUTH_TRUSTED_ORIGINS:-https://claudemesh.com,https://dashboard.claudemesh.com,https://ic.claudemesh.com}
|
||||||
|
GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID:-}
|
||||||
|
GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET:-}
|
||||||
|
GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID:-}
|
||||||
|
GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET:-}
|
||||||
|
BROKER_INTERNAL_URL: http://broker:7900
|
||||||
|
expose:
|
||||||
|
- "3000"
|
||||||
|
networks:
|
||||||
|
- coolify
|
||||||
|
- claudemesh-internal
|
||||||
|
depends_on:
|
||||||
|
migrate:
|
||||||
|
condition: service_completed_successfully
|
||||||
|
broker:
|
||||||
|
condition: service_healthy
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "node", "-e", "fetch('http://localhost:3000').then(r=>{process.exit(r.ok?0:1)}).catch(()=>process.exit(1))"]
|
||||||
|
interval: 15s
|
||||||
|
timeout: 5s
|
||||||
|
start_period: 20s
|
||||||
|
retries: 3
|
||||||
|
|
||||||
|
networks:
|
||||||
|
# Coolify's shared Traefik network — must already exist on the host
|
||||||
|
coolify:
|
||||||
|
external: true
|
||||||
|
# Internal backplane between migrate + broker + web
|
||||||
|
claudemesh-internal:
|
||||||
|
driver: bridge
|
||||||
195
docs/FAQ.md
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
# Deep FAQ
|
||||||
|
|
||||||
|
The landing FAQ covers the basics. This one goes deeper — aimed at
|
||||||
|
people googling specific objections before they install.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Is it really end-to-end encrypted?
|
||||||
|
|
||||||
|
Yes, and the guarantee is narrow enough to be worth spelling out.
|
||||||
|
|
||||||
|
- **Direct peer → peer messages** use libsodium `crypto_box_easy`:
|
||||||
|
X25519 key exchange + XSalsa20-Poly1305 AEAD. Peer A encrypts to
|
||||||
|
peer B's public key; only peer B can decrypt.
|
||||||
|
- **Channel / group messages** use `crypto_secretbox` with a
|
||||||
|
per-channel symmetric key that's rotated on membership change.
|
||||||
|
- **Identity** is ed25519. Each peer signs its own hello-handshake
|
||||||
|
to the broker, so the broker can verify keypair control without
|
||||||
|
ever holding your secret.
|
||||||
|
- **Key storage**: private keys live only on the client, in
|
||||||
|
`~/.claudemesh/config.json` (or `$CLAUDEMESH_CONFIG_DIR`). The
|
||||||
|
broker receives public keys at enrollment and nothing else.
|
||||||
|
|
||||||
|
The broker never sees plaintext, file contents, or prompts. It
|
||||||
|
routes opaque ciphertext envelopes. If you compromise the broker
|
||||||
|
host, you get routing metadata — not message content. Full spec in
|
||||||
|
[`docs/protocol.md`](./protocol.md).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What does the broker actually log?
|
||||||
|
|
||||||
|
A single `audit_log` table in Postgres, metadata-only. The shape
|
||||||
|
is literally this (see `packages/db/src/schema/mesh.ts`):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
id, meshId, eventType, // what happened, on which mesh
|
||||||
|
actorPeerId, targetPeerId, // who → whom (pubkey fingerprints)
|
||||||
|
metadata: jsonb, // size, priority, timestamps
|
||||||
|
createdAt
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
No payload bytes. No ciphertext storage beyond transient
|
||||||
|
offline-queue rows. Presence + heartbeats live in a separate
|
||||||
|
`presence` table, also metadata-only (session id, pid, cwd, status).
|
||||||
|
|
||||||
|
On the hosted broker, OVH/Frankfurt sees the same thing we do:
|
||||||
|
routing metadata. Self-hosting narrows that audience to you.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Can I use this without the hosted broker?
|
||||||
|
|
||||||
|
**Pick the tool that matches your scope:**
|
||||||
|
|
||||||
|
- **Local, single machine** (your own Claude Code sessions on one
|
||||||
|
laptop): use **[claude-intercom](https://github.com/alezmad/claude-intercom)**.
|
||||||
|
MIT, Unix-socket-based, zero infra. Simpler than claudemesh for
|
||||||
|
the local case.
|
||||||
|
- **Team / cross-machine**: use **hosted claudemesh.com**. Because
|
||||||
|
the broker only ever sees ciphertext, you don't need to own it
|
||||||
|
to own your data — the E2E guarantee (see above) is what earns
|
||||||
|
the trade.
|
||||||
|
- **Audit, fork, enterprise inquiry**: the broker source in
|
||||||
|
[`apps/broker/`](../apps/broker/) is MIT. Read it, run it
|
||||||
|
yourself, or point your CLI at your own instance via
|
||||||
|
`CLAUDEMESH_BROKER_URL`. See [`docs/SELF-HOST.md`](./SELF-HOST.md)
|
||||||
|
for the raw Docker Compose path.
|
||||||
|
|
||||||
|
A packaged enterprise self-host (turnkey, federated, supported)
|
||||||
|
is a **v0.2 paid-tier feature**. What ships today for self-host
|
||||||
|
is the underlying primitives — adequate for auditors and tinkerers,
|
||||||
|
not yet a product.
|
||||||
|
|
||||||
|
The crypto guarantee is identical across all three paths: only
|
||||||
|
peer endpoints can decrypt. What changes is who holds the routing
|
||||||
|
metadata.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## How does this compare to X?
|
||||||
|
|
||||||
|
One-line honest differences:
|
||||||
|
|
||||||
|
- **MCP** — MCP connects one Claude to tools and services. claudemesh
|
||||||
|
connects many Claudes to each other. We ship *as* an MCP server, so
|
||||||
|
from Claude's view, other peers look like callable tools.
|
||||||
|
- **Slack / Discord** — those are human chat apps. This is an
|
||||||
|
agent-to-agent wire; humans stay in the PR and the Slack channel.
|
||||||
|
A Slack peer gateway is a build-it-yourself v0.1 target.
|
||||||
|
- **Tailscale / WireGuard** — network-layer mesh. Same word,
|
||||||
|
different layer. Tailscale gives your machines IP addresses; we
|
||||||
|
give your agents identities, queueing, and application routing
|
||||||
|
on top of any network.
|
||||||
|
- **Signal / Matrix** — E2E messaging protocols for humans. Same
|
||||||
|
crypto family (libsodium / Olm). Different UX: addressed at
|
||||||
|
agents-in-sessions, not people-with-phones. No media, no rooms,
|
||||||
|
no read receipts.
|
||||||
|
- **A Slackbot / Telegram bot** — bots are a *surface*, not a
|
||||||
|
mesh. claudemesh is the substrate a bot could plug into as a
|
||||||
|
peer. See the WhatsApp gateway on the v0.2 roadmap.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's the deal with claude-intercom?
|
||||||
|
|
||||||
|
[claude-intercom](https://github.com/alezmad/claude-intercom) is the
|
||||||
|
OSS ancestor — Unix-socket messaging between Claude Code sessions
|
||||||
|
on one machine. Same idea (agent-to-agent wire), local scope.
|
||||||
|
claudemesh is the hosted + enterprise extension: same crypto model,
|
||||||
|
but over WebSocket to a broker, so the mesh crosses machines,
|
||||||
|
networks, and devices.
|
||||||
|
|
||||||
|
Both are MIT. claude-intercom is stable in its niche; claudemesh
|
||||||
|
is how that niche escapes localhost.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Can a malicious peer exfil my code?
|
||||||
|
|
||||||
|
Short answer: no more than they could by asking you directly in
|
||||||
|
Slack.
|
||||||
|
|
||||||
|
- **Peers only see what peers send them.** There is no ambient
|
||||||
|
broadcast. Your Claude decides, per message, who to address.
|
||||||
|
- **No file access.** Peers exchange live conversational context,
|
||||||
|
not files. A malicious peer can't read your repo — it can only
|
||||||
|
receive what your agent chose to write in a message.
|
||||||
|
- **Invites are gated.** Joining a mesh requires a signed ed25519
|
||||||
|
invite from the mesh owner. Revoking a key rotates the mesh.
|
||||||
|
- **What the broker sees**: routing metadata, not payloads.
|
||||||
|
|
||||||
|
The realistic threat is a socially-engineered peer you invited who
|
||||||
|
sends misleading queries. That's a social problem, not a crypto
|
||||||
|
problem — and the answer is the same as with Slack: don't invite
|
||||||
|
people you don't trust.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Can a peer be in multiple meshes?
|
||||||
|
|
||||||
|
Yes. Your CLI config (`~/.claudemesh/config.json`) holds multiple
|
||||||
|
mesh entries, and your Claude session addresses each one
|
||||||
|
independently — e.g. `send_message(to: "alice", mesh: "work")` vs
|
||||||
|
`send_message(to: "bob", mesh: "personal")`. Each mesh has its own
|
||||||
|
keypair; they don't leak into each other.
|
||||||
|
|
||||||
|
Two related features aren't in v0.1:
|
||||||
|
|
||||||
|
- **Bridge peers** — a peer that belongs to two meshes and
|
||||||
|
auto-forwards tagged messages between them. Landing in v0.2.
|
||||||
|
- **Cross-broker federation** — your self-hosted broker talking
|
||||||
|
directly to claudemesh.com (or another operator's) so peers on
|
||||||
|
different brokers can discover each other. Landing in v0.3.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Does it work across devices?
|
||||||
|
|
||||||
|
Yes. An invite link can be used by one or many clients — each run
|
||||||
|
generates a fresh keypair, so *each client is a distinct peer*
|
||||||
|
under your identity. Your laptop, your desktop, and your phone can
|
||||||
|
all join the same mesh as separate peers you control, and address
|
||||||
|
each other.
|
||||||
|
|
||||||
|
A future "thin iOS peer" (v0.2 roadmap) will reuse the same
|
||||||
|
`~/.claudemesh/config.json` flow — one invite, same mesh, new
|
||||||
|
keypair, new device.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Is it open source?
|
||||||
|
|
||||||
|
The protocol, the CLI, the broker, the dashboard, and the marketing
|
||||||
|
site are MIT-licensed. Build a gateway, fork the broker, embed a
|
||||||
|
peer in your own app — all first-class. See
|
||||||
|
[`LICENSE.md`](../LICENSE.md) for the full text.
|
||||||
|
|
||||||
|
If you ship something on top of the protocol, open an issue — we
|
||||||
|
want to link to it.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's on the roadmap?
|
||||||
|
|
||||||
|
v0.2 ships channel pub/sub, tag-based routing, WhatsApp + Telegram
|
||||||
|
gateway bots, an iOS peer app, and peer-to-peer transcript queries.
|
||||||
|
v0.3 brings broker federation, native single-file binaries, mesh
|
||||||
|
analytics, and a first-party Slack peer. Full list:
|
||||||
|
[`docs/roadmap.md`](./roadmap.md).
|
||||||
|
|
||||||
|
Something you need isn't listed? [Open an issue](https://github.com/claudemesh/claudemesh/issues/new)
|
||||||
|
and tell us why it matters.
|
||||||
46
docs/LAUNCH-DAY-RUNBOOK.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
# claudemesh v0.1.0 — Launch Day Runbook
|
||||||
|
|
||||||
|
## T-30min: Final Checks
|
||||||
|
- `dig claudemesh.com` and `dig ic.claudemesh.com` resolve to VPS.
|
||||||
|
- `curl -I https://claudemesh.com/health` and `https://ic.claudemesh.com/health` return 200.
|
||||||
|
- Verify Traefik TLS cert (not expiring in 30 days).
|
||||||
|
- `npm publish --dry-run` on CLI package; confirm version is 0.1.0.
|
||||||
|
- Tail broker and web logs in Coolify.
|
||||||
|
- Confirm pg_dump cron loaded (`systemctl list-timers | grep pg_dump`).
|
||||||
|
- Silence unrelated alerts; pin on-call rotation.
|
||||||
|
|
||||||
|
## T-0: Launch
|
||||||
|
- Fire HN "Show HN: claudemesh" post.
|
||||||
|
- Cross-post to r/LocalLLaMA, r/ClaudeAI, r/selfhosted.
|
||||||
|
- Thread owner pins themselves for the first 6h to answer every comment.
|
||||||
|
- Share on X/Bluesky/LinkedIn.
|
||||||
|
|
||||||
|
## First 6h — Watch Window
|
||||||
|
- Broker `/metrics`: `claudemesh_ws_connections` — alarm >500.
|
||||||
|
- Web + broker 429 rate: if >2% of traffic, raise limits.
|
||||||
|
- Postgres: `pg_stat_activity` connection count; backups run 03:00 UTC (don't interrupt).
|
||||||
|
- Traefik logs: TLS renewal errors, 5xx spikes.
|
||||||
|
- Signup funnel + mesh-create events every 30 min.
|
||||||
|
- Broker memory on VPS (`docker stats`): escalate at >80%.
|
||||||
|
|
||||||
|
## Common Failures — Responses
|
||||||
|
- **Broker OOM**: bump container memory in Coolify to 2GB, redeploy. Review connection leaks after.
|
||||||
|
- **DB pool saturation**: restart web container to recycle pool; if persistent, raise `DATABASE_POOL_MAX` to 30.
|
||||||
|
- **Rate-limits hitting legit traffic**: temporarily raise web to 200 rps, broker to 80 rps via env vars; redeploy.
|
||||||
|
- **Webhook deploy backlog**: cancel redundant queued deploys in Coolify; keep only the latest.
|
||||||
|
- **Signup flow broken**: roll web back to previous green tag (Coolify "Redeploy previous").
|
||||||
|
- **Broker crash loop**: check WSS handshake logs, disable new connections via feature flag, investigate.
|
||||||
|
|
||||||
|
## Who to Page
|
||||||
|
- **Broker bugs, WSS, protocol** → `claudemesh` peer.
|
||||||
|
- **Web UI, signup, dashboard** → `claudemesh-2` peer.
|
||||||
|
- **VPS, Traefik, DNS, Postgres, Coolify** → `ovhcloud-agutmou` peer.
|
||||||
|
- **DB schema / migrations** → `claudemesh` peer.
|
||||||
|
- **CLI / npm package** → `claudemesh` peer.
|
||||||
|
|
||||||
|
## T+24h: Post-Launch
|
||||||
|
- Pull metrics: peak connections, signup count, mesh count, 429 rate, p95 latency.
|
||||||
|
- Review rate-limit hits; adjust ceilings to real traffic shape.
|
||||||
|
- Triage GitHub issues opened during launch; tag v0.2 candidates.
|
||||||
|
- Retro with peers: biggest fire, biggest win, one fix for v0.2.
|
||||||
|
- Schedule v0.2 planning for T+72h.
|
||||||
191
docs/LOAD-TEST-v0.1.0.md
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
# Broker Load Test — v0.1.0 Baseline
|
||||||
|
|
||||||
|
**Date**: 2026-04-05
|
||||||
|
**Broker version**: v0.1.0 (gitSha `30bc24f`)
|
||||||
|
**Test harness**: `apps/broker/scripts/load-test.ts`
|
||||||
|
**Environment**: local macOS, ephemeral pgvector/pgvector:pg17 Postgres
|
||||||
|
on port 5445, broker on port 7901
|
||||||
|
|
||||||
|
## Methodology
|
||||||
|
|
||||||
|
The harness seeds a mesh with N peer members (each with a real
|
||||||
|
ed25519 keypair), opens N concurrent WebSocket connections to the
|
||||||
|
broker, and has each peer send M direct messages to random other
|
||||||
|
peers — all encrypted with `crypto_box` (the real production path,
|
||||||
|
no shortcuts).
|
||||||
|
|
||||||
|
For every message we record:
|
||||||
|
|
||||||
|
- `sentAt` — when the client-side send() was called
|
||||||
|
- `ackAt` — when the broker's `ack` arrived back at the sender
|
||||||
|
- `pushAt` — when the targeted recipient's `onPush` handler fired
|
||||||
|
|
||||||
|
**end-to-end latency** = `pushAt - sentAt` (full round-trip through
|
||||||
|
broker queue + fanout + WS push)
|
||||||
|
|
||||||
|
**broker queue write latency** = `ackAt - sentAt` (how long broker
|
||||||
|
took to persist the envelope + respond)
|
||||||
|
|
||||||
|
Broker process RSS + FD count sampled every 2s via `ps -o rss` and
|
||||||
|
`lsof -p`.
|
||||||
|
|
||||||
|
## Results
|
||||||
|
|
||||||
|
### Scaling sweep — 100 msgs per peer
|
||||||
|
|
||||||
|
| Peers | Total Msgs | Delivered | Timed Out | p50 e2e | p95 e2e | p99 e2e | max | p50 ack | Peak RSS | Max FDs |
|
||||||
|
|-------|-----------:|----------:|----------:|--------:|--------:|--------:|------:|--------:|---------:|--------:|
|
||||||
|
| 10 | 1,000 | 100.0% | 0 | 780ms | 1.06s | 1.16s | 1.18s | 274ms | — | — |
|
||||||
|
| 25 | 2,500 | 100.0% | 0 | 7.27s | 8.35s | 8.71s | 8.83s | 1.17s | 128MB | 47 |
|
||||||
|
| 50 | 5,000 | 100.0% | 0 | 7.50s | 9.46s | 9.90s | 10.2s | 3.02s | 176MB | 72 |
|
||||||
|
| 100 | 10,000 | 99.78% | 22 | 2.72s | 4.19s | 4.66s | 5.45s | 1.40s | — | — |
|
||||||
|
|
||||||
|
### Peak target — 100 peers × 1,000 msgs (PM target)
|
||||||
|
|
||||||
|
| Metric | Value |
|
||||||
|
|-------------------------------|---------------|
|
||||||
|
| Total messages | 100,000 |
|
||||||
|
| Delivered | 88,778 (88.78%) |
|
||||||
|
| Timed out (>900s) | 11,222 |
|
||||||
|
| Sends dispatched in | 17.8s |
|
||||||
|
| p50 end-to-end latency | **12.9s** |
|
||||||
|
| p95 end-to-end latency | **22.0s** |
|
||||||
|
| p99 end-to-end latency | **23.0s** |
|
||||||
|
| Max end-to-end latency | 24.4s |
|
||||||
|
| p50 send→ack latency | 11.9s |
|
||||||
|
| Peak RSS | **1156 MB** (from 36MB baseline) |
|
||||||
|
| Max open FDs | 122 (100 conns + 22 internals) |
|
||||||
|
|
||||||
|
## Observations
|
||||||
|
|
||||||
|
### What works
|
||||||
|
|
||||||
|
- **No message loss.** Every `send` that got an `ack` eventually got a
|
||||||
|
`push`. The 11,222 "timed out" messages at 100×1000 are still in
|
||||||
|
flight at the 900s drain cap — they'll continue to be delivered,
|
||||||
|
just slowly. The atomic `FOR UPDATE SKIP LOCKED` claim (step 17.5)
|
||||||
|
holds under real load.
|
||||||
|
- **100% delivery up to 10k messages.** Clean numbers.
|
||||||
|
- **No FD leaks.** FD count tracks connection count exactly.
|
||||||
|
- **No crashes, no connection drops.** All 100 peers stay connected
|
||||||
|
for the duration.
|
||||||
|
- **Memory recovers** between runs (verified: fresh broker starts
|
||||||
|
from ~36MB).
|
||||||
|
|
||||||
|
### v0.1.0 ceiling
|
||||||
|
|
||||||
|
The broker is **DB-bound**, and the bottleneck is **fanout
|
||||||
|
amplification**. Each inbound `send` triggers:
|
||||||
|
|
||||||
|
1. One `INSERT INTO mesh.message_queue` (queue write)
|
||||||
|
2. Fan-out loop: for every connected peer in the mesh whose pubkey
|
||||||
|
matches the `targetSpec`, call `maybePushQueuedMessages(presenceId)`
|
||||||
|
3. Each fanout call runs `refreshStatusFromJsonl` + `drainForMember`
|
||||||
|
(CTE with `FOR UPDATE SKIP LOCKED` — atomic, correct, but not free)
|
||||||
|
|
||||||
|
With 100 peers sending random-target messages, the broker is
|
||||||
|
effectively processing 100 serial DB transactions per incoming send,
|
||||||
|
and the `crypto_box` encryption + WS push cost per drained message
|
||||||
|
adds more.
|
||||||
|
|
||||||
|
**Where v0.1.0 tops out** (honest launch-data):
|
||||||
|
|
||||||
|
- **Comfortable**: ≤ 25 peers × 100 msgs/burst → sub-10s p99
|
||||||
|
- **Acceptable**: ≤ 100 peers × 100 msgs/burst → ~5s p99
|
||||||
|
- **Saturated**: 100 peers × 1000 msgs/burst → 23s p99, 11% timeouts
|
||||||
|
at 15min drain cap
|
||||||
|
|
||||||
|
### Memory growth
|
||||||
|
|
||||||
|
RSS climbs linearly with in-flight message count during a burst.
|
||||||
|
At peak (100×1000 concurrent): ~11MB per 1k queued messages.
|
||||||
|
**Not a leak** — memory returns to baseline after the queue drains
|
||||||
|
and GC runs.
|
||||||
|
|
||||||
|
## Implications for v0.1.0 launch
|
||||||
|
|
||||||
|
Realistic v0.1.0 usage is NOT burst-mode. Humans and AI peers
|
||||||
|
exchange messages at human cadence (a few per minute per peer, not
|
||||||
|
1000 per burst). Even a busy 100-peer mesh won't come close to the
|
||||||
|
test load.
|
||||||
|
|
||||||
|
**Expected production traffic profile** (rough order of magnitude):
|
||||||
|
|
||||||
|
- Active peers per mesh: 2–20 during an active session
|
||||||
|
- Messages per peer per minute: 1–10
|
||||||
|
- Burst size: rarely > 50 messages
|
||||||
|
|
||||||
|
At this scale we're well inside the "≤ 25 peers × 100 msgs" regime
|
||||||
|
where p99 latency is sub-10s.
|
||||||
|
|
||||||
|
**Capacity guidance for ops**:
|
||||||
|
|
||||||
|
- **Single broker instance can reasonably hold 100 concurrent
|
||||||
|
connections** (tested + no FD leaks).
|
||||||
|
- **Memory sizing**: allocate **1GB RSS headroom** for bursty
|
||||||
|
workloads. Steady-state broker is < 100MB.
|
||||||
|
- **Postgres sizing**: message_queue inserts + `FOR UPDATE SKIP
|
||||||
|
LOCKED` drains are the hot path. Production DB should be on SSD;
|
||||||
|
tested locally on a dev Postgres on laptop.
|
||||||
|
|
||||||
|
## v0.2 optimization targets
|
||||||
|
|
||||||
|
Documented as deferred work — **NOT fixing in v0.1.0 launch scope**:
|
||||||
|
|
||||||
|
1. **Fanout decoupling**: move drain out of the send hot path.
|
||||||
|
Currently every send triggers N drain queries for all matching
|
||||||
|
peers. Instead, batch drains on a timer per connection (~50ms).
|
||||||
|
2. **Hold JSONL status-refresh off the delivery path**: local CLI
|
||||||
|
sessions don't need broker to refresh their JSONL status; that's
|
||||||
|
a fallback for hook-less installs.
|
||||||
|
3. **Drop `refreshStatusFromJsonl` from the fanout drain** — the
|
||||||
|
client's hook is authoritative for live peers.
|
||||||
|
4. **Pipelined acks**: batch acks for messages from the same WS
|
||||||
|
connection within a short window.
|
||||||
|
5. **Horizontal scale**: when a single broker tops out, shard by
|
||||||
|
meshId (mesh-scoped connection routing) + pub/sub between
|
||||||
|
shards on delivery.
|
||||||
|
|
||||||
|
None of these are launch-blockers. v0.1.0 scales to realistic
|
||||||
|
production traffic as-is.
|
||||||
|
|
||||||
|
## Rate limits on production broker (ic.claudemesh.com)
|
||||||
|
|
||||||
|
Ops lane wired the following (per PM msg):
|
||||||
|
|
||||||
|
- **40 req/sec per IP** on HTTP routes
|
||||||
|
- **100 concurrent WS connections per IP**
|
||||||
|
|
||||||
|
Load test was NOT run against production to avoid tripping these
|
||||||
|
limits and skewing the test. If prod-side validation is needed, it
|
||||||
|
should come from distributed clients or with the limits temporarily
|
||||||
|
raised + restored.
|
||||||
|
|
||||||
|
## Reproduction
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Ephemeral Postgres
|
||||||
|
docker run --rm -d --name claudemesh-loadtest-db \
|
||||||
|
-e POSTGRES_USER=turbostarter -e POSTGRES_PASSWORD=turbostarter \
|
||||||
|
-e POSTGRES_DB=core -p 5445:5432 pgvector/pgvector:pg17
|
||||||
|
sleep 5
|
||||||
|
|
||||||
|
# 2. Apply migrations
|
||||||
|
cd packages/db
|
||||||
|
DATABASE_URL="postgresql://turbostarter:turbostarter@127.0.0.1:5445/core" \
|
||||||
|
pnpm exec drizzle-kit migrate
|
||||||
|
|
||||||
|
# 3. Broker (on alt port to avoid collision)
|
||||||
|
cd ../../apps/broker
|
||||||
|
DATABASE_URL="postgresql://turbostarter:turbostarter@127.0.0.1:5445/core" \
|
||||||
|
BROKER_PORT=7901 bun src/index.ts &
|
||||||
|
|
||||||
|
# 4. Load test
|
||||||
|
BROKER_PID=$(lsof -ti :7901 | head -1) \
|
||||||
|
BROKER_WS_URL="ws://localhost:7901/ws" \
|
||||||
|
DATABASE_URL="postgresql://turbostarter:turbostarter@127.0.0.1:5445/core" \
|
||||||
|
DRAIN_MS=900000 \
|
||||||
|
bun scripts/load-test.ts 100 1000
|
||||||
|
```
|
||||||
|
|
||||||
|
Adjust final two args for different peer count × msg count combos.
|
||||||
224
docs/QUICKSTART.md
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
# Quickstart · 5 minutes, zero to first message
|
||||||
|
|
||||||
|
Goal: install the CLI, join a mesh, and send your first message between
|
||||||
|
two Claude Code sessions.
|
||||||
|
|
||||||
|
If you hit a wall at any step, the fix is probably in
|
||||||
|
[Troubleshooting](#troubleshooting) below — skip there.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- **Claude Code** installed (`claude --version` works)
|
||||||
|
- **Node.js** ≥ 20
|
||||||
|
- Two terminal windows (we'll wire two peers together)
|
||||||
|
|
||||||
|
That's it.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 1 — Install the CLI *(~30s)*
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install -g claudemesh-cli
|
||||||
|
claudemesh --version
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see:
|
||||||
|
|
||||||
|
```
|
||||||
|
claudemesh-cli v0.1.x
|
||||||
|
```
|
||||||
|
|
||||||
|
> **From source** (if npm install fails): clone the repo, then
|
||||||
|
> `cd apps/cli && bun install && bun link`. You'll get the same
|
||||||
|
> `claudemesh` command on your path.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 2 — Register the MCP server with Claude Code *(~30s)*
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh install
|
||||||
|
```
|
||||||
|
|
||||||
|
This prints a single command, e.g.:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claude mcp add claudemesh --scope user -- claudemesh mcp
|
||||||
|
```
|
||||||
|
|
||||||
|
Copy-paste and run it. Then restart any open Claude Code sessions.
|
||||||
|
|
||||||
|
**Verify** Claude Code sees the mesh tools:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claude mcp list
|
||||||
|
```
|
||||||
|
|
||||||
|
You should see `claudemesh` in the list with status `✓ Connected`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 3 — Get on a mesh *(~2 min)*
|
||||||
|
|
||||||
|
You have two paths. Pick one.
|
||||||
|
|
||||||
|
### Path A — join a teammate's mesh *(fastest)*
|
||||||
|
|
||||||
|
Paste the invite URL they sent you:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh join https://claudemesh.com/join/eyJtZXNo...
|
||||||
|
```
|
||||||
|
|
||||||
|
(The CLI also accepts `ic://join/<token>` and raw tokens if you have
|
||||||
|
those instead.)
|
||||||
|
|
||||||
|
The CLI verifies the signature, generates a fresh keypair for you,
|
||||||
|
and enrolls you with the broker:
|
||||||
|
|
||||||
|
```
|
||||||
|
✓ verified invite signature
|
||||||
|
✓ generated peer keypair
|
||||||
|
✓ enrolled on mesh "acme-payments" as peer "your-name"
|
||||||
|
config: ~/.claudemesh/config.json
|
||||||
|
```
|
||||||
|
|
||||||
|
### Path B — start your own mesh *(if you're first)*
|
||||||
|
|
||||||
|
1. Open **[claudemesh.com](https://claudemesh.com)** and sign up
|
||||||
|
2. Click **Create mesh**, give it a slug (e.g. `my-team`)
|
||||||
|
3. Copy the invite URL it generates
|
||||||
|
4. Back in your terminal:
|
||||||
|
```sh
|
||||||
|
claudemesh join https://claudemesh.com/join/<token>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 4 — Confirm you're on the mesh *(~15s)*
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claudemesh list
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
meshes (1)
|
||||||
|
acme-payments
|
||||||
|
broker: wss://ic.claudemesh.com/ws
|
||||||
|
peer id: your-name
|
||||||
|
joined: just now
|
||||||
|
```
|
||||||
|
|
||||||
|
You're in. Leave this terminal open.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Step 5 — Send your first message *(~2 min)*
|
||||||
|
|
||||||
|
Open Claude Code in **any project directory**:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
claude
|
||||||
|
```
|
||||||
|
|
||||||
|
Inside the session, just ask:
|
||||||
|
|
||||||
|
> **You**: *list the peers on my mesh*
|
||||||
|
|
||||||
|
Claude Code calls the `list_peers` tool. You should see yourself
|
||||||
|
plus anyone else who's joined — their name, status (idle/working/dnd),
|
||||||
|
and what they're currently doing.
|
||||||
|
|
||||||
|
If you're alone on the mesh (Path B, first time), spin up a **second
|
||||||
|
terminal** on the same machine to simulate a teammate:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
cd /tmp && mkdir peer-b && cd peer-b
|
||||||
|
claude # second Claude Code session
|
||||||
|
```
|
||||||
|
|
||||||
|
Inside *that* session, ask:
|
||||||
|
|
||||||
|
> **You**: *set your summary to "testing from peer B"*
|
||||||
|
|
||||||
|
Back in the first session:
|
||||||
|
|
||||||
|
> **You**: *send a message to peer-b saying "ping from peer A"*
|
||||||
|
|
||||||
|
Claude Code calls `send_message`. You'll see the delivery receipt.
|
||||||
|
|
||||||
|
In the second session, ask:
|
||||||
|
|
||||||
|
> **You**: *check my messages*
|
||||||
|
|
||||||
|
And it'll surface "ping from peer A".
|
||||||
|
|
||||||
|
**That's the loop.** Real use cases trade context, not pings —
|
||||||
|
your Claude asking another Claude "who's touched the auth middleware
|
||||||
|
this week?" and getting a useful answer back.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What Claude Code can do on the mesh
|
||||||
|
|
||||||
|
| MCP tool | What it does |
|
||||||
|
|------------------|------------------------------------------------------|
|
||||||
|
| `list_peers` | Who's on your mesh, status, current summary |
|
||||||
|
| `send_message` | Message a peer by name; priority `now`/`next`/`low` |
|
||||||
|
| `check_messages` | Pull queued messages for your session |
|
||||||
|
| `set_summary` | Tell other peers what you're working on |
|
||||||
|
| `set_status` | Manually set `idle` / `working` / `dnd` |
|
||||||
|
|
||||||
|
These are called by Claude Code from within a task — you don't need
|
||||||
|
to memorize them. Just describe what you want in plain English.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
**`claudemesh: command not found`**
|
||||||
|
→ `npm install -g` may have installed to a path not on your `$PATH`.
|
||||||
|
Try `npm bin -g` to see the install location, and add it to your shell
|
||||||
|
rc. Or use `npx claudemesh-cli` until you fix the path.
|
||||||
|
|
||||||
|
**`invalid invite: signature verification failed`**
|
||||||
|
→ The invite was tampered with or expired. Ask the mesh owner to
|
||||||
|
regenerate. Invite links expire (default 7 days).
|
||||||
|
|
||||||
|
**`ECONNREFUSED wss://ic.claudemesh.com/ws`**
|
||||||
|
→ Either a network issue on your side, or the broker is briefly down.
|
||||||
|
Try again in a minute. To self-host instead:
|
||||||
|
`export CLAUDEMESH_BROKER_URL="wss://your-broker/ws"`.
|
||||||
|
|
||||||
|
**Claude Code doesn't see the mesh tools**
|
||||||
|
→ Run `claude mcp list`. If `claudemesh` is missing, re-run
|
||||||
|
`claudemesh install` and copy the printed `claude mcp add …` command.
|
||||||
|
Fully quit Claude Code (not just close window) and reopen.
|
||||||
|
|
||||||
|
**`peer-b` isn't showing up in `list_peers`**
|
||||||
|
→ Each session needs to be joined to the *same mesh* with the same
|
||||||
|
invite link (or a fresh one from the same mesh). Check
|
||||||
|
`claudemesh list` in both terminals — the mesh slug must match.
|
||||||
|
|
||||||
|
**`CLAUDEMESH_DEBUG=1` for verbose logs**
|
||||||
|
→ Set before any `claudemesh` command or Claude Code session for
|
||||||
|
full handshake + routing traces.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Where to go from here
|
||||||
|
|
||||||
|
- **Read the [protocol](./protocol.md)** — wire format, crypto,
|
||||||
|
invite link schema
|
||||||
|
- **Check the [roadmap](./roadmap.md)** — WhatsApp/Telegram gateways,
|
||||||
|
channels, tag routing
|
||||||
|
- **Self-host the broker** — see `apps/broker/README.md`
|
||||||
|
- **Something broke?** → [open an issue](https://github.com/claudemesh/claudemesh/issues)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Got this running in under 5 minutes? Tell us. Got stuck? Tell us
|
||||||
|
louder — we'll fix it.*
|
||||||
129
docs/SELF-HOST.md
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
# Self-hosting the claudemesh broker
|
||||||
|
|
||||||
|
**Most people don't need this page.** Here's the short version:
|
||||||
|
|
||||||
|
- **Local peer mesh** (just your own laptop's Claude Code sessions
|
||||||
|
talking to each other): use **[claude-intercom](https://github.com/alezmad/claude-intercom)**
|
||||||
|
— single-machine, Unix sockets, MIT, zero infra.
|
||||||
|
- **Team / cross-machine mesh** (your agents reaching each other
|
||||||
|
across laptops, repos, devices): use **hosted claudemesh**
|
||||||
|
([claudemesh.com](https://claudemesh.com)) — E2E encrypted, so
|
||||||
|
using our broker doesn't cost you data control. Plaintext never
|
||||||
|
leaves the peer.
|
||||||
|
- **Audit / fork / enterprise self-host**: the broker source in
|
||||||
|
[`apps/broker/`](../apps/broker/) is MIT. Read it, fork it, run
|
||||||
|
your own. Instructions below.
|
||||||
|
|
||||||
|
> **Why self-hosting is a narrow path**: the broker only routes
|
||||||
|
> ciphertext. It never sees plaintext, file contents, or prompts.
|
||||||
|
> Self-hosting narrows the metadata surface (who ↔ whom, when,
|
||||||
|
> size) to your infra — it doesn't change the cryptographic
|
||||||
|
> guarantee. For most teams, the hosted broker's zero-ops trade
|
||||||
|
> is the right one. A first-class packaged self-host / enterprise
|
||||||
|
> deploy is a **v0.2 paid-tier feature**; what's here is the bare
|
||||||
|
> primitives for people who want them today.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quick start with Docker Compose
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
broker:
|
||||||
|
image: claudemesh/broker:0.1 # or build from apps/broker/Dockerfile
|
||||||
|
ports:
|
||||||
|
- "7900:7900"
|
||||||
|
environment:
|
||||||
|
BROKER_PORT: 7900
|
||||||
|
DATABASE_URL: postgres://mesh:mesh@db:5432/claudemesh
|
||||||
|
STATUS_TTL_SECONDS: 60
|
||||||
|
depends_on:
|
||||||
|
db:
|
||||||
|
condition: service_healthy
|
||||||
|
|
||||||
|
db:
|
||||||
|
image: postgres:16
|
||||||
|
environment:
|
||||||
|
POSTGRES_USER: mesh
|
||||||
|
POSTGRES_PASSWORD: mesh
|
||||||
|
POSTGRES_DB: claudemesh
|
||||||
|
volumes:
|
||||||
|
- mesh-pg:/var/lib/postgresql/data
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "pg_isready -U mesh"]
|
||||||
|
interval: 5s
|
||||||
|
retries: 10
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
mesh-pg:
|
||||||
|
```
|
||||||
|
|
||||||
|
Bring it up:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
docker compose up -d
|
||||||
|
# broker now at ws://localhost:7900/ws
|
||||||
|
```
|
||||||
|
|
||||||
|
Point your CLI at it:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
export CLAUDEMESH_BROKER_URL="ws://localhost:7900/ws"
|
||||||
|
claudemesh join ic://join/...
|
||||||
|
```
|
||||||
|
|
||||||
|
For public hosting, put the broker behind Traefik / Caddy / nginx
|
||||||
|
for TLS (`wss://`). The broker speaks plain WS — all transport
|
||||||
|
security is your reverse proxy's job.
|
||||||
|
|
||||||
|
## Building from source
|
||||||
|
|
||||||
|
```sh
|
||||||
|
docker build -f apps/broker/Dockerfile -t claudemesh-broker:local .
|
||||||
|
```
|
||||||
|
|
||||||
|
Or run it directly from the monorepo:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm --filter=@claudemesh/broker start
|
||||||
|
```
|
||||||
|
|
||||||
|
See [`apps/broker/README.md`](../apps/broker/README.md) for the full
|
||||||
|
env-var table and [`apps/broker/DEPLOY_SPEC.md`](../apps/broker/DEPLOY_SPEC.md)
|
||||||
|
for production deploy notes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Known gaps in v0.1.0 self-host
|
||||||
|
|
||||||
|
Self-hosting claudemesh in v0.1.0 is a **raw-source path**, not a
|
||||||
|
packaged product. Being upfront so you don't hit these cold:
|
||||||
|
|
||||||
|
- **No first-class binary or distribution yet.** You run via Docker
|
||||||
|
or `bun` from the monorepo. A packaged enterprise deploy is a
|
||||||
|
v0.2 paid-tier deliverable — not on the free self-host track.
|
||||||
|
- **No broker federation.** Self-hosted brokers don't talk to each
|
||||||
|
other. Peers on *your* broker can't reach peers on *ours* (yet).
|
||||||
|
Federation is v0.3 roadmap.
|
||||||
|
- **TLS is your responsibility.** The broker speaks plain WS; put
|
||||||
|
it behind Traefik / Caddy / nginx for `wss://`.
|
||||||
|
- **Postgres only.** No SQLite fallback shipped. Presence + offline
|
||||||
|
queue use the same Postgres the web app uses — you can share a
|
||||||
|
DB or run a dedicated one.
|
||||||
|
- **No built-in backups.** Standard Postgres backup tooling applies.
|
||||||
|
Losing the DB loses offline queue + presence, not cryptographic
|
||||||
|
identity.
|
||||||
|
- **Minimal metrics.** `/health` and `/metrics` exist; no Grafana
|
||||||
|
dashboards yet.
|
||||||
|
|
||||||
|
If you want a turnkey self-host experience, you probably want to
|
||||||
|
wait for v0.2 — or use the hosted broker today and revisit later.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Getting help
|
||||||
|
|
||||||
|
- Questions + bug reports: [github.com/claudemesh/claudemesh/issues](https://github.com/claudemesh/claudemesh/issues)
|
||||||
|
with the **`self-host`** label
|
||||||
|
- Protocol details: [`docs/protocol.md`](./protocol.md)
|
||||||
|
- What's coming: [`docs/roadmap.md`](./roadmap.md)
|
||||||
98
docs/protocol.md
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
# claudemesh protocol
|
||||||
|
|
||||||
|
claudemesh uses signed ed25519 identities, `crypto_box` for direct
|
||||||
|
peer-to-peer messages, and `crypto_secretbox` for group/channel fanout,
|
||||||
|
carried over a WebSocket to a routing-only broker. Plaintext never
|
||||||
|
leaves the peer.
|
||||||
|
|
||||||
|
> **Status:** stable for v0.1.0 peers. The wire format and crypto
|
||||||
|
> primitives below are frozen. Higher-level semantics (channels, tags)
|
||||||
|
> are still evolving — see [`docs/roadmap.md`](./roadmap.md).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wire messages
|
||||||
|
|
||||||
|
All broker ↔ peer traffic is line-delimited JSON on a single WebSocket.
|
||||||
|
|
||||||
|
| Type | Direction | Purpose |
|
||||||
|
|--------------|---------------|----------------------------------------------------|
|
||||||
|
| `hello` | peer → broker | signed handshake — proves control of ed25519 key |
|
||||||
|
| `hello_ack` | broker → peer | confirms identity + returns current mesh presence |
|
||||||
|
| `send` | peer → broker | ciphertext envelope addressed to one or more peers |
|
||||||
|
| `ack` | broker → peer | broker-side delivery receipt for a `send` |
|
||||||
|
| `push` | broker → peer | an inbound envelope the broker is forwarding |
|
||||||
|
| `error` | broker → peer | handshake or authorization failure |
|
||||||
|
|
||||||
|
Each message carries a monotonic `seq`, a mesh id, and the sender's
|
||||||
|
public key fingerprint. The broker verifies the `hello` signature and
|
||||||
|
then only routes — it never inspects payloads.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Crypto
|
||||||
|
|
||||||
|
- **Signing** — ed25519 (libsodium `crypto_sign`). One keypair per peer
|
||||||
|
per mesh, generated on the client at enrollment.
|
||||||
|
- **Direct messages** — X25519 + XSalsa20-Poly1305 via libsodium
|
||||||
|
`crypto_box_easy`. Peer A encrypts to peer B's public key.
|
||||||
|
- **Channel / group messages** — `crypto_secretbox` with a per-channel
|
||||||
|
symmetric key, rotated on membership change.
|
||||||
|
- **Nonces** — 24-byte random nonces, bundled with ciphertext.
|
||||||
|
|
||||||
|
Keys live on the client in `~/.claudemesh/config.json` (or
|
||||||
|
`$CLAUDEMESH_CONFIG_DIR`). The broker operator has nothing to decrypt.
|
||||||
|
|
||||||
|
Canonical implementations:
|
||||||
|
- broker side: [`apps/broker/src/crypto.ts`](../apps/broker/src/crypto.ts)
|
||||||
|
- client side: [`apps/cli/src/crypto/`](../apps/cli/src/crypto/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Invite links
|
||||||
|
|
||||||
|
A mesh owner issues signed invite links in the form:
|
||||||
|
|
||||||
|
```
|
||||||
|
ic://join/<base64url(JSON)>
|
||||||
|
```
|
||||||
|
|
||||||
|
The inner JSON looks like:
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"mesh": "acme-payments", // mesh slug
|
||||||
|
"broker": "wss://ic.claudemesh.com/ws",
|
||||||
|
"exp": 1717459200, // unix seconds
|
||||||
|
"role": "peer", // peer | admin
|
||||||
|
"enroll": "<ed25519 pubkey of the mesh owner>",
|
||||||
|
"sig": "<ed25519 signature over the above fields>"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The CLI verifies `sig` with `enroll`, checks `exp`, generates a fresh
|
||||||
|
peer keypair, and posts enrollment to the broker. The broker records
|
||||||
|
the new peer and rebroadcasts presence.
|
||||||
|
|
||||||
|
Invite-link issuance: [`apps/cli/src/invite/`](../apps/cli/src/invite/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Self-hosting
|
||||||
|
|
||||||
|
Point the CLI at your own broker:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
export CLAUDEMESH_BROKER_URL="wss://broker.yourteam.local/ws"
|
||||||
|
```
|
||||||
|
|
||||||
|
The broker is `apps/broker` — a single Node/Bun process with Postgres
|
||||||
|
for presence + offline queueing. No secrets to share. Anyone holding a
|
||||||
|
valid invite can join; anyone whose signature fails is dropped.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's next
|
||||||
|
|
||||||
|
Tag-based routing, channel pub/sub, and federation between brokers are
|
||||||
|
on the [v0.2 roadmap](./roadmap.md). Full protocol spec is in progress.
|
||||||
75
docs/roadmap.md
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
# claudemesh roadmap
|
||||||
|
|
||||||
|
## v0.1.0 — *shipped*
|
||||||
|
|
||||||
|
The public launch. Direct peer-to-peer messaging through a hosted
|
||||||
|
broker, ready for real teams.
|
||||||
|
|
||||||
|
- Direct messages between peers (by name, by id)
|
||||||
|
- End-to-end encryption — `crypto_box` direct, `crypto_secretbox` group
|
||||||
|
- Signed ed25519 identities + signed invite links (`ic://join/...`)
|
||||||
|
- Hello-sig handshake auth against the broker
|
||||||
|
- Hosted broker at `wss://ic.claudemesh.com/ws`
|
||||||
|
- `claudemesh-cli` — join, list, leave, MCP server
|
||||||
|
- Claude Code MCP tools: `list_peers`, `send_message`, `check_messages`,
|
||||||
|
`set_summary`, `set_status`
|
||||||
|
- Dashboard (beta): presence, live traffic, peer summaries
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## v0.2.0 — *next*
|
||||||
|
|
||||||
|
The surface layer. The protocol is ready; these are gateways + routing
|
||||||
|
primitives.
|
||||||
|
|
||||||
|
- **Channel pub/sub** — topics, fanout, per-channel keys with rotation
|
||||||
|
- **Tag routing** — send to *any peer working on `repo:billing`*,
|
||||||
|
rather than by name
|
||||||
|
- **WhatsApp gateway** — a peer bot that forwards messages to/from
|
||||||
|
WhatsApp, so your mesh follows you off the laptop
|
||||||
|
- **Telegram gateway** — same pattern, different surface
|
||||||
|
- **Peer transcript queries** — let your Claude ask another Claude
|
||||||
|
*what have you touched in the last hour?* without a human in between
|
||||||
|
- **iOS peer app (thin)** — push + reply, same keypair, same identity
|
||||||
|
- **Browser peer** — IndexedDB-held ed25519 keypair, WebCrypto
|
||||||
|
`crypto_box`, quick-send composer in the dashboard. Makes the web
|
||||||
|
app a full mesh peer, not just a management console. Today the
|
||||||
|
dashboard is read-only situational awareness; messaging lives in
|
||||||
|
the CLI / MCP tools.
|
||||||
|
- **Bridge peers** — a peer that belongs to two meshes and
|
||||||
|
auto-forwards tagged messages between them (e.g. cross-post
|
||||||
|
`#incident` from `team-web` into `team-ops`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## v0.3.0 — *later*
|
||||||
|
|
||||||
|
The operator layer. Built for teams that want to run their own.
|
||||||
|
|
||||||
|
- **Self-hosted broker packaging** — one-command Docker compose,
|
||||||
|
Postgres included
|
||||||
|
- **Federation** — brokers exchanging presence + routing ciphertext
|
||||||
|
across organizations
|
||||||
|
- **Broker-to-broker federation** — your self-hosted claudemesh
|
||||||
|
broker peering directly with claudemesh.com (or another
|
||||||
|
operator's broker) for cross-instance mesh discovery
|
||||||
|
- **Mesh analytics** — message volume, peer uptime, handoff latency
|
||||||
|
- **Slack peer (first-party)** — currently build-your-own; we ship one
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Openness
|
||||||
|
|
||||||
|
- **MIT-licensed** — the protocol, the CLI, the broker, the
|
||||||
|
marketing site
|
||||||
|
- **Reference implementation** — [claude-intercom](https://github.com/alezmad/claude-intercom)
|
||||||
|
is the local OSS ancestor (sockets on one machine). claudemesh is
|
||||||
|
the hosted/enterprise extension.
|
||||||
|
- **Spec-first** — the wire protocol + crypto are documented in
|
||||||
|
[`docs/protocol.md`](./protocol.md). Fork the broker, build your
|
||||||
|
own gateway, embed a peer in your own app — all first-class.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Want something bumped up, or something that isn't listed?
|
||||||
|
[Open an issue](https://github.com/claudemesh/claudemesh/issues/new).*
|
||||||
BIN
generated_imgs/edited-2026-04-04T20-37-46-528Z-if35dc.png
Normal file
|
After Width: | Height: | Size: 639 KiB |
BIN
generated_imgs/edited-2026-04-04T20-56-34-165Z-hw3hod.png
Normal file
|
After Width: | Height: | Size: 379 KiB |
BIN
generated_imgs/edited-2026-04-04T22-10-22-106Z-xuzwhz.png
Normal file
|
After Width: | Height: | Size: 599 KiB |
96
marketing/COPY.md
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
# claudemesh.com — Marketing Copy
|
||||||
|
|
||||||
|
## Hero
|
||||||
|
|
||||||
|
**CLAUDEMESH**
|
||||||
|
*Every Claude Code session, woven into one mesh.*
|
||||||
|
|
||||||
|
Open source. Self-hosted. Built for teams that already live inside Claude Code.
|
||||||
|
|
||||||
|
[ Get started ] [ Star on GitHub ]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## One-liner variants (for social, OG, README)
|
||||||
|
|
||||||
|
- Turn every teammate's Claude Code into a shared workspace.
|
||||||
|
- A mesh network for Claude Code — one session per dev, all talking.
|
||||||
|
- Stop DMing context. Let the agents coordinate.
|
||||||
|
- Your team's Claude sessions, one lattice.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## The problem
|
||||||
|
|
||||||
|
Claude Code already lives on every engineer's laptop. It reads the repo, runs commands, edits files, keeps context. Each session is brilliant in isolation — and completely blind to the other five running on your team's machines right now.
|
||||||
|
|
||||||
|
So engineers paste context into Slack. They screenshot terminals. They rebuild the same mental model Claude already had on someone else's machine.
|
||||||
|
|
||||||
|
The work doubles. The context dies on every restart.
|
||||||
|
|
||||||
|
## What claudemesh does
|
||||||
|
|
||||||
|
claudemesh is a self-hosted broker that connects Claude Code sessions across machines into one live mesh.
|
||||||
|
|
||||||
|
- Every session announces what it is working on.
|
||||||
|
- Any session can message another — by human name, by repo, by machine.
|
||||||
|
- Messages route through a local WebSocket broker you run yourself.
|
||||||
|
- Presence, priority, and status are tracked automatically from each session's activity.
|
||||||
|
|
||||||
|
No cloud account. No training on your code. Your mesh, your machines, your rules.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Real scenarios
|
||||||
|
|
||||||
|
### Platform team owns twelve services
|
||||||
|
|
||||||
|
Infra engineer spins up Claude Code pointed at the Terraform repo. Backend engineer has Claude Code in the service repo. When infra ships a new secret name, Claude on the infra side messages Claude on the backend side: *"SECRET_RENAMED auth-token → auth-token-v2, bump your env loader."* Backend Claude picks up the message next time the engineer goes idle, opens the file, makes the edit, asks the human for approval.
|
||||||
|
|
||||||
|
Two engineers, two agents, zero Slack threads.
|
||||||
|
|
||||||
|
### Database migration across a monorepo
|
||||||
|
|
||||||
|
DBA runs a migration in one Claude session. Seven service-owner Claude sessions subscribe to schema changes. When the migration lands, each service's Claude runs its own typecheck, surfaces the breaks to its human, and proposes the fix — already aware of the new schema, because it got the message.
|
||||||
|
|
||||||
|
### Oncall handoff at 3 AM
|
||||||
|
|
||||||
|
Incident Claude on the oncall laptop has been debugging a prod bug for forty minutes. The oncall rotates. The next engineer opens Claude Code. Their session pulls the summary, the hypotheses tried, the logs read, the files touched. No standup. No writeup. The investigation continues.
|
||||||
|
|
||||||
|
### Security review before a release
|
||||||
|
|
||||||
|
Release Claude opens a PR. Security Claude on a different machine subscribes to PR-opened events, runs its checklist against the diff, files findings back to the release session. The release engineer sees one consolidated review instead of chasing approvals.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Why enterprises will care
|
||||||
|
|
||||||
|
Teams already pay for Claude Code per seat. claudemesh multiplies what those seats do together.
|
||||||
|
|
||||||
|
- **Context survives handoffs.** One agent hands work to the next with full history. No rebuilding.
|
||||||
|
- **Decisions stay in the tool.** No copy-paste into Slack, Jira, or a meeting that did not need to happen.
|
||||||
|
- **Work parallelises.** Six agents on six machines can coordinate on the same release without humans playing telephone.
|
||||||
|
- **Your data stays local.** Self-hosted broker. Messages never leave your network.
|
||||||
|
- **Audit trail by default.** Every message, every status, every handoff, logged.
|
||||||
|
|
||||||
|
claudemesh does not replace the engineer. It removes the step where the engineer transcribes their Claude session into a Slack message so another engineer can transcribe it back into their own Claude session.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Why open source, why now
|
||||||
|
|
||||||
|
Anthropic built Claude Code as a per-developer tool. The next unlock is between developers. We think that layer should be open, self-hosted, and owned by the teams that run it — not a SaaS tax on a tool you already pay for.
|
||||||
|
|
||||||
|
Built on top of the claude-intercom prototype (2 sessions, one laptop). claudemesh scales it to teams, machines, and offices.
|
||||||
|
|
||||||
|
Run the broker. Point your Claude Code at it. Watch the mesh light up.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Calls to action
|
||||||
|
|
||||||
|
- **For developers:** `npx claudemesh init` — three commands, running in sixty seconds.
|
||||||
|
- **For teams:** Self-host the broker on one machine in your network. Everyone else joins.
|
||||||
|
- **For Anthropic:** This is the agent-to-agent layer the community will build anyway. Let's build it together.
|
||||||
|
|
||||||
|
[ github.com/claudemesh/claudemesh ]
|
||||||
244
marketing/anthropic-tokens.json
Normal file
@@ -0,0 +1,244 @@
|
|||||||
|
{
|
||||||
|
"--_theme---button-brand--text": "#faf9f5",
|
||||||
|
"--_grid---column-count": "12",
|
||||||
|
"--swatch--clay": "#d97757",
|
||||||
|
"--radius--x-small": ".25rem",
|
||||||
|
"--_typography---line-height--1-7": "1.7",
|
||||||
|
"--nav--icon-thickness": ".0625rem",
|
||||||
|
"--_typography---font-size--body-large-2": "clamp(1.25*1rem,((1.25 - ((1.4375 - 1.25)/(90 - 20)*20))*1rem + ((1.4375 - 1.25)/(90 - 20))*100vw),1.4375*1rem)",
|
||||||
|
"--_theme---switch--dot-background-active": "white",
|
||||||
|
"--radius--large": "1rem",
|
||||||
|
"--_theme---button-primary--border": "#30302e",
|
||||||
|
"--_theme---button-brand--background": "#c96442",
|
||||||
|
"--_typography---letter-spacing--0em": "0em",
|
||||||
|
"--moat-shadow": "rgba(0, 0, 0, 0.1)",
|
||||||
|
"--_typography---line-height--1-5": "1.5",
|
||||||
|
"--moat-bg-tertiary": "#f3f4f6",
|
||||||
|
"--moat-text-primary": "#1f2937",
|
||||||
|
"--_theme---button-primary--text-hover": "#faf9f5",
|
||||||
|
"--_text-style---font-weight": "400",
|
||||||
|
"--_theme---button-primary--background-hover": "#1f1e1d",
|
||||||
|
"--moat-warning-light": "rgba(245, 158, 11, 0.1)",
|
||||||
|
"--_state---false": "0",
|
||||||
|
"--radius--x-large": "clamp(1*1rem,((1 - ((1.5 - 1)/(90 - 20)*20))*1rem + ((1.5 - 1)/(90 - 20))*100vw),1.5*1rem)",
|
||||||
|
"--swatch--gray-050": "#faf9f5",
|
||||||
|
"--_typography---line-height--1-2": "1.2",
|
||||||
|
"--moat-error": "#dc2626",
|
||||||
|
"--_typography---text-transform--none": "none",
|
||||||
|
"--_theme---button-tertiary--border-hover": "#d1cfc5",
|
||||||
|
"--_theme---selection--background": "color-mix(in srgb,#d97757/**/50%,transparent)",
|
||||||
|
"--grid-breakout": "[full-start] minmax(0, 1fr) [content-start] repeat(12, minmax(0, calc((min(calc(90*1rem),100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)*2) - (2rem*(12 - 1)))/12))) [content-end] minmax(0, 1fr) [full-end]",
|
||||||
|
"--_typography---font--text-trim-top": ".39em",
|
||||||
|
"--_button-style---background-hover": "#c96442",
|
||||||
|
"--swatch--gray-000": "white",
|
||||||
|
"--swatch--gray-350": "#c2c0b6",
|
||||||
|
"--_alignment---direction": "start",
|
||||||
|
"--_typography---font-size--h1": "clamp(2.125*1rem,((2.125 - ((3.25 - 2.125)/(90 - 20)*20))*1rem + ((3.25 - 2.125)/(90 - 20))*100vw),3.25*1rem)",
|
||||||
|
"--_button-style---text": "#faf9f5",
|
||||||
|
"--_trigger---off": "0",
|
||||||
|
"--swatch--gray-150": "#f0eee6",
|
||||||
|
"--_text-style---trim-bottom": ".38em",
|
||||||
|
"--swatch--fig": "#c46686",
|
||||||
|
"--_typography---font-size--h3": "clamp(1.75*1rem,((1.75 - ((2.25 - 1.75)/(90 - 20)*20))*1rem + ((2.25 - 1.75)/(90 - 20))*100vw),2.25*1rem)",
|
||||||
|
"--swatch--gray-850": "#1f1e1d",
|
||||||
|
"--_typography---letter-spacing--0-05em": ".05em",
|
||||||
|
"--_theme---button-brand--icon-hover": "#faf9f5",
|
||||||
|
"--max-width--main": "calc(90*1rem)",
|
||||||
|
"--_theme---foreground-tertiary": "#5e5d59",
|
||||||
|
"--focus--width": ".125rem",
|
||||||
|
"--swatch--oat": "#e3dacc",
|
||||||
|
"--_text-style---font-size": "clamp(1.1875*1rem,((1.1875 - ((1.25 - 1.1875)/(90 - 20)*20))*1rem + ((1.25 - 1.1875)/(90 - 20))*100vw),1.25*1rem)",
|
||||||
|
"--swatch--gray-450": "#9c9a92",
|
||||||
|
"--_typography---font--mono-text-trim-bottom": ".37em",
|
||||||
|
"--_theme---button-tertiary--background": "#faf9f5",
|
||||||
|
"--_theme---switch--border-active": "transparent",
|
||||||
|
"--_theme---button-brand--background-hover": "#c96442",
|
||||||
|
"--_text-style---font-weight<deleted|variable-4b164c1c-8d1a-d4a3-2cae-137e7ca87326>": "400",
|
||||||
|
"--swiper-theme-color": "#007aff",
|
||||||
|
"--_button-style---text-hover": "#faf9f5",
|
||||||
|
"--swatch--gray-800": "#262624",
|
||||||
|
"--_button-style---spacer-width-hover": ".0625rem",
|
||||||
|
"--_spacing---space--2rem": "clamp(1.75*1rem,((1.75 - ((2 - 1.75)/(90 - 20)*20))*1rem + ((2 - 1.75)/(90 - 20))*100vw),2*1rem)",
|
||||||
|
"--_theme---foreground-secondary": "#30302e",
|
||||||
|
"--moat-accent": "#3b82f6",
|
||||||
|
"--_typography---font--logographic-family": "\"Noto Sans\",Arial,sans-serif",
|
||||||
|
"--_theme---button-secondary--icon": "#4d4c48",
|
||||||
|
"--_text-style---trim-top": ".39em",
|
||||||
|
"--_theme---button-secondary--border-hover": "#e8e6dc",
|
||||||
|
"--_theme---button-primary--border-hover": "#30302e",
|
||||||
|
"--swatch--cactus": "#bcd1ca",
|
||||||
|
"--_theme---switch--background": "#f0eee6",
|
||||||
|
"--_theme---button-primary--text": "#faf9f5",
|
||||||
|
"--moat-warning-border": "rgba(245, 158, 11, 0.2)",
|
||||||
|
"--site--gutter<deleted|variable-19914bb2-08fa-8b60-b710-6beb999f4c42>": "2rem",
|
||||||
|
"--_typography---font--primary-bold": "700",
|
||||||
|
"--_trigger---on": "1",
|
||||||
|
"--_typography---font-size--h2": "clamp(1.875*1rem,((1.875 - ((2.75 - 1.875)/(90 - 20)*20))*1rem + ((2.75 - 1.875)/(90 - 20))*100vw),2.75*1rem)",
|
||||||
|
"--radius--main": ".75rem",
|
||||||
|
"--_typography---line-height--1-1": "1.1",
|
||||||
|
"--_theme---switch--background-active": "#2c84db",
|
||||||
|
"--_column-count---value": "1",
|
||||||
|
"--_spacing---section-space--main": "clamp(6*1rem,((6 - ((8 - 6)/(90 - 20)*20))*1rem + ((8 - 6)/(90 - 20))*100vw),8*1rem)",
|
||||||
|
"--_text-style---line-height": "1.6",
|
||||||
|
"--radius--xx-large": "clamp(1*1rem,((1 - ((2 - 1)/(90 - 20)*20))*1rem + ((2 - 1)/(90 - 20))*100vw),2*1rem)",
|
||||||
|
"--grid-breakout-single": "[full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem) * 2)) [content-end] minmax(0, 1fr) [full-end]",
|
||||||
|
"--_theme---border-secondary": "#d1cfc5",
|
||||||
|
"--moat-scrollbar-track": "transparent",
|
||||||
|
"--max-width--small": "60rem",
|
||||||
|
"--_theme---button-secondary--border": "#d1cfc5",
|
||||||
|
"--_typography---font-size--h5": "clamp(1.25*1rem,((1.25 - ((1.5625 - 1.25)/(90 - 20)*20))*1rem + ((1.5625 - 1.25)/(90 - 20))*100vw),1.5625*1rem)",
|
||||||
|
"--moat-accent-light": "rgba(59, 130, 246, 0.1)",
|
||||||
|
"--_theme---button-primary--icon": "#faf9f5",
|
||||||
|
"--moat-border": "#e5e7eb",
|
||||||
|
"--_theme---switch--dot-border": "#b0aea5",
|
||||||
|
"--swatch--gray-1000": "#000",
|
||||||
|
"--swatch--gray-250": "#dedcd1",
|
||||||
|
"--swatch--gray-400": "#b0aea5",
|
||||||
|
"--_theme---button-primary--icon-hover": "#faf9f5",
|
||||||
|
"--swatch--coral": "#ebcece",
|
||||||
|
"--_button-style---border-hover": "#c96442",
|
||||||
|
"--moat-error-border": "rgba(239, 68, 68, 0.2)",
|
||||||
|
"--_typography---font--text-trim-bottom": ".38em",
|
||||||
|
"--_spacing---space--0-75rem": "clamp(.75*1rem,((.75 - ((.75 - .75)/(90 - 20)*20))*1rem + ((.75 - .75)/(90 - 20))*100vw),.75*1rem)",
|
||||||
|
"--nav--dropdown-duration": "300ms",
|
||||||
|
"--_theme---button-tertiary--icon": "#5e5d59",
|
||||||
|
"--_typography---text-transform--uppercase": "uppercase",
|
||||||
|
"--swatch--heather": "#cbcadb",
|
||||||
|
"--_text-style---text-wrap": "pretty",
|
||||||
|
"--_theme---button-brand--text-hover": "#faf9f5",
|
||||||
|
"--nav--dropdown-delay": "0ms",
|
||||||
|
"--moat-notification-text": "#ffffff",
|
||||||
|
"--_typography---font-size--body-3": "clamp(.9375*1rem,((.9375 - ((.9375 - .9375)/(90 - 20)*20))*1rem + ((.9375 - .9375)/(90 - 20))*100vw),.9375*1rem)",
|
||||||
|
"--_theme---button-secondary--background": "#e8e6dc",
|
||||||
|
"--_theme---button-secondary--background-hover": "white",
|
||||||
|
"--moat-success": "#059669",
|
||||||
|
"--max-width--medium": "74.5rem",
|
||||||
|
"--swatch--gray-600": "#5e5d59",
|
||||||
|
"--moat-success-border": "rgba(34, 197, 94, 0.2)",
|
||||||
|
"--_spacing---space--1-5rem": "clamp(1.5*1rem,((1.5 - ((1.5 - 1.5)/(90 - 20)*20))*1rem + ((1.5 - 1.5)/(90 - 20))*100vw),1.5*1rem)",
|
||||||
|
"--swatch--clay-interactive": "#c96442",
|
||||||
|
"--_theme---selection--text": "#141413",
|
||||||
|
"--_typography---font-size--micro": "clamp(.625*1rem,((.625 - ((.625 - .625)/(90 - 20)*20))*1rem + ((.625 - .625)/(90 - 20))*100vw),.625*1rem)",
|
||||||
|
"--_typography---font--primary-family": "\"Anthropic Sans\",Arial,sans-serif",
|
||||||
|
"--_typography---line-height--1-3": "1.3",
|
||||||
|
"--_spacing---section-space--small": "clamp(4*1rem,((4 - ((6 - 4)/(90 - 20)*20))*1rem + ((6 - 4)/(90 - 20))*100vw),6*1rem)",
|
||||||
|
"--_theme---foreground-primary": "#141413",
|
||||||
|
"--swatch--gray-100": "#f5f4ed",
|
||||||
|
"--_typography---font--mono-family": "\"Anthropic Mono\",Arial,sans-serif",
|
||||||
|
"--_theme---pictogram-accent": "#e3dacc",
|
||||||
|
"--_typography---font-size--body-large-1": "clamp(1.375*1rem,((1.375 - ((1.5 - 1.375)/(90 - 20)*20))*1rem + ((1.5 - 1.375)/(90 - 20))*100vw),1.5*1rem)",
|
||||||
|
"--moat-bg-primary": "#ffffff",
|
||||||
|
"--swatch--gray-950": "#141413",
|
||||||
|
"--_button-style---spacer-width": "0rem",
|
||||||
|
"--_spacing---section-space--large": "clamp(8*1rem,((8 - ((12.5 - 8)/(90 - 20)*20))*1rem + ((12.5 - 8)/(90 - 20))*100vw),12.5*1rem)",
|
||||||
|
"--swatch--gray-550": "#73726c",
|
||||||
|
"--moat-border-light": "#f3f4f6",
|
||||||
|
"--_button-style---border-width": ".0625rem",
|
||||||
|
"--_text-style---logographic-family": "\"Noto Sans\",Arial,sans-serif",
|
||||||
|
"--focus--offset-inner": "-.125rem",
|
||||||
|
"--swatch--gray-500": "#87867f",
|
||||||
|
"--_theme---button-secondary--text-hover": "#141413",
|
||||||
|
"--nav--hamburger-gap": "clamp(.25*1rem,((.25 - ((.25 - .25)/(90 - 20)*20))*1rem + ((.25 - .25)/(90 - 20))*100vw),.25*1rem)",
|
||||||
|
"--_theme---background-primary": "#faf9f5",
|
||||||
|
"--site--viewport-min": "20",
|
||||||
|
"--swatch--gray-700": "#3d3d3a",
|
||||||
|
"--moat-text-tertiary": "#6b7280",
|
||||||
|
"--_button-style---border-width-hover": "calc(.0625rem*2)",
|
||||||
|
"--swatch--gray-200": "#e8e6dc",
|
||||||
|
"--mcp-pointer-border-color": "#7abaffc0",
|
||||||
|
"--_grid---column-width": "calc((min(calc(90*1rem),100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)*2) - (2rem*(12 - 1)))/12)",
|
||||||
|
"--swatch--gray-750": "#30302e",
|
||||||
|
"--site--margin": "clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)",
|
||||||
|
"--_spacing---space--3rem": "clamp(2.5*1rem,((2.5 - ((3 - 2.5)/(90 - 20)*20))*1rem + ((3 - 2.5)/(90 - 20))*100vw),3*1rem)",
|
||||||
|
"--_typography---font-size--body-1": "clamp(1.1875*1rem,((1.1875 - ((1.25 - 1.1875)/(90 - 20)*20))*1rem + ((1.25 - 1.1875)/(90 - 20))*100vw),1.25*1rem)",
|
||||||
|
"--_theme---border-tertiary": "#e8e6dc",
|
||||||
|
"--_theme---button-primary--background": "#141413",
|
||||||
|
"--_text-style---letter-spacing": "0em",
|
||||||
|
"--nav--dropdown-open-duration": "600ms",
|
||||||
|
"--_theme---button-tertiary--text": "#5e5d59",
|
||||||
|
"--swatch--gray-650": "#4d4c48",
|
||||||
|
"--swatch--brand-600<deleted|variable-f4848f9a-e1c5-5c7a-9707-4fe0d1542434>": "color-mix(in srgb,#d97757,black 20%)",
|
||||||
|
"--moat-shadow-lg": "rgba(0, 0, 0, 0.15)",
|
||||||
|
"--_theme---button-brand--border-hover": "#c96442",
|
||||||
|
"--_typography---font--primary-semibold": "600",
|
||||||
|
"--_text-style---text-transform": "none",
|
||||||
|
"--swatch--transparent": "transparent",
|
||||||
|
"--_spacing---space--0-5rem": "clamp(.5*1rem,((.5 - ((.5 - .5)/(90 - 20)*20))*1rem + ((.5 - .5)/(90 - 20))*100vw),.5*1rem)",
|
||||||
|
"--_state---true": "1",
|
||||||
|
"--_typography---font-size--body-2": "clamp(1.0625*1rem,((1.0625 - ((1.0625 - 1.0625)/(90 - 20)*20))*1rem + ((1.0625 - 1.0625)/(90 - 20))*100vw),1.0625*1rem)",
|
||||||
|
"--_button-style---border": "#c96442",
|
||||||
|
"--ease-expo-out": "cubic-bezier(0.16, 1, 0.3, 1)",
|
||||||
|
"--_typography---font-size--h4": "clamp(1.4375*1rem,((1.4375 - ((2 - 1.4375)/(90 - 20)*20))*1rem + ((2 - 1.4375)/(90 - 20))*100vw),2*1rem)",
|
||||||
|
"--_text-style---font-family": "\"Anthropic Sans\",Arial,sans-serif",
|
||||||
|
"--_theme---button-brand--icon": "#faf9f5",
|
||||||
|
"--_button-style---icon": "#faf9f5",
|
||||||
|
"--site--column-count<deleted|variable-85d23ac9-df16-3529-599c-7c03076ebe38>": "12",
|
||||||
|
"--_text-style---margin-bottom": "clamp(1.5*1rem,((1.5 - ((1.5 - 1.5)/(90 - 20)*20))*1rem + ((1.5 - 1.5)/(90 - 20))*100vw),1.5*1rem)",
|
||||||
|
"--_theme---button-brand--border": "#c96442",
|
||||||
|
"--_theme---background-tertiary": "#f0eee6",
|
||||||
|
"--_spacing---space--1rem": "clamp(1*1rem,((1 - ((1 - 1)/(90 - 20)*20))*1rem + ((1 - 1)/(90 - 20))*100vw),1*1rem)",
|
||||||
|
"--moat-scrollbar-thumb": "#d1d5db",
|
||||||
|
"--_theme---text-accent": "#d97757",
|
||||||
|
"--radius--small": ".5rem",
|
||||||
|
"--swatch--gray-900": "#1a1918",
|
||||||
|
"--_theme---error-text": "#b53333",
|
||||||
|
"--border-width--main": ".0625rem",
|
||||||
|
"--_theme---border-primary": "#b0aea5",
|
||||||
|
"--moat-success-light": "rgba(34, 197, 94, 0.1)",
|
||||||
|
"--moat-warning": "#d97706",
|
||||||
|
"--swatch--olive": "#788c5d",
|
||||||
|
"--_typography---font--secondary-family": "\"Anthropic Serif\",Georgia,sans-serif",
|
||||||
|
"--_button-style---icon-hover": "#faf9f5",
|
||||||
|
"--focus--offset-outer": ".25rem",
|
||||||
|
"--_theme---switch--dot-border-active": "transparent",
|
||||||
|
"--_grid---gutter": "2rem",
|
||||||
|
"--_button-style---background": "#c96442",
|
||||||
|
"--_theme---heading-accent<deleted|variable-25bd0d95-1867-08bf-9f2f-eabc649f971e>": "color-mix(in srgb,#d97757,black 20%)",
|
||||||
|
"--_typography---font--mono-text-trim-top": ".4em",
|
||||||
|
"--_typography---font--primary-medium<deleted|variable-bf70a7c1-809a-4d78-48d8-6a700e801b65>": "500",
|
||||||
|
"--_typography---font--primary-light": "300",
|
||||||
|
"--_theme---button-tertiary--background-hover": "#faf9f5",
|
||||||
|
"--_theme---button-tertiary--border": "#d1cfc5",
|
||||||
|
"--site--viewport-max": "90",
|
||||||
|
"--swatch--sky": "#6a9bcc",
|
||||||
|
"--moat-text-muted": "#9ca3af",
|
||||||
|
"--moat-bg-secondary": "#f9fafb",
|
||||||
|
"--swiper-navigation-size": "44px",
|
||||||
|
"--_theme---heroes-accent": "#d97757",
|
||||||
|
"--_typography---font--primary-medium": "500",
|
||||||
|
"--_gap---size": "2rem",
|
||||||
|
"--_theme---button-secondary--icon-hover": "#30302e",
|
||||||
|
"--_typography---font-size--h6": "clamp(1*1rem,((1 - ((1.1875 - 1)/(90 - 20)*20))*1rem + ((1.1875 - 1)/(90 - 20))*100vw),1.1875*1rem)",
|
||||||
|
"--_typography---font--primary-regular<deleted|variable-e2e11636-2778-b266-3d73-a7bb3f1f201f>": "400",
|
||||||
|
"--swatch--gray-300": "#d1cfc5",
|
||||||
|
"--_typography---line-height--1-6": "1.6",
|
||||||
|
"--_theme---white": "white",
|
||||||
|
"--_theme---button-secondary--text": "#4d4c48",
|
||||||
|
"--_spacing---space--2-5rem": "clamp(2*1rem,((2 - ((2.5 - 2)/(90 - 20)*20))*1rem + ((2.5 - 2)/(90 - 20))*100vw),2.5*1rem)",
|
||||||
|
"--moat-notification-bg": "#1f2937",
|
||||||
|
"--nav--hamburger-rotate": "45",
|
||||||
|
"--max-width--full": "100%",
|
||||||
|
"--_theme---background-secondary": "#f5f4ed",
|
||||||
|
"--moat-accent-border": "rgba(59, 130, 246, 0.2)",
|
||||||
|
"--_typography---font--primary-regular": "400",
|
||||||
|
"--nav--hamburger-thickness": ".0625rem",
|
||||||
|
"--_typography---text-transform--capitalize": "capitalize",
|
||||||
|
"--_typography---line-height--1": "1",
|
||||||
|
"--_spacing---space--4rem": "clamp(3.25*1rem,((3.25 - ((4 - 3.25)/(90 - 20)*20))*1rem + ((4 - 3.25)/(90 - 20))*100vw),4*1rem)",
|
||||||
|
"--_spacing---space--0-25rem": "clamp(.25*1rem,((.25 - ((.25 - .25)/(90 - 20)*20))*1rem + ((.25 - .25)/(90 - 20))*100vw),.25*1rem)",
|
||||||
|
"--moat-scrollbar-thumb-hover": "#9ca3af",
|
||||||
|
"--_typography---font-size--display-2": "clamp(2.25*1rem,((2.25 - ((4 - 2.25)/(90 - 20)*20))*1rem + ((4 - 2.25)/(90 - 20))*100vw),4*1rem)",
|
||||||
|
"--moat-error-light": "rgba(239, 68, 68, 0.1)",
|
||||||
|
"--_typography---font-size--caption": "clamp(.75*1rem,((.75 - ((.75 - .75)/(90 - 20)*20))*1rem + ((.75 - .75)/(90 - 20))*100vw),.75*1rem)",
|
||||||
|
"--_spacing---section-space--none": "0px",
|
||||||
|
"--_theme---switch--dot-background": "white",
|
||||||
|
"--_spacing---section-space--page-top": "clamp(12*1rem,((12 - ((15 - 12)/(90 - 20)*20))*1rem + ((15 - 12)/(90 - 20))*100vw),15*1rem)",
|
||||||
|
"--_typography---text-transform--lowercase": "lowercase",
|
||||||
|
"--_theme---switch--border": "#d1cfc5",
|
||||||
|
"--_typography---font-size--display-1": "clamp(2.625*1rem,((2.625 - ((4.5 - 2.625)/(90 - 20)*20))*1rem + ((4.5 - 2.625)/(90 - 20))*100vw),4.5*1rem)",
|
||||||
|
"--_typography---letter-spacing--0-01em": ".01em",
|
||||||
|
"--_theme---button-tertiary--icon-hover": "#141413",
|
||||||
|
"--moat-text-secondary": "#4b5563",
|
||||||
|
"--_theme---button-tertiary--text-hover": "#141413",
|
||||||
|
"--_text-style---margin-top": "clamp(1*1rem,((1 - ((1 - 1)/(90 - 20)*20))*1rem + ((1 - 1)/(90 - 20))*100vw),1*1rem)"
|
||||||
|
}
|
||||||
BIN
marketing/assets/admin-01-overview.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
marketing/assets/admin-auth-redirect.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
marketing/assets/anthropic-refs/01-hero.png
Normal file
|
After Width: | Height: | Size: 108 KiB |
BIN
marketing/assets/anthropic-refs/02-surfaces.png
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
marketing/assets/anthropic-refs/03-pricing.png
Normal file
|
After Width: | Height: | Size: 116 KiB |
BIN
marketing/assets/anthropic-refs/04-phone-to-pr.png
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
marketing/assets/anthropic-refs/05-what-could-you-do.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
BIN
marketing/assets/anthropic-refs/06-meets-you.png
Normal file
|
After Width: | Height: | Size: 142 KiB |
BIN
marketing/assets/anthropic-refs/07-footer.png
Normal file
|
After Width: | Height: | Size: 244 KiB |
BIN
marketing/assets/anthropic-refs/claude-code-page.png
Normal file
|
After Width: | Height: | Size: 257 KiB |
BIN
marketing/assets/anthropic-refs/full-page.png
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
marketing/assets/anthropic-refs/toaster.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
marketing/assets/claudemesh-final-hero.png
Normal file
|
After Width: | Height: | Size: 258 KiB |
BIN
marketing/assets/claudemesh-live-01-hero.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
marketing/assets/claudemesh-live-01b.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
marketing/assets/claudemesh-live-01c.png
Normal file
|
After Width: | Height: | Size: 261 KiB |
BIN
marketing/assets/claudemesh-live-02.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
marketing/assets/claudemesh-live-03.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
marketing/assets/claudemesh-live-04.png
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
marketing/assets/claudemesh-live-05.png
Normal file
|
After Width: | Height: | Size: 96 KiB |