more styles

Reviewed-on: #10

.gitea/workflows/ci-cd.yaml

@@ -0,0 +1,146 @@
+name: CI/CD Pipeline
+
+on:
+  push:
+    branches:
+      - development
+      - main
+
+jobs:
+  build-app:
+    name: Build and Push App Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set environment variables
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "DOCKER_TAG=latest" >> $GITHUB_ENV
+            echo "ENVIRONMENT=prod" >> $GITHUB_ENV
+          else
+            echo "DOCKER_TAG=dev" >> $GITHUB_ENV
+            echo "ENVIRONMENT=dev" >> $GITHUB_ENV
+          fi
+
+      - name: Build and push app Docker image
+        run: |
+          docker login git.yohler.net -u ${{ github.actor }} -p ${{ secrets.PACKAGES_TOKEN }}
+
+          docker build \
+            -f Dockerfile \
+            -t git.yohler.net/kyle/flxn-app:${{ env.DOCKER_TAG }} \
+            -t git.yohler.net/kyle/flxn-app:${{ github.sha }} \
+            .
+
+          docker push git.yohler.net/kyle/flxn-app:${{ env.DOCKER_TAG }}
+          docker push git.yohler.net/kyle/flxn-app:${{ github.sha }}
+
+  build-pocketbase:
+    name: Build and Push PocketBase Docker Image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Check if PocketBase Dockerfile or migrations changed
+        id: check_changes
+        run: |
+          if [ "${{ github.event.before }}" == "0000000000000000000000000000000000000000" ] || ! git cat-file -e ${{ github.event.before }} 2>/dev/null; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          elif git diff --name-only ${{ github.event.before }} ${{ github.sha }} | grep -qE "(Dockerfile.pocketbase|pb_migrations/)"; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Build and push PocketBase Docker image
+        if: steps.check_changes.outputs.changed == 'true' || github.event.before == '0000000000000000000000000000000000000000'
+        run: |
+          docker login git.yohler.net -u ${{ github.actor }} -p ${{ secrets.PACKAGES_TOKEN }}
+
+          docker build \
+            -f Dockerfile.pocketbase \
+            -t git.yohler.net/kyle/flxn-pocketbase:latest \
+            -t git.yohler.net/kyle/flxn-pocketbase:${{ github.sha }} \
+            .
+
+          docker push git.yohler.net/kyle/flxn-pocketbase:latest
+          docker push git.yohler.net/kyle/flxn-pocketbase:${{ github.sha }}
+
+  deploy:
+    name: Deploy to Kubernetes
+    needs: [build-app, build-pocketbase]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: pin rancher host
+        run: echo "192.168.4.43 rancher.yohler.net" >> /etc/hosts
+
+      - name: Set environment variables
+        run: |
+          if [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "ENVIRONMENT=prod" >> $GITHUB_ENV
+            echo "NAMESPACE=flxn-prod" >> $GITHUB_ENV
+          else
+            echo "ENVIRONMENT=dev" >> $GITHUB_ENV
+            echo "NAMESPACE=flxn-dev" >> $GITHUB_ENV
+          fi
+
+      - name: Install kubectl
+        run: |
+          curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
+          chmod +x kubectl
+          mv kubectl /usr/local/bin/
+
+      - name: Configure kubectl
+        run: |
+          mkdir -p $HOME/.kube
+          echo "${{ secrets.KUBE_CONFIG }}" | base64 -d > $HOME/.kube/config
+          chmod 600 $HOME/.kube/config
+          kubectl config set-cluster local --insecure-skip-tls-verify=true
+
+      - name: Verify kubectl access
+        run: |
+          kubectl version --client
+          kubectl get nodes
+
+      - name: Deploy shared services (SuperTokens)
+        run: |
+          kubectl apply -k k8s/overlays/shared/
+
+      - name: Deploy to ${{ env.ENVIRONMENT }}
+        run: |
+          kubectl apply -k k8s/overlays/${{ env.ENVIRONMENT }}/
+
+      - name: Force rollout to pull latest image
+        run: |
+          kubectl rollout restart deployment/flxn-app -n ${{ env.NAMESPACE }}
+          kubectl rollout restart deployment/flxn-pocketbase -n ${{ env.NAMESPACE }}
+
+      - name: Wait for rollout
+        run: |
+          kubectl rollout status deployment/flxn-app -n ${{ env.NAMESPACE }} --timeout=5m
+          kubectl rollout status deployment/flxn-pocketbase -n ${{ env.NAMESPACE }} --timeout=5m
+
+      - name: Verify deployment
+        run: |
+          kubectl get pods -n ${{ env.NAMESPACE }} -l app=flxn
+          kubectl get svc -n ${{ env.NAMESPACE }} -l app=flxn
+          kubectl get ingress -n ${{ env.NAMESPACE }}
+
+      - name: Check app health
+        run: |
+          sleep 15
+          APP_POD=$(kubectl get pod -n ${{ env.NAMESPACE }} -l component=app -o jsonpath='{.items[0].metadata.name}')
+          kubectl exec -n ${{ env.NAMESPACE }} $APP_POD -- wget -O- http://localhost:3000/api/health || echo "Health check failed (endpoint may not exist yet)"
+
+      - name: Check PocketBase health
+        run: |
+          PB_POD=$(kubectl get pod -n ${{ env.NAMESPACE }} -l component=pocketbase -o jsonpath='{.items[0].metadata.name}')
+          kubectl exec -n ${{ env.NAMESPACE }} $PB_POD -- wget -O- http://localhost:8090/api/health || echo "PocketBase health check completed"

.gitignore

@@ -17,7 +17,7 @@ yarn.lock
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-/scripts/
+/_scripts/
 /pb_data/
 /.tanstack/
 /dist/

Dockerfile

@@ -0,0 +1,28 @@
+FROM oven/bun:1 AS builder
+
+WORKDIR /app
+
+COPY package.json bun.lock ./
+
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+RUN bun run build
+
+FROM oven/bun:1-alpine AS runtime
+
+WORKDIR /app
+
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/server.ts ./server.ts
+
+EXPOSE 3000
+
+ENV NODE_ENV=production
+ENV PORT=3000
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD bun -e "fetch('http://localhost:3000/api/health').then(r => r.ok ? process.exit(0) : process.exit(1)).catch(() => process.exit(1))"
+
+CMD ["bun", "run", "server.ts"]

Dockerfile.pocketbase

@@ -1,16 +1,23 @@
 FROM alpine:latest
 
-ARG PB_VERSION=0.29.2
+ARG PB_VERSION=0.26.5
 
 RUN apk add --no-cache \
     unzip \
     ca-certificates
 
-# download and unzip PocketBase
 ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
-RUN unzip /tmp/pb.zip -d /pb/
+RUN unzip /tmp/pb.zip -d /pb/ && \
+    rm /tmp/pb.zip && \
+    chmod +x /pb/pocketbase
+
+RUN mkdir -p /pb/pb_data
+
+COPY pb_migrations /pb/pb_migrations
 
 EXPOSE 8090
 
-# start PocketBase
-CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090"]
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:8090/api/health || exit 1
+
+CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8090", "--dir=/pb/pb_data", "--migrationsDir=/pb/pb_migrations"]

docker-compose.yml

@@ -13,7 +13,6 @@ services:
       - .env.docker
     volumes:
       - postgres-data:/var/lib/postgresql/data
-      - ./.docker-postgres-init:/docker-entrypoint-initdb.d
     networks:
       - app-network
 

k8s/base/app-deployment.yaml

@@ -0,0 +1,129 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: flxn-app
+  labels:
+    app: flxn
+    component: app
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: app
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: app
+    spec:
+      containers:
+      - name: flxn-app
+        image: git.yohler.net/kyle/flxn-app:latest
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 3000
+          name: http
+          protocol: TCP
+        env:
+        - name: VITE_API_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_api_domain
+        - name: VITE_WEBSITE_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_website_domain
+        - name: SUPERTOKENS_URI
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: supertokens_uri
+        - name: POCKETBASE_URL
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: pocketbase_url
+        - name: SUPERTOKENS_API_KEY
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: supertokens_api_key
+        - name: PORT
+          value: "3000"
+        - name: NODE_ENV
+          value: "production"
+
+        - name: TWILIO_ACCOUNT_SID
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_account_sid
+        - name: TWILIO_AUTH_TOKEN
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_auth_token
+        - name: TWILIO_SERVICE_SID
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: twilio_service_sid
+        - name: POCKETBASE_ADMIN_EMAIL
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: pocketbase_admin_email
+        - name: POCKETBASE_ADMIN_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: pocketbase_admin_password
+        - name: VITE_SPOTIFY_CLIENT_ID
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_spotify_client_id
+        - name: SPOTIFY_CLIENT_SECRET
+          valueFrom:
+            secretKeyRef:
+              name: flxn-secrets
+              key: spotify_client_secret
+        - name: VITE_SPOTIFY_REDIRECT_URI
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: vite_spotify_redirect_uri
+        - name: COOKIE_DOMAIN
+          valueFrom:
+            configMapKeyRef:
+              name: flxn-config
+              key: cookie_domain
+
+        resources:
+          requests:
+            memory: "768Mi"
+            cpu: "250m"
+          limits:
+            memory: "1536Mi"
+            cpu: "1000m"
+
+        livenessProbe:
+          httpGet:
+            path: /api/health
+            port: 3000
+          initialDelaySeconds: 30
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+
+        readinessProbe:
+          httpGet:
+            path: /api/health
+            port: 3000
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3

k8s/base/app-service.yaml

@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: flxn-app
+  labels:
+    app: flxn
+    component: app
+spec:
+  type: ClusterIP
+  ports:
+  - port: 3000
+    targetPort: 3000
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: app

k8s/base/kustomization.yaml

@@ -0,0 +1,12 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+resources:
+- app-deployment.yaml
+- app-service.yaml
+- pocketbase-deployment.yaml
+- pocketbase-service.yaml
+- pb-data-pvc.yaml
+
+commonLabels:
+  app: flxn

k8s/base/pb-data-pvc.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: flxn-pb-data
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  accessModes:
+  - ReadWriteOnce
+  resources:
+    requests:
+      storage: 10Gi

k8s/base/pocketbase-deployment.yaml

@@ -0,0 +1,57 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: flxn-pocketbase
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: pocketbase
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: pocketbase
+    spec:
+      containers:
+      - name: pocketbase
+        image: git.yohler.net/kyle/flxn-pocketbase:latest
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 8090
+          name: http
+          protocol: TCP
+        volumeMounts:
+        - name: pb-data
+          mountPath: /pb/pb_data
+        resources:
+          requests:
+            memory: "256Mi"
+            cpu: "100m"
+          limits:
+            memory: "512Mi"
+            cpu: "500m"
+        livenessProbe:
+          httpGet:
+            path: /api/health
+            port: 8090
+          initialDelaySeconds: 10
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+        readinessProbe:
+          httpGet:
+            path: /api/health
+            port: 8090
+          initialDelaySeconds: 5
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3
+      volumes:
+      - name: pb-data
+        persistentVolumeClaim:
+          claimName: flxn-pb-data

k8s/base/pocketbase-service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: flxn-pocketbase
+  labels:
+    app: flxn
+    component: pocketbase
+spec:
+  type: NodePort
+  ports:
+  - port: 8090
+    targetPort: 8090
+    nodePort: 30090
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: pocketbase

k8s/overlays/dev/configmap.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: flxn-config
+  namespace: flxn-dev
+data:
+  vite_api_domain: "https://dev.flexxon.app"
+  vite_website_domain: "https://dev.flexxon.app"
+  supertokens_uri: "http://192.168.4.43:30568"
+  pocketbase_url: "http://192.168.4.43:30096"
+  vite_spotify_client_id: "3ffde6b594e84460b3d4b329b8919277"
+  vite_spotify_redirect_uri: "https://dev.flexxon.app/api/spotify/callback"
+  s3_endpoint: "https://s3.yohler.net"
+  s3_bucket: "flxn-dev"
+  cookie_domain: "dev.flexxon.app"

k8s/overlays/dev/ingress.yaml

@@ -0,0 +1,17 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: flxn-app
+  namespace: flxn-dev
+spec:
+  rules:
+  - host: dev.flexxon.app
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: flxn-app
+            port:
+              number: 3000

k8s/overlays/dev/kustomization.yaml

@@ -0,0 +1,50 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-dev
+
+resources:
+- namespace.yaml
+- ../../base
+- configmap.yaml
+- ingress.yaml
+
+images:
+- name: git.yohler.net/kyle/flxn-app
+  newTag: dev
+- name: git.yohler.net/kyle/flxn-pocketbase
+  newTag: latest
+
+commonLabels:
+  environment: dev
+
+patches:
+- patch: |-
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/requests/memory
+      value: "768Mi"
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/limits/memory
+      value: "1536Mi"
+  target:
+    kind: Deployment
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/type
+      value: NodePort
+    - op: add
+      path: /spec/ports/0/nodePort
+      value: 30083
+  target:
+    kind: Service
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/ports/0/nodePort
+      value: 30096
+  target:
+    kind: Service
+    name: flxn-pocketbase

k8s/overlays/dev/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-dev

k8s/overlays/prod/configmap.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: flxn-config
+  namespace: flxn-prod
+data:
+  vite_api_domain: "https://flexxon.app"
+  vite_website_domain: "https://flexxon.app"
+  supertokens_uri: "http://192.168.4.43:30568"
+  pocketbase_url: "http://192.168.4.43:30097"
+  vite_spotify_client_id: "3ffde6b594e84460b3d4b329b8919277"
+  vite_spotify_redirect_uri: "https://flexxon.app/api/spotify/callback"
+  s3_endpoint: "https://s3.yohler.net"
+  s3_bucket: "flxn-prod"
+  cookie_domain: "flexxon.app"

k8s/overlays/prod/ingress.yaml

@@ -0,0 +1,17 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: flxn-app
+  namespace: flxn-prod
+spec:
+  rules:
+  - host: flexxon.app
+    http:
+      paths:
+      - path: /
+        pathType: Prefix
+        backend:
+          service:
+            name: flxn-app
+            port:
+              number: 3000

k8s/overlays/prod/kustomization.yaml

@@ -0,0 +1,50 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-prod
+
+resources:
+- namespace.yaml
+- ../../base
+- configmap.yaml
+- ingress.yaml
+
+images:
+- name: git.yohler.net/kyle/flxn-app
+  newTag: latest
+- name: git.yohler.net/kyle/flxn-pocketbase
+  newTag: latest
+
+commonLabels:
+  environment: prod
+
+patches:
+- patch: |-
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/requests/memory
+      value: "1536Mi"
+    - op: replace
+      path: /spec/template/spec/containers/0/resources/limits/memory
+      value: "3Gi"
+  target:
+    kind: Deployment
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/type
+      value: NodePort
+    - op: add
+      path: /spec/ports/0/nodePort
+      value: 30084
+  target:
+    kind: Service
+    name: flxn-app
+
+- patch: |-
+    - op: replace
+      path: /spec/ports/0/nodePort
+      value: 30097
+  target:
+    kind: Service
+    name: flxn-pocketbase

k8s/overlays/prod/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-prod

k8s/overlays/shared/configmap.yaml

@@ -0,0 +1,5 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: supertokens-config
+  namespace: flxn-shared

k8s/overlays/shared/kustomization.yaml

@@ -0,0 +1,16 @@
+apiVersion: kustomize.config.k8s.io/v1beta1
+kind: Kustomization
+
+namespace: flxn-shared
+
+resources:
+- namespace.yaml
+- supertokens-deployment.yaml
+- supertokens-service.yaml
+- supertokens-postgres-deployment.yaml
+- supertokens-postgres-service.yaml
+- supertokens-db-pvc.yaml
+
+labels:
+- pairs:
+    environment: shared

k8s/overlays/shared/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: flxn-shared

k8s/overlays/shared/supertokens-db-pvc.yaml

@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+  name: supertokens-db-data
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  accessModes:
+  - ReadWriteOnce
+  resources:
+    requests:
+      storage: 2Gi

k8s/overlays/shared/supertokens-deployment.yaml

@@ -0,0 +1,71 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: supertokens
+  labels:
+    app: flxn
+    component: supertokens
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: supertokens
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: supertokens
+    spec:
+      enableServiceLinks: false
+      containers:
+      - name: supertokens
+        image: registry.supertokens.io/supertokens/supertokens-postgresql:latest
+        ports:
+        - containerPort: 3567
+          name: http
+          protocol: TCP
+        env:
+        - name: PORT
+          value: "3567"
+        - name: POSTGRESQL_USER
+          value: supertokens
+        - name: POSTGRESQL_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: postgres_password
+        - name: POSTGRESQL_HOST
+          value: supertokens-db
+        - name: POSTGRESQL_PORT
+          value: "5432"
+        - name: POSTGRESQL_DATABASE_NAME
+          value: supertokens
+        - name: API_KEYS
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: api_keys
+        resources:
+          requests:
+            memory: "256Mi"
+            cpu: "100m"
+          limits:
+            memory: "512Mi"
+            cpu: "500m"
+        livenessProbe:
+          httpGet:
+            path: /hello
+            port: 3567
+          initialDelaySeconds: 30
+          periodSeconds: 30
+          timeoutSeconds: 5
+          failureThreshold: 3
+        readinessProbe:
+          httpGet:
+            path: /hello
+            port: 3567
+          initialDelaySeconds: 10
+          periodSeconds: 10
+          timeoutSeconds: 3
+          failureThreshold: 3

k8s/overlays/shared/supertokens-postgres-deployment.yaml

@@ -0,0 +1,68 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: supertokens-db
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: flxn
+      component: supertokens-db
+  template:
+    metadata:
+      labels:
+        app: flxn
+        component: supertokens-db
+    spec:
+      containers:
+      - name: postgres
+        image: postgres:16-alpine
+        ports:
+        - containerPort: 5432
+          name: postgres
+          protocol: TCP
+        env:
+        - name: POSTGRES_USER
+          value: "supertokens"
+        - name: POSTGRES_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: supertokens-secrets
+              key: postgres_password
+        - name: POSTGRES_DB
+          value: "supertokens"
+        - name: PGDATA
+          value: "/var/lib/postgresql/data/pgdata"
+        volumeMounts:
+        - name: postgres-data
+          mountPath: /var/lib/postgresql/data
+        resources:
+          requests:
+            memory: "128Mi"
+            cpu: "50m"
+          limits:
+            memory: "256Mi"
+            cpu: "500m"
+        livenessProbe:
+          exec:
+            command:
+            - pg_isready
+            - -U
+            - supertokens
+          initialDelaySeconds: 30
+          periodSeconds: 10
+        readinessProbe:
+          exec:
+            command:
+            - pg_isready
+            - -U
+            - supertokens
+          initialDelaySeconds: 5
+          periodSeconds: 5
+      volumes:
+      - name: postgres-data
+        persistentVolumeClaim:
+          claimName: supertokens-db-data

k8s/overlays/shared/supertokens-postgres-service.yaml

@@ -0,0 +1,17 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: supertokens-db
+  labels:
+    app: flxn
+    component: supertokens-db
+spec:
+  type: ClusterIP
+  ports:
+  - port: 5432
+    targetPort: 5432
+    protocol: TCP
+    name: postgres
+  selector:
+    app: flxn
+    component: supertokens-db

k8s/overlays/shared/supertokens-service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: supertokens
+  labels:
+    app: flxn
+    component: supertokens
+spec:
+  type: NodePort
+  ports:
+  - port: 3567
+    targetPort: 3567
+    nodePort: 30568
+    protocol: TCP
+    name: http
+  selector:
+    app: flxn
+    component: supertokens

package.json

@@ -5,66 +5,53 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev --host 0.0.0.0",
-    "build": "vite build && tsc --noEmit",
-    "start": "bun run .output/server/index.mjs",
-    "start:node": "node .output/server/index.mjs"
+    "build": "vite build && tsc --noEmit && bun scripts/generate-sw.mjs",
+    "start": "bun run server.ts"
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
     "@mantine/carousel": "^8.2.4",
-    "@mantine/charts": "^8.2.4",
     "@mantine/core": "^8.2.4",
     "@mantine/dates": "^8.2.4",
     "@mantine/form": "^8.2.4",
     "@mantine/hooks": "^8.2.4",
     "@mantine/tiptap": "^8.2.4",
     "@phosphor-icons/react": "^2.1.10",
-    "@svgmoji/noto": "^3.2.0",
     "@tanstack/react-devtools": "^0.7.6",
-    "@tanstack/react-query": "^5.66.0",
-    "@tanstack/react-query-devtools": "^5.66.0",
-    "@tanstack/react-router": "^1.130.12",
-    "@tanstack/react-router-devtools": "^1.130.13",
-    "@tanstack/react-router-with-query": "^1.130.12",
-    "@tanstack/react-start": "^1.132.2",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-query": "^5.101.2",
+    "@tanstack/react-query-devtools": "^5.101.2",
+    "@tanstack/react-router": "^1.170.17",
+    "@tanstack/react-router-devtools": "^1.167.0",
+    "@tanstack/react-router-ssr-query": "^1.167.1",
+    "@tanstack/react-start": "^1.168.27",
     "@tiptap/pm": "^3.4.3",
     "@tiptap/react": "^3.4.3",
     "@tiptap/starter-kit": "^3.4.3",
     "@types/bun": "^1.2.22",
-    "@types/ioredis": "^4.28.10",
     "browser-image-compression": "^2.0.2",
     "dotenv": "^17.2.2",
     "embla-carousel-react": "^8.6.0",
+    "facehash": "^0.0.7",
     "framer-motion": "^12.23.12",
-    "ioredis": "^5.7.0",
-    "pg": "^8.16.3",
     "pocketbase": "^0.26.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-imask": "^7.6.1",
-    "react-scan": "^0.4.3",
-    "react-use-draggable-scroll": "^0.4.7",
-    "recharts": "^3.1.2",
     "redaxios": "^0.5.1",
     "sonner": "^2.0.7",
     "supertokens-node": "^23.0.1",
     "supertokens-web-js": "^0.15.0",
     "twilio": "^5.8.0",
     "vaul": "^1.1.2",
-    "xlsx": "^0.18.5",
-    "zod": "^4.0.15",
-    "zustand": "^5.0.7"
+    "zod": "^4.0.15"
   },
   "devDependencies": {
-    "@tanstack/react-router-ssr-query": "^1.132.2",
-    "@tanstack/router-plugin": "^1.132.2",
     "@types/node": "^22.5.4",
-    "@types/pg": "^8.15.5",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.0",
     "autoprefixer": "^10.4.20",
+    "babel-plugin-react-compiler": "^1.0.0",
     "dotenv-cli": "^10.0.0",
     "postcss": "^8.5.1",
     "postcss-preset-mantine": "^1.18.0",
@@ -72,6 +59,7 @@
     "tsx": "^4.20.3",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "workbox-build": "^7.4.1"
   }
 }

pb_migrations/1759344938_deleted_player_badge_progress.js

@@ -1,8 +1,12 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
-  const collection = app.findCollectionByNameOrId("pbc_4251874343");
-
-  return app.delete(collection);
+  try {
+    const collection = app.findCollectionByNameOrId("pbc_4251874343");
+    return app.delete(collection);
+  } catch (e) {
+    console.log("Collection pbc_4251874343 not found, skipping deletion");
+    return null;
+  }
 }, (app) => {
   const collection = new Collection({
     "createRule": null,

pb_migrations/1771294794_created_groups.js

@@ -0,0 +1,109 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = new Collection({
+    "createRule": null,
+    "deleteRule": null,
+    "fields": [
+      {
+        "autogeneratePattern": "[a-z0-9]{15}",
+        "hidden": false,
+        "id": "text3208210256",
+        "max": 15,
+        "min": 15,
+        "name": "id",
+        "pattern": "^[a-z0-9]+$",
+        "presentable": false,
+        "primaryKey": true,
+        "required": true,
+        "system": true,
+        "type": "text"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_340646327",
+        "hidden": false,
+        "id": "relation3177167065",
+        "maxSelect": 1,
+        "minSelect": 0,
+        "name": "tournament",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "autogeneratePattern": "",
+        "hidden": false,
+        "id": "text1579384326",
+        "max": 0,
+        "min": 0,
+        "name": "name",
+        "pattern": "",
+        "presentable": false,
+        "primaryKey": false,
+        "required": false,
+        "system": false,
+        "type": "text"
+      },
+      {
+        "hidden": false,
+        "id": "number4113142680",
+        "max": null,
+        "min": null,
+        "name": "order",
+        "onlyInt": false,
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "number"
+      },
+      {
+        "cascadeDelete": false,
+        "collectionId": "pbc_1568971955",
+        "hidden": false,
+        "id": "relation2529305176",
+        "maxSelect": 999,
+        "minSelect": 0,
+        "name": "teams",
+        "presentable": false,
+        "required": false,
+        "system": false,
+        "type": "relation"
+      },
+      {
+        "hidden": false,
+        "id": "autodate2990389176",
+        "name": "created",
+        "onCreate": true,
+        "onUpdate": false,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      },
+      {
+        "hidden": false,
+        "id": "autodate3332085495",
+        "name": "updated",
+        "onCreate": true,
+        "onUpdate": true,
+        "presentable": false,
+        "system": false,
+        "type": "autodate"
+      }
+    ],
+    "id": "pbc_3346940990",
+    "indexes": [],
+    "listRule": null,
+    "name": "groups",
+    "system": false,
+    "type": "base",
+    "updateRule": null,
+    "viewRule": null
+  });
+
+  return app.save(collection);
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_3346940990");
+
+  return app.delete(collection);
+})

pb_migrations/1771294861_updated_tournaments.js

@@ -0,0 +1,52 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("select3736761055")
+
+  // add field
+  collection.fields.addAt(13, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text3736761055",
+    "max": 0,
+    "min": 0,
+    "name": "format",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(13, new Field({
+    "hidden": false,
+    "id": "select3736761055",
+    "maxSelect": 1,
+    "name": "format",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "select",
+    "values": [
+      "single_elim",
+      "double_elim",
+      "groups",
+      "swiss",
+      "swiss_bracket",
+      "round_robin"
+    ]
+  }))
+
+  // remove field
+  collection.fields.removeById("text3736761055")
+
+  return app.save(collection)
+})

pb_migrations/1771294883_updated_tournaments.js

@@ -0,0 +1,25 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(14, new Field({
+    "hidden": false,
+    "id": "json118290348",
+    "maxSize": 0,
+    "name": "group_config",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "json"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("json118290348")
+
+  return app.save(collection)
+})

pb_migrations/1771294898_updated_tournaments.js

@@ -0,0 +1,29 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // add field
+  collection.fields.addAt(15, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text2982008523",
+    "max": 0,
+    "min": 0,
+    "name": "phase",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_340646327")
+
+  // remove field
+  collection.fields.removeById("text2982008523")
+
+  return app.save(collection)
+})

pb_migrations/1771295070_updated_matches.js

@@ -0,0 +1,47 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2541054544")
+
+  // add field
+  collection.fields.addAt(22, new Field({
+    "cascadeDelete": false,
+    "collectionId": "pbc_3346940990",
+    "hidden": false,
+    "id": "relation1841317061",
+    "maxSelect": 1,
+    "minSelect": 0,
+    "name": "group",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "relation"
+  }))
+
+  // add field
+  collection.fields.addAt(23, new Field({
+    "autogeneratePattern": "",
+    "hidden": false,
+    "id": "text3987859035",
+    "max": 0,
+    "min": 0,
+    "name": "match_type",
+    "pattern": "",
+    "presentable": false,
+    "primaryKey": false,
+    "required": false,
+    "system": false,
+    "type": "text"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_2541054544")
+
+  // remove field
+  collection.fields.removeById("relation1841317061")
+
+  // remove field
+  collection.fields.removeById("text3987859035")
+
+  return app.save(collection)
+})

public/site.webmanifest

@@ -1,17 +1,28 @@
 {
-  "name": "FLXN IX",
   "short_name": "FLXN",
+  "name": "FLXN",
+  "description": "Amicus meus madidus",
   "icons": [
     {
-      "src": "/favicon.png",
+      "src": "/icon-192x192.png",
+      "type": "image/png",
       "sizes": "192x192",
-      "type": "image/png"
+      "purpose": "any maskable"
     },
     {
-      "src": "/favicon.png",
+      "src": "/icon-512x512.png",
+      "type": "image/png",
       "sizes": "512x512",
-      "type": "image/png"
+      "purpose": "any maskable"
     }
   ],
-  "display": "standalone"
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#242424",
+  "background_color": "#242424",
+  "orientation": "portrait-primary",
+  "scope": "/",
+  "categories": ["games", "social", "beer pong"],
+  "prefer_related_applications": false,
+  "shortcuts": []
 }

public/styles.css

@@ -29,3 +29,27 @@
 [data-drawer-level="3"].drawer-scaling {
   transform: scale(0.90) translateY(-4px);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .app,
+  [data-drawer-level] {
+    transition: none;
+  }
+
+  .app.drawer-scaling,
+  [data-drawer-level].drawer-scaling {
+    transform: none;
+    border-radius: 0;
+  }
+
+  [data-vaul-drawer],
+  [data-vaul-overlay] {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(0deg); }
+  }
+}

scripts/generate-sw.mjs

@@ -0,0 +1,73 @@
+import { generateSW } from 'workbox-build'
+
+const ONE_YEAR = 60 * 60 * 24 * 365
+const THIRTY_DAYS = 60 * 60 * 24 * 30
+
+const { count, size, warnings } = await generateSW({
+  swDest: 'dist/client/sw.js',
+  globDirectory: 'dist/client',
+  globPatterns: [
+    'assets/**/*.{js,css}',
+    'favicon*.{ico,png}',
+    'apple-touch-icon.png',
+    'icon-192x192.png',
+    'icon-512x512.png',
+    'site.webmanifest',
+    'styles.css',
+  ],
+  navigateFallback: null,
+  skipWaiting: true,
+  clientsClaim: true,
+  cleanupOutdatedCaches: true,
+  sourcemap: false,
+  runtimeCaching: [
+    {
+      urlPattern: ({ url, request }) =>
+        url.origin === self.location.origin && request.destination === 'image',
+      handler: 'CacheFirst',
+      options: {
+        cacheName: 'images-cache',
+        expiration: {
+          maxEntries: 60,
+          maxAgeSeconds: THIRTY_DAYS,
+        },
+        cacheableResponse: {
+          statuses: [0, 200],
+        },
+      },
+    },
+    {
+      urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+      handler: 'StaleWhileRevalidate',
+      options: {
+        cacheName: 'google-fonts-cache',
+        expiration: {
+          maxEntries: 10,
+          maxAgeSeconds: ONE_YEAR,
+        },
+        cacheableResponse: {
+          statuses: [0, 200],
+        },
+      },
+    },
+    {
+      urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+      handler: 'CacheFirst',
+      options: {
+        cacheName: 'gstatic-fonts-cache',
+        expiration: {
+          maxEntries: 10,
+          maxAgeSeconds: ONE_YEAR,
+        },
+        cacheableResponse: {
+          statuses: [0, 200],
+        },
+      },
+    },
+  ],
+})
+
+for (const warning of warnings) console.warn(warning)
+console.log(
+  `sw.js generated: precached ${count} files, ${(size / 1024).toFixed(1)} KiB`,
+)

server.ts

@@ -16,73 +16,133 @@
  *   - Server port number
  *   - Default: 3000
  *
- * STATIC_PRELOAD_MAX_BYTES (number)
+ * ASSET_PRELOAD_MAX_SIZE (number)
  *   - Maximum file size in bytes to preload into memory
  *   - Files larger than this will be served on-demand from disk
  *   - Default: 5242880 (5MB)
- *   - Example: STATIC_PRELOAD_MAX_BYTES=5242880 (5MB)
+ *   - Example: ASSET_PRELOAD_MAX_SIZE=5242880 (5MB)
  *
- * STATIC_PRELOAD_INCLUDE (string)
+ * ASSET_PRELOAD_INCLUDE_PATTERNS (string)
  *   - Comma-separated list of glob patterns for files to include
  *   - If specified, only matching files are eligible for preloading
  *   - Patterns are matched against filenames only, not full paths
- *   - Example: STATIC_PRELOAD_INCLUDE="*.js,*.css,*.woff2"
+ *   - Example: ASSET_PRELOAD_INCLUDE_PATTERNS="*.js,*.css,*.woff2"
  *
- * STATIC_PRELOAD_EXCLUDE (string)
+ * ASSET_PRELOAD_EXCLUDE_PATTERNS (string)
  *   - Comma-separated list of glob patterns for files to exclude
  *   - Applied after include patterns
  *   - Patterns are matched against filenames only, not full paths
- *   - Example: STATIC_PRELOAD_EXCLUDE="*.map,*.txt"
+ *   - Example: ASSET_PRELOAD_EXCLUDE_PATTERNS="*.map,*.txt"
  *
- * STATIC_PRELOAD_VERBOSE (boolean)
+ * ASSET_PRELOAD_VERBOSE_LOGGING (boolean)
  *   - Enable detailed logging of loaded and skipped files
  *   - Default: false
  *   - Set to "true" to enable verbose output
  *
+ * ASSET_PRELOAD_ENABLE_ETAG (boolean)
+ *   - Enable ETag generation for preloaded assets
+ *   - Default: true
+ *   - Set to "false" to disable ETag support
+ *
+ * ASSET_PRELOAD_ENABLE_GZIP (boolean)
+ *   - Enable Gzip compression for eligible assets
+ *   - Default: true
+ *   - Set to "false" to disable Gzip compression
+ *
+ * ASSET_PRELOAD_GZIP_MIN_SIZE (number)
+ *   - Minimum file size in bytes required for Gzip compression
+ *   - Files smaller than this will not be compressed
+ *   - Default: 1024 (1KB)
+ *
+ * ASSET_PRELOAD_GZIP_MIME_TYPES (string)
+ *   - Comma-separated list of MIME types eligible for Gzip compression
+ *   - Supports partial matching for types ending with "/"
+ *   - Default: text/,application/javascript,application/json,application/xml,image/svg+xml
+ *
  * Usage:
  *   bun run server.ts
  */
 
-import { readdir } from 'node:fs/promises'
-import { join } from 'node:path'
+import path from 'node:path'
 
 // Configuration
-const PORT = Number(process.env.PORT ?? 3000)
-const CLIENT_DIR = './dist/client'
-const SERVER_ENTRY = './dist/server/server.js'
+const SERVER_PORT = Number(process.env.PORT ?? 3000)
+const CLIENT_DIRECTORY = './dist/client'
+const SERVER_ENTRY_POINT = './dist/server/server.js'
+
+// Logging utilities for professional output
+const log = {
+  info: (message: string) => {
+    console.log(`[INFO] ${message}`)
+  },
+  success: (message: string) => {
+    console.log(`[SUCCESS] ${message}`)
+  },
+  warning: (message: string) => {
+    console.log(`[WARNING] ${message}`)
+  },
+  error: (message: string) => {
+    console.log(`[ERROR] ${message}`)
+  },
+  header: (message: string) => {
+    console.log(`\n${message}\n`)
+  },
+}
 
 // Preloading configuration from environment variables
 const MAX_PRELOAD_BYTES = Number(
-  process.env.STATIC_PRELOAD_MAX_BYTES ?? 5 * 1024 * 1024, // 5MB default
+  process.env.ASSET_PRELOAD_MAX_SIZE ?? 5 * 1024 * 1024, // 5MB default
 )
 
 // Parse comma-separated include patterns (no defaults)
-const INCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_INCLUDE ?? '')
+const INCLUDE_PATTERNS = (process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? '')
   .split(',')
   .map((s) => s.trim())
   .filter(Boolean)
-  .map(globToRegExp)
+  .map((pattern: string) => convertGlobToRegExp(pattern))
 
 // Parse comma-separated exclude patterns (no defaults)
-const EXCLUDE_PATTERNS = (process.env.STATIC_PRELOAD_EXCLUDE ?? '')
+const EXCLUDE_PATTERNS = (process.env.ASSET_PRELOAD_EXCLUDE_PATTERNS ?? '')
   .split(',')
   .map((s) => s.trim())
   .filter(Boolean)
-  .map(globToRegExp)
+  .map((pattern: string) => convertGlobToRegExp(pattern))
 
 // Verbose logging flag
-const VERBOSE = process.env.STATIC_PRELOAD_VERBOSE === 'true'
+const VERBOSE = process.env.ASSET_PRELOAD_VERBOSE_LOGGING === 'true'
+
+// Optional ETag feature
+const ENABLE_ETAG = (process.env.ASSET_PRELOAD_ENABLE_ETAG ?? 'true') === 'true'
+
+// Optional Gzip feature
+const ENABLE_GZIP = (process.env.ASSET_PRELOAD_ENABLE_GZIP ?? 'true') === 'true'
+const GZIP_MIN_BYTES = Number(process.env.ASSET_PRELOAD_GZIP_MIN_SIZE ?? 1024) // 1KB
+const GZIP_TYPES = (
+  process.env.ASSET_PRELOAD_GZIP_MIME_TYPES ??
+  'text/,application/javascript,application/json,application/xml,image/svg+xml'
+)
+  .split(',')
+  .map((v) => v.trim())
+  .filter(Boolean)
 
 /**
  * Convert a simple glob pattern to a regular expression
  * Supports * wildcard for matching any characters
  */
-function globToRegExp(glob: string): RegExp {
+function convertGlobToRegExp(globPattern: string): RegExp {
   // Escape regex special chars except *, then replace * with .*
-  const escaped = glob
+  const escapedPattern = globPattern
     .replace(/[-/\\^$+?.()|[\]{}]/g, '\\$&')
     .replace(/\*/g, '.*')
-  return new RegExp(`^${escaped}$`, 'i')
+  return new RegExp(`^${escapedPattern}$`, 'i')
+}
+
+/**
+ * Compute ETag for a given data buffer
+ */
+function computeEtag(data: Uint8Array): string {
+  const hash = Bun.hash(data)
+  return `W/"${hash.toString(16)}-${data.byteLength.toString()}"`
 }
 
 /**
@@ -95,18 +155,30 @@ interface AssetMetadata {
 }
 
 /**
- * Result of static asset preloading process
+ * In-memory asset with ETag and Gzip support
  */
-interface PreloadResult {
-  routes: Record<string, () => Response>
-  loaded: Array<AssetMetadata>
-  skipped: Array<AssetMetadata>
+interface InMemoryAsset {
+  raw: Uint8Array
+  gz?: Uint8Array
+  etag?: string
+  type: string
+  immutable: boolean
+  size: number
 }
 
 /**
- * Check if a file should be included based on configured patterns
+ * Result of static asset preloading process
  */
-function shouldInclude(relativePath: string): boolean {
+interface PreloadResult {
+  routes: Record<string, (req: Request) => Response | Promise<Response>>
+  loaded: AssetMetadata[]
+  skipped: AssetMetadata[]
+}
+
+/**
+ * Check if a file is eligible for preloading based on configured patterns
+ */
+function isFileEligibleForPreloading(relativePath: string): boolean {
   const fileName = relativePath.split(/[/\\]/).pop() ?? relativePath
 
   // If include patterns are specified, file must match at least one
@@ -125,38 +197,122 @@ function shouldInclude(relativePath: string): boolean {
 }
 
 /**
- * Build static routes with intelligent preloading strategy
+ * Check if a MIME type is compressible
+ */
+function isMimeTypeCompressible(mimeType: string): boolean {
+  return GZIP_TYPES.some((type) =>
+    type.endsWith('/') ? mimeType.startsWith(type) : mimeType === type,
+  )
+}
+
+/**
+ * Conditionally compress data based on size and MIME type
+ */
+function compressDataIfAppropriate(
+  data: Uint8Array,
+  mimeType: string,
+): Uint8Array | undefined {
+  if (!ENABLE_GZIP) return undefined
+  if (data.byteLength < GZIP_MIN_BYTES) return undefined
+  if (!isMimeTypeCompressible(mimeType)) return undefined
+  try {
+    return Bun.gzipSync(data.buffer as ArrayBuffer)
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Create response handler function with ETag and Gzip support
+ */
+function createResponseHandler(
+  asset: InMemoryAsset,
+): (req: Request) => Response {
+  return (req: Request) => {
+    const headers: Record<string, string> = {
+      'Content-Type': asset.type,
+      'Cache-Control': asset.immutable
+        ? 'public, max-age=31536000, immutable'
+        : 'public, max-age=3600',
+    }
+
+    if (ENABLE_ETAG && asset.etag) {
+      const ifNone = req.headers.get('if-none-match')
+      if (ifNone && ifNone === asset.etag) {
+        return new Response(null, {
+          status: 304,
+          headers: { ETag: asset.etag },
+        })
+      }
+      headers.ETag = asset.etag
+    }
+
+    if (
+      ENABLE_GZIP &&
+      asset.gz &&
+      req.headers.get('accept-encoding')?.includes('gzip')
+    ) {
+      headers['Content-Encoding'] = 'gzip'
+      headers['Content-Length'] = String(asset.gz.byteLength)
+      const gzCopy = new Uint8Array(asset.gz)
+      return new Response(gzCopy, { status: 200, headers })
+    }
+
+    headers['Content-Length'] = String(asset.raw.byteLength)
+    const rawCopy = new Uint8Array(asset.raw)
+    return new Response(rawCopy, { status: 200, headers })
+  }
+}
+
+/**
+ * Create composite glob pattern from include patterns
+ */
+function createCompositeGlobPattern(): Bun.Glob {
+  const raw = (process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+  if (raw.length === 0) return new Bun.Glob('**/*')
+  if (raw.length === 1) return new Bun.Glob(raw[0])
+  return new Bun.Glob(`{${raw.join(',')}}`)
+}
+
+/**
+ * Initialize static routes with intelligent preloading strategy
  * Small files are loaded into memory, large files are served on-demand
  */
-async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
-  const routes: Record<string, () => Response> = {}
-  const loaded: Array<AssetMetadata> = []
-  const skipped: Array<AssetMetadata> = []
+async function initializeStaticRoutes(
+  clientDirectory: string,
+): Promise<PreloadResult> {
+  const routes: Record<string, (req: Request) => Response | Promise<Response>> =
+    {}
+  const loaded: AssetMetadata[] = []
+  const skipped: AssetMetadata[] = []
 
-  console.log(`📦 Loading static assets from ${clientDir}...`)
-  console.log(
-    `   Max preload size: ${(MAX_PRELOAD_BYTES / 1024 / 1024).toFixed(2)} MB`,
-  )
-  if (INCLUDE_PATTERNS.length > 0) {
+  log.info(`Loading static assets from ${clientDirectory}...`)
+  if (VERBOSE) {
     console.log(
-      `   Include patterns: ${process.env.STATIC_PRELOAD_INCLUDE ?? ''}`,
-    )
-  }
-  if (EXCLUDE_PATTERNS.length > 0) {
-    console.log(
-      `   Exclude patterns: ${process.env.STATIC_PRELOAD_EXCLUDE ?? ''}`,
+      `Max preload size: ${(MAX_PRELOAD_BYTES / 1024 / 1024).toFixed(2)} MB`,
     )
+    if (INCLUDE_PATTERNS.length > 0) {
+      console.log(
+        `Include patterns: ${process.env.ASSET_PRELOAD_INCLUDE_PATTERNS ?? ''}`,
+      )
+    }
+    if (EXCLUDE_PATTERNS.length > 0) {
+      console.log(
+        `Exclude patterns: ${process.env.ASSET_PRELOAD_EXCLUDE_PATTERNS ?? ''}`,
+      )
+    }
   }
 
   let totalPreloadedBytes = 0
 
   try {
-    // Read all files recursively
-    const files = await readdir(clientDir, { recursive: true })
-
-    for (const relativePath of files) {
-      const filepath = join(clientDir, relativePath)
-      const route = '/' + relativePath.replace(/\\/g, '/') // Handle Windows paths
+    const glob = createCompositeGlobPattern()
+    for await (const relativePath of glob.scan({ cwd: clientDirectory })) {
+      const filepath = path.join(clientDirectory, relativePath)
+      const route = `/${relativePath.split(path.sep).join(path.posix.sep)}`
 
       try {
         // Get file metadata
@@ -174,20 +330,26 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         }
 
         // Determine if file should be preloaded
-        const matchesPattern = shouldInclude(relativePath)
+        const matchesPattern = isFileEligibleForPreloading(relativePath)
         const withinSizeLimit = file.size <= MAX_PRELOAD_BYTES
 
         if (matchesPattern && withinSizeLimit) {
-          // Preload small files into memory
-          const bytes = await file.bytes()
-
-          routes[route] = () =>
-            new Response(bytes, {
-              headers: {
-                'Content-Type': metadata.type,
-                'Cache-Control': 'public, max-age=31536000, immutable',
-              },
-            })
+          // Preload small files into memory with ETag and Gzip support
+          const bytes = new Uint8Array(await file.arrayBuffer())
+          const gz = compressDataIfAppropriate(bytes, metadata.type)
+          const etag = ENABLE_ETAG ? computeEtag(bytes) : undefined
+          const asset: InMemoryAsset = {
+            raw: bytes,
+            gz,
+            etag,
+            type: metadata.type,
+            // Only Vite's content-hashed output under /assets/ is safe to
+            // cache immutably; unhashed files (favicon, manifest, images)
+            // can change between deploys and must revalidate.
+            immutable: route.startsWith('/assets/'),
+            size: bytes.byteLength,
+          }
+          routes[route] = createResponseHandler(asset)
 
           loaded.push({ ...metadata, size: bytes.byteLength })
           totalPreloadedBytes += bytes.byteLength
@@ -207,13 +369,13 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         }
       } catch (error: unknown) {
         if (error instanceof Error && error.name !== 'EISDIR') {
-          console.error(`❌ Failed to load ${filepath}:`, error)
+          log.error(`Failed to load ${filepath}: ${error.message}`)
         }
       }
     }
 
-    // Always show file overview in Vite-like format first
-    if (loaded.length > 0 || skipped.length > 0) {
+    // Show detailed file overview only when verbose mode is enabled
+    if (VERBOSE && (loaded.length > 0 || skipped.length > 0)) {
       const allFiles = [...loaded, ...skipped].sort((a, b) =>
         a.route.localeCompare(b.route),
       )
@@ -224,124 +386,157 @@ async function buildStaticRoutes(clientDir: string): Promise<PreloadResult> {
         60,
       )
 
-      // Format file size with KB and gzip estimation
-      const formatFileSize = (bytes: number) => {
+      // Format file size with KB and actual gzip size
+      const formatFileSize = (bytes: number, gzBytes?: number) => {
         const kb = bytes / 1024
-        // Rough gzip estimation (typically 30-70% compression)
+        const sizeStr = kb < 100 ? kb.toFixed(2) : kb.toFixed(1)
+
+        if (gzBytes !== undefined) {
+          const gzKb = gzBytes / 1024
+          const gzStr = gzKb < 100 ? gzKb.toFixed(2) : gzKb.toFixed(1)
+          return {
+            size: sizeStr,
+            gzip: gzStr,
+          }
+        }
+
+        // Rough gzip estimation (typically 30-70% compression) if no actual gzip data
         const gzipKb = kb * 0.35
         return {
-          size: kb < 100 ? kb.toFixed(2) : kb.toFixed(1),
+          size: sizeStr,
           gzip: gzipKb < 100 ? gzipKb.toFixed(2) : gzipKb.toFixed(1),
         }
       }
 
       if (loaded.length > 0) {
         console.log('\n📁 Preloaded into memory:')
+        console.log(
+          'Path                                          │    Size │ Gzip Size',
+        )
         loaded
           .sort((a, b) => a.route.localeCompare(b.route))
           .forEach((file) => {
             const { size, gzip } = formatFileSize(file.size)
             const paddedPath = file.route.padEnd(maxPathLength)
             const sizeStr = `${size.padStart(7)} kB`
-            const gzipStr = `gzip: ${gzip.padStart(6)} kB`
-            console.log(`   ${paddedPath} ${sizeStr} │ ${gzipStr}`)
+            const gzipStr = `${gzip.padStart(7)} kB`
+            console.log(`${paddedPath} │ ${sizeStr} │  ${gzipStr}`)
           })
       }
 
       if (skipped.length > 0) {
         console.log('\n💾 Served on-demand:')
+        console.log(
+          'Path                                          │    Size │ Gzip Size',
+        )
         skipped
           .sort((a, b) => a.route.localeCompare(b.route))
           .forEach((file) => {
             const { size, gzip } = formatFileSize(file.size)
             const paddedPath = file.route.padEnd(maxPathLength)
             const sizeStr = `${size.padStart(7)} kB`
-            const gzipStr = `gzip: ${gzip.padStart(6)} kB`
-            console.log(`   ${paddedPath} ${sizeStr} │ ${gzipStr}`)
+            const gzipStr = `${gzip.padStart(7)} kB`
+            console.log(`${paddedPath} │ ${sizeStr} │  ${gzipStr}`)
           })
       }
+    }
 
-      // Show detailed verbose info if enabled
-      if (VERBOSE) {
+    // Show detailed verbose info if enabled
+    if (VERBOSE) {
+      if (loaded.length > 0 || skipped.length > 0) {
+        const allFiles = [...loaded, ...skipped].sort((a, b) =>
+          a.route.localeCompare(b.route),
+        )
         console.log('\n📊 Detailed file information:')
+        console.log(
+          'Status       │ Path                            │ MIME Type                    │ Reason',
+        )
         allFiles.forEach((file) => {
           const isPreloaded = loaded.includes(file)
-          const status = isPreloaded ? '[MEMORY]' : '[ON-DEMAND]'
+          const status = isPreloaded ? 'MEMORY' : 'ON-DEMAND'
           const reason =
             !isPreloaded && file.size > MAX_PRELOAD_BYTES
-              ? ' (too large)'
+              ? 'too large'
               : !isPreloaded
-                ? ' (filtered)'
-                : ''
+                ? 'filtered'
+                : 'preloaded'
+          const route =
+            file.route.length > 30
+              ? file.route.substring(0, 27) + '...'
+              : file.route
           console.log(
-            `   ${status.padEnd(12)} ${file.route} - ${file.type}${reason}`,
+            `${status.padEnd(12)} │ ${route.padEnd(30)} │ ${file.type.padEnd(28)} │ ${reason.padEnd(10)}`,
           )
         })
+      } else {
+        console.log('\n📊 No files found to display')
       }
     }
 
     // Log summary after the file list
     console.log() // Empty line for separation
     if (loaded.length > 0) {
-      console.log(
-        `✅ Preloaded ${String(loaded.length)} files (${(totalPreloadedBytes / 1024 / 1024).toFixed(2)} MB) into memory`,
+      log.success(
+        `Preloaded ${String(loaded.length)} files (${(totalPreloadedBytes / 1024 / 1024).toFixed(2)} MB) into memory`,
       )
     } else {
-      console.log('ℹ️  No files preloaded into memory')
+      log.info('No files preloaded into memory')
     }
 
     if (skipped.length > 0) {
       const tooLarge = skipped.filter((f) => f.size > MAX_PRELOAD_BYTES).length
       const filtered = skipped.length - tooLarge
-      console.log(
-        `ℹ️  ${String(skipped.length)} files will be served on-demand (${String(tooLarge)} too large, ${String(filtered)} filtered)`,
+      log.info(
+        `${String(skipped.length)} files will be served on-demand (${String(tooLarge)} too large, ${String(filtered)} filtered)`,
       )
     }
   } catch (error) {
-    console.error(`❌ Failed to load static files from ${clientDir}:`, error)
+    log.error(
+      `Failed to load static files from ${clientDirectory}: ${String(error)}`,
+    )
   }
 
   return { routes, loaded, skipped }
 }
 
 /**
- * Start the production server
+ * Initialize the server
  */
-async function startServer() {
-  console.log('🚀 Starting production server...')
+async function initializeServer() {
+  log.header('Starting Production Server')
 
   // Load TanStack Start server handler
   let handler: { fetch: (request: Request) => Response | Promise<Response> }
   try {
-    const serverModule = (await import(SERVER_ENTRY)) as {
+    const serverModule = (await import(SERVER_ENTRY_POINT)) as {
       default: { fetch: (request: Request) => Response | Promise<Response> }
     }
     handler = serverModule.default
-    console.log('✅ TanStack Start handler loaded')
+    log.success('TanStack Start application handler initialized')
   } catch (error) {
-    console.error('❌ Failed to load server handler:', error)
+    log.error(`Failed to load server handler: ${String(error)}`)
     process.exit(1)
   }
 
   // Build static routes with intelligent preloading
-  const { routes } = await buildStaticRoutes(CLIENT_DIR)
+  const { routes } = await initializeStaticRoutes(CLIENT_DIRECTORY)
 
   // Create Bun server
   const server = Bun.serve({
-    port: PORT,
-
-    idleTimeout: 255,
+    port: SERVER_PORT,
 
     routes: {
       // Serve static assets (preloaded or on-demand)
       ...routes,
 
       // Fallback to TanStack Start handler for all other routes
-      '/*': (request) => {
+      '/*': async (req: Request) => {
         try {
-          return handler.fetch(request)
+          // Return the handler's Response as-is so streaming bodies
+          // (SSR streaming, SSE event streams) pass through unbuffered.
+          return await handler.fetch(req)
         } catch (error) {
-          console.error('Server handler error:', error)
+          log.error(`Server handler error: ${String(error)}`)
           return new Response('Internal Server Error', { status: 500 })
         }
       },
@@ -349,18 +544,18 @@ async function startServer() {
 
     // Global error handler
     error(error) {
-      console.error('Uncaught server error:', error)
+      log.error(
+        `Uncaught server error: ${error instanceof Error ? error.message : String(error)}`,
+      )
       return new Response('Internal Server Error', { status: 500 })
     },
   })
 
-  console.log(
-    `\n🚀 Server running at http://localhost:${String(server.port)}\n`,
-  )
+  log.success(`Server listening on http://localhost:${String(server.port)}`)
 }
 
-// Start the server
-startServer().catch((error: unknown) => {
-  console.error('Failed to start server:', error)
+// Initialize the server
+initializeServer().catch((error: unknown) => {
+  log.error(`Failed to start server: ${String(error)}`)
   process.exit(1)
 })

src/app/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthedRouteImport } from './routes/_authed'
 import { Route as AuthedIndexRouteImport } from './routes/_authed/index'
+import { Route as ApiHealthRouteImport } from './routes/api/health'
 import { Route as AuthedStatsRouteImport } from './routes/_authed/stats'
 import { Route as AuthedSettingsRouteImport } from './routes/_authed/settings'
 import { Route as AuthedBadgesRouteImport } from './routes/_authed/badges'
@@ -37,11 +38,13 @@ import { Route as AuthedAdminPreviewRouteImport } from './routes/_authed/admin/p
 import { Route as AuthedAdminBadgesRouteImport } from './routes/_authed/admin/badges'
 import { Route as AuthedAdminActivitiesRouteImport } from './routes/_authed/admin/activities'
 import { Route as AuthedAdminTournamentsIndexRouteImport } from './routes/_authed/admin/tournaments/index'
+import { Route as AuthedTournamentsIdGroupsRouteImport } from './routes/_authed/tournaments/$id.groups'
 import { Route as AuthedTournamentsIdBracketRouteImport } from './routes/_authed/tournaments/$id.bracket'
 import { Route as AuthedAdminTournamentsIdIndexRouteImport } from './routes/_authed/admin/tournaments/$id/index'
 import { Route as ApiFilesCollectionRecordIdFileRouteImport } from './routes/api/files/$collection/$recordId/$file'
 import { Route as AuthedAdminTournamentsRunIdRouteImport } from './routes/_authed/admin/tournaments/run.$id'
 import { Route as AuthedAdminTournamentsIdTeamsRouteImport } from './routes/_authed/admin/tournaments/$id/teams'
+import { Route as AuthedAdminTournamentsIdAssignPartnersRouteImport } from './routes/_authed/admin/tournaments/$id/assign-partners'
 
 const RefreshSessionRoute = RefreshSessionRouteImport.update({
   id: '/refresh-session',
@@ -67,6 +70,11 @@ const AuthedIndexRoute = AuthedIndexRouteImport.update({
   path: '/',
   getParentRoute: () => AuthedRoute,
 } as any)
+const ApiHealthRoute = ApiHealthRouteImport.update({
+  id: '/api/health',
+  path: '/api/health',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AuthedStatsRoute = AuthedStatsRouteImport.update({
   id: '/stats',
   path: '/stats',
@@ -185,6 +193,12 @@ const AuthedAdminTournamentsIndexRoute =
     path: '/tournaments/',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const AuthedTournamentsIdGroupsRoute =
+  AuthedTournamentsIdGroupsRouteImport.update({
+    id: '/tournaments/$id/groups',
+    path: '/tournaments/$id/groups',
+    getParentRoute: () => AuthedRoute,
+  } as any)
 const AuthedTournamentsIdBracketRoute =
   AuthedTournamentsIdBracketRouteImport.update({
     id: '/tournaments/$id/bracket',
@@ -215,8 +229,15 @@ const AuthedAdminTournamentsIdTeamsRoute =
     path: '/tournaments/$id/teams',
     getParentRoute: () => AuthedAdminRoute,
   } as any)
+const AuthedAdminTournamentsIdAssignPartnersRoute =
+  AuthedAdminTournamentsIdAssignPartnersRouteImport.update({
+    id: '/tournaments/$id/assign-partners',
+    path: '/tournaments/$id/assign-partners',
+    getParentRoute: () => AuthedAdminRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
+  '/': typeof AuthedIndexRoute
   '/login': typeof LoginRoute
   '/logout': typeof LogoutRoute
   '/refresh-session': typeof RefreshSessionRoute
@@ -224,7 +245,7 @@ export interface FileRoutesByFullPath {
   '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
-  '/': typeof AuthedIndexRoute
+  '/api/health': typeof ApiHealthRoute
   '/admin/activities': typeof AuthedAdminActivitiesRoute
   '/admin/badges': typeof AuthedAdminBadgesRoute
   '/admin/preview': typeof AuthedAdminPreviewRoute
@@ -242,13 +263,15 @@ export interface FileRoutesByFullPath {
   '/api/teams/upload-logo': typeof ApiTeamsUploadLogoRoute
   '/api/tournaments/upload-logo': typeof ApiTournamentsUploadLogoRoute
   '/admin/': typeof AuthedAdminIndexRoute
-  '/tournaments': typeof AuthedTournamentsIndexRoute
+  '/tournaments/': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
-  '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
+  '/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
+  '/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
+  '/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
-  '/admin/tournaments/$id': typeof AuthedAdminTournamentsIdIndexRoute
+  '/admin/tournaments/$id/': typeof AuthedAdminTournamentsIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
@@ -257,6 +280,7 @@ export interface FileRoutesByTo {
   '/badges': typeof AuthedBadgesRoute
   '/settings': typeof AuthedSettingsRoute
   '/stats': typeof AuthedStatsRoute
+  '/api/health': typeof ApiHealthRoute
   '/': typeof AuthedIndexRoute
   '/admin/activities': typeof AuthedAdminActivitiesRoute
   '/admin/badges': typeof AuthedAdminBadgesRoute
@@ -277,7 +301,9 @@ export interface FileRoutesByTo {
   '/admin': typeof AuthedAdminIndexRoute
   '/tournaments': typeof AuthedTournamentsIndexRoute
   '/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
+  '/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
   '/admin/tournaments': typeof AuthedAdminTournamentsIndexRoute
+  '/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
@@ -293,6 +319,7 @@ export interface FileRoutesById {
   '/_authed/badges': typeof AuthedBadgesRoute
   '/_authed/settings': typeof AuthedSettingsRoute
   '/_authed/stats': typeof AuthedStatsRoute
+  '/api/health': typeof ApiHealthRoute
   '/_authed/': typeof AuthedIndexRoute
   '/_authed/admin/activities': typeof AuthedAdminActivitiesRoute
   '/_authed/admin/badges': typeof AuthedAdminBadgesRoute
@@ -313,7 +340,9 @@ export interface FileRoutesById {
   '/_authed/admin/': typeof AuthedAdminIndexRoute
   '/_authed/tournaments/': typeof AuthedTournamentsIndexRoute
   '/_authed/tournaments/$id/bracket': typeof AuthedTournamentsIdBracketRoute
+  '/_authed/tournaments/$id/groups': typeof AuthedTournamentsIdGroupsRoute
   '/_authed/admin/tournaments/': typeof AuthedAdminTournamentsIndexRoute
+  '/_authed/admin/tournaments/$id/assign-partners': typeof AuthedAdminTournamentsIdAssignPartnersRoute
   '/_authed/admin/tournaments/$id/teams': typeof AuthedAdminTournamentsIdTeamsRoute
   '/_authed/admin/tournaments/run/$id': typeof AuthedAdminTournamentsRunIdRoute
   '/api/files/$collection/$recordId/$file': typeof ApiFilesCollectionRecordIdFileRoute
@@ -322,6 +351,7 @@ export interface FileRoutesById {
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
+    | '/'
     | '/login'
     | '/logout'
     | '/refresh-session'
@@ -329,7 +359,7 @@ export interface FileRouteTypes {
     | '/badges'
     | '/settings'
     | '/stats'
-    | '/'
+    | '/api/health'
     | '/admin/activities'
     | '/admin/badges'
     | '/admin/preview'
@@ -347,13 +377,15 @@ export interface FileRouteTypes {
     | '/api/teams/upload-logo'
     | '/api/tournaments/upload-logo'
     | '/admin/'
-    | '/tournaments'
+    | '/tournaments/'
     | '/tournaments/$id/bracket'
-    | '/admin/tournaments'
+    | '/tournaments/$id/groups'
+    | '/admin/tournaments/'
+    | '/admin/tournaments/$id/assign-partners'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
-    | '/admin/tournaments/$id'
+    | '/admin/tournaments/$id/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/login'
@@ -362,6 +394,7 @@ export interface FileRouteTypes {
     | '/badges'
     | '/settings'
     | '/stats'
+    | '/api/health'
     | '/'
     | '/admin/activities'
     | '/admin/badges'
@@ -382,7 +415,9 @@ export interface FileRouteTypes {
     | '/admin'
     | '/tournaments'
     | '/tournaments/$id/bracket'
+    | '/tournaments/$id/groups'
     | '/admin/tournaments'
+    | '/admin/tournaments/$id/assign-partners'
     | '/admin/tournaments/$id/teams'
     | '/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
@@ -397,6 +432,7 @@ export interface FileRouteTypes {
     | '/_authed/badges'
     | '/_authed/settings'
     | '/_authed/stats'
+    | '/api/health'
     | '/_authed/'
     | '/_authed/admin/activities'
     | '/_authed/admin/badges'
@@ -417,7 +453,9 @@ export interface FileRouteTypes {
     | '/_authed/admin/'
     | '/_authed/tournaments/'
     | '/_authed/tournaments/$id/bracket'
+    | '/_authed/tournaments/$id/groups'
     | '/_authed/admin/tournaments/'
+    | '/_authed/admin/tournaments/$id/assign-partners'
     | '/_authed/admin/tournaments/$id/teams'
     | '/_authed/admin/tournaments/run/$id'
     | '/api/files/$collection/$recordId/$file'
@@ -429,6 +467,7 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   LogoutRoute: typeof LogoutRoute
   RefreshSessionRoute: typeof RefreshSessionRoute
+  ApiHealthRoute: typeof ApiHealthRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
   ApiEventsSplatRoute: typeof ApiEventsSplatRoute
   ApiSpotifyCallbackRoute: typeof ApiSpotifyCallbackRoute
@@ -468,7 +507,7 @@ declare module '@tanstack/react-router' {
     '/_authed': {
       id: '/_authed'
       path: ''
-      fullPath: ''
+      fullPath: '/'
       preLoaderRoute: typeof AuthedRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -479,6 +518,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedIndexRouteImport
       parentRoute: typeof AuthedRoute
     }
+    '/api/health': {
+      id: '/api/health'
+      path: '/api/health'
+      fullPath: '/api/health'
+      preLoaderRoute: typeof ApiHealthRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_authed/stats': {
       id: '/_authed/stats'
       path: '/stats'
@@ -510,7 +556,7 @@ declare module '@tanstack/react-router' {
     '/_authed/tournaments/': {
       id: '/_authed/tournaments/'
       path: '/tournaments'
-      fullPath: '/tournaments'
+      fullPath: '/tournaments/'
       preLoaderRoute: typeof AuthedTournamentsIndexRouteImport
       parentRoute: typeof AuthedRoute
     }
@@ -636,10 +682,17 @@ declare module '@tanstack/react-router' {
     '/_authed/admin/tournaments/': {
       id: '/_authed/admin/tournaments/'
       path: '/tournaments'
-      fullPath: '/admin/tournaments'
+      fullPath: '/admin/tournaments/'
       preLoaderRoute: typeof AuthedAdminTournamentsIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/tournaments/$id/groups': {
+      id: '/_authed/tournaments/$id/groups'
+      path: '/tournaments/$id/groups'
+      fullPath: '/tournaments/$id/groups'
+      preLoaderRoute: typeof AuthedTournamentsIdGroupsRouteImport
+      parentRoute: typeof AuthedRoute
+    }
     '/_authed/tournaments/$id/bracket': {
       id: '/_authed/tournaments/$id/bracket'
       path: '/tournaments/$id/bracket'
@@ -650,7 +703,7 @@ declare module '@tanstack/react-router' {
     '/_authed/admin/tournaments/$id/': {
       id: '/_authed/admin/tournaments/$id/'
       path: '/tournaments/$id'
-      fullPath: '/admin/tournaments/$id'
+      fullPath: '/admin/tournaments/$id/'
       preLoaderRoute: typeof AuthedAdminTournamentsIdIndexRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
@@ -675,6 +728,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthedAdminTournamentsIdTeamsRouteImport
       parentRoute: typeof AuthedAdminRoute
     }
+    '/_authed/admin/tournaments/$id/assign-partners': {
+      id: '/_authed/admin/tournaments/$id/assign-partners'
+      path: '/tournaments/$id/assign-partners'
+      fullPath: '/admin/tournaments/$id/assign-partners'
+      preLoaderRoute: typeof AuthedAdminTournamentsIdAssignPartnersRouteImport
+      parentRoute: typeof AuthedAdminRoute
+    }
   }
 }
 
@@ -684,6 +744,7 @@ interface AuthedAdminRouteChildren {
   AuthedAdminPreviewRoute: typeof AuthedAdminPreviewRoute
   AuthedAdminIndexRoute: typeof AuthedAdminIndexRoute
   AuthedAdminTournamentsIndexRoute: typeof AuthedAdminTournamentsIndexRoute
+  AuthedAdminTournamentsIdAssignPartnersRoute: typeof AuthedAdminTournamentsIdAssignPartnersRoute
   AuthedAdminTournamentsIdTeamsRoute: typeof AuthedAdminTournamentsIdTeamsRoute
   AuthedAdminTournamentsRunIdRoute: typeof AuthedAdminTournamentsRunIdRoute
   AuthedAdminTournamentsIdIndexRoute: typeof AuthedAdminTournamentsIdIndexRoute
@@ -695,6 +756,8 @@ const AuthedAdminRouteChildren: AuthedAdminRouteChildren = {
   AuthedAdminPreviewRoute: AuthedAdminPreviewRoute,
   AuthedAdminIndexRoute: AuthedAdminIndexRoute,
   AuthedAdminTournamentsIndexRoute: AuthedAdminTournamentsIndexRoute,
+  AuthedAdminTournamentsIdAssignPartnersRoute:
+    AuthedAdminTournamentsIdAssignPartnersRoute,
   AuthedAdminTournamentsIdTeamsRoute: AuthedAdminTournamentsIdTeamsRoute,
   AuthedAdminTournamentsRunIdRoute: AuthedAdminTournamentsRunIdRoute,
   AuthedAdminTournamentsIdIndexRoute: AuthedAdminTournamentsIdIndexRoute,
@@ -715,6 +778,7 @@ interface AuthedRouteChildren {
   AuthedTournamentsTournamentIdRoute: typeof AuthedTournamentsTournamentIdRoute
   AuthedTournamentsIndexRoute: typeof AuthedTournamentsIndexRoute
   AuthedTournamentsIdBracketRoute: typeof AuthedTournamentsIdBracketRoute
+  AuthedTournamentsIdGroupsRoute: typeof AuthedTournamentsIdGroupsRoute
 }
 
 const AuthedRouteChildren: AuthedRouteChildren = {
@@ -728,6 +792,7 @@ const AuthedRouteChildren: AuthedRouteChildren = {
   AuthedTournamentsTournamentIdRoute: AuthedTournamentsTournamentIdRoute,
   AuthedTournamentsIndexRoute: AuthedTournamentsIndexRoute,
   AuthedTournamentsIdBracketRoute: AuthedTournamentsIdBracketRoute,
+  AuthedTournamentsIdGroupsRoute: AuthedTournamentsIdGroupsRoute,
 }
 
 const AuthedRouteWithChildren =
@@ -738,6 +803,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   LogoutRoute: LogoutRoute,
   RefreshSessionRoute: RefreshSessionRoute,
+  ApiHealthRoute: ApiHealthRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
   ApiEventsSplatRoute: ApiEventsSplatRoute,
   ApiSpotifyCallbackRoute: ApiSpotifyCallbackRoute,

src/app/router.tsx

@@ -29,9 +29,8 @@ export function getRouter() {
       fullWidth: false,
     },
     defaultPreload: "intent",
+    defaultPreloadStaleTime: 60_000,
     defaultErrorComponent: DefaultCatchBoundary,
-    scrollRestoration: true,
-    defaultViewTransition: false,
   });
 
   setupRouterSsrQueryIntegration({

src/app/routes/__root.tsx

@@ -4,6 +4,7 @@ import {
   Outlet,
   Scripts,
   createRootRouteWithContext,
+  isRedirect,
 } from "@tanstack/react-router";
 import * as React from "react";
 import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary";
@@ -11,11 +12,14 @@ import { type QueryClient } from "@tanstack/react-query";
 import { ensureSuperTokensFrontend } from "@/lib/supertokens/client";
 import { AuthContextType } from "@/contexts/auth-context";
 import Providers from "@/features/core/components/providers";
+import { SessionMonitor } from "@/components/session-monitor";
+import { IOSInstallPrompt } from "@/components/ios-install-prompt";
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import { HeaderConfig } from "@/features/core/types/header-config";
 import { playerQueries } from "@/features/players/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import FullScreenLoader from "@/components/full-screen-loader";
+import { CHROME_COLORS } from "@/lib/mantine/theme-colors";
 import mantineCssUrl from '@mantine/core/styles.css?url'
 import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
 import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
@@ -38,32 +42,46 @@ export const Route = createRootRouteWithContext<{
       {
         name: "viewport",
         content:
-          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content",
+          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content, viewport-fit=cover",
       },
-      { property: 'og:title', content: 'FLXN IX' },
-      { property: 'og:description', content: 'Register for FLXN IX and view FLXN stats' },
+      { name: 'description', content: 'Amicus meus madidus' },
+      { name: 'keywords', content: 'FLXN, beer pong, tournament, sports, statistics, pong' },
+      { property: 'og:title', content: 'FLXN' },
+      { property: 'og:description', content: 'Amicus meus madidus' },
       { property: 'og:url', content: 'https://flexxon.app' },
       { property: 'og:type', content: 'website' },
-      { property: 'og:site_name', content: 'FLXN IX' },
+      { property: 'og:site_name', content: 'FLXN' },
       { property: 'og:image', content: 'https://flexxon.app/favicon.png' },
+      { property: 'og:image:width', content: '512' },
+      { property: 'og:image:height', content: '512' },
+      { property: 'og:image:alt', content: 'FLXN logo' },
+      { property: 'og:locale', content: 'en_US' },
+      { name: 'twitter:card', content: 'summary' },
+      { name: 'twitter:title', content: 'FLXN' },
+      { name: 'twitter:description', content: 'Amicus meus madidus' },
+      { name: 'twitter:image', content: 'https://flexxon.app/favicon.png' },
+      { name: 'mobile-web-app-capable', content: 'yes' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
+      { name: 'apple-mobile-web-app-title', content: 'FLXN' },
     ],
     links: [
       {
         rel: "apple-touch-icon",
         sizes: "180x180",
-        href: "/favicon.png",
+        href: "/apple-touch-icon.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "32x32",
-        href: "/favicon.png",
+        href: "/favicon-32x32.png",
       },
       {
         rel: "icon",
         type: "image/png",
         sizes: "16x16",
-        href: "/favicon.png",
+        href: "/favicon-16x16.png",
       },
       { rel: "manifest", href: "/site.webmanifest" },
       { rel: "icon", href: "/favicon.ico" },
@@ -95,23 +113,37 @@ export const Route = createRootRouteWithContext<{
   component: RootComponent,
   notFoundComponent: () => <Navigate to="/" />,
   beforeLoad: async ({ context, location }) => {
-    // Skip auth check for refresh-session route to avoid infinite loops
-    if (location.pathname === '/refresh-session') {
-      return {};
-    }
-
-    if (location.pathname === '/login' || location.pathname === '/logout') {
+    const publicRoutes = ['/login', '/logout', '/refresh-session'];
+    if (publicRoutes.some(route => location.pathname.startsWith(route))) {
       return {};
     }
 
     try {
-      // https://github.com/TanStack/router/discussions/3531
       const auth = await ensureServerQueryData(
         context.queryClient,
         playerQueries.auth()
       );
       return { auth };
-    } catch (error) {
+    } catch (error: any) {
+      if (isRedirect(error) || error instanceof Response) throw error;
+
+      if (typeof window !== 'undefined') {
+        const { doesSessionExist, attemptRefreshingSession } = await import('supertokens-web-js/recipe/session');
+
+        const sessionExists = await doesSessionExist();
+        if (sessionExists) {
+          try {
+            await attemptRefreshingSession();
+            const auth = await ensureServerQueryData(
+              context.queryClient,
+              playerQueries.auth()
+            );
+            return { auth };
+          } catch {
+            return {};
+          }
+        }
+      }
       return {};
     }
   },
@@ -121,11 +153,16 @@ export const Route = createRootRouteWithContext<{
 function RootComponent() {
   React.useEffect(() => {
     ensureSuperTokensFrontend();
+    if (import.meta.env.PROD && 'serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js').catch(() => {});
+    }
   }, []);
 
   return (
     <RootDocument>
       <Providers>
+        <SessionMonitor />
+        <IOSInstallPrompt />
         <Outlet />
       </Providers>
     </RootDocument>
@@ -145,6 +182,16 @@ function RootDocument({ children }: { children: React.ReactNode }) {
     >
       <head>
         <HeadContent />
+        <meta
+          name="theme-color"
+          media="(prefers-color-scheme: light)"
+          content={CHROME_COLORS.light.base}
+        />
+        <meta
+          name="theme-color"
+          media="(prefers-color-scheme: dark)"
+          content={CHROME_COLORS.dark.base}
+        />
         <ColorSchemeScript />
         <link rel="stylesheet" href="/styles.css" />
       </head>

src/app/routes/_authed.tsx

@@ -1,7 +1,7 @@
 import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
 import Layout from "@/features/core/components/layout";
 import { useServerEvents } from "@/hooks/use-server-events";
-import { Flex, Loader } from "@mantine/core";
+import { Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed")({
   beforeLoad: ({ context }) => {
@@ -26,9 +26,21 @@ export const Route = createFileRoute("/_authed")({
   },
   pendingComponent: () => (
     <Layout>
-      <Flex w='100%' h="40dvh" justify="center" align="flex-end">
-        <Loader size='xl' />
-      </Flex>
+      <Stack gap="md" p="md" w="100%">
+        <Group gap="sm">
+          <Skeleton height={40} width={40} radius="sm" />
+          <Skeleton height={24} width="45%" radius="sm" />
+        </Group>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton
+            key={`authed-pending-${index}`}
+            height={96}
+            w="100%"
+            radius="md"
+            style={{ opacity: Math.max(1 - index * 0.18, 0.3) }}
+          />
+        ))}
+      </Stack>
     </Layout>
   ),
 });

src/app/routes/_authed/admin/activities.tsx

@@ -2,8 +2,8 @@ import { createFileRoute } from "@tanstack/react-router";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import { ActivitiesTable, activityQueries } from "@/features/activities";
 import { PlayersActivityTable, playerQueries } from "@/features/players";
-import { Tabs } from "@mantine/core";
-import { useState } from "react";
+import { Box, Divider, Group, Skeleton, Stack, Tabs } from "@mantine/core";
+import { Suspense, useState } from "react";
 
 export const Route = createFileRoute("/_authed/admin/activities")({
   component: Stats,
@@ -23,6 +23,30 @@ export const Route = createFileRoute("/_authed/admin/activities")({
   }),
 });
 
+function ActivityRowsSkeleton({ withSearch = false }: { withSearch?: boolean }) {
+  return (
+    <Stack gap={0}>
+      {withSearch && (
+        <Box px="md" pb="sm">
+          <Skeleton height={42} radius="sm" />
+        </Box>
+      )}
+      {Array.from({ length: 8 }).map((_, index) => (
+        <div key={`activity-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.1, 0.35) }}>
+          <Group p="md" wrap="nowrap" w="100%" justify="space-between">
+            <Stack gap={6}>
+              <Skeleton height={14} width={160} radius="sm" />
+              <Skeleton height={10} width={100} radius="sm" />
+            </Stack>
+            <Skeleton height={10} width={60} radius="sm" />
+          </Group>
+          <Divider />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
 function Stats() {
   const [activeTab, setActiveTab] = useState<string | null>("server-functions");
 
@@ -34,11 +58,15 @@ function Stats() {
       </Tabs.List>
 
       <Tabs.Panel value="server-functions">
-        <ActivitiesTable />
+        <Suspense fallback={<ActivityRowsSkeleton withSearch />}>
+          <ActivitiesTable />
+        </Suspense>
       </Tabs.Panel>
 
       <Tabs.Panel value="player-activity">
-        <PlayersActivityTable />
+        <Suspense fallback={<ActivityRowsSkeleton />}>
+          <PlayersActivityTable />
+        </Suspense>
       </Tabs.Panel>
     </Tabs>
   );

src/app/routes/_authed/admin/tournaments/$id/assign-partners.tsx

@@ -0,0 +1,182 @@
+import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
+import { tournamentQueries, useFreeAgents, useTournament } from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Stack, Text, Button, Alert, LoadingOverlay, Group, Skeleton } from "@mantine/core";
+import { useState } from "react";
+import useGenerateRandomTeams from "@/features/tournaments/hooks/use-generate-random-teams";
+import useConfirmTeamAssignments from "@/features/tournaments/hooks/use-confirm-team-assignments";
+import TeamAssignmentPreview from "@/features/tournaments/components/team-assignment-preview";
+import { WarningCircleIcon, ShuffleIcon, CheckCircleIcon } from "@phosphor-icons/react";
+import { PlayerInfo } from "@/features/players/types";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-partners")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    return { tournament };
+  },
+  loader: ({ context }) => ({
+    header: {
+      withBackButton: true,
+      title: `Manage ${context.tournament.name}`,
+    },
+  }),
+  component: RouteComponent,
+  pendingComponent: AssignPartnersPending,
+});
+
+function AssignPartnersPending() {
+  return (
+    <Stack gap="lg">
+      <Stack gap="xs">
+        <Group gap="xs" align="baseline">
+          <Skeleton height={28} width={36} radius="sm" />
+          <Skeleton height={14} width={110} radius="sm" />
+        </Group>
+        <Skeleton height={36} w="100%" radius="sm" style={{ opacity: 0.7 }} />
+      </Stack>
+    </Stack>
+  );
+}
+
+interface TeamAssignment {
+  player1: PlayerInfo;
+  player2: PlayerInfo;
+  teamName: string;
+}
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data: freeAgents } = useFreeAgents(id);
+  const [assignments, setAssignments] = useState<TeamAssignment[] | null>(null);
+  const [currentSeed, setCurrentSeed] = useState<number | undefined>(undefined);
+
+  const generateMutation = useGenerateRandomTeams();
+  const confirmMutation = useConfirmTeamAssignments();
+
+  const hasOddPlayers = freeAgents.length % 2 !== 0;
+  const hasEnoughPlayers = freeAgents.length >= 2;
+
+  const handleGenerate = () => {
+    generateMutation.mutate(
+      { data: { tournamentId: id, seed: currentSeed } },
+      {
+        onSuccess: (result) => {
+          setAssignments(result.assignments);
+          setCurrentSeed(result.seed);
+        },
+      }
+    );
+  };
+
+  const handleReroll = () => {
+    if (currentSeed === undefined) return;
+    generateMutation.mutate(
+      { data: { tournamentId: id, seed: currentSeed + 1 } },
+      {
+        onSuccess: (result) => {
+          setAssignments(result.assignments);
+          setCurrentSeed(result.seed);
+        },
+      }
+    );
+  };
+
+  const handleConfirm = () => {
+    if (!assignments) return;
+
+    const formattedAssignments = assignments.map((a) => ({
+      player1Id: a.player1.id,
+      player2Id: a.player2.id,
+      teamName: a.teamName,
+    }));
+
+    confirmMutation.mutate(
+      { data: { tournamentId: id, assignments: formattedAssignments } },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: tournamentQueries.details(id).queryKey });
+          queryClient.invalidateQueries({ queryKey: tournamentQueries.free_agents(id).queryKey });
+          navigate({ to: "/admin/tournaments/$id", params: { id } });
+        },
+      }
+    );
+  };
+
+  return (
+    <Stack gap="lg" pos="relative">
+      <LoadingOverlay visible={confirmMutation.isPending} />
+
+      <Stack gap="xs">
+        <Group gap="xs" align="baseline">
+          <Text size="xl" fw={700}>
+            {freeAgents.length}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {freeAgents.length === 1 ? "player enrolled" : "players enrolled"}
+          </Text>
+        </Group>
+
+        {!hasEnoughPlayers && (
+          <Alert color="yellow" icon={<WarningCircleIcon size={16} />}>
+            Need at least 2 players to create teams
+          </Alert>
+        )}
+
+        {hasOddPlayers && (
+          <Alert color="red" icon={<WarningCircleIcon size={16} />}>
+            Cannot create teams with an odd number of players. Please have one player unenroll.
+          </Alert>
+        )}
+
+        {!assignments && hasEnoughPlayers && !hasOddPlayers && (
+          <Button
+            leftSection={<ShuffleIcon size={18} />}
+            onClick={handleGenerate}
+            loading={generateMutation.isPending}
+          >
+            Generate Random Pairings
+          </Button>
+        )}
+      </Stack>
+
+      {assignments && (
+        <Stack gap="md">
+          <Group justify="space-between" align="center">
+            <Text size="lg" fw={600}>
+              Partner Assignments
+            </Text>
+            <Group gap="sm">
+              <Button
+                variant="subtle"
+                leftSection={<ShuffleIcon size={16} />}
+                onClick={handleReroll}
+                loading={generateMutation.isPending}
+                size="sm"
+              >
+                Re-roll
+              </Button>
+              <Button
+                leftSection={<CheckCircleIcon size={18} />}
+                onClick={handleConfirm}
+                loading={confirmMutation.isPending}
+                size="sm"
+              >
+                Confirm & Create Teams
+              </Button>
+            </Group>
+          </Group>
+
+          <TeamAssignmentPreview assignments={assignments} />
+        </Stack>
+      )}
+    </Stack>
+  );
+}

src/app/routes/_authed/admin/tournaments/$id/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTournament from "@/features/tournaments/components/manage-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Divider, Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
   beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,26 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
     withPadding: false,
   }),
   component: RouteComponent,
+  pendingComponent: ManageTournamentPending,
 });
 
+function ManageTournamentPending() {
+  return (
+    <Stack gap={0}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={`manage-tournament-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.14, 0.4) }}>
+          <Group p="md" wrap="nowrap" w="100%">
+            <Skeleton height={20} width={20} radius="sm" />
+            <Skeleton height={16} width="45%" radius="sm" />
+            <Skeleton ml="auto" height={20} width={20} radius="sm" />
+          </Group>
+          <Divider />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   return <ManageTournament tournamentId={id} />;

src/app/routes/_authed/admin/tournaments/$id/teams.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import ManageTeams from "@/features/teams/components/manage-teams";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Box, Divider, Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
   beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,37 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
     withPadding: false,
   }),
   component: RouteComponent,
+  pendingComponent: ManageTeamsPending,
 });
 
+function ManageTeamsPending() {
+  return (
+    <Stack gap="xs">
+      <Box px="md">
+        <Skeleton height={42} radius="sm" />
+      </Box>
+      <Box px="md">
+        <Skeleton height={12} width={90} radius="sm" />
+      </Box>
+      <Stack gap={0}>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div key={`manage-teams-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.1, 0.35) }}>
+            <Group p="xs" wrap="nowrap" w="100%">
+              <Skeleton height={40} width={40} radius="sm" />
+              <Skeleton height={16} width="45%" radius="sm" />
+              <Stack ml="auto" gap={6} align="flex-end">
+                <Skeleton height={10} width={90} radius="sm" />
+                <Skeleton height={10} width={70} radius="sm" />
+              </Stack>
+            </Group>
+            <Divider />
+          </div>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   const { tournament } = Route.useRouteContext();

src/app/routes/_authed/admin/tournaments/index.tsx

@@ -1,12 +1,14 @@
 import ManageTournaments from "@/features/admin/components/manage-tournaments";
 import { tournamentQueries } from "@/features/tournaments/queries";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
+import { Divider, Group, Skeleton, Stack } from "@mantine/core";
 import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 
 export const Route = createFileRoute("/_authed/admin/tournaments/")({
-  beforeLoad: async ({ context }) => {
+  beforeLoad: ({ context }) => {
     const { queryClient } = context;
-    await prefetchServerQuery(queryClient, tournamentQueries.list());
+    prefetchServerQuery(queryClient, tournamentQueries.list());
   },
   loader: () => ({
     header: {
@@ -19,6 +21,26 @@ export const Route = createFileRoute("/_authed/admin/tournaments/")({
   component: RouteComponent,
 });
 
+function TournamentListSkeleton() {
+  return (
+    <Stack gap={0}>
+      {Array.from({ length: 6 }).map((_, index) => (
+        <div key={`manage-tournaments-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}>
+          <Group p="md" wrap="nowrap" w="100%">
+            <Skeleton height={16} width="55%" radius="sm" />
+            <Skeleton ml="auto" height={20} width={20} radius="sm" />
+          </Group>
+          <Divider />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
 function RouteComponent() {
-  return <ManageTournaments />;
+  return (
+    <Suspense fallback={<TournamentListSkeleton />}>
+      <ManageTournaments />
+    </Suspense>
+  );
 }

src/app/routes/_authed/admin/tournaments/run.$id.tsx

@@ -5,7 +5,9 @@ import {
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import SeedTournament from "@/features/tournaments/components/seed-tournament";
-import { Container } from "@mantine/core";
+import SetupGroupStage from "@/features/tournaments/components/setup-group-stage";
+import GroupStageView from "@/features/tournaments/components/group-stage-view";
+import { Container, Stack, Divider, Title, Box, Card, Group, Skeleton, SimpleGrid } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
@@ -35,14 +37,66 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
     },
   }),
   component: RouteComponent,
+  pendingComponent: RunTournamentPending,
 });
 
+function RunTournamentPending() {
+  return (
+    <Container size="md" px={0}>
+      <Box p="md">
+        <Stack gap="md">
+          <Group gap={0} grow mb="md">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <Skeleton
+                key={`run-pending-tab-${index}`}
+                height={44}
+                radius="sm"
+                style={{ opacity: 0.85 - index * 0.1 }}
+              />
+            ))}
+          </Group>
+          <Card withBorder radius="md" p={0}>
+            <Group justify="space-between" p="sm">
+              <Skeleton height={16} width={120} radius="sm" />
+              <Skeleton height={22} width={22} radius="xl" />
+            </Group>
+          </Card>
+          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton
+                key={`run-pending-match-${index}`}
+                height={100}
+                radius="md"
+                style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}
+              />
+            ))}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Container>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
   const { roles } = useAuth();
   const isAdmin = roles?.includes('Admin') || false;
 
+  const hasGroupStage = useMemo(() => {
+    return tournament.matches?.some((match) => match.round === -1) || false;
+  }, [tournament.matches]);
+
+  const hasKnockout = useMemo(() => {
+    return tournament.matches?.some((match) => match.round !== -1) || false;
+  }, [tournament.matches]);
+
+  const knockoutBracketPopulated = useMemo(() => {
+    return tournament.matches?.some((match) =>
+      match.round === 0 && match.lid >= 0 && (match.home || match.away)
+    ) || false;
+  }, [tournament.matches]);
+
   const bracket: BracketData = useMemo(() => {
     if (!tournament.matches || tournament.matches.length === 0) {
       return { winners: [], losers: [] };
@@ -52,6 +106,7 @@ function RouteComponent() {
     const losersMap = new Map<number, Match[]>();
 
     tournament.matches
+      .filter((match) => match.round !== -1)
       .sort((a, b) => a.lid - b.lid)
       .forEach((match) => {
         if (!match.is_losers_bracket) {
@@ -79,14 +134,51 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      { isAdmin && <SpotifyControlsBar />}
+      { isAdmin && !tournament.regional && <SpotifyControlsBar />}
       {tournament.matches?.length ? (
-        <BracketView bracket={bracket} showControls />
+        hasGroupStage && hasKnockout ? (
+          <Stack gap="xl">
+            <GroupStageView
+              groups={tournament.groups || []}
+              matches={tournament.matches}
+              showControls
+              tournamentId={tournament.id}
+              hasKnockoutBracket={knockoutBracketPopulated}
+              isRegional={tournament.regional}
+              groupConfig={tournament.group_config}
+            />
+            <Divider />
+            <div>
+              <Title order={3} ta="center" mb="md">Knockout Bracket</Title>
+              <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+            </div>
+          </Stack>
+        ) : hasGroupStage ? (
+          <GroupStageView
+            groups={tournament.groups || []}
+            matches={tournament.matches}
+            showControls
+            tournamentId={tournament.id}
+            hasKnockoutBracket={knockoutBracketPopulated}
+            isRegional={tournament.regional}
+            groupConfig={tournament.group_config}
+          />
+        ) : (
+          <BracketView bracket={bracket} showControls groupConfig={tournament.group_config} />
+        )
       ) : (
-        <SeedTournament
-          tournamentId={tournament.id}
-          teams={tournament.teams || []}
-        />
+        tournament.regional === true ? (
+          <SetupGroupStage
+            tournamentId={tournament.id}
+            teams={tournament.teams || []}
+          />
+        ) : (
+          <SeedTournament
+            tournamentId={tournament.id}
+            teams={tournament.teams || []}
+            isRegional={tournament.regional}
+          />
+        )
       )}
     </Container>
   );

src/app/routes/_authed/stats.tsx

@@ -64,7 +64,7 @@ function Stats() {
               </Button>
             </Group>
             <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
-              <Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
+              <Suspense fallback={<PlayerStatsTableSkeleton hideFilters />}>
                 <PlayerStatsTable viewType={deferredViewType} />
               </Suspense>
             </Box>

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -4,8 +4,7 @@ import {
   useTournament,
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
-import SeedTournament from "@/features/tournaments/components/seed-tournament";
-import { Container } from "@mantine/core";
+import { Box, Container, Flex, Skeleton, Stack } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
 import { Match } from "@/features/matches/types";
@@ -18,7 +17,7 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
       queryClient,
       tournamentQueries.details(params.id)
     );
-    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    if (!tournament) throw redirect({ to: "/tournaments" });
     return {
       tournament,
     };
@@ -26,15 +25,55 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   loader: ({ context }) => ({
     fullWidth: true,
     withPadding: false,
-    showSpotifyPanel: true,
     header: {
       withBackButton: true,
       title: `${context.tournament.name}`,
     },
   }),
   component: RouteComponent,
+  pendingComponent: BracketPending,
 });
 
+function BracketPending() {
+  const columns = [4, 2, 1];
+
+  return (
+    <Container size="md" px={0}>
+      <Box
+        p={0}
+        style={{
+          overflow: "hidden",
+          backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+          backgroundSize: "16px 16px",
+          backgroundPosition: "0 0, 8px 8px",
+          minHeight: "70dvh",
+        }}
+      >
+        <Skeleton height={18} width={140} radius="sm" m={16} />
+        <Flex gap="xl" px={16} align="stretch">
+          {columns.map((count, columnIndex) => (
+            <Stack
+              key={`bracket-pending-round-${columnIndex}`}
+              gap="xl"
+              justify="space-around"
+              style={{ opacity: 1 - columnIndex * 0.25 }}
+            >
+              {Array.from({ length: count }).map((_, matchIndex) => (
+                <Skeleton
+                  key={`bracket-pending-match-${columnIndex}-${matchIndex}`}
+                  height={84}
+                  width={220}
+                  radius="md"
+                />
+              ))}
+            </Stack>
+          ))}
+        </Flex>
+      </Box>
+    </Container>
+  );
+}
+
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
@@ -48,6 +87,7 @@ function RouteComponent() {
     const losersMap = new Map<number, Match[]>();
 
     tournament.matches
+      .filter((match) => match.round !== -1)
       .sort((a, b) => a.lid - b.lid)
       .forEach((match) => {
         if (!match.is_losers_bracket) {
@@ -75,7 +115,7 @@ function RouteComponent() {
 
   return (
     <Container size="md" px={0}>
-      <BracketView bracket={bracket} />
+      <BracketView bracket={bracket} groupConfig={tournament.group_config} />
     </Container>
   );
 }

src/app/routes/_authed/tournaments/$id.groups.tsx

@@ -0,0 +1,85 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import {
+  tournamentQueries,
+  useTournament,
+} from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import GroupStageView from "@/features/tournaments/components/group-stage-view";
+import { Box, Card, Container, Group, Skeleton, SimpleGrid, Stack } from "@mantine/core";
+
+export const Route = createFileRoute("/_authed/tournaments/$id/groups")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/tournaments" });
+    return {
+      tournament,
+    };
+  },
+  loader: ({ context }) => ({
+    fullWidth: true,
+    withPadding: false,
+    header: {
+      withBackButton: true,
+      title: `${context.tournament.name}`,
+    },
+  }),
+  component: RouteComponent,
+  pendingComponent: GroupsPending,
+});
+
+function GroupsPending() {
+  return (
+    <Container size="md" px={0}>
+      <Box p="md">
+        <Stack gap="md">
+          <Group gap={0} grow mb="md">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <Skeleton
+                key={`groups-pending-tab-${index}`}
+                height={44}
+                radius="sm"
+                style={{ opacity: 0.85 - index * 0.1 }}
+              />
+            ))}
+          </Group>
+          <Card withBorder radius="md" p={0}>
+            <Group justify="space-between" p="sm">
+              <Skeleton height={16} width={120} radius="sm" />
+              <Skeleton height={22} width={22} radius="xl" />
+            </Group>
+          </Card>
+          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton
+                key={`groups-pending-match-${index}`}
+                height={100}
+                radius="md"
+                style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}
+              />
+            ))}
+          </SimpleGrid>
+        </Stack>
+      </Box>
+    </Container>
+  );
+}
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { data: tournament } = useTournament(id);
+
+  return (
+    <Container size="md" px={0}>
+      <GroupStageView
+        groups={tournament.groups || []}
+        matches={tournament.matches || []}
+        isRegional={tournament.regional}
+        groupConfig={tournament.group_config}
+      />
+    </Container>
+  );
+}

src/app/routes/_authed/tournaments/index.tsx

@@ -23,7 +23,13 @@ export const Route = createFileRoute('/_authed/tournaments/')({
 function RouteComponent() {
   return <Suspense fallback={<Stack gap="md">
     {Array(10).fill(null).map((_, index) => (
-      <Skeleton height="120px" w="100%" />
+      <Skeleton
+        key={`tournament-card-skeleton-${index}`}
+        height="120px"
+        w="100%"
+        radius="md"
+        style={{ opacity: Math.max(1 - index * 0.08, 0.35) }}
+      />
     ))}
   </Stack>}>
     <TournamentCardList />

src/app/routes/api/health.ts

@@ -0,0 +1,22 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/api/health")({
+  server: {
+    handlers: {
+      GET: () => {
+        return new Response(
+          JSON.stringify({
+            status: "ok",
+            timestamp: new Date().toISOString(),
+          }),
+          {
+            status: 200,
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+      },
+    },
+  },
+});

src/app/routes/refresh-session.tsx

@@ -2,7 +2,8 @@ import { createFileRoute } from '@tanstack/react-router'
 import { useEffect, useRef } from 'react'
 import FullScreenLoader from '@/components/full-screen-loader'
 import { attemptRefreshingSession } from 'supertokens-web-js/recipe/session'
-import { resetRefreshFlag } from '@/lib/supertokens/client'
+import { resetRefreshFlag, getOrCreateRefreshPromise } from '@/lib/supertokens/client'
+import { logger } from '@/lib/supertokens'
 
 export const Route = createFileRoute('/refresh-session')({
   component: RouteComponent,
@@ -17,23 +18,38 @@ function RouteComponent() {
 
     const handleRefresh = async () => {
       try {
-        resetRefreshFlag();
-        const refreshed = await attemptRefreshingSession()
+        logger.info("Refresh session route: starting refresh");
+
+        const refreshed = await getOrCreateRefreshPromise(async () => {
+          return await attemptRefreshingSession();
+        });
 
         if (refreshed) {
-          const urlParams = new URLSearchParams(window.location.search)
-          const redirect = urlParams.get('redirect')
+          logger.info("Refresh session route: refresh successful");
+          const urlParams = new URLSearchParams(window.location.search);
+          const redirect = urlParams.get('redirect');
 
-          if (redirect && !redirect.includes('_serverFn') && !redirect.includes('/api/')) {
-            window.location.href = decodeURIComponent(redirect)
+          const safe =
+            redirect &&
+            redirect.startsWith('/') &&
+            !redirect.startsWith('/refresh-session') &&
+            !redirect.includes('_serverFn') &&
+            !redirect.includes('/api/');
+
+          if (safe) {
+            logger.info("Refresh session route: redirecting to", redirect);
+            window.location.href = redirect;
           } else {
+            logger.info("Refresh session route: redirecting to home");
             window.location.href = '/';
           }
         } else {
-          window.location.href = '/login'
+          logger.warn("Refresh session route: refresh failed, redirecting to login");
+          window.location.href = '/login';
         }
       } catch (error) {
-        window.location.href = '/login'
+        logger.error("Refresh session route: error during refresh", error);
+        window.location.href = '/login';
       }
     }
 

src/components/avatar.tsx

@@ -98,20 +98,21 @@ const Avatar = ({
       >
         <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }}>
           <ActionIcon
-            variant="filled"
+            variant="white"
             color="dark"
             size="lg"
             radius="xl"
+            aria-label="Close image preview"
             style={{
               position: 'absolute',
               top: -10,
               right: -10,
               zIndex: 1000,
-              backgroundColor: 'rgba(0, 0, 0, 0.7)',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
             }}
             onClick={() => setIsFullscreenOpen(false)}
           >
-            <XIcon size={18} color="white" />
+            <XIcon size={18} />
           </ActionIcon>
 
           <Image

src/components/countdown.module.css

@@ -0,0 +1,36 @@
+.time {
+    transition: color 300ms ease-out;
+}
+
+.seconds {
+    display: inline-block;
+}
+
+.tick {
+    animation: digit-tick 200ms ease-out;
+}
+
+.finalTick {
+    animation: final-tick 250ms ease-out;
+}
+
+@keyframes digit-tick {
+    from {
+        opacity: 0.2;
+        transform: translateY(-0.12em);
+    }
+}
+
+@keyframes final-tick {
+    from {
+        opacity: 0.4;
+        transform: scale(1.15);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .tick,
+    .finalTick {
+        animation: none;
+    }
+}

src/components/countdown.tsx

@@ -1,6 +1,7 @@
 import useNow from '@/hooks/use-now';
 import { Text, Group } from '@mantine/core';
 import { useMemo } from 'react';
+import classes from './countdown.module.css';
 
 interface CountdownProps {
   date: Date;
@@ -30,25 +31,42 @@ function calculateTimeLeft(targetDate: Date, currentTime = new Date()): TimeLeft
   };
 }
 
+const pad = (num: number) => num.toString().padStart(2, '0');
+
 export function Countdown({ date, label, color }: CountdownProps) {
   const now = useNow();
   const timeLeft = useMemo(() => calculateTimeLeft(date, now), [date, now]);
 
-  const formatTime = () => {
-    const pad = (num: number) => num.toString().padStart(2, '0');
+  const totalSecondsLeft = Math.max(
+    0,
+    Math.floor((date.getTime() - now.getTime()) / 1000)
+  );
+  const isFinalStretch = totalSecondsLeft > 0 && totalSecondsLeft <= 10;
 
-    if (timeLeft.days > 0) {
-      return `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
-    } else {
-      return `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
-    }
-  };
+  const prefix =
+    timeLeft.days > 0
+      ? `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`
+      : `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`;
 
   return (
     <Group gap="xs">
       {label && <Text size='sm' fw={500}>{label}:</Text>}
-      <Text size='sm' fw={600} c={color} ff="monospace">
-        {formatTime()}
+      <Text
+        size='sm'
+        fw={600}
+        c={isFinalStretch ? 'red' : color}
+        ff="monospace"
+        className={classes.time}
+      >
+        {prefix}
+        <span
+          key={timeLeft.seconds}
+          className={`${classes.seconds} ${
+            isFinalStretch ? classes.finalTick : classes.tick
+          }`}
+        >
+          {pad(timeLeft.seconds)}
+        </span>
       </Text>
     </Group>
   );

src/components/empty-state.tsx

@@ -0,0 +1,32 @@
+import { Stack, Text, ThemeIcon, Title } from "@mantine/core";
+import { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+const EmptyState = ({ icon, title, description, action }: EmptyStateProps) => {
+  return (
+    <Stack align="center" gap="md" py="xl">
+      <ThemeIcon size="xl" variant="light" radius="md">
+        {icon}
+      </ThemeIcon>
+      <Stack align="center" gap={4}>
+        <Title order={3} c="dimmed" ta="center">
+          {title}
+        </Title>
+        {description && (
+          <Text size="sm" c="dimmed" ta="center" maw={280}>
+            {description}
+          </Text>
+        )}
+      </Stack>
+      {action}
+    </Stack>
+  );
+};
+
+export default EmptyState;

src/components/glitch-avatar.tsx

@@ -16,6 +16,7 @@ interface GlitchAvatarProps
   contain?: boolean;
   children?: React.ReactNode;
   px?: string | number;
+  frame?: boolean;
 }
 
 const GlitchAvatar = ({
@@ -28,6 +29,7 @@ const GlitchAvatar = ({
   contain = false,
   children,
   px,
+  frame = false,
   ...props
 }: GlitchAvatarProps) => {
   const [showGlitch, setShowGlitch] = useState(false);
@@ -37,13 +39,16 @@ const GlitchAvatar = ({
   useEffect(() => {
     if (!glitchSrc) return;
 
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let timeoutId: ReturnType<typeof setTimeout>;
     const scheduleNextGlitch = () => {
       const delay = Math.random() * 10000 + 5000;
-      return setTimeout(() => {
+      timeoutId = setTimeout(() => {
         setShowGlitch(true);
         setIsPlaying(true);
 
-        setTimeout(() => {
+        timeoutId = setTimeout(() => {
           setShowGlitch(false);
           setIsPlaying(false);
           scheduleNextGlitch();
@@ -51,7 +56,7 @@ const GlitchAvatar = ({
       }, delay);
     };
 
-    const timeoutId = scheduleNextGlitch();
+    scheduleNextGlitch();
     return () => clearTimeout(timeoutId);
   }, [glitchSrc]);
 
@@ -94,12 +99,18 @@ const GlitchAvatar = ({
             ? `${radius + 8}px`
             : "calc(var(--mantine-radius-md) + 8px)",
         position: "relative",
+        ...(frame && {
+          boxShadow:
+            "0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-filled) 35%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--mantine-primary-color-filled) 30%, transparent)",
+        }),
       }}
     >
       <Box
         style={{
           opacity: showGlitch ? 0 : 1,
-          transition: "opacity 0.05s ease-in-out",
+          transition: showGlitch
+            ? "opacity 0.05s ease-in"
+            : "opacity 0.25s ease-out",
         }}
       >
         <Paper
@@ -141,7 +152,7 @@ const GlitchAvatar = ({
             left: "8px",
             opacity: showGlitch ? 1 : 0,
             visibility: showGlitch ? "visible" : "hidden",
-            transition: "opacity 0.05s ease-in-out",
+            transition: showGlitch ? "opacity 0.05s ease-in" : "none",
             pointerEvents: "none",
           }}
         >