Add backend switch feature to web GUI

- New endpoint: POST /api/v1/config/switch-backend
  Accepts backend_type (local/dynamodb), table_name, region, s3_bucket,
  s3_prefix, profile. Validates DynamoDB connection before committing switch.
  Returns updated backend info on success.
- Config page: new 'Switch Backend' collapsible form in Backend Configuration
  card with dropdown for backend type, conditional DynamoDB fields, Connect
  button, and session-only warning banner.
- Client-side validation: S3 bucket required for DynamoDB, loading overlay
  during switch, toast notifications for success/error, page reload on success.
- 6 new tests: switch-to-local, preserves-config, missing-bucket (400),
  connection-error (503/501), invalid-type (422), form-presence in HTML.
- 250 total tests passing, zero regressions.

Author: iamh2o

tests/test_web_server.py

@@ -753,6 +753,70 @@ def test_config_page_no_refresh_button_for_local(self, client):
         assert 'id="btn-refresh-backend"' not in response.text
         assert 'id="btn-detect-tables"' not in response.text
 
+    def test_config_page_shows_switch_backend_form(self, client):
+        """Test config page contains the switch backend form."""
+        response = client.get("/config")
+        assert 'id="switch-backend-form"' in response.text
+        assert 'id="switch-backend-type"' in response.text
+        assert 'id="btn-switch-backend"' in response.text
+
+
+class TestSwitchBackendAPI:
+    """Tests for POST /api/v1/config/switch-backend endpoint."""
+
+    def test_switch_to_local_succeeds(self, client):
+        """Test switching to local backend succeeds."""
+        response = client.post(
+            "/api/v1/config/switch-backend",
+            json={"backend_type": "local"},
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert data["success"] is True
+        assert "local" in data["message"]
+        assert data["backend"]["backend_type"] == "local"
+
+    def test_switch_to_local_preserves_config(self, client):
+        """Test switching to local keeps config intact."""
+        before = client.get("/api/v1/config").json()
+        client.post(
+            "/api/v1/config/switch-backend",
+            json={"backend_type": "local"},
+        )
+        after = client.get("/api/v1/config").json()
+        assert before.get("schema_version") == after.get("schema_version")
+
+    def test_switch_to_dynamodb_missing_bucket(self, client):
+        """Test switching to dynamodb without s3_bucket returns 400."""
+        response = client.post(
+            "/api/v1/config/switch-backend",
+            json={"backend_type": "dynamodb", "table_name": "test-table", "s3_bucket": ""},
+        )
+        assert response.status_code == 400
+        assert "s3_bucket" in response.json()["detail"].lower()
+
+    def test_switch_to_dynamodb_connection_error(self, client):
+        """Test switching to dynamodb with unreachable table returns 503 or 501."""
+        response = client.post(
+            "/api/v1/config/switch-backend",
+            json={
+                "backend_type": "dynamodb",
+                "table_name": "nonexistent-table",
+                "region": "us-east-1",
+                "s3_bucket": "test-bucket",
+            },
+        )
+        # Either 503 (connection error) or 501 (boto3 not installed)
+        assert response.status_code in (501, 503)
+
+    def test_switch_invalid_backend_type(self, client):
+        """Test switching to invalid backend type returns 422."""
+        response = client.post(
+            "/api/v1/config/switch-backend",
+            json={"backend_type": "invalid"},
+        )
+        assert response.status_code == 422
+
 
 # Keep the simple assertion test for backward compatibility
 def test_web_ui():

zebra_day/templates/modern/config.html

@@ -155,6 +155,58 @@ <h3 class="card-title"><i class="fas fa-database"></i> Backend Configuration</h3
 
     <!-- Detect tables results area (hidden by default) -->
     <div id="detect-tables-results" class="d-none" style="margin-top: 1rem;"></div>
+
+    <!-- Switch Backend -->
+    <div style="margin-top: 1.5rem; border-top: 1px solid var(--color-gray-600); padding-top: 1rem;">
+        <h4 style="margin-bottom: 0.75rem; cursor: pointer;" onclick="document.getElementById('switch-backend-form').classList.toggle('d-none')">
+            <i class="fas fa-exchange-alt"></i> Switch Backend
+            <small class="text-muted" style="font-weight: 400; font-size: 0.75rem; margin-left: 0.5rem;">click to expand</small>
+        </h4>
+
+        <div id="switch-backend-form" class="d-none">
+            <!-- Session-only warning -->
+            <div style="padding: 0.6rem 0.9rem; margin-bottom: 1rem; background: rgba(245,158,11,0.1); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); color: var(--color-warning); font-size: 0.85rem;">
+                <i class="fas fa-exclamation-triangle"></i> <strong>Session-only</strong>: Switching backend affects only this running server. To persist, set environment variables before restarting.
+            </div>
+
+            <div class="form-group mb-md">
+                <label for="switch-backend-type" style="font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; display: block;">Backend Type</label>
+                <select id="switch-backend-type" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;" onchange="toggleDynamoFields()">
+                    <option value="local" {% if not backend_info or backend_info.backend_type != 'dynamodb' %}selected{% endif %}>Local (filesystem)</option>
+                    <option value="dynamodb" {% if backend_info and backend_info.backend_type == 'dynamodb' %}selected{% endif %}>DynamoDB (AWS)</option>
+                </select>
+            </div>
+
+            <div id="dynamo-fields" class="{% if not backend_info or backend_info.backend_type != 'dynamodb' %}d-none{% endif %}">
+                <div class="grid grid-2" style="gap: 0.75rem; margin-bottom: 0.75rem;">
+                    <div class="form-group">
+                        <label for="switch-table" style="font-size: 0.8rem; font-weight: 500; display: block; margin-bottom: 0.2rem;">Table Name</label>
+                        <input id="switch-table" type="text" value="{{ backend_info.dynamo_table if backend_info and backend_info.backend_type == 'dynamodb' else 'zebra-day-config' }}" placeholder="zebra-day-config" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;">
+                    </div>
+                    <div class="form-group">
+                        <label for="switch-region" style="font-size: 0.8rem; font-weight: 500; display: block; margin-bottom: 0.2rem;">Region</label>
+                        <input id="switch-region" type="text" value="{{ backend_info.aws_region if backend_info and backend_info.backend_type == 'dynamodb' else 'us-east-1' }}" placeholder="us-east-1" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;">
+                    </div>
+                    <div class="form-group">
+                        <label for="switch-s3-bucket" style="font-size: 0.8rem; font-weight: 500; display: block; margin-bottom: 0.2rem;">S3 Bucket <span style="color: var(--color-error);">*</span></label>
+                        <input id="switch-s3-bucket" type="text" value="{{ backend_info.s3_bucket if backend_info and backend_info.backend_type == 'dynamodb' else '' }}" placeholder="my-zebra-backups" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;">
+                    </div>
+                    <div class="form-group">
+                        <label for="switch-s3-prefix" style="font-size: 0.8rem; font-weight: 500; display: block; margin-bottom: 0.2rem;">S3 Prefix</label>
+                        <input id="switch-s3-prefix" type="text" value="{{ backend_info.s3_prefix if backend_info and backend_info.backend_type == 'dynamodb' else 'zebra-day/' }}" placeholder="zebra-day/" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;">
+                    </div>
+                </div>
+                <div class="form-group" style="margin-bottom: 0.75rem;">
+                    <label for="switch-profile" style="font-size: 0.8rem; font-weight: 500; display: block; margin-bottom: 0.2rem;">AWS Profile <small class="text-muted">(optional)</small></label>
+                    <input id="switch-profile" type="text" value="" placeholder="Leave empty for default credential chain" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--color-gray-700); border: 1px solid var(--color-gray-600); border-radius: var(--radius-sm); color: var(--color-gray-200); font-size: 0.875rem;">
+                </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="switchBackend()" id="btn-switch-backend">
+                <i class="fas fa-plug"></i> Connect
+            </button>
+        </div>
+    </div>
 </div>
 
 <!-- Current Config Summary -->
@@ -284,5 +336,53 @@ <h4 class="mb-md">Configured Labs</h4>
         if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-search"></i> Detect Tables'; }
     }
 }
+
+function toggleDynamoFields() {
+    const sel = document.getElementById('switch-backend-type');
+    const fields = document.getElementById('dynamo-fields');
+    if (sel && fields) {
+        if (sel.value === 'dynamodb') { fields.classList.remove('d-none'); }
+        else { fields.classList.add('d-none'); }
+    }
+}
+
+async function switchBackend() {
+    const btn = document.getElementById('btn-switch-backend');
+    const backendType = document.getElementById('switch-backend-type').value;
+    const payload = { backend_type: backendType };
+    if (backendType === 'dynamodb') {
+        payload.table_name = document.getElementById('switch-table').value.trim() || 'zebra-day-config';
+        payload.region = document.getElementById('switch-region').value.trim() || 'us-east-1';
+        payload.s3_bucket = document.getElementById('switch-s3-bucket').value.trim();
+        payload.s3_prefix = document.getElementById('switch-s3-prefix').value.trim() || 'zebra-day/';
+        payload.profile = document.getElementById('switch-profile').value.trim();
+        if (!payload.s3_bucket) {
+            showToast('error', 'Validation Error', 'S3 Bucket is required for DynamoDB backend.');
+            return;
+        }
+    }
+    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Connecting...'; }
+    showLoading('Switching backend...');
+    try {
+        const resp = await fetch('/api/v1/config/switch-backend', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+        });
+        const data = await resp.json();
+        hideLoading();
+        if (resp.ok && data.success) {
+            showToast('success', 'Backend Switched', data.message || 'Backend switched successfully.');
+            setTimeout(() => window.location.reload(), 1000);
+        } else {
+            showToast('error', 'Switch Failed', data.detail || 'Unknown error');
+        }
+    } catch (e) {
+        hideLoading();
+        showToast('error', 'Switch Failed', e.message || 'Network error');
+    } finally {
+        if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plug"></i> Connect'; }
+    }
+}
 </script>
 {% endblock %}

zebra_day/web/routers/api.py

@@ -715,4 +715,92 @@ async def config_detect_tables(
         raise HTTPException(
             status_code=503,
             detail=f"Failed to scan DynamoDB tables in {scan_region}: {exc}",
-        )
+        )
+
+
+class SwitchBackendRequest(BaseModel):
+    """Request model for switching the active config backend."""
+
+    backend_type: Literal["local", "dynamodb"]
+    table_name: str = Field(default="zebra-day-config", description="DynamoDB table name")
+    region: str = Field(default="us-east-1", description="AWS region")
+    s3_bucket: str = Field(default="", description="S3 backup bucket (required for dynamodb)")
+    s3_prefix: str = Field(default="zebra-day/", description="S3 key prefix")
+    profile: str = Field(default="", description="AWS profile name (optional)")
+
+
+@router.post("/config/switch-backend")
+async def config_switch_backend(
+    request: Request,
+    body: SwitchBackendRequest,
+) -> dict[str, Any]:
+    """Switch the running server's config backend.
+
+    **Session-only**: This affects the running process. To persist, set the
+    corresponding environment variables before restarting the server.
+    """
+    zp = request.app.state.zp
+
+    if body.backend_type == "dynamodb":
+        # Validate required fields
+        if not body.s3_bucket:
+            raise HTTPException(
+                status_code=400,
+                detail="s3_bucket is required when switching to DynamoDB backend.",
+            )
+
+        try:
+            from zebra_day.backends.dynamo import DynamoBackend
+
+            profile = body.profile.strip() or None
+            new_backend = DynamoBackend(
+                table_name=body.table_name,
+                region=body.region,
+                s3_bucket=body.s3_bucket,
+                s3_prefix=body.s3_prefix,
+                profile=profile,
+            )
+
+            # Validate connection by describing the table
+            new_backend._ddb_client.describe_table(TableName=body.table_name)
+
+        except ImportError:
+            raise HTTPException(
+                status_code=501,
+                detail="boto3 is not installed. Install with: pip install zebra_day[aws]",
+            )
+        except Exception as exc:
+            raise HTTPException(
+                status_code=503,
+                detail=f"Cannot connect to DynamoDB table '{body.table_name}' "
+                f"in {body.region}: {exc}",
+            )
+
+    else:
+        # Switch to local backend
+        from zebra_day.backends.local import LocalBackend
+
+        new_backend = LocalBackend()
+
+    # Swap the backend on the live zpl instance
+    try:
+        zp._backend = new_backend
+        zp.printers = new_backend.load_config()
+        if hasattr(new_backend, "config_path_str"):
+            zp.printers_filename = new_backend.config_path_str
+        else:
+            zp.printers_filename = ""
+        zp._maybe_migrate_schema()
+    except Exception as exc:
+        _log.error("Backend switch failed during config reload: %s", exc)
+        raise HTTPException(
+            status_code=500,
+            detail=f"Backend switch failed during config reload: {exc}",
+        )
+
+    _log.info("Backend switched to %s", body.backend_type)
+    return {
+        "success": True,
+        "message": f"Backend switched to {body.backend_type}. This is session-only.",
+        "backend": _get_backend_info(zp),
+    }