feat(docker-watcher): phase 13 - volumes & environment

Per-stage env var overrides with encryption for secrets.
Volume mounts with shared/isolated modes (isolated appends
/{stage}-{tag}/ to source path). Store CRUD, API endpoints,
and frontend editors for both. Env merge during deploy.

PLAN.md

@@ -287,7 +287,7 @@ Full dashboard for visibility, manual control, and configuration.
 22. **Embed in Go** ✅ — build SvelteKit to static, embed with `go:embed`, serve from Go
 23. **Real-time updates** ✅ — SSE for deploy progress and instance status changes
 
-### Phase 4: Volumes & Environment
+### Phase 4: Volumes & Environment (Phase 13) -- COMPLETED
 
 Persistent storage and app-specific configuration for deployed containers.
 
@@ -298,6 +298,21 @@ Persistent storage and app-specific configuration for deployed containers.
 28. **Isolated volumes** — each instance gets its own subdirectory: `{source}/{stage}-{tag}/` → `{target}` (for stateful apps with local DBs/files)
 29. **UI for volumes & env** — project settings page with key/value editor, volume list, shared/isolated toggle, per-stage override support
 
+#### Phase 13 Handoff Notes
+
+- New tables: `stage_env` (id, stage_id, key, value, encrypted, timestamps), `volumes` (id, project_id, source, target, mode, timestamps)
+- `stage_env` has UNIQUE(stage_id, key) constraint to prevent duplicate keys per stage
+- Volume mode is either "shared" or "isolated"; default is "shared"
+- Encrypted env values are encrypted with `crypto.Encrypt` before storage and decrypted at deploy time
+- API masks encrypted env values as "••••••••" in responses
+- Env merge order in deployer: project-level JSON `env` field parsed first, then stage-level `stage_env` records overlay (stage wins on key conflict)
+- `computeVolumeMounts` appends `/{stage}-{tag}/` to source for isolated volumes
+- Docker `ContainerConfig` now has `Mounts []mount.Mount` field, passed to `HostConfig.Mounts`
+- Both `executeDeploy` and `blueGreenDeploy` updated to use `mergeEnvVars` and `computeVolumeMounts`
+- API routes: GET/POST `/api/projects/{id}/stages/{stage}/env`, PUT/DELETE `.../env/{envId}`, GET/POST `/api/projects/{id}/volumes`, PUT/DELETE `.../volumes/{volId}`
+- Frontend pages: `/projects/[id]/env` (per-stage env editor with inherited/overridden indicators), `/projects/[id]/volumes` (volume editor with shared/isolated toggle)
+- Project detail page now has navigation links to env and volumes pages
+
 Volume config per project:
 ```yaml
 env:
@@ -405,6 +420,18 @@ POST   /api/projects/:id/stages                         — add stage to project
 PUT    /api/projects/:id/stages/:stage                   — update stage config
 DELETE /api/projects/:id/stages/:stage                   — delete stage + its instances
 
+# Stage Env Overrides
+GET    /api/projects/:id/stages/:stage/env                 — list stage env vars (secrets masked)
+POST   /api/projects/:id/stages/:stage/env                 — create stage env var
+PUT    /api/projects/:id/stages/:stage/env/:envId          — update stage env var
+DELETE /api/projects/:id/stages/:stage/env/:envId          — delete stage env var
+
+# Project Volumes
+GET    /api/projects/:id/volumes                           — list project volumes
+POST   /api/projects/:id/volumes                           — create project volume
+PUT    /api/projects/:id/volumes/:volId                    — update project volume
+DELETE /api/projects/:id/volumes/:volId                    — delete project volume
+
 # Instances (running containers)
 GET    /api/projects/:id/stages/:stage/instances          — list instances for stage
 POST   /api/projects/:id/stages/:stage/instances          — deploy new instance (pick tag)

internal/api/router.go

@@ -118,6 +118,12 @@ func (s *Server) Router() chi.Router {
 				r.Put("/stages/{stage}", s.updateStage)
 				r.Delete("/stages/{stage}", s.deleteStage)
 
+				// Stage env override endpoints.
+				r.Get("/stages/{stage}/env", s.listStageEnv)
+				r.Post("/stages/{stage}/env", s.createStageEnv)
+				r.Put("/stages/{stage}/env/{envId}", s.updateStageEnv)
+				r.Delete("/stages/{stage}/env/{envId}", s.deleteStageEnv)
+
 				// Instance endpoints.
 				r.Get("/stages/{stage}/instances", s.listInstances)
 				r.Post("/stages/{stage}/instances", s.deployInstance)
@@ -127,6 +133,12 @@ func (s *Server) Router() chi.Router {
 				r.Post("/stages/{stage}/instances/{iid}/stop", s.stopInstance)
 				r.Post("/stages/{stage}/instances/{iid}/start", s.startInstance)
 				r.Post("/stages/{stage}/instances/{iid}/restart", s.restartInstance)
+
+				// Volume endpoints.
+				r.Get("/volumes", s.listVolumes)
+				r.Post("/volumes", s.createVolume)
+				r.Put("/volumes/{volId}", s.updateVolume)
+				r.Delete("/volumes/{volId}", s.deleteVolume)
 			})
 
 			// Deploy endpoints.

internal/api/stage_env.go

@@ -0,0 +1,176 @@
+package api
+
+import (
+	"errors"
+	"net/http"
+
+	"github.com/go-chi/chi/v5"
+
+	"github.com/alexei/docker-watcher/internal/crypto"
+	"github.com/alexei/docker-watcher/internal/store"
+)
+
+// stageEnvRequest is the expected JSON body for creating/updating a stage env override.
+type stageEnvRequest struct {
+	Key       string `json:"key"`
+	Value     string `json:"value"`
+	Encrypted *bool  `json:"encrypted"`
+}
+
+// listStageEnv handles GET /api/projects/{id}/stages/{stage}/env.
+func (s *Server) listStageEnv(w http.ResponseWriter, r *http.Request) {
+	stageID := chi.URLParam(r, "stage")
+
+	// Verify stage exists.
+	if _, err := s.store.GetStageByID(stageID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "stage")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get stage: "+err.Error())
+		return
+	}
+
+	envs, err := s.store.GetStageEnvByStageID(stageID)
+	if err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to list stage env: "+err.Error())
+		return
+	}
+
+	// Mask encrypted values in the response.
+	masked := make([]store.StageEnv, len(envs))
+	for i, env := range envs {
+		masked[i] = env
+		if env.Encrypted {
+			masked[i].Value = "••••••••"
+		}
+	}
+
+	respondJSON(w, http.StatusOK, masked)
+}
+
+// createStageEnv handles POST /api/projects/{id}/stages/{stage}/env.
+func (s *Server) createStageEnv(w http.ResponseWriter, r *http.Request) {
+	stageID := chi.URLParam(r, "stage")
+
+	// Verify stage exists.
+	if _, err := s.store.GetStageByID(stageID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "stage")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get stage: "+err.Error())
+		return
+	}
+
+	var req stageEnvRequest
+	if !decodeJSON(w, r, &req) {
+		return
+	}
+
+	if req.Key == "" {
+		respondError(w, http.StatusBadRequest, "key is required")
+		return
+	}
+
+	encrypted := false
+	if req.Encrypted != nil {
+		encrypted = *req.Encrypted
+	}
+
+	value := req.Value
+	if encrypted && value != "" {
+		enc, err := crypto.Encrypt(s.encKey, value)
+		if err != nil {
+			respondError(w, http.StatusInternalServerError, "failed to encrypt value: "+err.Error())
+			return
+		}
+		value = enc
+	}
+
+	env, err := s.store.CreateStageEnv(store.StageEnv{
+		StageID:   stageID,
+		Key:       req.Key,
+		Value:     value,
+		Encrypted: encrypted,
+	})
+	if err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to create stage env: "+err.Error())
+		return
+	}
+
+	// Mask encrypted value in the response.
+	if env.Encrypted {
+		env.Value = "••••••••"
+	}
+
+	respondJSON(w, http.StatusCreated, env)
+}
+
+// updateStageEnv handles PUT /api/projects/{id}/stages/{stage}/env/{envId}.
+func (s *Server) updateStageEnv(w http.ResponseWriter, r *http.Request) {
+	envID := chi.URLParam(r, "envId")
+
+	existing, err := s.store.GetStageEnvByID(envID)
+	if err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "stage env")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get stage env: "+err.Error())
+		return
+	}
+
+	var req stageEnvRequest
+	if !decodeJSON(w, r, &req) {
+		return
+	}
+
+	updated := existing
+	if req.Key != "" {
+		updated.Key = req.Key
+	}
+	if req.Encrypted != nil {
+		updated.Encrypted = *req.Encrypted
+	}
+
+	// Only update value if provided (allows updating key/encrypted without changing the value).
+	if req.Value != "" {
+		value := req.Value
+		if updated.Encrypted {
+			enc, err := crypto.Encrypt(s.encKey, value)
+			if err != nil {
+				respondError(w, http.StatusInternalServerError, "failed to encrypt value: "+err.Error())
+				return
+			}
+			value = enc
+		}
+		updated.Value = value
+	}
+
+	if err := s.store.UpdateStageEnv(updated); err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to update stage env: "+err.Error())
+		return
+	}
+
+	// Mask encrypted value in the response.
+	if updated.Encrypted {
+		updated.Value = "••••••••"
+	}
+
+	respondJSON(w, http.StatusOK, updated)
+}
+
+// deleteStageEnv handles DELETE /api/projects/{id}/stages/{stage}/env/{envId}.
+func (s *Server) deleteStageEnv(w http.ResponseWriter, r *http.Request) {
+	envID := chi.URLParam(r, "envId")
+	if err := s.store.DeleteStageEnv(envID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "stage env")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to delete stage env: "+err.Error())
+		return
+	}
+	respondJSON(w, http.StatusOK, map[string]string{"deleted": envID})
+}

internal/api/volumes.go

@@ -0,0 +1,143 @@
+package api
+
+import (
+	"errors"
+	"net/http"
+
+	"github.com/go-chi/chi/v5"
+
+	"github.com/alexei/docker-watcher/internal/store"
+)
+
+// volumeRequest is the expected JSON body for creating/updating a volume.
+type volumeRequest struct {
+	Source string `json:"source"`
+	Target string `json:"target"`
+	Mode   string `json:"mode"`
+}
+
+// listVolumes handles GET /api/projects/{id}/volumes.
+func (s *Server) listVolumes(w http.ResponseWriter, r *http.Request) {
+	projectID := chi.URLParam(r, "id")
+
+	// Verify project exists.
+	if _, err := s.store.GetProjectByID(projectID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "project")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get project: "+err.Error())
+		return
+	}
+
+	vols, err := s.store.GetVolumesByProjectID(projectID)
+	if err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to list volumes: "+err.Error())
+		return
+	}
+
+	respondJSON(w, http.StatusOK, vols)
+}
+
+// createVolume handles POST /api/projects/{id}/volumes.
+func (s *Server) createVolume(w http.ResponseWriter, r *http.Request) {
+	projectID := chi.URLParam(r, "id")
+
+	// Verify project exists.
+	if _, err := s.store.GetProjectByID(projectID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "project")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get project: "+err.Error())
+		return
+	}
+
+	var req volumeRequest
+	if !decodeJSON(w, r, &req) {
+		return
+	}
+
+	if req.Source == "" {
+		respondError(w, http.StatusBadRequest, "source is required")
+		return
+	}
+	if req.Target == "" {
+		respondError(w, http.StatusBadRequest, "target is required")
+		return
+	}
+	if req.Mode == "" {
+		req.Mode = "shared"
+	}
+	if req.Mode != "shared" && req.Mode != "isolated" {
+		respondError(w, http.StatusBadRequest, "mode must be 'shared' or 'isolated'")
+		return
+	}
+
+	vol, err := s.store.CreateVolume(store.Volume{
+		ProjectID: projectID,
+		Source:    req.Source,
+		Target:   req.Target,
+		Mode:     req.Mode,
+	})
+	if err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to create volume: "+err.Error())
+		return
+	}
+	respondJSON(w, http.StatusCreated, vol)
+}
+
+// updateVolume handles PUT /api/projects/{id}/volumes/{volId}.
+func (s *Server) updateVolume(w http.ResponseWriter, r *http.Request) {
+	volID := chi.URLParam(r, "volId")
+
+	existing, err := s.store.GetVolumeByID(volID)
+	if err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "volume")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to get volume: "+err.Error())
+		return
+	}
+
+	var req volumeRequest
+	if !decodeJSON(w, r, &req) {
+		return
+	}
+
+	updated := existing
+	if req.Source != "" {
+		updated.Source = req.Source
+	}
+	if req.Target != "" {
+		updated.Target = req.Target
+	}
+	if req.Mode != "" {
+		if req.Mode != "shared" && req.Mode != "isolated" {
+			respondError(w, http.StatusBadRequest, "mode must be 'shared' or 'isolated'")
+			return
+		}
+		updated.Mode = req.Mode
+	}
+
+	if err := s.store.UpdateVolume(updated); err != nil {
+		respondError(w, http.StatusInternalServerError, "failed to update volume: "+err.Error())
+		return
+	}
+	respondJSON(w, http.StatusOK, updated)
+}
+
+// deleteVolume handles DELETE /api/projects/{id}/volumes/{volId}.
+func (s *Server) deleteVolume(w http.ResponseWriter, r *http.Request) {
+	volID := chi.URLParam(r, "volId")
+	if err := s.store.DeleteVolume(volID); err != nil {
+		if errors.Is(err, store.ErrNotFound) {
+			respondNotFound(w, "volume")
+			return
+		}
+		respondError(w, http.StatusInternalServerError, "failed to delete volume: "+err.Error())
+		return
+	}
+	respondJSON(w, http.StatusOK, map[string]string{"deleted": volID})
+}

internal/deployer/bluegreen.go

@@ -73,7 +73,8 @@ func (d *Deployer) blueGreenDeploy(
 	subdomain := d.buildSubdomain(project, stage, settings, imageTag)
 	containerName := docker.ContainerName(project.Name, stage.Name, imageTag)
 	portStr := fmt.Sprintf("%d/tcp", project.Port)
-	envVars := d.parseEnvVars(project.Env)
+	envVars := d.mergeEnvVars(project, stage.ID)
+	mounts := d.computeVolumeMounts(project.ID, stage.Name, imageTag)
 
 	containerCfg := docker.ContainerConfig{
 		Name:         containerName,
@@ -85,6 +86,7 @@ func (d *Deployer) blueGreenDeploy(
 		Project:      project.Name,
 		Stage:        stage.Name,
 		InstanceID:   instanceID,
+		Mounts:       mounts,
 	}
 
 	d.logDeploy(deployID, fmt.Sprintf("Blue-green: creating green container %s", containerName), "info")

internal/deployer/deployer.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
+	"path/filepath"
 	"sort"
 	"sync"
 	"sync/atomic"
@@ -16,6 +17,7 @@ import (
 	"github.com/alexei/docker-watcher/internal/notify"
 	"github.com/alexei/docker-watcher/internal/npm"
 	"github.com/alexei/docker-watcher/internal/store"
+	"github.com/docker/docker/api/types/mount"
 	"github.com/google/uuid"
 )
 
@@ -229,7 +231,8 @@ func (d *Deployer) executeDeploy(
 
 	containerName := docker.ContainerName(project.Name, stage.Name, imageTag)
 	portStr := fmt.Sprintf("%d/tcp", project.Port)
-	envVars := d.parseEnvVars(project.Env)
+	envVars := d.mergeEnvVars(project, stage.ID)
+	mounts := d.computeVolumeMounts(project.ID, stage.Name, imageTag)
 
 	containerCfg := docker.ContainerConfig{
 		Name:         containerName,
@@ -241,6 +244,7 @@ func (d *Deployer) executeDeploy(
 		Project:      project.Name,
 		Stage:        stage.Name,
 		InstanceID:   instanceID,
+		Mounts:       mounts,
 	}
 
 	d.logDeploy(deployID, fmt.Sprintf("Creating container %s", containerName), "info")
@@ -524,6 +528,81 @@ func (d *Deployer) parseEnvVars(envJSON string) []string {
 	return vars
 }
 
+// mergeEnvVars builds the final environment variable list for a container:
+// 1. Parse project-level env JSON
+// 2. Overlay with stage-level env overrides (stage wins on key conflict)
+// 3. Decrypt any encrypted (secret) values
+// Returns a []string of KEY=VALUE pairs.
+func (d *Deployer) mergeEnvVars(project store.Project, stageID string) []string {
+	// Step 1: Parse project-level env.
+	envMap := make(map[string]string)
+	if project.Env != "" && project.Env != "{}" {
+		var projectEnv map[string]string
+		if err := json.Unmarshal([]byte(project.Env), &projectEnv); err != nil {
+			slog.Warn("parse project env vars", "error", err)
+		} else {
+			for k, v := range projectEnv {
+				envMap[k] = v
+			}
+		}
+	}
+
+	// Step 2: Overlay with stage-level overrides.
+	stageEnvs, err := d.store.GetStageEnvByStageID(stageID)
+	if err != nil {
+		slog.Warn("get stage env overrides", "stage_id", stageID, "error", err)
+	} else {
+		for _, se := range stageEnvs {
+			value := se.Value
+			if se.Encrypted {
+				// Step 3: Decrypt secret values.
+				decrypted, err := crypto.Decrypt(d.encKey, se.Value)
+				if err != nil {
+					slog.Warn("decrypt stage env value", "key", se.Key, "error", err)
+					continue
+				}
+				value = decrypted
+			}
+			envMap[se.Key] = value
+		}
+	}
+
+	vars := make([]string, 0, len(envMap))
+	for k, v := range envMap {
+		vars = append(vars, k+"="+v)
+	}
+	return vars
+}
+
+// computeVolumeMounts builds Docker mount specifications from the project's volume config.
+// For shared mode, source is used as-is.
+// For isolated mode, source gets /{stage}-{tag}/ appended.
+func (d *Deployer) computeVolumeMounts(projectID, stageName, imageTag string) []mount.Mount {
+	vols, err := d.store.GetVolumesByProjectID(projectID)
+	if err != nil {
+		slog.Warn("get project volumes", "project_id", projectID, "error", err)
+		return nil
+	}
+
+	if len(vols) == 0 {
+		return nil
+	}
+
+	mounts := make([]mount.Mount, 0, len(vols))
+	for _, vol := range vols {
+		source := vol.Source
+		if vol.Mode == "isolated" {
+			source = filepath.Join(source, fmt.Sprintf("%s-%s", stageName, imageTag))
+		}
+		mounts = append(mounts, mount.Mount{
+			Type:   mount.TypeBind,
+			Source: source,
+			Target: vol.Target,
+		})
+	}
+	return mounts
+}
+
 // logDeploy appends a log entry for a deploy and publishes it on the event bus.
 // Errors are logged to stderr but not propagated.
 func (d *Deployer) logDeploy(deployID, message, level string) {

internal/docker/container.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/docker/docker/api/types/container"
 	"github.com/docker/docker/api/types/filters"
+	"github.com/docker/docker/api/types/mount"
 	"github.com/docker/docker/api/types/network"
 	"github.com/docker/go-connections/nat"
 )
@@ -46,6 +47,9 @@ type ContainerConfig struct {
 
 	// InstanceID is the docker-watcher instance ID (used for labelling).
 	InstanceID string
+
+	// Mounts is a list of bind mounts to attach to the container.
+	Mounts []mount.Mount
 }
 
 // sanitizeTag replaces characters that are invalid in Docker container names
@@ -94,6 +98,7 @@ func (c *Client) CreateContainer(ctx context.Context, cfg ContainerConfig) (stri
 	hostCfg := &container.HostConfig{
 		PortBindings:  portBindings,
 		RestartPolicy: container.RestartPolicy{Name: container.RestartPolicyDisabled},
+		Mounts:        cfg.Mounts,
 	}
 
 	// Attach to network at creation time if specified.

internal/store/models.go

@@ -91,3 +91,25 @@ type DeployLog struct {
 	Level     string `json:"level"` // info, warn, error
 	CreatedAt string `json:"created_at"`
 }
+
+// StageEnv represents a per-stage environment variable override.
+type StageEnv struct {
+	ID        string `json:"id"`
+	StageID   string `json:"stage_id"`
+	Key       string `json:"key"`
+	Value     string `json:"value"`
+	Encrypted bool   `json:"encrypted"`
+	CreatedAt string `json:"created_at"`
+	UpdatedAt string `json:"updated_at"`
+}
+
+// Volume represents a volume mount configuration for a project.
+type Volume struct {
+	ID        string `json:"id"`
+	ProjectID string `json:"project_id"`
+	Source    string `json:"source"`
+	Target   string `json:"target"`
+	Mode     string `json:"mode"` // shared or isolated
+	CreatedAt string `json:"created_at"`
+	UpdatedAt string `json:"updated_at"`
+}

internal/store/stage_env.go

@@ -0,0 +1,112 @@
+package store
+
+import (
+	"database/sql"
+	"errors"
+	"fmt"
+
+	"github.com/google/uuid"
+)
+
+// CreateStageEnv inserts a new stage environment variable override.
+func (s *Store) CreateStageEnv(env StageEnv) (StageEnv, error) {
+	env.ID = uuid.New().String()
+	env.CreatedAt = now()
+	env.UpdatedAt = env.CreatedAt
+
+	_, err := s.db.Exec(
+		`INSERT INTO stage_env (id, stage_id, key, value, encrypted, created_at, updated_at)
+		 VALUES (?, ?, ?, ?, ?, ?, ?)`,
+		env.ID, env.StageID, env.Key, env.Value, boolToInt(env.Encrypted),
+		env.CreatedAt, env.UpdatedAt,
+	)
+	if err != nil {
+		return StageEnv{}, fmt.Errorf("insert stage env: %w", err)
+	}
+	return env, nil
+}
+
+// GetStageEnvByStageID returns all environment variable overrides for a stage.
+func (s *Store) GetStageEnvByStageID(stageID string) ([]StageEnv, error) {
+	rows, err := s.db.Query(
+		`SELECT id, stage_id, key, value, encrypted, created_at, updated_at
+		 FROM stage_env WHERE stage_id = ? ORDER BY key`, stageID,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("query stage env: %w", err)
+	}
+	defer rows.Close()
+
+	var envs []StageEnv
+	for rows.Next() {
+		env, err := scanStageEnv(rows)
+		if err != nil {
+			return nil, err
+		}
+		envs = append(envs, env)
+	}
+	return envs, rows.Err()
+}
+
+// GetStageEnvByID returns a single stage env override by ID.
+func (s *Store) GetStageEnvByID(id string) (StageEnv, error) {
+	var env StageEnv
+	var encrypted int
+	err := s.db.QueryRow(
+		`SELECT id, stage_id, key, value, encrypted, created_at, updated_at
+		 FROM stage_env WHERE id = ?`, id,
+	).Scan(&env.ID, &env.StageID, &env.Key, &env.Value, &encrypted,
+		&env.CreatedAt, &env.UpdatedAt)
+	if errors.Is(err, sql.ErrNoRows) {
+		return StageEnv{}, fmt.Errorf("stage env %s: %w", id, ErrNotFound)
+	}
+	if err != nil {
+		return StageEnv{}, fmt.Errorf("query stage env: %w", err)
+	}
+	env.Encrypted = encrypted != 0
+	return env, nil
+}
+
+// UpdateStageEnv updates an existing stage environment variable override.
+func (s *Store) UpdateStageEnv(env StageEnv) error {
+	env.UpdatedAt = now()
+	result, err := s.db.Exec(
+		`UPDATE stage_env SET key=?, value=?, encrypted=?, updated_at=?
+		 WHERE id=?`,
+		env.Key, env.Value, boolToInt(env.Encrypted), env.UpdatedAt, env.ID,
+	)
+	if err != nil {
+		return fmt.Errorf("update stage env: %w", err)
+	}
+	n, _ := result.RowsAffected()
+	if n == 0 {
+		return fmt.Errorf("stage env %s: %w", env.ID, ErrNotFound)
+	}
+	return nil
+}
+
+// DeleteStageEnv removes a stage env override by ID.
+func (s *Store) DeleteStageEnv(id string) error {
+	result, err := s.db.Exec(`DELETE FROM stage_env WHERE id = ?`, id)
+	if err != nil {
+		return fmt.Errorf("delete stage env: %w", err)
+	}
+	n, _ := result.RowsAffected()
+	if n == 0 {
+		return fmt.Errorf("stage env %s: %w", id, ErrNotFound)
+	}
+	return nil
+}
+
+// scanStageEnv scans a stage env row from a *sql.Rows cursor.
+func scanStageEnv(rows *sql.Rows) (StageEnv, error) {
+	var env StageEnv
+	var encrypted int
+	err := rows.Scan(&env.ID, &env.StageID, &env.Key, &env.Value, &encrypted,
+		&env.CreatedAt, &env.UpdatedAt)
+	if err != nil {
+		return StageEnv{}, fmt.Errorf("scan stage env: %w", err)
+	}
+	env.Encrypted = encrypted != 0
+	return env, nil
+}

internal/store/store.go

@@ -180,6 +180,27 @@ INSERT OR IGNORE INTO settings (id) VALUES (1);
 
 -- Seed the auth_settings row if it does not exist.
 INSERT OR IGNORE INTO auth_settings (id) VALUES (1);
+
+CREATE TABLE IF NOT EXISTS stage_env (
+	id         TEXT PRIMARY KEY,
+	stage_id   TEXT NOT NULL REFERENCES stages(id) ON DELETE CASCADE,
+	key        TEXT NOT NULL,
+	value      TEXT NOT NULL DEFAULT '',
+	encrypted  INTEGER NOT NULL DEFAULT 0,
+	created_at TEXT NOT NULL DEFAULT (datetime('now')),
+	updated_at TEXT NOT NULL DEFAULT (datetime('now')),
+	UNIQUE(stage_id, key)
+);
+
+CREATE TABLE IF NOT EXISTS volumes (
+	id         TEXT PRIMARY KEY,
+	project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+	source     TEXT NOT NULL,
+	target     TEXT NOT NULL,
+	mode       TEXT NOT NULL DEFAULT 'shared',
+	created_at TEXT NOT NULL DEFAULT (datetime('now')),
+	updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
 `
 
 // now returns the current time formatted for SQLite storage.

internal/store/volumes.go

@@ -0,0 +1,112 @@
+package store
+
+import (
+	"database/sql"
+	"errors"
+	"fmt"
+
+	"github.com/google/uuid"
+)
+
+// CreateVolume inserts a new volume configuration for a project.
+func (s *Store) CreateVolume(vol Volume) (Volume, error) {
+	vol.ID = uuid.New().String()
+	vol.CreatedAt = now()
+	vol.UpdatedAt = vol.CreatedAt
+
+	if vol.Mode == "" {
+		vol.Mode = "shared"
+	}
+
+	_, err := s.db.Exec(
+		`INSERT INTO volumes (id, project_id, source, target, mode, created_at, updated_at)
+		 VALUES (?, ?, ?, ?, ?, ?, ?)`,
+		vol.ID, vol.ProjectID, vol.Source, vol.Target, vol.Mode,
+		vol.CreatedAt, vol.UpdatedAt,
+	)
+	if err != nil {
+		return Volume{}, fmt.Errorf("insert volume: %w", err)
+	}
+	return vol, nil
+}
+
+// GetVolumesByProjectID returns all volume configurations for a project.
+func (s *Store) GetVolumesByProjectID(projectID string) ([]Volume, error) {
+	rows, err := s.db.Query(
+		`SELECT id, project_id, source, target, mode, created_at, updated_at
+		 FROM volumes WHERE project_id = ? ORDER BY target`, projectID,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("query volumes: %w", err)
+	}
+	defer rows.Close()
+
+	var vols []Volume
+	for rows.Next() {
+		vol, err := scanVolume(rows)
+		if err != nil {
+			return nil, err
+		}
+		vols = append(vols, vol)
+	}
+	return vols, rows.Err()
+}
+
+// GetVolumeByID returns a single volume by its ID.
+func (s *Store) GetVolumeByID(id string) (Volume, error) {
+	var vol Volume
+	err := s.db.QueryRow(
+		`SELECT id, project_id, source, target, mode, created_at, updated_at
+		 FROM volumes WHERE id = ?`, id,
+	).Scan(&vol.ID, &vol.ProjectID, &vol.Source, &vol.Target, &vol.Mode,
+		&vol.CreatedAt, &vol.UpdatedAt)
+	if errors.Is(err, sql.ErrNoRows) {
+		return Volume{}, fmt.Errorf("volume %s: %w", id, ErrNotFound)
+	}
+	if err != nil {
+		return Volume{}, fmt.Errorf("query volume: %w", err)
+	}
+	return vol, nil
+}
+
+// UpdateVolume updates an existing volume configuration.
+func (s *Store) UpdateVolume(vol Volume) error {
+	vol.UpdatedAt = now()
+	result, err := s.db.Exec(
+		`UPDATE volumes SET source=?, target=?, mode=?, updated_at=?
+		 WHERE id=?`,
+		vol.Source, vol.Target, vol.Mode, vol.UpdatedAt, vol.ID,
+	)
+	if err != nil {
+		return fmt.Errorf("update volume: %w", err)
+	}
+	n, _ := result.RowsAffected()
+	if n == 0 {
+		return fmt.Errorf("volume %s: %w", vol.ID, ErrNotFound)
+	}
+	return nil
+}
+
+// DeleteVolume removes a volume configuration by ID.
+func (s *Store) DeleteVolume(id string) error {
+	result, err := s.db.Exec(`DELETE FROM volumes WHERE id = ?`, id)
+	if err != nil {
+		return fmt.Errorf("delete volume: %w", err)
+	}
+	n, _ := result.RowsAffected()
+	if n == 0 {
+		return fmt.Errorf("volume %s: %w", id, ErrNotFound)
+	}
+	return nil
+}
+
+// scanVolume scans a volume row from a *sql.Rows cursor.
+func scanVolume(rows *sql.Rows) (Volume, error) {
+	var vol Volume
+	err := rows.Scan(&vol.ID, &vol.ProjectID, &vol.Source, &vol.Target, &vol.Mode,
+		&vol.CreatedAt, &vol.UpdatedAt)
+	if err != nil {
+		return Volume{}, fmt.Errorf("scan volume: %w", err)
+	}
+	return vol, nil
+}

plans/docker-watcher-core/PLAN.md

@@ -35,7 +35,7 @@ A self-hosted tool that automates Docker container deployment with Nginx Proxy M
 - [x] Phase 10: Quick Deploy & Settings Pages [domain: frontend] → [subplan](./phase-10-settings-deploy.md)
 - [x] Phase 11: Frontend Embed & Real-Time Updates [domain: fullstack] → [subplan](./phase-11-embed-sse.md)
 - [x] Phase 12: Hardening [domain: backend] → [subplan](./phase-12-hardening.md)
-- [ ] Phase 13: Volumes & Environment [domain: fullstack] → [subplan](./phase-14-volumes-env.md)
+- [x] Phase 13: Volumes & Environment [domain: fullstack] → [subplan](./phase-14-volumes-env.md)
 - [ ] Phase 14: Frontend Polish & Modern UI [domain: frontend] → [subplan](./phase-13-ui-polish.md)
 
 ### Parallel Execution Notes
@@ -58,8 +58,8 @@ A self-hosted tool that automates Docker container deployment with Nginx Proxy M
 | Phase 9: Dashboard | frontend | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ✅ |
 | Phase 10: Settings & Deploy | frontend | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ✅ |
 | Phase 11: Embed & SSE | fullstack | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ✅ |
-| Phase 12: Hardening | backend | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ⬜ |
-| Phase 13: Volumes & Env | fullstack | ⬜ Not Started | ⬜ | ⏭️ Skip (Big Bang) | ⬜ |
+| Phase 12: Hardening | backend | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ✅ |
+| Phase 13: Volumes & Env | fullstack | ✅ Complete | ⬜ Pending | ⏭️ Skip (Big Bang) | ⬜ |
 | Phase 14: UI Polish | frontend | ⬜ Not Started | ⬜ | ✅ Required (Final) | ⬜ |
 
 ## Amendment Log

web/src/lib/api.ts

@@ -7,7 +7,9 @@ import type {
 	Project,
 	ProjectDetail,
 	Registry,
-	Settings
+	Settings,
+	StageEnv,
+	Volume
 } from './types';
 
 // ── Helpers ─────────────────────────────────────────────────────────
@@ -237,4 +239,63 @@ export function exportConfigUrl(): string {
 	return '/api/config/export';
 }
 
+// ── Stage Env Overrides ──────────────────────────────────────────────
+
+export function listStageEnv(projectId: string, stageId: string): Promise<StageEnv[]> {
+	return get<StageEnv[]>(`/api/projects/${projectId}/stages/${stageId}/env`);
+}
+
+export function createStageEnv(
+	projectId: string,
+	stageId: string,
+	data: { key: string; value: string; encrypted?: boolean }
+): Promise<StageEnv> {
+	return post<StageEnv>(`/api/projects/${projectId}/stages/${stageId}/env`, data);
+}
+
+export function updateStageEnv(
+	projectId: string,
+	stageId: string,
+	envId: string,
+	data: { key?: string; value?: string; encrypted?: boolean }
+): Promise<StageEnv> {
+	return put<StageEnv>(`/api/projects/${projectId}/stages/${stageId}/env/${envId}`, data);
+}
+
+export function deleteStageEnv(
+	projectId: string,
+	stageId: string,
+	envId: string
+): Promise<{ deleted: string }> {
+	return del<{ deleted: string }>(`/api/projects/${projectId}/stages/${stageId}/env/${envId}`);
+}
+
+// ── Volumes ──────────────────────────────────────────────────────────
+
+export function listVolumes(projectId: string): Promise<Volume[]> {
+	return get<Volume[]>(`/api/projects/${projectId}/volumes`);
+}
+
+export function createVolume(
+	projectId: string,
+	data: { source: string; target: string; mode?: string }
+): Promise<Volume> {
+	return post<Volume>(`/api/projects/${projectId}/volumes`, data);
+}
+
+export function updateVolume(
+	projectId: string,
+	volId: string,
+	data: { source?: string; target?: string; mode?: string }
+): Promise<Volume> {
+	return put<Volume>(`/api/projects/${projectId}/volumes/${volId}`, data);
+}
+
+export function deleteVolume(
+	projectId: string,
+	volId: string
+): Promise<{ deleted: string }> {
+	return del<{ deleted: string }>(`/api/projects/${projectId}/volumes/${volId}`);
+}
+
 export { ApiError };

web/src/lib/types.ts

@@ -116,3 +116,25 @@ export interface InspectResult {
 	port: number;
 	healthcheck: string;
 }
+
+/** Stage environment variable override. */
+export interface StageEnv {
+	id: string;
+	stage_id: string;
+	key: string;
+	value: string;
+	encrypted: boolean;
+	created_at: string;
+	updated_at: string;
+}
+
+/** Volume mount configuration for a project. */
+export interface Volume {
+	id: string;
+	project_id: string;
+	source: string;
+	target: string;
+	mode: 'shared' | 'isolated';
+	created_at: string;
+	updated_at: string;
+}

web/src/routes/projects/[id]/+page.svelte

@@ -155,6 +155,22 @@
 			</button>
 		</div>
 
+		<!-- Project settings links -->
+		<div class="mt-4 flex gap-3">
+			<a
+				href="/projects/{projectId}/env"
+				class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+			>
+				Environment Variables
+			</a>
+			<a
+				href="/projects/{projectId}/volumes"
+				class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+			>
+				Volume Mounts
+			</a>
+		</div>
+
 		<!-- Project info -->
 		<div class="mt-6 grid grid-cols-2 gap-4 rounded-lg border border-gray-200 bg-white p-5 sm:grid-cols-4">
 			<div>

web/src/routes/projects/[id]/env/+page.svelte

@@ -0,0 +1,380 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { Stage, StageEnv } from '$lib/types';
+	import * as api from '$lib/api';
+	import { toasts } from '$lib/stores/toast';
+
+	let stages = $state<Stage[]>([]);
+	let selectedStageId = $state('');
+	let envVars = $state<StageEnv[]>([]);
+	let projectEnv = $state<Record<string, string>>({});
+	let loading = $state(true);
+	let envLoading = $state(false);
+	let error = $state('');
+
+	// New env var form.
+	let newKey = $state('');
+	let newValue = $state('');
+	let newEncrypted = $state(false);
+	let saving = $state(false);
+
+	// Edit state.
+	let editingId = $state('');
+	let editKey = $state('');
+	let editValue = $state('');
+	let editEncrypted = $state(false);
+
+	const projectId = $derived($page.params.id);
+
+	async function loadProject() {
+		loading = true;
+		error = '';
+		try {
+			const detail = await api.getProject(projectId);
+			stages = detail.stages;
+
+			// Parse project-level env.
+			try {
+				projectEnv = JSON.parse(detail.project.env || '{}');
+			} catch {
+				projectEnv = {};
+			}
+
+			if (stages.length > 0 && !selectedStageId) {
+				selectedStageId = stages[0].id;
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load project';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function loadStageEnv(stageId: string) {
+		if (!stageId) return;
+		envLoading = true;
+		try {
+			envVars = await api.listStageEnv(projectId, stageId);
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to load env vars');
+			envVars = [];
+		} finally {
+			envLoading = false;
+		}
+	}
+
+	async function handleAdd() {
+		if (!newKey.trim() || !selectedStageId) return;
+		saving = true;
+		try {
+			await api.createStageEnv(projectId, selectedStageId, {
+				key: newKey.trim(),
+				value: newValue,
+				encrypted: newEncrypted
+			});
+			newKey = '';
+			newValue = '';
+			newEncrypted = false;
+			toasts.success('Environment variable added');
+			await loadStageEnv(selectedStageId);
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to add env var');
+		} finally {
+			saving = false;
+		}
+	}
+
+	function startEdit(env: StageEnv) {
+		editingId = env.id;
+		editKey = env.key;
+		editValue = env.encrypted ? '' : env.value;
+		editEncrypted = env.encrypted;
+	}
+
+	function cancelEdit() {
+		editingId = '';
+	}
+
+	async function handleUpdate() {
+		if (!editKey.trim()) return;
+		saving = true;
+		try {
+			const data: { key?: string; value?: string; encrypted?: boolean } = {
+				key: editKey.trim(),
+				encrypted: editEncrypted
+			};
+			if (editValue) {
+				data.value = editValue;
+			}
+			await api.updateStageEnv(projectId, selectedStageId, editingId, data);
+			editingId = '';
+			toasts.success('Environment variable updated');
+			await loadStageEnv(selectedStageId);
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to update env var');
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleDelete(envId: string) {
+		try {
+			await api.deleteStageEnv(projectId, selectedStageId, envId);
+			toasts.success('Environment variable deleted');
+			await loadStageEnv(selectedStageId);
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to delete env var');
+		}
+	}
+
+	// Determine if a key is inherited from project level.
+	function isInherited(key: string): boolean {
+		return key in projectEnv;
+	}
+
+	// Determine if a key is overridden at stage level.
+	function isOverridden(key: string): boolean {
+		return envVars.some((e) => e.key === key);
+	}
+
+	$effect(() => {
+		void projectId;
+		loadProject();
+	});
+
+	$effect(() => {
+		if (selectedStageId) {
+			loadStageEnv(selectedStageId);
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Environment Variables - Docker Watcher</title>
+</svelte:head>
+
+<div>
+	<!-- Header -->
+	<div class="flex items-center gap-2">
+		<a href="/projects/{projectId}" class="text-sm text-gray-500 hover:text-gray-700">Project</a>
+		<span class="text-sm text-gray-400">/</span>
+		<h1 class="text-2xl font-bold text-gray-900">Environment Variables</h1>
+	</div>
+	<p class="mt-1 text-sm text-gray-500">
+		Manage per-stage environment variable overrides. Stage-level values override project-level defaults.
+	</p>
+
+	{#if loading}
+		<div class="mt-8 flex items-center justify-center py-12">
+			<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
+		</div>
+	{:else if error}
+		<div class="mt-4 rounded-md bg-red-50 p-4">
+			<p class="text-sm text-red-700">{error}</p>
+		</div>
+	{:else}
+		<!-- Stage selector -->
+		<div class="mt-6">
+			<label for="stage-select" class="block text-sm font-medium text-gray-700">Stage</label>
+			<select
+				id="stage-select"
+				bind:value={selectedStageId}
+				class="mt-1 block w-64 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+			>
+				{#each stages as stage (stage.id)}
+					<option value={stage.id}>{stage.name}</option>
+				{/each}
+			</select>
+		</div>
+
+		{#if stages.length === 0}
+			<div class="mt-6 rounded-lg border-2 border-dashed border-gray-300 p-8 text-center">
+				<p class="text-sm text-gray-500">No stages configured. Add stages to the project first.</p>
+			</div>
+		{:else}
+			<!-- Project-level env (read-only reference) -->
+			{#if Object.keys(projectEnv).length > 0}
+				<div class="mt-6">
+					<h2 class="text-sm font-semibold text-gray-700">Project-Level Defaults</h2>
+					<div class="mt-2 rounded-lg border border-gray-200 bg-gray-50">
+						<table class="min-w-full divide-y divide-gray-200">
+							<thead>
+								<tr>
+									<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
+									<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
+									<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+								</tr>
+							</thead>
+							<tbody class="divide-y divide-gray-200">
+								{#each Object.entries(projectEnv) as [key, value] (key)}
+									<tr class={isOverridden(key) ? 'opacity-50' : ''}>
+										<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{key}</td>
+										<td class="px-4 py-2 font-mono text-sm text-gray-600">{value}</td>
+										<td class="px-4 py-2 text-sm">
+											{#if isOverridden(key)}
+												<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
+													overridden
+												</span>
+											{:else}
+												<span class="rounded bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
+													inherited
+												</span>
+											{/if}
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Stage-level overrides -->
+			<div class="mt-6">
+				<h2 class="text-sm font-semibold text-gray-700">Stage Overrides</h2>
+
+				{#if envLoading}
+					<div class="mt-4 flex items-center justify-center py-8">
+						<div class="h-6 w-6 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
+					</div>
+				{:else}
+					<div class="mt-2 rounded-lg border border-gray-200 bg-white shadow-sm">
+						<table class="min-w-full divide-y divide-gray-200">
+							<thead class="bg-gray-50">
+								<tr>
+									<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
+									<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
+									<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Secret</th>
+									<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source</th>
+									<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+								</tr>
+							</thead>
+							<tbody class="divide-y divide-gray-200">
+								{#each envVars as env (env.id)}
+									{#if editingId === env.id}
+										<tr class="bg-indigo-50">
+											<td class="px-4 py-2">
+												<input
+													type="text"
+													bind:value={editKey}
+													class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+												/>
+											</td>
+											<td class="px-4 py-2">
+												<input
+													type={editEncrypted ? 'password' : 'text'}
+													bind:value={editValue}
+													placeholder={env.encrypted ? 'Leave empty to keep current' : ''}
+													class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+												/>
+											</td>
+											<td class="px-4 py-2">
+												<input type="checkbox" bind:checked={editEncrypted} class="rounded" />
+											</td>
+											<td class="px-4 py-2"></td>
+											<td class="px-4 py-2 text-right">
+												<button
+													type="button"
+													class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
+													disabled={saving}
+													onclick={handleUpdate}
+												>
+													Save
+												</button>
+												<button
+													type="button"
+													class="text-sm text-gray-500 hover:text-gray-700"
+													onclick={cancelEdit}
+												>
+													Cancel
+												</button>
+											</td>
+										</tr>
+									{:else}
+										<tr>
+											<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{env.key}</td>
+											<td class="px-4 py-2 font-mono text-sm text-gray-600">
+												{env.encrypted ? '••••••••' : env.value}
+											</td>
+											<td class="px-4 py-2">
+												{#if env.encrypted}
+													<span class="rounded bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
+														secret
+													</span>
+												{/if}
+											</td>
+											<td class="px-4 py-2 text-sm">
+												{#if isInherited(env.key)}
+													<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
+														overrides project
+													</span>
+												{:else}
+													<span class="rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
+														stage only
+													</span>
+												{/if}
+											</td>
+											<td class="whitespace-nowrap px-4 py-2 text-right">
+												<button
+													type="button"
+													class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
+													onclick={() => startEdit(env)}
+												>
+													{env.encrypted ? 'Change' : 'Edit'}
+												</button>
+												<button
+													type="button"
+													class="text-sm font-medium text-red-600 hover:text-red-800"
+													onclick={() => handleDelete(env.id)}
+												>
+													Delete
+												</button>
+											</td>
+										</tr>
+									{/if}
+								{/each}
+
+								<!-- Add new row -->
+								<tr class="bg-gray-50">
+									<td class="px-4 py-2">
+										<input
+											type="text"
+											bind:value={newKey}
+											placeholder="KEY_NAME"
+											class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+										/>
+									</td>
+									<td class="px-4 py-2">
+										<input
+											type={newEncrypted ? 'password' : 'text'}
+											bind:value={newValue}
+											placeholder="value"
+											class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+										/>
+									</td>
+									<td class="px-4 py-2">
+										<label class="flex items-center gap-1 text-xs text-gray-600">
+											<input type="checkbox" bind:checked={newEncrypted} class="rounded" />
+											Secret
+										</label>
+									</td>
+									<td class="px-4 py-2"></td>
+									<td class="px-4 py-2 text-right">
+										<button
+											type="button"
+											class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+											disabled={!newKey.trim() || saving}
+											onclick={handleAdd}
+										>
+											{saving ? 'Adding...' : 'Add'}
+										</button>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>

web/src/routes/projects/[id]/volumes/+page.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { Volume } from '$lib/types';
+	import * as api from '$lib/api';
+	import { toasts } from '$lib/stores/toast';
+
+	let volumes = $state<Volume[]>([]);
+	let loading = $state(true);
+	let error = $state('');
+
+	// New volume form.
+	let newSource = $state('');
+	let newTarget = $state('');
+	let newMode = $state<'shared' | 'isolated'>('shared');
+	let saving = $state(false);
+
+	// Edit state.
+	let editingId = $state('');
+	let editSource = $state('');
+	let editTarget = $state('');
+	let editMode = $state<'shared' | 'isolated'>('shared');
+
+	const projectId = $derived($page.params.id);
+
+	async function loadVolumes() {
+		loading = true;
+		error = '';
+		try {
+			volumes = await api.listVolumes(projectId);
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load volumes';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleAdd() {
+		if (!newSource.trim() || !newTarget.trim()) return;
+		saving = true;
+		try {
+			await api.createVolume(projectId, {
+				source: newSource.trim(),
+				target: newTarget.trim(),
+				mode: newMode
+			});
+			newSource = '';
+			newTarget = '';
+			newMode = 'shared';
+			toasts.success('Volume added');
+			await loadVolumes();
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to add volume');
+		} finally {
+			saving = false;
+		}
+	}
+
+	function startEdit(vol: Volume) {
+		editingId = vol.id;
+		editSource = vol.source;
+		editTarget = vol.target;
+		editMode = vol.mode;
+	}
+
+	function cancelEdit() {
+		editingId = '';
+	}
+
+	async function handleUpdate() {
+		if (!editSource.trim() || !editTarget.trim()) return;
+		saving = true;
+		try {
+			await api.updateVolume(projectId, editingId, {
+				source: editSource.trim(),
+				target: editTarget.trim(),
+				mode: editMode
+			});
+			editingId = '';
+			toasts.success('Volume updated');
+			await loadVolumes();
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to update volume');
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleDelete(volId: string) {
+		try {
+			await api.deleteVolume(projectId, volId);
+			toasts.success('Volume deleted');
+			await loadVolumes();
+		} catch (e) {
+			toasts.error(e instanceof Error ? e.message : 'Failed to delete volume');
+		}
+	}
+
+	$effect(() => {
+		void projectId;
+		loadVolumes();
+	});
+</script>
+
+<svelte:head>
+	<title>Volumes - Docker Watcher</title>
+</svelte:head>
+
+<div>
+	<!-- Header -->
+	<div class="flex items-center gap-2">
+		<a href="/projects/{projectId}" class="text-sm text-gray-500 hover:text-gray-700">Project</a>
+		<span class="text-sm text-gray-400">/</span>
+		<h1 class="text-2xl font-bold text-gray-900">Volume Mounts</h1>
+	</div>
+	<p class="mt-1 text-sm text-gray-500">
+		Configure volume mounts for containers.
+		<strong>Shared</strong> mode uses the source path as-is for all instances.
+		<strong>Isolated</strong> mode appends /{'{'}stage{'}'}-{'{'}tag{'}'}/ to the source, giving each instance its own directory.
+	</p>
+
+	{#if loading}
+		<div class="mt-8 flex items-center justify-center py-12">
+			<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
+		</div>
+	{:else if error}
+		<div class="mt-4 rounded-md bg-red-50 p-4">
+			<p class="text-sm text-red-700">{error}</p>
+			<button type="button" class="mt-2 text-sm font-medium text-red-700 underline" onclick={loadVolumes}>
+				Retry
+			</button>
+		</div>
+	{:else}
+		<div class="mt-6 rounded-lg border border-gray-200 bg-white shadow-sm">
+			<table class="min-w-full divide-y divide-gray-200">
+				<thead class="bg-gray-50">
+					<tr>
+						<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source (Host)</th>
+						<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Target (Container)</th>
+						<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mode</th>
+						<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y divide-gray-200">
+					{#each volumes as vol (vol.id)}
+						{#if editingId === vol.id}
+							<tr class="bg-indigo-50">
+								<td class="px-4 py-2">
+									<input
+										type="text"
+										bind:value={editSource}
+										class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+									/>
+								</td>
+								<td class="px-4 py-2">
+									<input
+										type="text"
+										bind:value={editTarget}
+										class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+									/>
+								</td>
+								<td class="px-4 py-2">
+									<select
+										bind:value={editMode}
+										class="rounded-md border border-gray-300 bg-white px-2 py-1 text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+									>
+										<option value="shared">Shared</option>
+										<option value="isolated">Isolated</option>
+									</select>
+								</td>
+								<td class="px-4 py-2 text-right">
+									<button
+										type="button"
+										class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
+										disabled={saving}
+										onclick={handleUpdate}
+									>
+										Save
+									</button>
+									<button
+										type="button"
+										class="text-sm text-gray-500 hover:text-gray-700"
+										onclick={cancelEdit}
+									>
+										Cancel
+									</button>
+								</td>
+							</tr>
+						{:else}
+							<tr>
+								<td class="px-4 py-2 font-mono text-sm text-gray-900">{vol.source}</td>
+								<td class="px-4 py-2 font-mono text-sm text-gray-600">{vol.target}</td>
+								<td class="px-4 py-2">
+									{#if vol.mode === 'shared'}
+										<span class="rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
+											shared
+										</span>
+									{:else}
+										<span class="rounded bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
+											isolated
+										</span>
+									{/if}
+								</td>
+								<td class="whitespace-nowrap px-4 py-2 text-right">
+									<button
+										type="button"
+										class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
+										onclick={() => startEdit(vol)}
+									>
+										Edit
+									</button>
+									<button
+										type="button"
+										class="text-sm font-medium text-red-600 hover:text-red-800"
+										onclick={() => handleDelete(vol.id)}
+									>
+										Delete
+									</button>
+								</td>
+							</tr>
+						{/if}
+					{/each}
+
+					<!-- Add new row -->
+					<tr class="bg-gray-50">
+						<td class="px-4 py-2">
+							<input
+								type="text"
+								bind:value={newSource}
+								placeholder="/data/my-app/uploads"
+								class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+							/>
+						</td>
+						<td class="px-4 py-2">
+							<input
+								type="text"
+								bind:value={newTarget}
+								placeholder="/app/uploads"
+								class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+							/>
+						</td>
+						<td class="px-4 py-2">
+							<select
+								bind:value={newMode}
+								class="rounded-md border border-gray-300 bg-white px-2 py-1 text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
+							>
+								<option value="shared">Shared</option>
+								<option value="isolated">Isolated</option>
+							</select>
+						</td>
+						<td class="px-4 py-2 text-right">
+							<button
+								type="button"
+								class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
+								disabled={!newSource.trim() || !newTarget.trim() || saving}
+								onclick={handleAdd}
+							>
+								{saving ? 'Adding...' : 'Add'}
+							</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+
+		{#if volumes.length === 0}
+			<p class="mt-4 text-center text-sm text-gray-500">No volumes configured yet. Add one above.</p>
+		{/if}
+	{/if}
+</div>