Openclaw Web V2 Implementation Plan

# OpenClaw Web V2 Implementation Plan

Status: Proposed  
Date: 2026-03-10  
Audience: Web engineering, product, design, platform  
Related: [openclaw-web-technical-architecture.md](./openclaw-web-technical-architecture.md), [openclaw-website-development-system-workflow-spec.md](./openclaw-website-development-system-workflow-spec.md), [../pi_agent_rust/docs/openclaw-v2-program-upgrade-spec.md](../pi_agent_rust/docs/openclaw-v2-program-upgrade-spec.md)

## 1. Purpose

This document maps the V2 product direction onto the current `/web` codebase so implementation can proceed incrementally instead of restarting architecture from zero.

## 2. Current Baseline

The current web app already has:

- Next.js App Router shell
- public landing page
- app dashboard, systems, and tasks surfaces
- control-plane repository abstraction
- Prisma schema for core control-plane entities
- bridge linking protocol docs
- task and bridge API scaffolding

This means V2 web work should focus on layering product workflows and real persistence onto the existing structure.

## 3. Immediate Product Gap

The biggest current gap is that the web app exposes infrastructure concepts, but not yet strong user-facing systems.

Today the shell shows:

- dashboard metrics
- linked targets
- systems list
- task list

V2 needs to add:

- template-first entry
- system-specific launchers
- result pages
- artifact center
- Vault views
- membership/billing/auth flows
- CMS-backed content surfaces

## 4. Recommended Delivery Order

### Step 1: Template-first navigation

Add:

- template landing pages
- Website Development System launcher
- dashboard links that start from user goals, not only backend objects

### Step 2: Website Development System shell

Add:

- website project creation flow
- staged intake
- task stage launching
- artifact result page shell

### Step 3: Artifact and result center

Add:

- `/app/artifacts`
- artifact detail views
- export actions
- follow-up actions

### Step 4: Vault metadata views

Add:

- snapshot timeline shell
- branch overview shell
- restore/clone action placeholders

### Step 5: Auth and membership

Add:

- real sign-in
- workspace selection
- plan-aware feature gating
- billing placeholders and then full flows

## 5. Codebase Mapping

### 5.1 Routes

Current routes to keep and extend:

- `/` keep as marketing/control-plane intro
- `/app/dashboard` evolve into system-oriented dashboard
- `/app/systems` keep for operations view
- `/app/tasks` keep for run-state view

New routes to add first:

- `/app/templates`
- `/app/templates/websites`
- `/app/websites`
- `/app/websites/[websiteId]`
- `/app/artifacts`
- `/app/vault`

### 5.2 `src/lib`

Current `src/lib` is already the right place for domain services.

Add:

- `website-system-types.ts`
- `website-system-service.ts`
- `artifact-service.ts`
- `vault-service.ts`
- `membership-service.ts`

### 5.3 Prisma

Do not over-expand schema immediately.

Short term:

- use `System.metadata`, `TaskRun.inputPayload`, and `Artifact.metadata` conventions
- keep workflow-specific data normalized at the service layer

Medium term:

- add explicit `SiteProject` or equivalent table only when repeated workflow needs justify it

## 6. Implementation Slices

### Slice A: user can create a website system

Definition of done:

- template page exists
- intake form exists
- creating a website system writes a `System`
- user lands on a website project page

### Slice B: user can launch a strategy task

Definition of done:

- stage launch endpoint exists
- `TaskRun` created with structured payload
- task page and website project page show run state

### Slice C: user gets a result page

Definition of done:

- first website artifact can be rendered
- artifact is visible in web UI
- dashboard can link to recent artifacts

### Slice D: user can choose local/cloud/hybrid execution

Definition of done:

- launch form exposes execution target
- local device or cloud host selection is visible
- task result page shows actual execution target used

### Slice E: user can checkpoint and revisit

Definition of done:

- checkpoint metadata is visible
- website project page shows restore points
- result page links to snapshot context

## 7. Current Engineering Recommendation

Do not pause current web development to redesign everything.

Instead:

1. keep the current control-plane shell
2. add one flagship workflow on top of it
3. make artifacts visible
4. then add Vault, auth, billing, and CMS depth

That flagship workflow should be the Website Development System.

## 8. Acceptance Criteria

This implementation plan is actionable when the team can use it to sequence real work in the existing web repo without re-architecting the app from scratch.