Phases 11, 12: mcrctl CLI tool and mcr-web UI

Phase 11 implements the admin CLI with dual REST/gRPC transport,
global flags (--server, --grpc, --token, --ca-cert, --json), and
all commands: status, repo list/delete, policy CRUD, audit tail,
gc trigger/status/reconcile, and snapshot.

Phase 12 implements the HTMX web UI with chi router, session-based
auth (HttpOnly/Secure/SameSite=Strict cookies), CSRF protection
(HMAC-SHA256 signed double-submit), and pages for dashboard,
repositories, manifest detail, policy management, and audit log.

Security: CSRF via signed double-submit cookie, session cookies
with HttpOnly/Secure/SameSite=Strict, TLS 1.3 minimum on all
connections, form body size limits via http.MaxBytesReader.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/embed.go

@@ -0,0 +1,6 @@
+package web
+
+import "embed"
+
+//go:embed templates static
+var Content embed.FS

web/static/style.css

@@ -0,0 +1,404 @@
+/* MCR Web UI - minimal clean styling */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #1a1a1a;
+    background: #f5f5f5;
+    line-height: 1.5;
+}
+
+a {
+    color: #0066cc;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Navigation */
+nav {
+    background: #1a1a2e;
+    color: #fff;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    height: 3.5rem;
+}
+
+nav .brand {
+    font-weight: 700;
+    font-size: 1.125rem;
+    color: #fff;
+    margin-right: 1rem;
+}
+
+nav a {
+    color: #ccc;
+    font-size: 0.875rem;
+}
+
+nav a:hover,
+nav a.active {
+    color: #fff;
+    text-decoration: none;
+}
+
+nav .spacer {
+    flex: 1;
+}
+
+nav .logout {
+    color: #e57373;
+}
+
+/* Main container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+/* Page header */
+h1 {
+    font-size: 1.5rem;
+    margin: 0 0 1rem 0;
+    font-weight: 600;
+}
+
+h2 {
+    font-size: 1.25rem;
+    margin: 1.5rem 0 0.75rem 0;
+    font-weight: 600;
+}
+
+/* Stats cards */
+.stats {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.stat-card {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 1rem 1.5rem;
+    min-width: 180px;
+    flex: 1;
+}
+
+.stat-card .label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: #666;
+    letter-spacing: 0.05em;
+}
+
+.stat-card .value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #1a1a2e;
+}
+
+/* Tables */
+table {
+    width: 100%;
+    border-collapse: collapse;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+th,
+td {
+    padding: 0.625rem 0.875rem;
+    text-align: left;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+th {
+    background: #f9f9f9;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: #555;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:nth-child(even) td {
+    background: #fafafa;
+}
+
+/* Forms */
+form {
+    margin-bottom: 1rem;
+}
+
+label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    color: #333;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+select,
+textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-family: inherit;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+    border-color: #0066cc;
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+}
+
+/* Buttons */
+button,
+input[type="submit"] {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-family: inherit;
+    cursor: pointer;
+    background: #0066cc;
+    color: #fff;
+    font-weight: 500;
+}
+
+button:hover,
+input[type="submit"]:hover {
+    background: #0052a3;
+}
+
+button.secondary {
+    background: #666;
+}
+
+button.secondary:hover {
+    background: #555;
+}
+
+button.danger {
+    background: #d32f2f;
+}
+
+button.danger:hover {
+    background: #b71c1c;
+}
+
+button.small {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+}
+
+/* Login page */
+.login-container {
+    max-width: 400px;
+    margin: 5rem auto;
+    padding: 2rem;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+}
+
+.login-container h1 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.login-container .form-group {
+    margin-bottom: 1rem;
+}
+
+.login-container button {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+    margin-top: 0.5rem;
+}
+
+/* Error and info messages */
+.error {
+    background: #ffebee;
+    color: #c62828;
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    border: 1px solid #ef9a9a;
+    font-size: 0.875rem;
+}
+
+.info {
+    background: #e3f2fd;
+    color: #1565c0;
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    border: 1px solid #90caf9;
+    font-size: 0.875rem;
+}
+
+/* Manifest JSON */
+pre {
+    background: #263238;
+    color: #eeffff;
+    padding: 1rem;
+    border-radius: 6px;
+    overflow-x: auto;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+}
+
+code {
+    font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
+        "Consolas", monospace;
+}
+
+/* Inline form row for policy creation */
+.form-row {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.form-row .form-group {
+    flex: 1;
+    min-width: 120px;
+}
+
+.form-row button {
+    margin-bottom: 0;
+    white-space: nowrap;
+}
+
+/* Filter form */
+.filters {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+    background: #fff;
+    padding: 1rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+}
+
+.filters .form-group {
+    flex: 1;
+    min-width: 140px;
+}
+
+.filters button {
+    white-space: nowrap;
+}
+
+/* Pagination */
+.pagination {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+.pagination a,
+.pagination span {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    font-size: 0.875rem;
+}
+
+.pagination span {
+    background: #0066cc;
+    color: #fff;
+    border-color: #0066cc;
+}
+
+/* Badge */
+.badge {
+    display: inline-block;
+    padding: 0.125rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-allow {
+    background: #e8f5e9;
+    color: #2e7d32;
+}
+
+.badge-deny {
+    background: #ffebee;
+    color: #c62828;
+}
+
+.badge-enabled {
+    background: #e8f5e9;
+    color: #2e7d32;
+}
+
+.badge-disabled {
+    background: #fafafa;
+    color: #999;
+}
+
+/* Truncated text */
+.truncated {
+    font-family: "SF Mono", "Fira Code", monospace;
+    font-size: 0.8125rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .stats {
+        flex-direction: column;
+    }
+
+    .form-row,
+    .filters {
+        flex-direction: column;
+    }
+
+    nav {
+        flex-wrap: wrap;
+        height: auto;
+        padding: 0.5rem 1rem;
+    }
+}

web/templates/audit.html

@@ -0,0 +1,80 @@
+{{define "title"}}Audit Log{{end}}
+
+{{define "content"}}
+<h1>Audit Log</h1>
+
+{{if .Error}}
+<div class="error">{{.Error}}</div>
+{{end}}
+
+<form method="GET" action="/audit" class="filters">
+    <div class="form-group">
+        <label for="event_type">Event Type</label>
+        <select id="event_type" name="event_type">
+            <option value="">All</option>
+            <option value="manifest_pushed" {{if eq .FilterType "manifest_pushed"}}selected{{end}}>Manifest Pushed</option>
+            <option value="manifest_deleted" {{if eq .FilterType "manifest_deleted"}}selected{{end}}>Manifest Deleted</option>
+            <option value="blob_uploaded" {{if eq .FilterType "blob_uploaded"}}selected{{end}}>Blob Uploaded</option>
+            <option value="blob_deleted" {{if eq .FilterType "blob_deleted"}}selected{{end}}>Blob Deleted</option>
+            <option value="repo_deleted" {{if eq .FilterType "repo_deleted"}}selected{{end}}>Repo Deleted</option>
+            <option value="gc_started" {{if eq .FilterType "gc_started"}}selected{{end}}>GC Started</option>
+            <option value="gc_completed" {{if eq .FilterType "gc_completed"}}selected{{end}}>GC Completed</option>
+            <option value="policy_created" {{if eq .FilterType "policy_created"}}selected{{end}}>Policy Created</option>
+            <option value="policy_updated" {{if eq .FilterType "policy_updated"}}selected{{end}}>Policy Updated</option>
+            <option value="policy_deleted" {{if eq .FilterType "policy_deleted"}}selected{{end}}>Policy Deleted</option>
+        </select>
+    </div>
+    <div class="form-group">
+        <label for="repository">Repository</label>
+        <input type="text" id="repository" name="repository" value="{{.FilterRepo}}" placeholder="e.g. library/nginx">
+    </div>
+    <div class="form-group">
+        <label for="since">Since</label>
+        <input type="date" id="since" name="since" value="{{.FilterSince}}">
+    </div>
+    <div class="form-group">
+        <label for="until">Until</label>
+        <input type="date" id="until" name="until" value="{{.FilterUntil}}">
+    </div>
+    <button type="submit">Filter</button>
+</form>
+
+{{if .Events}}
+<table>
+    <thead>
+        <tr>
+            <th>Time</th>
+            <th>Type</th>
+            <th>Actor</th>
+            <th>Repository</th>
+            <th>Digest</th>
+            <th>IP Address</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Events}}
+        <tr>
+            <td>{{formatTime .EventTime}}</td>
+            <td>{{.EventType}}</td>
+            <td>{{.ActorId}}</td>
+            <td>{{.Repository}}</td>
+            <td class="truncated">{{truncate .Digest 24}}</td>
+            <td>{{.IpAddress}}</td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+
+<div class="pagination">
+    {{if gt .Page 1}}
+    <a href="{{.PrevURL}}">Previous</a>
+    {{end}}
+    <span>Page {{.Page}}</span>
+    {{if .HasNext}}
+    <a href="{{.NextURL}}">Next</a>
+    {{end}}
+</div>
+{{else}}
+<p>No audit events found.</p>
+{{end}}
+{{end}}

web/templates/dashboard.html

@@ -0,0 +1,44 @@
+{{define "title"}}Dashboard{{end}}
+
+{{define "content"}}
+<h1>Dashboard</h1>
+
+<div class="stats">
+    <div class="stat-card">
+        <div class="label">Repositories</div>
+        <div class="value">{{.RepoCount}}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Total Size</div>
+        <div class="value">{{.TotalSize}}</div>
+    </div>
+</div>
+
+<h2>Recent Activity</h2>
+{{if .Events}}
+<table>
+    <thead>
+        <tr>
+            <th>Time</th>
+            <th>Type</th>
+            <th>Actor</th>
+            <th>Repository</th>
+            <th>Digest</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Events}}
+        <tr>
+            <td>{{formatTime .EventTime}}</td>
+            <td>{{.EventType}}</td>
+            <td>{{.ActorId}}</td>
+            <td>{{.Repository}}</td>
+            <td class="truncated">{{truncate .Digest 24}}</td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{else}}
+<p>No recent activity.</p>
+{{end}}
+{{end}}

web/templates/layout.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MCR - {{template "title" .}}</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+</head>
+<body>
+    {{if .Session}}
+    <nav>
+        <span class="brand">MCR</span>
+        <a href="/">Dashboard</a>
+        <a href="/repositories">Repositories</a>
+        <a href="/policies">Policies</a>
+        <a href="/audit">Audit</a>
+        <span class="spacer"></span>
+        <a href="/logout" class="logout">Logout</a>
+    </nav>
+    {{end}}
+    <div class="container">
+        {{template "content" .}}
+    </div>
+</body>
+</html>

web/templates/login.html

@@ -0,0 +1,22 @@
+{{define "title"}}Login{{end}}
+
+{{define "content"}}
+<div class="login-container">
+    <h1>MCR Login</h1>
+    {{if .Error}}
+    <div class="error">{{.Error}}</div>
+    {{end}}
+    <form method="POST" action="/login">
+        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
+        <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required autofocus>
+        </div>
+        <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required>
+        </div>
+        <button type="submit">Sign In</button>
+    </form>
+</div>
+{{end}}

web/templates/manifest_detail.html

@@ -0,0 +1,28 @@
+{{define "title"}}Manifest Detail{{end}}
+
+{{define "content"}}
+<h1>Manifest Detail</h1>
+
+{{if .Error}}
+<div class="error">{{.Error}}</div>
+{{else}}
+
+<div class="stats">
+    <div class="stat-card">
+        <div class="label">Digest</div>
+        <div class="value truncated" style="font-size: 0.875rem;">{{.Manifest.Digest}}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Media Type</div>
+        <div class="value" style="font-size: 1rem;">{{.Manifest.MediaType}}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Size</div>
+        <div class="value">{{formatSize .Manifest.Size}}</div>
+    </div>
+</div>
+
+<p><a href="/repositories/{{.RepoName}}">Back to {{.RepoName}}</a></p>
+
+{{end}}
+{{end}}

web/templates/policies.html

@@ -0,0 +1,92 @@
+{{define "title"}}Policies{{end}}
+
+{{define "content"}}
+<h1>Policy Rules</h1>
+
+{{if .Error}}
+<div class="error">{{.Error}}</div>
+{{end}}
+
+<h2>Create Policy Rule</h2>
+<form method="POST" action="/policies">
+    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
+    <div class="form-row">
+        <div class="form-group">
+            <label for="priority">Priority</label>
+            <input type="number" id="priority" name="priority" value="100" required>
+        </div>
+        <div class="form-group">
+            <label for="description">Description</label>
+            <input type="text" id="description" name="description" required>
+        </div>
+        <div class="form-group">
+            <label for="effect">Effect</label>
+            <select id="effect" name="effect">
+                <option value="allow">Allow</option>
+                <option value="deny">Deny</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label for="actions">Actions (comma-sep)</label>
+            <input type="text" id="actions" name="actions" placeholder="pull,push">
+        </div>
+        <div class="form-group">
+            <label for="repositories">Repositories (comma-sep)</label>
+            <input type="text" id="repositories" name="repositories" placeholder="*">
+        </div>
+        <button type="submit">Create</button>
+    </div>
+</form>
+
+<div id="policy-table">
+{{if .Policies}}
+<table>
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Priority</th>
+            <th>Description</th>
+            <th>Effect</th>
+            <th>Actions</th>
+            <th>Repositories</th>
+            <th>Enabled</th>
+            <th>Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Policies}}
+        <tr id="policy-{{.Id}}">
+            <td>{{.Id}}</td>
+            <td>{{.Priority}}</td>
+            <td>{{.Description}}</td>
+            <td><span class="badge badge-{{.Effect}}">{{.Effect}}</span></td>
+            <td>{{joinStrings .Actions ", "}}</td>
+            <td>{{joinStrings .Repositories ", "}}</td>
+            <td>
+                {{if .Enabled}}
+                <span class="badge badge-enabled">Enabled</span>
+                {{else}}
+                <span class="badge badge-disabled">Disabled</span>
+                {{end}}
+            </td>
+            <td>
+                <form method="POST" action="/policies/{{.Id}}/toggle" style="display:inline;">
+                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
+                    <button type="submit" class="small secondary">
+                        {{if .Enabled}}Disable{{else}}Enable{{end}}
+                    </button>
+                </form>
+                <form method="POST" action="/policies/{{.Id}}/delete" style="display:inline;">
+                    <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
+                    <button type="submit" class="small danger">Delete</button>
+                </form>
+            </td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{else}}
+<p>No policy rules configured.</p>
+{{end}}
+</div>
+{{end}}

web/templates/repositories.html

@@ -0,0 +1,36 @@
+{{define "title"}}Repositories{{end}}
+
+{{define "content"}}
+<h1>Repositories</h1>
+
+{{if .Error}}
+<div class="error">{{.Error}}</div>
+{{end}}
+
+{{if .Repositories}}
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Tags</th>
+            <th>Manifests</th>
+            <th>Size</th>
+            <th>Created</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Repositories}}
+        <tr>
+            <td><a href="/repositories/{{.Name}}">{{.Name}}</a></td>
+            <td>{{.TagCount}}</td>
+            <td>{{.ManifestCount}}</td>
+            <td>{{formatSize .TotalSize}}</td>
+            <td>{{formatTime .CreatedAt}}</td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{else}}
+<p>No repositories found.</p>
+{{end}}
+{{end}}

web/templates/repository_detail.html

@@ -0,0 +1,74 @@
+{{define "title"}}{{.Name}}{{end}}
+
+{{define "content"}}
+<h1>{{.Name}}</h1>
+
+{{if .Error}}
+<div class="error">{{.Error}}</div>
+{{else}}
+
+<div class="stats">
+    <div class="stat-card">
+        <div class="label">Total Size</div>
+        <div class="value">{{formatSize .TotalSize}}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Tags</div>
+        <div class="value">{{len .Tags}}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Manifests</div>
+        <div class="value">{{len .Manifests}}</div>
+    </div>
+</div>
+
+<h2>Tags</h2>
+{{if .Tags}}
+<table>
+    <thead>
+        <tr>
+            <th>Tag</th>
+            <th>Digest</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Tags}}
+        <tr>
+            <td>{{.Name}}</td>
+            <td class="truncated"><a href="/repositories/{{$.Name}}/manifests/{{.Digest}}">{{truncate .Digest 24}}</a></td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{else}}
+<p>No tags.</p>
+{{end}}
+
+<h2>Manifests</h2>
+{{if .Manifests}}
+<table>
+    <thead>
+        <tr>
+            <th>Digest</th>
+            <th>Media Type</th>
+            <th>Size</th>
+            <th>Created</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .Manifests}}
+        <tr>
+            <td class="truncated"><a href="/repositories/{{$.Name}}/manifests/{{.Digest}}">{{truncate .Digest 24}}</a></td>
+            <td>{{.MediaType}}</td>
+            <td>{{formatSize .Size}}</td>
+            <td>{{formatTime .CreatedAt}}</td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{else}}
+<p>No manifests.</p>
+{{end}}
+
+{{end}}
+{{end}}