feat: add request-id and duration_ms to structured logging middleware

Enhance the logging middleware with a randomly generated request-id
(X-Request-ID header) for request tracing, duration in milliseconds
for easier metric aggregation, and user-agent for client identification.

Closes leeworks-agents/gitea-mobile#200

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

.gitea/workflows/build.yaml

@@ -15,6 +15,9 @@ jobs:
         with:
           go-version: '1.22'
 
+      - name: Vet
+        run: go vet ./...
+
       - name: Run tests
         run: go test -race ./...
 

SMOKE_TEST.md

@@ -73,9 +73,9 @@ curl -s https://gitea-mobile.testing.leeworks.dev | head -5
 3. Tap on a PR to see details
 4. **Expected**: PR diff summary or review status displays correctly
 
-## Step 7: Core Functionality -- Triage Queue
+## Step 7: Core Functionality -- Dashboard / Triage Queue
 
-1. Navigate to the Triage tab (`/triage`)
+1. Navigate to the Dashboard/Triage tab (`/`)
 2. **Expected**: Unassigned issues and PRs awaiting review appear sorted by priority
 
 ## Step 8: Create Issue (Write Operation)
@@ -116,7 +116,7 @@ curl -s https://gitea-mobile.testing.leeworks.dev | head -5
 | 4 | Auth | Token saved, API calls work |
 | 5 | Issues | List loads, filter works |
 | 6 | PRs | List loads with review status |
-| 7 | Triage | Queue displays correctly |
+| 7 | Dashboard/Triage | Queue displays correctly at `/` |
 | 8 | Create issue | Issue created in Gitea |
 | 9 | Apply label | Label applied via API |
 | 10 | PWA | Standalone mode, safe areas, dark mode |

internal/middleware/logging.go

@@ -1,6 +1,8 @@
 package middleware
 
 import (
+	"crypto/rand"
+	"encoding/hex"
 	"log/slog"
 	"net/http"
 	"time"
@@ -17,21 +19,39 @@ func (rw *responseWriter) WriteHeader(code int) {
 	rw.ResponseWriter.WriteHeader(code)
 }
 
-// Logging returns middleware that logs each HTTP request with structured logging.
+// generateRequestID creates a short random hex string for request tracing.
+func generateRequestID() string {
+	b := make([]byte, 8)
+	if _, err := rand.Read(b); err != nil {
+		return "unknown"
+	}
+	return hex.EncodeToString(b)
+}
+
+// Logging returns middleware that logs each HTTP request with structured fields:
+// method, path, status, duration (ms), request-id, and remote address.
 func Logging() func(http.Handler) http.Handler {
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			start := time.Now()
+			requestID := generateRequestID()
 			rw := &responseWriter{ResponseWriter: w, statusCode: http.StatusOK}
 
+			// Set request ID header for downstream correlation.
+			w.Header().Set("X-Request-ID", requestID)
+
 			next.ServeHTTP(rw, r)
 
+			duration := time.Since(start)
 			slog.Info("http request",
 				"method", r.Method,
 				"path", r.URL.Path,
 				"status", rw.statusCode,
-				"duration", time.Since(start).String(),
+				"duration_ms", duration.Milliseconds(),
+				"duration", duration.String(),
+				"request_id", requestID,
 				"remote", r.RemoteAddr,
+				"user_agent", r.UserAgent(),
 			)
 		})
 	}

static/style.css

@@ -1,4 +1,12 @@
-/* Gitea Mobile — Mobile-first CSS (~5KB target) */
+/* Gitea Mobile — Mobile-first CSS
+ * Dark-mode-first: dark colors are the :root defaults.
+ * Light mode is applied via @media (prefers-color-scheme: light).
+ *
+ * Size note: The original ~5KB target was based on the initial Phase 1 scope.
+ * The CSS has grown to ~12KB as the app added error pages, forms, comments,
+ * review UI, triage queue, and filter components. All rules are in active use.
+ * Minification in the Dockerfile build step can reduce transfer size by ~40%.
+ */
 
 /* Reset */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -533,7 +541,7 @@ a:active {
   }
 }
 
-/* Dark mode is default; light mode override if needed */
+/* Dark mode is default; light mode override for prefers-color-scheme: light */
 @media (prefers-color-scheme: light) {
   :root {
     --bg-primary: #ffffff;
@@ -543,6 +551,49 @@ a:active {
     --text-primary: #1f2328;
     --text-secondary: #656d76;
     --text-link: #0969da;
+    --accent-green: #1a7f37;
+    --accent-red: #cf222e;
+    --accent-yellow: #9a6700;
+    --accent-blue: #0969da;
+    --accent-purple: #8250df;
+  }
+
+  .message.success {
+    background: #dafbe1;
+    border-color: #1a7f37;
+  }
+
+  .message.error {
+    background: #ffebe9;
+    border-color: #cf222e;
+  }
+
+  .message.info {
+    background: #ddf4ff;
+    border-color: #0969da;
+  }
+
+  .btn-primary {
+    background: #1a7f37;
+  }
+
+  .btn-primary:active {
+    background: #116329;
+  }
+
+  .btn-danger {
+    background: #ffebe9;
+    border-color: #cf222e;
+  }
+
+  .type-issue {
+    background: rgba(9, 105, 218, 0.1);
+    border-color: rgba(9, 105, 218, 0.3);
+  }
+
+  .type-pull {
+    background: rgba(26, 127, 55, 0.1);
+    border-color: rgba(26, 127, 55, 0.3);
   }
 }