feat(templates): remote template registry via CONTAINR_TEMPLATE_REGISTRY_URL

- GET /templates merges a remote Containr catalog as source:"registry"
  (5s timeout, 60s cache, offline-safe)
- GET /templates/:id falls through to the registry
- Deploy of a registry template materializes a deterministic private
  copy for the deployer — repeat deploys reuse it
- Templates page badges registry entries; openapi + env documented

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

.env.example

@@ -47,6 +47,12 @@ SECRETS_KEY=
 CONTAINR_AGENT_AUTH_TOKEN=replace_with_strong_agent_secret
 # Optional rotation list (comma-separated). When set, this takes precedence.
 # CONTAINR_AGENT_AUTH_TOKENS=current_secret,next_secret
+# Bundled agent binaries dir served at /api/agents/download/:platform.
+# CONTAINR_AGENT_BIN_DIR=/agents
+# Optional remote template catalog (another Containr instance). Its
+# templates merge into GET /templates as source:"registry" and
+# materialize locally on deploy. The bundled catalog works without it.
+# CONTAINR_TEMPLATE_REGISTRY_URL=https://templates.example.com
 CORS_ORIGINS=http://localhost:3000,http://localhost:8080
 # Optional build-time API URL overrides. Leave empty for the default
 # same-origin setup - the frontend nginx proxies /api to the backend, which

.github/workflows/ci.yml

@@ -248,6 +248,10 @@ jobs:
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta-backend.outputs.tags }}
           labels: ${{ steps.meta-backend.outputs.labels }}
+          # Stamp the release tag into the binary so the in-app upgrade
+          # check knows what it's running ("dev" disables it).
+          build-args: |
+            VERSION=${{ github.ref_type == 'tag' && github.ref_name || 'dev' }}
           cache-from: type=gha,scope=backend
           cache-to: type=gha,mode=max,scope=backend
 

ROADMAP2.md

@@ -91,10 +91,10 @@ Legend: ✅ done · 🟡 partial/different · ❌ missing · ➖ not applicable
 | White-label (logo/favicon/title/OG/theme colors) | ❌ | `app_settings.branding` — **Containr remains the default brand** |
 | Activity feed (icon/severity/category/metadata, 90-day TTL job) | ✅ `/activity` + project view | — |
 | Admin metrics dashboard (users/servers/queued/failed counts) | 🟡 `/admin` exists | Extend |
-| **Impersonate user** | ❌ | Admin support tool |
+| **Impersonate user** | ✅ admin token + `impersonated_by` claim (browser swap pending) | Done (CLI/API/MCP) |
 | In-app docs (content-collections markdown) | ✅ `/docs` | — |
-| Dynamic client-side filter framework (535-line `filter.utils`) | 🟡 audit page filters only | Reuse pattern for tables |
-| Ops "bubble" (queue monitor, terminal, sync) | ❌ | Operations page |
+| Dynamic client-side filter framework (535-line `filter.utils`) | ✅ `dynamic-filter.ts` + URL state; audit/builds/activity | Done |
+| Ops "bubble" (queue monitor, terminal, sync) | ✅ `/operations` + interactive terminal | Done |
 
 #### Agent surface
 | dflow capability | Containr status | Action |
@@ -103,8 +103,8 @@ Legend: ✅ done · 🟡 partial/different · ❌ missing · ➖ not applicable
 | CLI | ❌ | none in dflow — **Containr CLI is a genuine leap past it** |
 | MCP | ❌ | none — same leap |
 | Railway migrator script | ❌ | `containr migrate railway` |
-| GitHub App **manifest flow** (instance self-provisions the App) | 🟡 env-configured App | `POST /git/github-app/manifest` flow |
-| fork-sync webhook deploy trigger | ❌ | ~20 lines on receiver |
+| GitHub App **manifest flow** (instance self-provisions the App) | ✅ manifest + convert + App webhook | Done |
+| fork-sync webhook deploy trigger | ✅ sync/repository_dispatch/workflow_run | Done |
 | Azure DevOps provider | ❌ | Optional (dflow does token-clone only) |
 
 ---
@@ -332,11 +332,21 @@ and wired refs, one click or one CLI call.
   events (HMAC-verified) and enqueues matching services. Settings→env
   fallback wired into install-URL + installation-token paths.
   `containr admin github-app` CLI + MCP + OpenAPI.
-- [ ] **fork-sync trigger** — accept repo-sync events on webhook
-  receiver.
-- [ ] **Dynamic filter framework** — port dflow's `filter.utils`
-  pattern (typed filter configs → URL state → client filtering) for
-  audit logs, deployments, notifications tables.
+- [x] **fork-sync trigger** — webhook receiver accepts `sync`,
+  `repository_dispatch`, and `workflow_run` events (no `ref`) alongside
+  pushes: branch falls back to the webhook filter, then the service's
+  own `git_branch`; repo-only matching when no branch is known.
+  Also fixed a latent bug where the webhook's deployment insert omitted
+  the NOT NULL `version` column — push-triggered deploys silently
+  failed for every service.
+- [x] **Dynamic filter framework** — ported dflow's `filter.utils`
+  pattern as `lib/dynamic-filter.ts` + `use-dynamic-filter.ts`
+  (`FilterConfig` schema → `FilterEngine` → `FilterBar`; state lives in
+  `?f.<key>` search params so filtered views are shareable links).
+  `useFilterState` exposes URL state pre-fetch for server-backed
+  filters. Applied: audit logs (server-backed), builds (server + client
+  date-range), activity (severity server + client category/search).
+  Notifications table has no list surface yet — apply when one lands.
 - [ ] **Notification producers round-out** — backups, agent offline,
   upgrade available, security findings.
 - [x] **Sleep-on-idle / wake-on-traffic** (serverless-lite) —
@@ -380,9 +390,12 @@ and wired refs, one click or one CLI call.
   deploys a compose file straight into a project; CLI `import compose`,
   MCP tool, workspace import modal; project delete cascades to
   graph-provisioned managed databases (`database_services.project_id`).
-- [ ] **Template registry** — optional `CONTAINR_TEMPLATE_REGISTRY_URL`
-  fetch/publish; bundled catalog works offline (dflow's self-contained
-  principle — nothing phones home).
+- [x] **Template registry** — `CONTAINR_TEMPLATE_REGISTRY_URL` merges a
+  remote Containr catalog into `GET /templates` as `source:"registry"`
+  (60s cache, dead registry never blocks local). `GET /templates/:id`
+  falls through to the registry; deploy materializes a deterministic
+  `reg-<hash>` private copy for the deployer so re-deploys don't dup.
+  `api/templateregistry.go`, `.env.example`.
 
 ## 9b. Phase I — Companion surfaces
 

app/backend/Dockerfile

@@ -9,7 +9,9 @@ COPY go.mod go.sum ./
 RUN go mod download
 
 COPY . .
-RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o main cmd/server/main.go
+ARG VERSION=dev
+RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo \
+    -ldflags "-X containr/internal/api.Version=${VERSION}" -o main cmd/server/main.go
 
 # Build embedded Better Auth runtime dependencies
 FROM node:22-alpine AS auth-builder

app/backend/internal/api/databases.go

@@ -2,6 +2,7 @@ package api
 
 import (
 	"archive/tar"
+	"containr/internal/database"
 	"containr/internal/database/sqlcdb"
 	"containr/internal/deployment"
 	"containr/internal/docker"
@@ -1868,14 +1869,22 @@ func (h *DatabaseHandler) createBackupProcess(databaseID, backupID, backupPath s
 	ctx, cancel := context.WithTimeout(context.Background(), 20*time.Minute)
 	defer cancel()
 
+	notify := func(title, body string) {
+		if row, err := h.queries.GetDatabaseServiceByID(context.Background(), databaseID); err == nil && row.UserID != "" {
+			insertUserNotification(&database.DB{DB: h.db}, row.UserID, "backup", title, body, "database", databaseID)
+		}
+	}
+
 	if h.dockerClient == nil {
 		_ = h.setDatabaseBackupStatus(backupID, "failed", "0 B", false)
+		notify("Database backup failed", "Backup could not start: docker unavailable.")
 		return
 	}
 
 	sizeLabel, err := h.snapshotDatabaseVolume(ctx, databaseID, backupPath)
 	if err != nil {
 		_ = h.setDatabaseBackupStatus(backupID, "failed", "0 B", false)
+		notify("Database backup failed", fmt.Sprintf("Snapshot failed: %v", err))
 		return
 	}
 	if dbRow, err := h.queries.GetDatabaseServiceByID(ctx, databaseID); err == nil {
@@ -1886,6 +1895,7 @@ func (h *DatabaseHandler) createBackupProcess(databaseID, backupID, backupPath s
 		}
 	}
 	_ = h.setDatabaseBackupStatus(backupID, "completed", sizeLabel, true)
+	notify("Database backup completed", fmt.Sprintf("Backup archived (%s).", sizeLabel))
 }
 
 func (h *DatabaseHandler) restoreBackupProcess(databaseID, backupID string, backupPath string) {

app/backend/internal/api/git_receiver.go

@@ -7,6 +7,7 @@ import (
 	"crypto/subtle"
 	"encoding/hex"
 	"encoding/json"
+	"fmt"
 	"io"
 	"net/http"
 	"strings"
@@ -90,11 +91,24 @@ func handleGitWebhookPush(c *gin.Context) {
 		return
 	}
 
-	if !strings.HasPrefix(payload.Ref, "refs/heads/") {
+	// Non-push events that still mean "the repo changed": fork-sync bots
+	// (sync), repository_dispatch, workflow_run completions. They carry no
+	// `ref`, so fall back to the webhook's branch filter (or the service's
+	// own git_branch via the repo match below).
+	event := c.Request.Header.Get("X-GitHub-Event")
+	if event == "" {
+		event = c.Request.Header.Get("X-Gitea-Event")
+	}
+	syncEvent := event == "sync" || event == "repository_dispatch" || event == "workflow_run"
+
+	if !strings.HasPrefix(payload.Ref, "refs/heads/") && !syncEvent {
 		c.JSON(http.StatusAccepted, gin.H{"received": true, "ignored": "not a branch push"})
 		return
 	}
 	branch := strings.TrimPrefix(payload.Ref, "refs/heads/")
+	if branch == "" {
+		branch = branchFilter
+	}
 	if branchFilter != "" && branchFilter != branch {
 		c.JSON(http.StatusAccepted, gin.H{"received": true, "ignored": "branch not watched"})
 		return
@@ -133,12 +147,17 @@ func handleGitWebhookPush(c *gin.Context) {
 // the pushed repo+branch. Shared by the per-repo webhook receiver and the
 // GitHub App webhook endpoint.
 func dispatchPushToServices(c *gin.Context, db *database.DB, engine *deployment.DeploymentEngine, cloneURL, fullName, branch, commit, repoUserID string) (int, error) {
-	rows, err := db.Query(`
+	// Sync-style events may carry no branch — match services on repo only.
+	branchClause := "s.git_branch = $1"
+	if branch == "" {
+		branchClause = "TRUE"
+	}
+	rows, err := db.Query(fmt.Sprintf(`
 		SELECT s.id, s.project_id, s.name, s.type, s.status, s.image, s.command,
 		       s.environment, s.git_repo, s.git_branch, s.build_path, s.cpu, s.memory,
 		       s.created_at, s.updated_at
 		FROM services s
-		WHERE s.git_branch = $1 AND (s.git_repo = $2 OR s.git_repo = $3)`,
+		WHERE %s AND (s.git_repo = $2 OR s.git_repo = $3)`, branchClause),
 		branch, cloneURL, fullName)
 	if err != nil {
 		return 0, err
@@ -175,9 +194,9 @@ func dispatchPushToServices(c *gin.Context, db *database.DB, engine *deployment.
 		}
 		if _, err := db.Exec(
 			`INSERT INTO deployments
-			 (id, service_id, commit_hash, status, image_name, image_tag, created_at, updated_at)
-			 VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
-			d.ID, d.ServiceID, d.CommitHash, d.Status, d.ImageName, d.ImageTag, d.CreatedAt, d.UpdatedAt,
+			 (id, service_id, version, commit_hash, status, image_name, image_tag, created_at, updated_at)
+			 VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)`,
+			d.ID, d.ServiceID, fmt.Sprintf("v%d", now.Unix()), d.CommitHash, d.Status, d.ImageName, d.ImageTag, d.CreatedAt, d.UpdatedAt,
 		); err != nil {
 			continue
 		}
@@ -196,7 +215,11 @@ func dispatchPushToServices(c *gin.Context, db *database.DB, engine *deployment.
 		)
 		// Webhook pushes default to a clean build — stale layers are the
 		// classic silent-rollback failure (dflow convention).
-		webhookReq := CreateDeploymentRequest{CommitHash: commit, Branch: branch, Trigger: "webhook", NoCache: true}
+		branchForBuild := branch
+		if branchForBuild == "" {
+			branchForBuild = service.GitBranch
+		}
+		webhookReq := CreateDeploymentRequest{CommitHash: commit, Branch: branchForBuild, Trigger: "webhook", NoCache: true}
 		if pos := getDeployQueue(c).Enqueue(service.ID, deployqueue.Job{
 			DeploymentID: d.ID,
 			Run: func(jctx context.Context) {

app/backend/internal/api/notification_producers.go

@@ -0,0 +1,209 @@
+package api
+
+// Notification producers — the emitters behind `insertUserNotification`.
+// Deployment success/failure lives in deployments.go; this file covers
+// the remaining producers from the roadmap: admin fan-out helper, the
+// agent offline/online sweep, and the upgrade-available check.
+
+import (
+	"containr/internal/database"
+	"context"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net/http"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/google/uuid"
+)
+
+// Version is stamped at image build time via -ldflags "-X
+// containr/internal/api.Version=…". "dev" disables the upgrade check.
+var Version = "dev"
+
+// notifyAdmins inserts a notification for every admin user. Best-effort.
+func notifyAdmins(db *database.DB, kind, title, body, resourceType, resourceID string) {
+	if db == nil {
+		return
+	}
+	rows, err := db.Query(`SELECT id FROM users WHERE is_admin`)
+	if err != nil {
+		log.Printf("containr: notify admins lookup failed: %v", err)
+		return
+	}
+	defer rows.Close()
+	for rows.Next() {
+		var id uuid.UUID
+		if err := rows.Scan(&id); err == nil {
+			insertUserNotification(db, id.String(), kind, title, body, resourceType, resourceID)
+		}
+	}
+}
+
+// StartAgentHealthSweep marks agents offline when their heartbeat goes
+// stale (and back online when it resumes), notifying admins on each
+// transition. Heartbeats keep the row fresh via UpdateAgentHeartbeat.
+func StartAgentHealthSweep(ctx context.Context, db *database.DB) {
+	const staleAfter = 3 * time.Minute
+	go func() {
+		ticker := time.NewTicker(time.Minute)
+		defer ticker.Stop()
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-ticker.C:
+				reconcileAgentHealth(db, staleAfter)
+			}
+		}
+	}()
+}
+
+func reconcileAgentHealth(db *database.DB, staleAfter time.Duration) {
+	cutoff := time.Now().Add(-staleAfter)
+	type agentRow struct {
+		id     string
+		name   string
+		status string
+		stale  bool
+	}
+	var agents []agentRow
+	rows, err := db.Query(
+		`SELECT id, COALESCE(name, hostname, id::text), COALESCE(status, ''),
+		        COALESCE(last_heartbeat < $1, TRUE)
+		 FROM node_agents`, cutoff)
+	if err != nil {
+		log.Printf("containr: agent health sweep: %v", err)
+		return
+	}
+	for rows.Next() {
+		var a agentRow
+		if err := rows.Scan(&a.id, &a.name, &a.status, &a.stale); err == nil {
+			agents = append(agents, a)
+		}
+	}
+	rows.Close()
+
+	for _, a := range agents {
+		switch {
+		case a.stale && a.status != "offline":
+			if _, err := db.Exec(
+				`UPDATE node_agents SET status = 'offline', updated_at = NOW() WHERE id = $1`, a.id); err != nil {
+				continue
+			}
+			notifyAdmins(db, "agent", "Node agent offline",
+				fmt.Sprintf("Agent %s missed its heartbeat for over %s.", a.name, staleAfter), "agent", a.id)
+		case !a.stale && a.status == "offline":
+			if _, err := db.Exec(
+				`UPDATE node_agents SET status = 'online', updated_at = NOW() WHERE id = $1`, a.id); err != nil {
+				continue
+			}
+			notifyAdmins(db, "agent", "Node agent back online",
+				fmt.Sprintf("Agent %s resumed heartbeating.", a.name), "agent", a.id)
+		}
+	}
+}
+
+// StartUpgradeCheck polls GitHub for the latest release once a day and
+// notifies admins when it is newer than the running version. The last
+// notified tag is persisted in app_settings so restarts don't re-fire.
+func StartUpgradeCheck(ctx context.Context, db *database.DB, currentVersion string) {
+	if currentVersion == "" || currentVersion == "dev" {
+		return
+	}
+	go func() {
+		checkForUpgrade(db, currentVersion)
+		ticker := time.NewTicker(24 * time.Hour)
+		defer ticker.Stop()
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-ticker.C:
+				checkForUpgrade(db, currentVersion)
+			}
+		}
+	}()
+}
+
+func checkForUpgrade(db *database.DB, currentVersion string) {
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet,
+		"https://api.github.com/repos/Dvorinka/Containr/releases/latest", nil)
+	if err != nil {
+		return
+	}
+	req.Header.Set("Accept", "application/vnd.github+json")
+	req.Header.Set("User-Agent", "containr-upgrade-check")
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return
+	}
+	var release struct {
+		TagName string `json:"tag_name"`
+		HTMLURL string `json:"html_url"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&release); err != nil || release.TagName == "" {
+		return
+	}
+	if !semverNewer(release.TagName, currentVersion) {
+		return
+	}
+
+	var lastNotified string
+	_ = db.QueryRow(`SELECT value FROM app_settings WHERE key = 'upgrade_notified_tag'`).Scan(&lastNotified)
+	if lastNotified == release.TagName {
+		return
+	}
+	notifyAdmins(db, "upgrade", "Containr update available",
+		fmt.Sprintf("Release %s is available (running %s). %s", release.TagName, currentVersion, release.HTMLURL),
+		"release", release.TagName)
+	_, _ = db.Exec(
+		`INSERT INTO app_settings (key, value, updated_at) VALUES ('upgrade_notified_tag', $1, NOW())
+		 ON CONFLICT (key) DO UPDATE SET value = $1, updated_at = NOW()`, release.TagName)
+}
+
+// semverNewer reports whether candidate is a higher semver than current.
+// Non-semver input (e.g. "dev", commit hashes) compares false.
+func semverNewer(candidate, current string) bool {
+	parse := func(s string) ([]int, bool) {
+		s = strings.TrimPrefix(strings.TrimSpace(s), "v")
+		// Prerelease/build metadata sorts after the same base version
+		// upstream — for "is a newer release available" purposes the base
+		// comparison is what matters.
+		if j := strings.IndexAny(s, "-+"); j >= 0 {
+			s = s[:j]
+		}
+		parts := strings.Split(s, ".")
+		if len(parts) == 0 || len(parts) > 3 {
+			return nil, false
+		}
+		out := make([]int, 3)
+		for i, p := range parts {
+			n, err := strconv.Atoi(p)
+			if err != nil {
+				return nil, false
+			}
+			out[i] = n
+		}
+		return out, true
+	}
+	c, ok1 := parse(candidate)
+	cur, ok2 := parse(current)
+	if !ok1 || !ok2 {
+		return false
+	}
+	for i := 0; i < 3; i++ {
+		if c[i] != cur[i] {
+			return c[i] > cur[i]
+		}
+	}
+	return false
+}

app/backend/internal/api/notification_producers_test.go

@@ -0,0 +1,26 @@
+package api
+
+import "testing"
+
+func TestSemverNewer(t *testing.T) {
+	cases := []struct {
+		candidate, current string
+		want               bool
+	}{
+		{"v1.2.3", "v1.2.2", true},
+		{"1.3.0", "v1.2.9", true},
+		{"v2.0.0", "v1.9.9", true},
+		{"v1.2.3", "v1.2.3", false},
+		{"v1.2.0", "v1.2.3", false},
+		{"v1.10.0", "v1.9.9", true}, // numeric, not lexicographic
+		{"dev", "v1.0.0", false},
+		{"v1.0.0", "main", false},
+		{"v1.2.3-rc.1", "v1.2.2", true}, // prerelease suffix tolerated
+		{"", "v1.0.0", false},
+	}
+	for _, tc := range cases {
+		if got := semverNewer(tc.candidate, tc.current); got != tc.want {
+			t.Errorf("semverNewer(%q, %q) = %v, want %v", tc.candidate, tc.current, got, tc.want)
+		}
+	}
+}

app/backend/internal/api/routes.go

@@ -109,6 +109,13 @@ func SetupRoutes(router *gin.Engine, db *database.DB, redis *database.Redis, cfg
 	// Audit retention — prunes rows past AUDIT_RETENTION_DAYS (default 90).
 	StartAuditRetention(context.Background(), db)
 
+	// Agent health — marks stale heartbeats offline, notifies admins on
+	// offline/recovery transitions.
+	StartAgentHealthSweep(context.Background(), db)
+
+	// Daily upgrade check — notifies admins when a newer release exists.
+	StartUpgradeCheck(context.Background(), db, Version)
+
 	// Initialize database handler
 	databaseHandler := NewDatabaseHandler(db.DB, dockerClient)
 

app/backend/internal/api/security.go

@@ -29,9 +29,27 @@ type SecurityHandler struct {
 func NewSecurityHandler(db *database.DB, encryptionKey string) *SecurityHandler {
 	encryptionManager, _ := security.NewEncryptionManager(encryptionKey)
 
+	scanner := security.NewScanner(db)
+	// Notify the project owner when a background scan completes — criticals
+	// earn a distinct title so they stand out in the notification list.
+	scanner.OnScanComplete = func(scan *security.SecurityScan) {
+		var ownerID string
+		if err := db.QueryRow(`SELECT owner_id::text FROM projects WHERE id = $1`, scan.ProjectID).Scan(&ownerID); err != nil || ownerID == "" {
+			return
+		}
+		title := "Security scan completed"
+		if scan.Summary.Critical > 0 || scan.Summary.High > 0 {
+			title = "Security scan found issues"
+		}
+		insertUserNotification(db, ownerID, "security", title,
+			fmt.Sprintf("%s scan finished: %d critical, %d high, %d total findings (score %d/100).",
+				scan.ScanType, scan.Summary.Critical, scan.Summary.High, scan.Summary.Total, scan.Summary.Score),
+			"project", scan.ProjectID)
+	}
+
 	return &SecurityHandler{
 		db:                   db,
-		scanner:              security.NewScanner(db),
+		scanner:              scanner,
 		complianceManager:    security.NewComplianceManager(db),
 		encryptionManager:    encryptionManager,
 		dataRetentionManager: security.NewDataRetentionManager(encryptionManager),

app/backend/internal/api/templateregistry.go

@@ -0,0 +1,186 @@
+package api
+
+// Template registry — CONTAINR_TEMPLATE_REGISTRY_URL points at another
+// Containr instance (or any server answering the same template shape):
+//   GET {base}/api/v1/templates     → {"templates": [ServiceTemplate…]}
+//   GET {base}/api/v1/templates/:id → {"template": …, "config": …, "variables": …}
+// Registry entries merge into the catalog as source:"registry"; deploying
+// one materializes it as a user template for the deployer first. The
+// bundled catalog always works offline — a dead registry never blocks it.
+
+import (
+	"containr/internal/database/sqlcdb"
+	"context"
+	"crypto/sha256"
+	"database/sql"
+	"encoding/hex"
+	"encoding/json"
+	"net/http"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"github.com/google/uuid"
+	"github.com/sqlc-dev/pqtype"
+)
+
+const registryCacheTTL = 60 * time.Second
+
+var registryCache struct {
+	mu        sync.Mutex
+	fetchedAt time.Time
+	templates []ServiceTemplate
+}
+
+func registryBaseURL() string {
+	base := strings.TrimRight(strings.TrimSpace(os.Getenv("CONTAINR_TEMPLATE_REGISTRY_URL")), "/")
+	base = strings.TrimSuffix(base, "/api/v1")
+	return base
+}
+
+// fetchRegistryTemplates lists the remote catalog, cached for
+// registryCacheTTL. Failures degrade to an empty list — never fatal.
+func fetchRegistryTemplates(ctx context.Context) []ServiceTemplate {
+	if registryBaseURL() == "" {
+		return nil
+	}
+	registryCache.mu.Lock()
+	fresh := time.Since(registryCache.fetchedAt) < registryCacheTTL && registryCache.templates != nil
+	cached := registryCache.templates
+	registryCache.mu.Unlock()
+	if fresh {
+		return cached
+	}
+
+	var templates []ServiceTemplate
+	var payload struct {
+		Templates []ServiceTemplate `json:"templates"`
+	}
+	if err := registryGet(ctx, "/api/v1/templates", &payload); err == nil {
+		templates = payload.Templates
+	}
+	for i := range templates {
+		templates[i].Source = "registry"
+	}
+
+	registryCache.mu.Lock()
+	registryCache.fetchedAt = time.Now()
+	registryCache.templates = templates
+	registryCache.mu.Unlock()
+	return templates
+}
+
+// fetchRegistryTemplate fetches one remote template's full document
+// (template + config + variables). nil when the registry lacks it.
+func fetchRegistryTemplate(ctx context.Context, id string) *ServiceTemplate {
+	base := registryBaseURL()
+	if base == "" {
+		return nil
+	}
+	var payload struct {
+		Template  ServiceTemplate    `json:"template"`
+		Config    json.RawMessage    `json:"config"`
+		Variables []TemplateVariable `json:"variables"`
+	}
+	if err := registryGet(ctx, "/api/v1/templates/"+id, &payload); err != nil {
+		return nil
+	}
+	t := payload.Template
+	if t.ID == "" {
+		t.ID = id
+	}
+	t.Source = "registry"
+	// The detail endpoint returns config/variables decoded; store them back
+	// as raw JSON so they can persist unmodified into a local copy.
+	if len(payload.Config) > 0 {
+		t.Config = string(payload.Config)
+	}
+	if payload.Variables != nil {
+		if raw, err := json.Marshal(payload.Variables); err == nil {
+			t.Variables = string(raw)
+		}
+	}
+	return &t
+}
+
+func registryGet(ctx context.Context, path string, out interface{}) error {
+	ctx, cancel := context.WithTimeout(ctx, 5*time.Second)
+	defer cancel()
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, registryBaseURL()+path, nil)
+	if err != nil {
+		return err
+	}
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != http.StatusOK {
+		return errRegistry{resp.StatusCode}
+	}
+	return json.NewDecoder(resp.Body).Decode(out)
+}
+
+type errRegistry struct{ status int }
+
+func (e errRegistry) Error() string { return "template registry status " + http.StatusText(e.status) }
+
+// respondRegistryTemplate answers GET /templates/:id for a registry-only
+// template with the same envelope shape as local templates.
+func respondRegistryTemplate(c *gin.Context, t *ServiceTemplate) {
+	config := json.RawMessage(t.Config)
+	if len(config) == 0 {
+		config = json.RawMessage(`{}`)
+	}
+	variables := json.RawMessage(t.Variables)
+	if len(variables) == 0 {
+		variables = json.RawMessage(`[]`)
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"template":  t,
+		"config":    config,
+		"variables": variables,
+	})
+}
+
+// materializeRegistryTemplate copies a registry template into the local
+// catalog as a private template owned by the deployer, so the normal
+// deploy path (and future re-deploys) work without the registry. The
+// local id is deterministic per (registry, template, user) so repeat
+// deploys reuse the same copy instead of accumulating duplicates.
+func materializeRegistryTemplate(c *gin.Context, q *sqlcdb.Queries, userID, templateID string) (sqlcdb.ServiceTemplate, error) {
+	ownerUUID, err := uuid.Parse(userID)
+	if err != nil {
+		return sqlcdb.ServiceTemplate{}, err
+	}
+	sum := sha256.Sum256([]byte(registryBaseURL() + "|" + templateID + "|" + userID))
+	localID := "reg-" + hex.EncodeToString(sum[:8])
+	if existing, err := q.GetServiceTemplateByID(c.Request.Context(), localID); err == nil {
+		return existing, nil
+	}
+
+	rt := fetchRegistryTemplate(c.Request.Context(), templateID)
+	if rt == nil {
+		return sqlcdb.ServiceTemplate{}, sql.ErrNoRows
+	}
+	variables := pqtype.NullRawMessage{}
+	if rt.Variables != "" {
+		variables = pqtype.NullRawMessage{RawMessage: json.RawMessage(rt.Variables), Valid: true}
+	}
+	if err := q.CreateUserTemplate(c.Request.Context(), sqlcdb.CreateUserTemplateParams{
+		ID:          localID,
+		Name:        rt.Name,
+		Description: nullableText(rt.Description),
+		Category:    rt.Category,
+		Logo:        nullableText(rt.Logo),
+		Config:      json.RawMessage(rt.Config),
+		Variables:   variables,
+		OwnerID:     uuid.NullUUID{UUID: ownerUUID, Valid: true},
+		IsPublic:    false,
+	}); err != nil {
+		return sqlcdb.ServiceTemplate{}, err
+	}
+	return q.GetServiceTemplateByID(c.Request.Context(), localID)
+}

app/backend/internal/api/templates.go

@@ -21,18 +21,20 @@ import (
 )
 
 type ServiceTemplate struct {
-	ID          string    `json:"id" db:"id"`
-	Name        string    `json:"name" db:"name"`
-	Description string    `json:"description" db:"description"`
-	Category    string    `json:"category" db:"category"`
-	Logo        string    `json:"logo" db:"logo"`
-	Config      string    `json:"config" db:"config"`
-	Variables   string    `json:"variables" db:"variables"`
-	IsOfficial  bool      `json:"is_official" db:"is_official"`
-	OwnerID     string    `json:"owner_id,omitempty" db:"owner_id"`
-	IsPublic    bool      `json:"is_public" db:"is_public"`
-	CreatedAt   time.Time `json:"created_at" db:"created_at"`
-	UpdatedAt   time.Time `json:"updated_at" db:"updated_at"`
+	ID          string `json:"id" db:"id"`
+	Name        string `json:"name" db:"name"`
+	Description string `json:"description" db:"description"`
+	Category    string `json:"category" db:"category"`
+	Logo        string `json:"logo" db:"logo"`
+	Config      string `json:"config" db:"config"`
+	Variables   string `json:"variables" db:"variables"`
+	IsOfficial  bool   `json:"is_official" db:"is_official"`
+	OwnerID     string `json:"owner_id,omitempty" db:"owner_id"`
+	IsPublic    bool   `json:"is_public" db:"is_public"`
+	// Source marks catalog origin: "" (local/official) or "registry".
+	Source    string    `json:"source,omitempty" db:"-"`
+	CreatedAt time.Time `json:"created_at" db:"created_at"`
+	UpdatedAt time.Time `json:"updated_at" db:"updated_at"`
 }
 
 type TemplateConfig struct {
@@ -97,10 +99,24 @@ func handleGetTemplates(c *gin.Context) {
 	}
 
 	templates := make([]ServiceTemplate, 0, len(templateRows))
+	localIDs := make(map[string]bool, len(templateRows))
 	for _, row := range templateRows {
+		localIDs[row.ID] = true
 		templates = append(templates, mapSQLCTemplate(row))
 	}
 
+	// Merge the configured remote registry (CONTAINR_TEMPLATE_REGISTRY_URL).
+	// Registry ids never shadow local templates.
+	for _, t := range fetchRegistryTemplates(ctx) {
+		if localIDs[t.ID] {
+			continue
+		}
+		if category != "" && t.Category != category {
+			continue
+		}
+		templates = append(templates, t)
+	}
+
 	c.JSON(http.StatusOK, gin.H{"templates": templates})
 }
 
@@ -112,6 +128,11 @@ func handleGetTemplate(c *gin.Context) {
 	row, err := queries.GetServiceTemplateByID(c.Request.Context(), templateID)
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
+			// Registry fallback — remote templates materialize read-only.
+			if rt := fetchRegistryTemplate(c.Request.Context(), templateID); rt != nil {
+				respondRegistryTemplate(c, rt)
+				return
+			}
 			c.JSON(http.StatusNotFound, gin.H{"error": "Template not found"})
 			return
 		}
@@ -190,11 +211,18 @@ func handleCreateFromTemplate(c *gin.Context) {
 	templateRow, err := queries.GetServiceTemplateByID(ctx, templateID)
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
-			c.JSON(http.StatusNotFound, gin.H{"error": "Template not found"})
+			// Registry template — materialize a local copy for the
+			// deployer, then continue down the normal deploy path.
+			row, mErr := materializeRegistryTemplate(c, queries, userID, templateID)
+			if mErr != nil {
+				c.JSON(http.StatusNotFound, gin.H{"error": "Template not found"})
+				return
+			}
+			templateRow = row
+		} else {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to fetch template"})
 			return
 		}
-		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to fetch template"})
-		return
 	}
 
 	template := mapSQLCTemplate(templateRow)

app/backend/internal/security/scanner.go

@@ -54,6 +54,9 @@ type ScanSummary struct {
 // Scanner handles security scanning operations
 type Scanner struct {
 	db *database.DB
+	// OnScanComplete fires after a scan finishes (goroutine context) —
+	// wired by the api layer for notifications. Optional.
+	OnScanComplete func(scan *SecurityScan)
 }
 
 // NewScanner creates a new security scanner
@@ -115,8 +118,11 @@ func (s *Scanner) performScan(scan *SecurityScan) {
 
 	// Update scan with results
 	completedAt := time.Now()
+	scan.CompletedAt = &completedAt
+	scan.Summary = summary
+	scan.Status = "completed"
 	_, err := s.db.Exec(`
-		UPDATE security_scans 
+		UPDATE security_scans
 		SET status = $1, completed_at = $2, summary = $3
 		WHERE id = $4
 	`, "completed", completedAt, summaryToJSON(summary), scan.ID)
@@ -137,6 +143,10 @@ func (s *Scanner) performScan(scan *SecurityScan) {
 			log.Printf("Failed to store vulnerability %s: %v", vuln.ID, err)
 		}
 	}
+
+	if s.OnScanComplete != nil {
+		s.OnScanComplete(scan)
+	}
 }
 
 // scanDependencies scans for known vulnerable dependencies

app/frontend/src/features/activity/pages/ActivityPage.tsx

@@ -2,8 +2,10 @@ import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { listActivity, type ActivityEntry } from '@/lib/api-client';
 import { useDemoMode } from '@/lib/demo-mode';
+import { type FilterConfig } from '@/lib/dynamic-filter';
+import { useDynamicFilter, useFilterState } from '@/lib/use-dynamic-filter';
 import { formatRelative } from '@/lib/time';
-import { DemoRestricted } from '@/shared/components';
+import { DemoRestricted, FilterBar } from '@/shared/components';
 import {
   Activity, AlertCircle, CheckCircle2, Database, GitBranch, Info, Key,
   Loader2, Package, Projector, Rocket, Shield, User, Users, Wrench,
@@ -22,23 +24,37 @@ const SEVERITY_STYLE: Record<string, { icon: typeof Info; cls: string; dot: stri
   info:    { icon: Info,          cls: 'text-[var(--accent-primary)]', dot: 'bg-[var(--accent-primary)]' },
 };
 
-const SEVERITIES = ['', 'error', 'warning', 'success', 'info'] as const;
+const SCHEMA: FilterConfig<ActivityEntry>[] = [
+  { key: 'q', label: 'Search', type: 'search', searchFields: ['label', 'action', 'user_email'] },
+  {
+    key: 'severity', label: 'Severity', type: 'select',
+    options: [
+      { value: 'error', label: 'Error' },
+      { value: 'warning', label: 'Warning' },
+      { value: 'success', label: 'Success' },
+      { value: 'info', label: 'Info' },
+    ],
+  },
+  { key: 'category', label: 'Category', type: 'select' },
+];
 
 export function ActivityPage() {
   const isDemoMode = useDemoMode();
-  const [severity, setSeverity] = useState('');
   const [page, setPage] = useState(1);
+  const { filters } = useFilterState(SCHEMA);
+  const severityParam = filters.severity === 'all' ? '' : String(filters.severity ?? '');
 
   const query = useQuery({
-    queryKey: ['activity-feed', severity, page],
-    queryFn: () => listActivity({ severity: severity || undefined, page, limit: 50 }),
+    queryKey: ['activity-feed', severityParam, page],
+    queryFn: () => listActivity({ severity: severityParam || undefined, page, limit: 50 }),
     enabled: !isDemoMode,
     refetchInterval: 15000,
   });
+  const filter = useDynamicFilter<ActivityEntry>({ data: query.data?.activity ?? [], schema: SCHEMA });
 
   if (isDemoMode) return <DemoRestricted feature="Activity" />;
 
-  const entries = query.data?.activity ?? [];
+  const entries = filter.filteredData;
 
   return (
     <div className="min-h-screen">
@@ -52,21 +68,11 @@ export function ActivityPage() {
       </div>
 
       <div className="px-8 py-6 space-y-4">
-        <div className="flex items-center gap-2">
-          {SEVERITIES.map((s) => (
-            <button
-              key={s || 'all'}
-              onClick={() => { setSeverity(s); setPage(1); }}
-              className={`v-mono text-[10px] uppercase px-3 py-1.5 rounded-md border transition-colors ${
-                severity === s
-                  ? 'border-[var(--accent-primary)] text-[var(--accent-primary)] bg-[var(--accent-primary)]/10'
-                  : 'border-[var(--border-subtle)] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              {s || 'all'}
-            </button>
-          ))}
-          {query.isFetching && <Loader2 size={14} className="animate-spin text-[var(--text-muted)]" />}
+        <div className="flex items-start gap-3">
+          <div className="flex-1">
+            <FilterBar {...filter} />
+          </div>
+          {query.isFetching && <Loader2 size={14} className="animate-spin text-[var(--text-muted)] mt-3" />}
         </div>
 
         <div className="panel p-0 divide-y divide-[var(--border-subtle)]">

app/frontend/src/features/audit/pages/AuditLogsPage.tsx

@@ -2,8 +2,10 @@ import { useDeferredValue, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { listAuditLogs } from '@/lib/api-client';
 import { useDemoMode } from '@/lib/demo-mode';
+import { type FilterConfig } from '@/lib/dynamic-filter';
+import { useDynamicFilter } from '@/lib/use-dynamic-filter';
 import { formatDate, formatRelative } from '@/lib/time';
-import { DemoRestricted } from '@/shared/components';
+import { DemoRestricted, FilterBar } from '@/shared/components';
 import { ScrollText, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 
 const PAGE_SIZE = 50;
@@ -15,20 +17,34 @@ const rangeOptions = [
   { value: '30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },
 ] as const;
 
-const inputClass =
-  'h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all';
+// Server-backed filters — the engine runs over empty data; values map to
+// API params. URL state makes filtered views shareable.
+const AUDIT_SCHEMA: FilterConfig<unknown>[] = [
+  { key: 'resource', label: 'Resource', type: 'search' },
+  { key: 'action', label: 'Action', type: 'search' },
+  { key: 'actor', label: 'Actor', type: 'search' },
+  {
+    key: 'range', label: 'Time', type: 'select',
+    options: rangeOptions.filter((o) => o.value !== '').map((o) => ({ value: o.value, label: o.label })),
+  },
+];
 
 export function AuditLogsPage() {
   const isDemoMode = useDemoMode();
-  const [resource, setResource] = useState('');
-  const [action, setAction] = useState('');
-  const [actor, setActor] = useState('');
-  const [range, setRange] = useState('');
+  const filter = useDynamicFilter<unknown>({ data: [], schema: AUDIT_SCHEMA });
   const [page, setPage] = useState(1);
+  // Back to page 1 whenever the filter set changes.
+  const filtersJson = JSON.stringify(filter.filters);
+  const [prevFiltersJson, setPrevFiltersJson] = useState(filtersJson);
+  if (prevFiltersJson !== filtersJson) {
+    setPrevFiltersJson(filtersJson);
+    setPage(1);
+  }
 
-  const deferredResource = useDeferredValue(resource);
-  const deferredAction = useDeferredValue(action);
-  const deferredActor = useDeferredValue(actor);
+  const deferredResource = useDeferredValue(String(filter.filters.resource ?? ''));
+  const deferredAction = useDeferredValue(String(filter.filters.action ?? ''));
+  const deferredActor = useDeferredValue(String(filter.filters.actor ?? ''));
+  const range = filter.filters.range === 'all' ? '' : String(filter.filters.range ?? '');
 
   const filters = {
     resource: deferredResource.trim() || undefined,
@@ -54,15 +70,7 @@ export function AuditLogsPage() {
 
   const logs = logsQuery.data ?? [];
   const hasNext = logs.length === PAGE_SIZE;
-  const hasFilters = Boolean(resource || action || actor || range);
-
-  const resetFilters = () => {
-    setResource('');
-    setAction('');
-    setActor('');
-    setRange('');
-    setPage(1);
-  };
+  const hasFilters = filter.activeCount > 0;
 
   return (
     <div className="min-h-screen">
@@ -79,63 +87,7 @@ export function AuditLogsPage() {
 
       <div className="w-full px-8 py-6">
         <section className="panel p-6">
-          <div className="flex flex-wrap items-end gap-3 mb-5">
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
-                Resource
-              </label>
-              <input
-                value={resource}
-                onChange={(e) => { setResource(e.target.value); setPage(1); }}
-                placeholder="service, project…"
-                className={`${inputClass} w-44`}
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
-                Action
-              </label>
-              <input
-                value={action}
-                onChange={(e) => { setAction(e.target.value); setPage(1); }}
-                placeholder="create, deploy…"
-                className={`${inputClass} w-44`}
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
-                Actor
-              </label>
-              <input
-                value={actor}
-                onChange={(e) => { setActor(e.target.value); setPage(1); }}
-                placeholder="user email"
-                className={`${inputClass} w-52`}
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-1.5">
-                Time
-              </label>
-              <select
-                value={range}
-                onChange={(e) => { setRange(e.target.value); setPage(1); }}
-                className={`${inputClass} w-40`}
-              >
-                {rangeOptions.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-              </select>
-            </div>
-            {hasFilters && (
-              <button
-                onClick={resetFilters}
-                className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
-              >
-                Clear
-              </button>
-            )}
-          </div>
+          <FilterBar {...filter} />
 
           <div className="overflow-x-auto">
             <table className="w-full text-sm">

app/frontend/src/features/builds/pages/BuildsPage.tsx

@@ -9,6 +9,9 @@ import {
 } from '@/lib/api-client';
 import { useBuildUpdates } from '@/lib/use-build-updates';
 import { useDemoMode } from '@/lib/demo-mode';
+import { type FilterConfig } from '@/lib/dynamic-filter';
+import { useDynamicFilter, useFilterState } from '@/lib/use-dynamic-filter';
+import { FilterBar } from '@/shared/components';
 import { demoBuilds } from '@/lib/demo-data';
 import { formatRelative } from '@/lib/time';
 import {
@@ -34,6 +37,19 @@ const statusOptions: Array<{ value: '' | BuildStatus; label: string }> = [
   { value: 'cancelled', label: 'Cancelled' },
 ];
 
+const BUILD_SCHEMA: FilterConfig<BuildEntity>[] = [
+  {
+    key: 'status', label: 'Status', type: 'select',
+    options: statusOptions.filter((o) => o.value !== '').map((o) => ({ value: o.value, label: o.label })),
+  },
+  { key: 'project', label: 'Project ID', type: 'search', searchFields: ['projectId'] },
+  { key: 'service', label: 'Service ID', type: 'search', searchFields: ['serviceId'] },
+  {
+    key: 'created', label: 'Time', type: 'date-range',
+    accessor: (b) => b.startedAt ?? b.completedAt,
+  },
+];
+
 function StatusBadge({ status }: { status: BuildStatus }) {
   const config = {
     success: { color: 'var(--success)', bg: 'var(--success-soft)', Icon: Check, animate: false },
@@ -72,9 +88,10 @@ export function BuildsPage() {
   const queryClient = useQueryClient();
   const isDemoMode = useDemoMode();
 
-  const [projectFilter, setProjectFilter] = useState('');
-  const [serviceFilter, setServiceFilter] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'' | BuildStatus>('');
+  const { filters } = useFilterState(BUILD_SCHEMA);
+  const projectFilter = String(filters.project ?? '');
+  const serviceFilter = String(filters.service ?? '');
+  const statusFilter = filters.status === 'all' ? '' : String(filters.status ?? '');
   const [limit, setLimit] = useState(50);
   const [selectedBuild, setSelectedBuild] = useState<BuildEntity | null>(null);
 
@@ -85,20 +102,22 @@ export function BuildsPage() {
       listBuilds({
         projectId: projectFilter || undefined,
         serviceId: serviceFilter || undefined,
-        status: statusFilter || undefined,
+        status: (statusFilter || undefined) as BuildStatus | undefined,
         page: 1,
         limit,
       }),
   });
 
-  const builds = useMemo(
+  const rawBuilds = useMemo(
     () => (isDemoMode ? demoBuilds : buildsQuery.data?.builds ?? []),
     [isDemoMode, buildsQuery.data?.builds],
   );
+  const filter = useDynamicFilter<BuildEntity>({ data: rawBuilds, schema: BUILD_SCHEMA });
+  const builds = filter.filteredData;
 
   const subscribedBuildIds = useMemo(
-    () => (isDemoMode ? [] : builds.map((build) => build.id)),
-    [isDemoMode, builds],
+    () => (isDemoMode ? [] : rawBuilds.map((build) => build.id)),
+    [isDemoMode, rawBuilds],
   );
   const liveStatus = useBuildUpdates(subscribedBuildIds, ({ channel }) => {
     queryClient.invalidateQueries({ queryKey: ['builds-page'] });
@@ -217,46 +236,13 @@ export function BuildsPage() {
       {/* Filters */}
       <div className="w-full px-8">
         <div className="panel p-4">
-          <div className="flex items-center gap-2 mb-4">
+          <div className="flex items-center gap-2">
             <Filter size={16} className="text-[var(--text-tertiary)]" />
             <span className="text-sm font-medium text-[var(--text-secondary)]">Filters</span>
           </div>
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
-                Status
-              </label>
-              <select
-                value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value as '' | BuildStatus)}
-                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
-              >
-                {statusOptions.map((option) => (
-                  <option key={option.label} value={option.value}>{option.label}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
-                Project ID
-              </label>
-              <input
-                value={projectFilter}
-                onChange={(e) => setProjectFilter(e.target.value)}
-                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
-                placeholder="project-123"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">
-                Service ID
-              </label>
-              <input
-                value={serviceFilter}
-                onChange={(e) => setServiceFilter(e.target.value)}
-                className="w-full h-10 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm focus:border-[var(--accent-primary)] transition-colors"
-                placeholder="service-abc"
-              />
+          <div className="flex flex-wrap items-end gap-3 mt-3">
+            <div className="flex-1">
+              <FilterBar {...filter} />
             </div>
             <div>
               <label className="block text-xs font-medium uppercase tracking-wider text-[var(--text-muted)] mb-2">

app/frontend/src/features/templates/pages/TemplatesPage.tsx

@@ -644,6 +644,11 @@ export function TemplatesPage() {
                                   Public
                                 </span>
                               ) : null}
+                              {template.source === 'registry' ? (
+                                <span className="px-1.5 py-0.5 rounded bg-[var(--accent-primary-soft)] text-[var(--accent-primary)] text-[10px] font-semibold">
+                                  Registry
+                                </span>
+                              ) : null}
                             </div>
                             <div className="flex items-center gap-2 mt-1">
                               <span 

app/frontend/src/generated/api-types.ts

@@ -10943,6 +10943,8 @@ export interface components {
             owner_id?: string | null;
             /** @description Whether a user-created template is published to the public catalog */
             is_public?: boolean;
+            /** @description Catalog origin: absent for local/official templates; "registry" for entries merged from CONTAINR_TEMPLATE_REGISTRY_URL. Deploying a registry template materializes a local copy first. */
+            source?: string;
             /**
              * Format: date-time
              * @description Creation timestamp

app/frontend/src/generated/docs-snapshot.ts

@@ -40,7 +40,7 @@ export const bundledDocs: BundledDoc[] = [
     "path": "guides/CLI.md",
     "section": "guides",
     "title": "Containr CLI",
-    "markdown": "# Containr CLI\n\nThe CLI controls every part of a Containr instance — the same API surface\nthe web UI uses. Build it with `scripts/build-cli.sh` or\n`go build ./cmd/cli` from `app/backend`.\n\n## Authentication\n\nCreate a personal access token in the web UI under\n**Settings → Personal Access Tokens** (or `containr tokens create`), then:\n\n```bash\ncontainr auth login cnp_...                      # verify + store\ncontainr auth login cnp_... --url https://containr.example.com\ncontainr auth login cnp_... --name production    # named profile\ncontainr auth status                             # show active profile + identity\ncontainr auth logout\n```\n\nResolution order for every command: `--token`/`--api-url` flags >\n`CONTAINR_TOKEN`/`CONTAINR_API_URL` env > active profile >\n`http://localhost:8080/api/v1`. The active profile is `--profile` >\n`CONTAINR_PROFILE` > `current_profile` in `~/.containr.yaml`.\n\n## Output and scripting\n\n- `--json` prints the raw API response — safe to pipe and parse.\n- `--yes` / `-y` skips confirmation on destructive commands (delete,\n  revoke, restore, failover). Non-interactive shells refuse destructive\n  commands without it.\n- Exit codes are stable: `0` ok, `1` error, `2` auth/permission,\n  `3` not found, `4` validation, `5` unreachable.\n\n## Commands\n\n```\nauth login|logout|status         token auth and profiles\ntokens list|create|revoke        personal access tokens\nprojects list|get|create|delete\nservices list|get|create|update|delete|start|stop|restart|redeploy\nservices clone|move              duplicate config or re-parent a service\nservices domains list|add|remove|default|check   multi-domain + DNS preflight\nregistries list|add|update|remove  private-image pull credentials\nvolumes list|delete              docker volume inventory + cleanup (admin)\ndeploy <service-id>              trigger a deployment (--no-cache, --commit-hash, --branch)\ndeployments list|get|logs|rollback|cancel\nlogs <service-id> [--follow]     runtime logs (SSE follow)\nexec <service-id> -- <cmd>       one-off container command\nvariables list|set|unset         env vars (secrets masked; --redeploy applies them)\nvariables shared list|set|unset  project shared vars — referenced as ${{shared.KEY}}\ndatabases list|get|create|update|delete|action|backup|restore|download-backup|import-backup\n                               import-backup <id> <file.tar.gz|-> uploads an archive as a restore\n                               point; ships offsite too when a backup target is assigned\ndatabases list|get|create|update|delete|action|backup|restore|download-backup\n                               create --public exposes the port on all interfaces;\n                               update <id> --public/--public=false toggles it (container recreates, data persists)\ndatabases register <name>      register an external database (--type --host --port --database --username --password --ssl; probed before storing)\ndatabases test-connection      probe a connection — by id, or ad-hoc flags\nbackup-targets list|add|update|remove|test\n                               S3-compatible archive destinations; add/update probe the bucket\n                               first, empty --access-key/--secret-key on update keep stored keys;\n                               update <db-id> --backup-target assigns a target (\"\" clears it)\ncron list|get|create|delete|trigger|executions\ntemplates list|get|create|delete|deploy|plan|import-compose|deploy-graph\n                               deploy --name --var K=V; plan dry-resolves expressions;\n                               import-compose <compose.yml|-> converts a compose file into\n                               a v2 graph config; deploy-graph <project-id> <config.json|->\n                               deploys an ad-hoc service graph\nimport compose <project-id> <compose.yml|->\n                               deploys a docker-compose file straight into a project —\n                               no template row. DB images become managed databases\n                               attached under their service name; --var K=V overrides\n                               template variables\nnodes list|get|delete|tokens     node agents + onboarding tokens (admin)\nscaling status|policies|services|scale\nha status|alerts|health|policies|enable|disable|failover\nsecurity scan|vulnerabilities|metrics\ngateway services|keys|analytics  (admin)\nadmin overview|users|settings|audit-logs\nnotifications list|read\nwebhooks list|create|update|delete|deliveries|test\n                               outbound signed webhooks — create <name> <url>\n                               --event 'service.*' (repeatable, '*' = all);\n                               deliveries are HMAC-signed (X-Containr-Signature)\noperations                       live ops view: active deploys, queue depth,\n                               24h failures, cron runs, backups\nbanners list|creatLine truncated
+    "markdown": "# Containr CLI\n\nThe CLI controls every part of a Containr instance — the same API surface\nthe web UI uses. Build it with `scripts/build-cli.sh` or\n`go build ./cmd/cli` from `app/backend`.\n\n## Authentication\n\nCreate a personal access token in the web UI under\n**Settings → Personal Access Tokens** (or `containr tokens create`), then:\n\n```bash\ncontainr auth login cnp_...                      # verify + store\ncontainr auth login cnp_... --url https://containr.example.com\ncontainr auth login cnp_... --name production    # named profile\ncontainr auth status                             # show active profile + identity\ncontainr auth logout\n```\n\nResolution order for every command: `--token`/`--api-url` flags >\n`CONTAINR_TOKEN`/`CONTAINR_API_URL` env > active profile >\n`http://localhost:8080/api/v1`. The active profile is `--profile` >\n`CONTAINR_PROFILE` > `current_profile` in `~/.containr.yaml`.\n\n## Output and scripting\n\n- `--json` prints the raw API response — safe to pipe and parse.\n- `--yes` / `-y` skips confirmation on destructive commands (delete,\n  revoke, restore, failover). Non-interactive shells refuse destructive\n  commands without it.\n- Exit codes are stable: `0` ok, `1` error, `2` auth/permission,\n  `3` not found, `4` validation, `5` unreachable.\n\n## Commands\n\n```\nauth login|logout|status         token auth and profiles\ntokens list|create|revoke        personal access tokens\nprojects list|get|create|delete\nservices list|get|create|update|delete|start|stop|restart|redeploy\nservices clone|move              duplicate config or re-parent a service\nservices domains list|add|remove|default|check   multi-domain + DNS preflight\nregistries list|add|update|remove  private-image pull credentials\nvolumes list|delete              docker volume inventory + cleanup (admin)\ndeploy <service-id>              trigger a deployment (--no-cache, --commit-hash, --branch)\ndeployments list|get|logs|rollback|cancel\nlogs <service-id> [--follow]     runtime logs (SSE follow)\nexec <service-id> -- <cmd>       one-off container command\nvariables list|set|unset         env vars (secrets masked; --redeploy applies them)\nvariables shared list|set|unset  project shared vars — referenced as ${{shared.KEY}}\ndatabases list|get|create|update|delete|action|backup|restore|download-backup|import-backup\n                               import-backup <id> <file.tar.gz|-> uploads an archive as a restore\n                               point; ships offsite too when a backup target is assigned\ndatabases list|get|create|update|delete|action|backup|restore|download-backup\n                               create --public exposes the port on all interfaces;\n                               update <id> --public/--public=false toggles it (container recreates, data persists)\ndatabases register <name>      register an external database (--type --host --port --database --username --password --ssl; probed before storing)\ndatabases test-connection      probe a connection — by id, or ad-hoc flags\nbackup-targets list|add|update|remove|test\n                               S3-compatible archive destinations; add/update probe the bucket\n                               first, empty --access-key/--secret-key on update keep stored keys;\n                               update <db-id> --backup-target assigns a target (\"\" clears it)\ncron list|get|create|delete|trigger|executions\ntemplates list|get|create|delete|deploy|plan|import-compose|deploy-graph\n                               deploy --name --var K=V; plan dry-resolves expressions;\n                               import-compose <compose.yml|-> converts a compose file into\n                               a v2 graph config; deploy-graph <project-id> <config.json|->\n                               deploys an ad-hoc service graph\nimport compose <project-id> <compose.yml|->\n                               deploys a docker-compose file straight into a project —\n                               no template row. DB images become managed databases\n                               attached under their service name; --var K=V overrides\n                               template variables\nnodes list|get|delete|tokens     node agents + onboarding tokens (admin)\nscaling status|policies|services|scale\nha status|alerts|health|policies|enable|disable|failover\nsecurity scan|vulnerabilities|metrics\ngateway services|keys|analytics  (admin)\nadmin overview|users|settings|audit-logs\nnotifications list|read\nwebhooks list|create|update|delete|deliveries|test\n                               outbound signed webhooks — create <name> <url>\n                               --event 'service.*' (repeatable, '*' = all);\n                               deliveries are HMAC-signed (X-Containr-Signature)\noperations                       live ops view: active deploys, queue depth,\n                               24h failures, cron runs, backups\nactivity          
Line truncated
   },
   {
     "path": "guides/CLOUDFLARE_SETUP.md",

app/frontend/src/lib/api-client.ts

@@ -181,6 +181,7 @@ export type TemplateEntity = {
   isOfficial: boolean;
   ownerId: string | null;
   isPublic: boolean;
+  source?: string;
   createdAt?: string;
   updatedAt?: string;
 };
@@ -749,6 +750,7 @@ function normalizeTemplate(template: RawServiceTemplate): TemplateEntity | null
     isOfficial: Boolean(template.is_official),
     ownerId: template.owner_id ?? null,
     isPublic: Boolean(template.is_public),
+    source: template.source,
     createdAt: template.created_at,
     updatedAt: template.updated_at,
   };

app/frontend/src/lib/dynamic-filter.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest';
+import {
+  emptyFilterState,
+  FilterEngine,
+  type FilterConfig,
+} from '@/lib/dynamic-filter';
+
+interface Row {
+  status: string;
+  name: string;
+  labels: string[];
+  createdAt: string;
+}
+
+const ROWS: Row[] = [
+  { status: 'success', name: 'web-api', labels: ['prod'], createdAt: new Date().toISOString() },
+  { status: 'failed', name: 'worker', labels: [], createdAt: '2020-01-01T00:00:00Z' },
+  { status: 'running', name: 'web-admin', labels: ['prod', 'canary'], createdAt: '2020-06-01T00:00:00Z' },
+];
+
+const SCHEMA: FilterConfig<Row>[] = [
+  { key: 'q', label: 'Search', type: 'search', searchFields: ['name'] },
+  { key: 'status', label: 'Status', type: 'select' },
+  { key: 'labels', label: 'Labels', type: 'multiselect' },
+  { key: 'createdAt', label: 'Time', type: 'date-range' },
+];
+
+const f = (over: Partial<Record<string, unknown>>) => ({
+  ...emptyFilterState(SCHEMA),
+  ...over,
+});
+
+describe('FilterEngine', () => {
+  it('passes everything on an empty filter state', () => {
+    expect(new FilterEngine(ROWS, SCHEMA).apply(f({}))).toHaveLength(3);
+  });
+
+  it('searches across configured fields case-insensitively', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    expect(engine.apply(f({ q: 'WEB' })).map((r) => r.name)).toEqual(['web-api', 'web-admin']);
+    expect(engine.apply(f({ q: 'worker' }))).toHaveLength(1);
+  });
+
+  it('select matches exactly and "all" is a no-op', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    expect(engine.apply(f({ status: 'failed' }))).toHaveLength(1);
+    expect(engine.apply(f({ status: 'all' }))).toHaveLength(3);
+  });
+
+  it('multiselect intersects array values', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    expect(engine.apply(f({ labels: ['canary'] })).map((r) => r.name)).toEqual(['web-admin']);
+  });
+
+  it('date-range bounds by preset', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    expect(engine.apply(f({ createdAt: 'today' })).map((r) => r.name)).toEqual(['web-api']);
+    expect(engine.apply(f({ createdAt: 'all' }))).toHaveLength(3);
+  });
+
+  it('combines filters conjunctively', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    expect(engine.apply(f({ q: 'web', status: 'running' })).map((r) => r.name)).toEqual(['web-admin']);
+  });
+
+  it('derives options with counts from data', () => {
+    const opts = new FilterEngine(ROWS, SCHEMA).options().find((c) => c.key === 'status');
+    expect(opts?.options?.find((o) => o.value === 'success')?.count).toBe(1);
+    expect(opts?.options?.map((o) => o.value).sort()).toEqual(['failed', 'running', 'success']);
+  });
+
+  it('counts active filters and lists them with raw + display values', () => {
+    const engine = new FilterEngine(ROWS, SCHEMA);
+    const state = f({ status: 'failed', q: 'w' });
+    expect(engine.activeCount(state)).toBe(2);
+    const active = engine.active(state);
+    expect(active.find((a) => a.key === 'status')).toMatchObject({ value: 'failed', displayValue: 'Failed' });
+    expect(active.find((a) => a.key === 'q')).toMatchObject({ displayValue: 'w' });
+  });
+});

app/frontend/src/lib/dynamic-filter.ts

@@ -0,0 +1,208 @@
+// Dynamic filter framework — typed filter configs → client-side filtering
+// with optional URL-state sync. Port of dflow's filter.utils pattern,
+// adapted to Containr (no external date lib, searchParams-driven).
+//
+// A page declares a FilterConfig<T>[] schema, passes fetched data +
+// schema to useDynamicFilter(), and renders <FilterBar/>. Filter state
+// lives in the URL when `urlSync` is on, so filtered views are
+// shareable links.
+
+export type FilterType =
+  | 'search'
+  | 'select'
+  | 'multiselect'
+  | 'boolean'
+  | 'date-range'
+  | 'status';
+
+export interface FilterOption {
+  value: string;
+  label: string;
+  count?: number;
+}
+
+export interface FilterConfig<T> {
+  key: string;
+  label: string;
+  type: FilterType;
+  options?: FilterOption[];
+  /** fields searched by type 'search' (defaults to [key]) */
+  searchFields?: (keyof T & string)[];
+  /** custom value accessor (defaults to item[key]) */
+  accessor?: (item: T) => unknown;
+}
+
+export type FilterState = Record<string, unknown>;
+
+const EMPTY: Record<FilterType, unknown> = {
+  search: '',
+  select: 'all',
+  multiselect: [],
+  boolean: [],
+  'date-range': 'all',
+  status: [],
+};
+
+export function emptyValueFor(type: FilterType): unknown {
+  return structuredClone(EMPTY[type]);
+}
+
+export function emptyFilterState<T>(schema: FilterConfig<T>[]): FilterState {
+  const state: FilterState = {};
+  for (const c of schema) state[c.key] = structuredClone(EMPTY[c.type]);
+  return state;
+}
+
+function accessorOf<T>(config: FilterConfig<T>): (item: T) => unknown {
+  if (config.accessor) return config.accessor;
+  return (item) => (item as Record<string, unknown>)[config.key];
+}
+
+export class FilterEngine<T> {
+  private data: T[];
+  private schema: FilterConfig<T>[];
+
+  constructor(data: T[], schema: FilterConfig<T>[]) {
+    this.data = data;
+    this.schema = schema;
+  }
+
+  /** Fill in option lists (with counts) for configs that didn't declare them. */
+  options(): FilterConfig<T>[] {
+    return this.schema.map((config) => {
+      if (config.options?.length) return config;
+      const counts = new Map<string, number>();
+      for (const item of this.data) {
+        const v = accessorOf(config)(item);
+        for (const each of Array.isArray(v) ? v : [v]) {
+          if (each != null && each !== '') {
+            const key = String(each);
+            counts.set(key, (counts.get(key) ?? 0) + 1);
+          }
+        }
+      }
+      const options = [...counts.entries()]
+        .map(([value, count]) => ({ value, label: formatLabel(value), count }))
+        .sort((a, b) => b.count! - a.count!);
+      return { ...config, options };
+    });
+  }
+
+  apply(filters: FilterState): T[] {
+    return this.data.filter((item) =>
+      this.schema.every((config) => {
+        const value = filters[config.key];
+        if (value == null || value === '' || value === 'all') return true;
+        if (Array.isArray(value) && value.length === 0) return true;
+        return this.evaluate(item, config, value);
+      }),
+    );
+  }
+
+  private evaluate(item: T, config: FilterConfig<T>, value: unknown): boolean {
+    const itemValue = accessorOf(config)(item);
+    switch (config.type) {
+      case 'search': {
+        const term = String(value).toLowerCase();
+        const fields = config.searchFields ?? [config.key as keyof T & string];
+        return fields.some((f) =>
+          String((item as Record<string, unknown>)[f] ?? '').toLowerCase().includes(term),
+        );
+      }
+      case 'select':
+        return String(itemValue) === String(value);
+      case 'multiselect':
+      case 'status': {
+        const values = value as string[];
+        if (Array.isArray(itemValue)) return itemValue.some((v) => values.includes(String(v)));
+        return values.includes(String(itemValue));
+      }
+      case 'boolean': {
+        const values = value as string[];
+        return values.includes(String(Boolean(itemValue)));
+      }
+      case 'date-range':
+        return dateInRange(itemValue, String(value));
+      default:
+        return true;
+    }
+  }
+
+  activeCount(filters: FilterState): number {
+    let n = 0;
+    for (const c of this.schema) {
+      const v = filters[c.key];
+      if (v == null || v === '' || v === 'all') continue;
+      n += Array.isArray(v) ? v.length : 1;
+    }
+    return n;
+  }
+
+  active(filters: FilterState): { key: string; label: string; value: string; displayValue: string }[] {
+    const out: { key: string; label: string; value: string; displayValue: string }[] = [];
+    const opts = this.options();
+    for (const c of this.schema) {
+      const v = filters[c.key];
+      if (v == null || v === '' || v === 'all') continue;
+      const optFor = (raw: unknown) => {
+        if (c.type === 'search') return String(raw);
+        if (c.type === 'date-range') {
+          return DATE_RANGE_OPTIONS.find((o) => o.value === raw)?.label ?? String(raw);
+        }
+        return (
+          opts.find((o) => o.key === c.key)?.options?.find((o) => o.value === raw)?.label ??
+          formatLabel(String(raw))
+        );
+      };
+      if (Array.isArray(v)) {
+        for (const each of v) {
+          out.push({ key: c.key, label: c.label, value: String(each), displayValue: optFor(each) });
+        }
+      } else {
+        out.push({ key: c.key, label: c.label, value: String(v), displayValue: optFor(v) });
+      }
+    }
+    return out;
+  }
+}
+
+function formatLabel(value: string): string {
+  if (value === 'true') return 'Yes';
+  if (value === 'false') return 'No';
+  return value.charAt(0).toUpperCase() + value.slice(1).replace(/[_-]/g, ' ');
+}
+
+function dateInRange(itemValue: unknown, range: string): boolean {
+  if (!itemValue || range === 'all') return true;
+  const date = new Date(String(itemValue));
+  if (Number.isNaN(date.getTime())) return false;
+  const now = new Date();
+  let boundary: Date;
+  switch (range) {
+    case 'today':
+      boundary = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      break;
+    case 'week': {
+      const day = (now.getDay() + 6) % 7; // monday start
+      boundary = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day);
+      break;
+    }
+    case 'month':
+      boundary = new Date(now.getFullYear(), now.getMonth(), 1);
+      break;
+    case '30d':
+      boundary = new Date(now.getTime() - 30 * 86400000);
+      break;
+    default:
+      return true;
+  }
+  return date >= boundary;
+}
+
+export const DATE_RANGE_OPTIONS: FilterOption[] = [
+  { value: 'all', label: 'All time' },
+  { value: 'today', label: 'Today' },
+  { value: 'week', label: 'This week' },
+  { value: 'month', label: 'This month' },
+  { value: '30d', label: 'Last 30 days' },
+];

app/frontend/src/lib/use-dynamic-filter.ts

@@ -0,0 +1,104 @@
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import {
+  emptyFilterState,
+  emptyValueFor,
+  FilterEngine,
+  type FilterConfig,
+  type FilterState,
+} from '@/lib/dynamic-filter';
+
+// Filter state lives in `?f.<key>=...` search params — filtered views are
+// shareable links. Arrays join with commas.
+
+function stateFromParams<T>(schema: FilterConfig<T>[], params: URLSearchParams): FilterState {
+  const state = emptyFilterState(schema);
+  for (const c of schema) {
+    const raw = params.get(`f.${c.key}`);
+    if (raw == null) continue;
+    switch (c.type) {
+      case 'multiselect':
+      case 'boolean':
+      case 'status':
+        state[c.key] = raw.split(',').filter(Boolean);
+        break;
+      default:
+        state[c.key] = raw;
+    }
+  }
+  return state;
+}
+
+function stateToParams<T>(schema: FilterConfig<T>[], state: FilterState): URLSearchParams {
+  const params = new URLSearchParams();
+  const empty = emptyFilterState(schema);
+  for (const c of schema) {
+    const v = state[c.key];
+    if (v == null || v === '' || v === 'all') continue;
+    if (Array.isArray(v) && v.length === 0) continue;
+    if (JSON.stringify(v) === JSON.stringify(empty[c.key])) continue;
+    params.set(`f.${c.key}`, Array.isArray(v) ? v.join(',') : String(v));
+  }
+  return params;
+}
+
+/** URL-backed filter state — usable before any data is fetched. */
+export function useFilterState<T>(schema: FilterConfig<T>[]) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filters = useMemo(() => stateFromParams(schema, searchParams), [schema, searchParams]);
+
+  const setFilters = useCallback(
+    (updater: (prev: FilterState) => FilterState) => {
+      const next = updater(filters);
+      setSearchParams((prev) => {
+        const merged = new URLSearchParams(prev);
+        for (const key of [...merged.keys()]) {
+          if (key.startsWith('f.')) merged.delete(key);
+        }
+        stateToParams(schema, next).forEach((v, k) => merged.set(k, v));
+        return merged;
+      }, { replace: true });
+    },
+    [filters, schema, setSearchParams],
+  );
+
+  const updateFilter = useCallback(
+    (key: string, value: unknown) => setFilters((prev) => ({ ...prev, [key]: value })),
+    [setFilters],
+  );
+  const clearAll = useCallback(
+    () => setFilters(() => emptyFilterState(schema)),
+    [setFilters, schema],
+  );
+  const removeFilter = useCallback(
+    (key: string, rawValue?: string) =>
+      setFilters((prev) => {
+        const v = prev[key];
+        if (Array.isArray(v) && rawValue !== undefined) {
+          return { ...prev, [key]: v.filter((x) => String(x) !== rawValue) };
+        }
+        const config = schema.find((c) => c.key === key);
+        return config ? { ...prev, [key]: emptyValueFor(config.type) } : prev;
+      }),
+    [setFilters, schema],
+  );
+
+  return { filters, updateFilter, removeFilter, clearAll };
+}
+
+/** Full client-side filter: URL state + engine over `data`. */
+export function useDynamicFilter<T>({ data, schema }: { data: T[]; schema: FilterConfig<T>[] }) {
+  const state = useFilterState(schema);
+  const engine = useMemo(() => new FilterEngine(data, schema), [data, schema]);
+
+  return {
+    filteredData: useMemo(() => engine.apply(state.filters), [engine, state.filters]),
+    filters: state.filters,
+    schema: useMemo(() => engine.options(), [engine]),
+    activeCount: useMemo(() => engine.activeCount(state.filters), [engine, state.filters]),
+    active: useMemo(() => engine.active(state.filters), [engine, state.filters]),
+    updateFilter: state.updateFilter,
+    removeFilter: state.removeFilter,
+    clearAll: state.clearAll,
+  };
+}

app/frontend/src/shared/components/FilterBar.tsx

@@ -0,0 +1,147 @@
+import { Search, X } from 'lucide-react';
+import {
+  DATE_RANGE_OPTIONS,
+  type FilterConfig,
+  type FilterState,
+} from '@/lib/dynamic-filter';
+
+const inputClass =
+  'h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--surface-muted)] text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--accent-primary)] focus:ring-1 focus:ring-[var(--accent-primary)] transition-all';
+
+// Dynamic filter bar — renders a FilterConfig schema as compact controls.
+// State is owned by useDynamicFilter (URL-synced); this is a pure view.
+
+export function FilterBar<T>({
+  schema,
+  filters,
+  activeCount,
+  active,
+  updateFilter,
+  removeFilter,
+  clearAll,
+}: {
+  schema: FilterConfig<T>[];
+  filters: FilterState;
+  activeCount: number;
+  active: { key: string; label: string; value: string; displayValue: string }[];
+  updateFilter: (key: string, value: unknown) => void;
+  removeFilter: (key: string, rawValue?: string) => void;
+  clearAll: () => void;
+}) {
+  return (
+    <div className="mb-5">
+      <div className="flex flex-wrap items-end gap-3">
+        {schema.map((config) => {
+          const value = filters[config.key];
+          switch (config.type) {
+            case 'search':
+              return (
+                <div key={config.key} className="relative">
+                  <Search
+                    size={13}
+                    className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
+                  />
+                  <input
+                    value={String(value ?? '')}
+                    onChange={(e) => updateFilter(config.key, e.target.value)}
+                    placeholder={`Search ${config.label.toLowerCase()}…`}
+                    className={`${inputClass} w-56 pl-8`}
+                    aria-label={config.label}
+                  />
+                </div>
+              );
+            case 'select':
+            case 'date-range': {
+              const options =
+                config.type === 'date-range'
+                  ? DATE_RANGE_OPTIONS
+                  : [{ value: 'all', label: `All ${config.label.toLowerCase()}` }, ...(config.options ?? [])];
+              return (
+                <select
+                  key={config.key}
+                  value={String(value ?? 'all')}
+                  onChange={(e) => updateFilter(config.key, e.target.value)}
+                  className={`${inputClass} w-40`}
+                  aria-label={config.label}
+                >
+                  {options.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.count != null ? `${o.label} (${o.count})` : o.label}
+                    </option>
+                  ))}
+                </select>
+              );
+            }
+            case 'multiselect':
+            case 'boolean':
+            case 'status': {
+              const selected = Array.isArray(value) ? (value as string[]) : [];
+              const options =
+                config.type === 'boolean'
+                  ? [
+                      { value: 'true', label: 'Yes' },
+                      { value: 'false', label: 'No' },
+                    ]
+                  : (config.options ?? []);
+              return (
+                <div key={config.key} className="flex flex-wrap items-center gap-1.5">
+                  <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--text-muted)]">
+                    {config.label}:
+                  </span>
+                  {options.map((o) => {
+                    const on = selected.includes(o.value);
+                    return (
+                      <button
+                        key={o.value}
+                        onClick={() =>
+                          updateFilter(
+                            config.key,
+                            on ? selected.filter((s) => s !== o.value) : [...selected, o.value],
+                          )
+                        }
+                        className={`h-7 px-2.5 rounded-[var(--radius-sm)] text-xs font-medium border transition-colors ${
+                          on
+                            ? 'bg-[var(--accent-primary-soft)] border-[var(--accent-primary)]/40 text-[var(--accent-primary)]'
+                            : 'border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--border-default)]'
+                        }`}
+                      >
+                        {o.label}
+                        {o.count != null && <span className="ml-1 opacity-60">{o.count}</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              );
+            }
+            default:
+              return null;
+          }
+        })}
+        {activeCount > 0 && (
+          <button
+            onClick={clearAll}
+            className="h-9 px-3 rounded-[var(--radius-md)] border border-[var(--border-subtle)] text-xs font-medium text-[var(--text-secondary)] hover:border-[var(--border-default)] transition-colors"
+          >
+            Clear ({activeCount})
+          </button>
+        )}
+      </div>
+
+      {active.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1.5 mt-3">
+          {active.map((a, i) => (
+            <button
+              key={`${a.key}-${a.value}-${i}`}
+              onClick={() => removeFilter(a.key, a.value)}
+              className="group inline-flex items-center gap-1.5 h-6 px-2 rounded-[var(--radius-sm)] bg-[var(--accent-primary-soft)] text-[11px] font-medium text-[var(--accent-primary)]"
+            >
+              <span className="opacity-70">{a.label}</span>
+              {a.displayValue}
+              <X size={11} className="opacity-50 group-hover:opacity-100" />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

app/frontend/src/shared/components/index.ts

@@ -11,3 +11,4 @@ export * from './StatusBadge';
 export { useToast } from '../hooks/use-toast';
 export type { ToastType, ToastContextValue } from '../hooks/use-toast';
 export * from './BrandWordmark';
+export * from './FilterBar';

docs/api/openapi.yaml

@@ -7393,6 +7393,9 @@ components:
         is_public:
           type: boolean
           description: Whether a user-created template is published to the public catalog
+        source:
+          type: string
+          description: 'Catalog origin: absent for local/official templates; "registry" for entries merged from CONTAINR_TEMPLATE_REGISTRY_URL. Deploying a registry template materializes a local copy first.'
         created_at:
           type: string
           format: date-time