use kamal

2025-01-11 05:26:38 -08:00 · 2025-01-11 05:26:38 -08:00 · 9db119807a
parent 803fb21aa3
commit 9db119807a
47 changed files with 2773 additions and 13 deletions
--- a/config/deploy.yml
+++ b/config/deploy.yml
@ -22,9 +22,7 @@ servers:
 # Note: If using Cloudflare, set encryption mode in SSL/TLS setting to "Full" to enable CF-to-app encryption.
 proxy:
  ssl: true
-  host: app.example.com
-  # Proxy connects to your container on port 80 by default.
-  # app_port: 3000
+  host: bright.futureporn.net

 # Credentials for your image host.
 registry:
@ -62,7 +60,7 @@ builder:
 #   shell: app exec --interactive --reuse "bash"

 ssh:
-  keys: ["~/.ssh/upstart"]
+  keys: ["~/.ssh/futureporn"]

 # Use a persistent storage volume.
 #
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,103 @@
+services:
+
+  superstreamer:
+    image: alpine
+    environment:
+      - PUBLIC_API_ENDPOINT=http://localhost:52001
+      - PUBLIC_STITCHER_ENDPOINT=http://localhost:52002
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+      - DATABASE_URI=postgres://postgres:password@db:5432/sprs
+    env_file: .kamal/secrets.development
+
+  superstreamer-app:
+    extends: superstreamer
+    image: "superstreamerapp/app:alpha"
+    ports:
+      - 52000:52000
+
+
+  superstreamer-api:
+    extends: superstreamer
+    image: "superstreamerapp/api:alpha"
+    restart: always
+    ports:
+      - 52001:52001
+    depends_on:
+      - db
+      - redis
+
+  superstreamer-stitcher:
+    extends: superstreamer
+    image: "superstreamerapp/stitcher:alpha"
+    restart: always
+    ports:
+      - 52002:52002
+    depends_on:
+      - redis
+
+  superstreamer-artisan:
+    extends: superstreamer
+    image: "superstreamerapp/artisan:alpha"
+    restart: always
+    depends_on:
+      - redis
+
+  redis:
+    image: redis/redis-stack-server:7.2.0-v6
+    ports:
+      - 127.0.0.1:6379:6379
+    healthcheck:
+      test: ["CMD", "redis-cli", "--raw", "incr", "ping"]
+    volumes:
+      - redis_data:/data
+
+  bright:
+    image: futureporn/bright:latest
+    container_name: bright
+    build:
+      context: .
+      dockerfile: dockerfiles/bright.dockerfile
+    working_dir: /app
+    environment:
+      MIX_ENV: dev
+      PORT: "4000"
+    env_file:
+      - .kamal/secrets.development
+    ports:
+      - '4000:4000'
+    depends_on:
+      - db
+    volumes:
+      - ./services/bright:/app
+    develop:
+      watch:
+        - action: sync+restart
+          path: ./services/bright/mix.exs
+          target: /app
+
+  db:
+    image: postgres:15
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: phoenix_dev
+    volumes:
+      - pg_data:/var/lib/postgresql/data
+    ports:
+      - '5432:5432'
+
+  pgadmin:
+    image: dpage/pgadmin4
+    ports:
+      - '5050:5050'
+    depends_on:
+      - db
+    environment:
+      PGADMIN_LISTEN_PORT: "5050"
+    env_file:
+      - .kamal/secrets.development
+
+volumes:
+  pg_data:
+  redis_data:
--- a/dockerfiles/bright.dockerfile
+++ b/dockerfiles/bright.dockerfile
@ -24,15 +24,9 @@

 FROM elixir:1.17.2-alpine AS dev

-# install build dependencies
-RUN apt-get update -y \
-    && apt-get install -y build-essential \
-    && apt-get install -y git \
-    && apt-get install -y inotify-tools \
-    && apt-get clean \
-    && rm -f /var/lib/apt/lists/*_* \
-    && mkdir /home/user && \
-    chown 1000.1000 /home/user
+RUN apk add git inotify-tools \
+    && mkdir /home/user \
+    && chown 1000.1000 /home/user

 ENV HOME=/home/user
 USER 1000:1000
--- a/packages/scripts/build-test.sh
+++ b/packages/scripts/build-test.sh
@ -0,0 +1,21 @@
+#!/bin/bash
+
+postgres_pod_name=postgresql-primary-0
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env. Are you executing this script via Tilt? (that is the intended method)"
+    exit 5
+fi
+
+kubectl -n futureporn exec "${postgres_pod_name}" -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres -d futureporn --command "
+SELECT graphile_worker.add_job(
+  'combine_video_segments',
+  payload := json_build_object(
+    's3_manifest', json_build_array(
+      json_build_object('id', '4_z7d53875ff1c32a1983d30b18_f118989ca296359da_d20240809_m205858_c000_v0001408_t0033_u01723237138038', 'key', 'mock-stream0.mp4'),
+      json_build_object('id', '4_z7d53875ff1c32a1983d30b18_f107c0649cef835e4_d20240809_m205859_c000_v0001406_t0016_u01723237139170', 'key', 'mock-stream1.mp4'),
+      json_build_object('id', '4_z7d53875ff1c32a1983d30b18_f10651c62f4ca1b2f_d20240809_m205900_c000_v0001076_t0022_u01723237140217', 'key', 'mock-stream2.mp4')
+    )
+  ),
+  max_attempts := 3
+);"
--- a/packages/scripts/capture-integration.sh
+++ b/packages/scripts/capture-integration.sh
@ -0,0 +1,25 @@
+#!/bin/bash
+
+if [ -z "${AUTOMATION_USER_JWT}" ]; then
+  echo "Error: AUTOMATION_USER_JWT variable is not defined."
+  exit 1
+fi
+
+# get a random room
+response=$(curl -sL --fail GET http://localhost:8134/chaturbate/random-room)
+exitcode=$?
+url=$(echo $response | jq -r '.url')
+if [[ $exitcode -ne 0 || -z "$response" || -z "$url" ]]; then
+  echo "failed to get random room. exitcode=${exitcode}, response=${response}, url=${url}"
+  exit $exitcode
+fi
+echo "Random online chaturbate room url=${url}"
+
+
+
+# create a recording
+curl -sL -H "Authorization: Bearer ${AUTOMATION_USER_JWT}" \
+     -H "Content-Type: application/json" \
+     -d '{"url": "'"${url}"'"}' \
+     http://localhost:9000/recordings
+echo "recording created"
--- a/packages/scripts/drupal-init-wrapper.sh
+++ b/packages/scripts/drupal-init-wrapper.sh
@ -0,0 +1,8 @@
+#!/bin/bash
+
+
+namespace=futureporn
+pod_name=$(kubectl --namespace futureporn get pods -l app.kubernetes.io/name=drupal -o custom-columns=":metadata.name" --no-headers)
+
+kubectl -n "${namespace}" cp ./scripts/drupal-init.sh "${pod_name}:/tmp/drupal-init.sh"
+kubectl -n "${namespace}" exec "${pod_name}" -- bash -c "/tmp/drupal-init.sh"
--- a/packages/scripts/drupal-init.sh
+++ b/packages/scripts/drupal-init.sh
@ -0,0 +1,24 @@
+
+#!/bin/bash
+
+# maybe https://www.drupal.org/project/extlink
+# maybe https://www.drupal.org/project/seckit
+# maybe https://www.drupal.org/project/slick
+# maybe https://www.drupal.org/project/fontawesome
+
+cd /opt/bitnami/drupal
+composer require \
+  'drupal/bulma:^1.0' \
+  'drupal/file_uploader_uppy:^1.0' \
+  'drupal/backup_migrate:^5.0' \
+  'drupal/cdn:^4.1' \
+  'drupal/s3fs:^3.6' \
+  'drupal/video:^3.0' \
+  'league/commonmark ^1.0' \
+  'drupal/markdown:^3.0' \
+  'drupal/color_field:^3.0' \
+  'drupal/pathauto:^1.13' \
+  'drupal/extlink:^2.0'
+drush updatedb
+drush theme:install bulma
+drush pm:install -y file_uploader_uppy backup_migrate cdn cdn_ui s3fs video markdown
--- a/packages/scripts/flux-bootstrap.sh
+++ b/packages/scripts/flux-bootstrap.sh
@ -0,0 +1,26 @@
+#!/bin/bash
+
+if [ -z "${ENV}" ]; then \
+		echo "Error: ENV variable is not defined. Please set to one of development|staging|production"; exit 1; \
+fi
+
+if [ "${ENV}" == "development" ]; then \
+    echo "Flux is not used in development environment. Skipping."
+		exit 0
+fi
+
+# flux bootstrap git \
+#   --kubeconfig /home/cj/.kube/vke.yaml \
+#   --url=https://gitea.futureporn.net/futureporn/fp.git \
+#   --branch=main \
+#   --username=cj_clippy \
+#   --token-auth=true \
+#   --path=clusters/production
+
+## --silent avoids the [Yes|no] prompt
+flux bootstrap git \
+  --silent \
+  --url="ssh://git@gitea.futureporn.net:2222/futureporn/fp" \
+  --branch=main \
+  --path="flux/clusters/$ENV" \
+  --private-key-file=/home/cj/.ssh/fp-flux
--- a/packages/scripts/k8s-metrics.sh
+++ b/packages/scripts/k8s-metrics.sh
@ -0,0 +1,12 @@
+#!/bin/bash
+
+if [ -z "${ENV}" ]; then \
+		echo "Error: ENV variable is not defined. Please set to one of development|staging|production"; exit 1; \
+fi
+
+if [ "${ENV}" == "development" ]; then \
+    echo "k8s metrics are not used in development environment. Skipping."
+		exit 0
+fi
+
+kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml
--- a/packages/scripts/k8s-namespaces.sh
+++ b/packages/scripts/k8s-namespaces.sh
@ -0,0 +1,7 @@
+#!/bin/bash
+
+kubectl create namespace cert-manager
+kubectl create namespace futureporn
+kubectl create namespace velero
+
+exit 0 # important to keep the Makefile chain going even if namespaces already existed and kubectl returned non-zero
--- a/packages/scripts/k8s-secrets.sh
+++ b/packages/scripts/k8s-secrets.sh
@ -0,0 +1,210 @@
+#!/bin/bash
+
+
+## @todo switch to infisical
+# ns=futureporn
+# kubectl --namespace $ns delete secret universal-auth-credentials --ignore-not-found
+# kubectl --namespace $ns create secret generic universal-auth-credentials \
+# --from-literal=clientSecret="${INFISICAL_CLIENT_SECRET}" \
+# --from-literal=clientId="${INFISICAL_CLIENT_ID}"
+# echo "@todo remove all the unused secrets"
+# exit 256
+
+CLOUD_DATA=$(echo -e "[default]\naws_access_key_id: $VELERO_S3_KEY_ID\naws_secret_access_key: $VELERO_S3_ACCESS_KEY" | base64 -w 0)
+kubectl --namespace=velero delete secret velero --ignore-not-found
+## we do this so helm can adopt our pre-made secret @see https://github.com/helm/helm/pull/7649
+cat <<EOF | kubectl --namespace=velero create -f-
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: velero
+  namespace: velero
+  annotations:
+    meta.helm.sh/release-namespace: futureporn
+  labels:
+    app.kubernetes.io/managed-by: Helm
+type: Opaque
+data: 
+  cloud: $CLOUD_DATA
+EOF
+
+
+# kubectl --namespace futureporn delete secret uppy --ignore-not-found
+# kubectl --namespace futureporn create secret generic uppy \
+# --from-literal=driveKey=${UPPY_DRIVE_KEY} \
+# --from-literal=driveSecret=${UPPY_DRIVE_SECRET} \
+# --from-literal=dropboxKey=${UPPY_DROPBOX_KEY} \
+# --from-literal=dropboxSecret=${UPPY_DROPBOX_SECRET} \
+# --from-literal=jwtSecret=${UPPY_JWT_SECRET} \
+# --from-literal=secret=${UPPY_SECRET} \
+# --from-literal=sessionSecret=${UPPY_SESSION_SECRET} \
+# --from-literal=b2Key=${UPPY_B2_KEY} \
+# --from-literal=b2Secret=${UPPY_B2_SECRET}\
+
+kubectl --namespace futureporn delete secret superstreamer --ignore-not-found
+kubectl --namespace futureporn create secret generic superstreamer \
+--from-literal=databaseUri=postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/sprs \
+--from-literal=s3Endpoint=${S3_ENDPOINT} \
+--from-literal=s3Region=${S3_REGION} \
+--from-literal=s3AccessKey=${S3_ACCESS_KEY_ID} \
+--from-literal=s3SecretKey=${S3_SECRET_ACCESS_KEY} \
+--from-literal=s3Bucket=${S3_BUCKET_NAME} \
+--from-literal=publicS3Endpoint=${PUBLIC_S3_ENDPOINT} \
+--from-literal=superSecret=${SUPER_SECRET} \
+--from-literal=authToken=${SUPERSTREAMER_AUTH_TOKEN}
+
+kubectl --namespace futureporn delete secret bright --ignore-not-found
+kubectl --namespace futureporn create secret generic bright \
+--from-literal=databaseUrl=postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/bright \
+--from-literal=secretKeyBase=${BRIGHT_SECRET_KEY_BASE}
+
+kubectl --namespace futureporn delete secret next --ignore-not-found
+kubectl --namespace futureporn create secret generic next \
+--from-literal=nextAuthSecret=${NEXTAUTH_SECRET}
+
+kubectl --namespace futureporn delete secret traefik-dashboard-auth --ignore-not-found
+kubectl --namespace futureporn create secret generic traefik-dashboard-auth \
+--type=kubernetes.io/basic-auth \
+--from-literal=password=${TRAEFIK_DASHBOARD_PASSWORD} \
+--from-literal=username=${TRAEFIK_DASHBOARD_USERNAME}
+
+kubectl --namespace futureporn delete secret patreon --ignore-not-found
+kubectl --namespace futureporn create secret generic patreon \
+--from-literal=creatorAccessToken=${PATREON_CREATOR_ACCESS_TOKEN} \
+--from-literal=creatorRefreshToken=${PATREON_CREATOR_REFRESH_TOKEN} \
+--from-literal=clientId=${PATREON_CLIENT_ID} \
+--from-literal=clientSecret=${PATREON_CLIENT_SECRET}
+
+kubectl --namespace futureporn delete secret chisel --ignore-not-found
+kubectl --namespace futureporn create secret generic chisel \
+--from-literal=auth="${CHISEL_USERNAME}:${CHISEL_PASSWORD}"
+
+kubectl --namespace chisel-operator-system delete secret chisel --ignore-not-found
+kubectl --namespace chisel-operator-system create secret generic chisel \
+--from-literal=auth="${CHISEL_USERNAME}:${CHISEL_PASSWORD}"
+
+kubectl --namespace futureporn delete secret bot --ignore-not-found
+kubectl --namespace futureporn create secret generic bot \
+--from-literal=automationUserJwt=${AUTOMATION_USER_JWT} \
+--from-literal=discordToken=${DISCORD_TOKEN} \
+--from-literal=discordChannelId=${DISCORD_CHANNEL_ID} \
+--from-literal=discordGuildId=${DISCORD_GUILD_ID} \
+--from-literal=discordApplicationId=${DISCORD_APPLICATION_ID} \
+--from-literal=workerConnectionString=${WORKER_CONNECTION_STRING}
+
+kubectl --namespace futureporn delete secret pgadmin4 --ignore-not-found
+kubectl --namespace futureporn create secret generic pgadmin4 \
+--from-literal=email=${PGADMIN_DEFAULT_EMAIL} \
+--from-literal=password=${PGADMIN_DEFAULT_PASSWORD}
+
+kubectl --namespace futureporn delete secret postgrest --ignore-not-found
+kubectl --namespace futureporn create secret generic postgrest \
+--from-literal=dbUri=${PGRST_DB_URI} \
+--from-literal=jwtSecret=${PGRST_JWT_SECRET} \
+--from-literal=automationUserJwt=${AUTOMATION_USER_JWT}
+
+kubectl --namespace futureporn delete secret capture --ignore-not-found
+kubectl --namespace futureporn create secret generic capture \
+--from-literal=workerConnectionString=${WORKER_CONNECTION_STRING} \
+--from-literal=s3AccessKeyId=${S3_USC_BUCKET_KEY_ID} \
+--from-literal=s3SecretAccessKey=${S3_USC_BUCKET_APPLICATION_KEY} \
+--from-literal=httpProxy=${HTTP_PROXY}
+
+kubectl --namespace futureporn delete secret mailbox --ignore-not-found
+kubectl --namespace futureporn create secret generic mailbox \
+--from-literal=databaseUrl=${WORKER_DATABASE_URL} \
+--from-literal=imapServer=${IMAP_SERVER} \
+--from-literal=imapPort=${IMAP_PORT} \
+--from-literal=imapUsername=${IMAP_USERNAME} \
+--from-literal=imapPassword=${IMAP_PASSWORD} \
+--from-literal=imapAccessToken=${IMAP_ACCESS_TOKEN}
+
+
+# kubectl --namespace futureporn delete secret discord --ignore-not-found
+# kubectl --namespace futureporn create secret generic discord \
+# --from-literal=token=${DISCORD_TOKEN} \
+# --from-literal=applicationId=${DISCORD_APPLICATION_ID}
+
+kubectl --namespace futureporn delete secret redis --ignore-not-found
+kubectl --namespace futureporn create secret generic redis \
+--from-literal=password=${REDIS_PASSWORD}
+
+kubectl --namespace futureporn delete secret uppy --ignore-not-found
+kubectl --namespace futureporn create secret generic uppy \
+--from-literal=redisUrl=${COMPANION_REDIS_URL} \
+--from-literal=secret=${COMPANION_SECRET} \
+--from-literal=preAuthSecret=${COMPANION_PREAUTH_SECRET} \
+--from-literal=dropboxKey=${COMPANION_DROPBOX_KEY} \
+--from-literal=dropboxSecret=${COMPANION_DROPBOX_SECRET} \
+--from-literal=boxKey=${COMPANION_BOX_KEY} \
+--from-literal=boxSecret=${COMPANION_BOX_SECRET} \
+--from-literal=googleKey=${COMPANION_GOOGLE_KEY} \
+--from-literal=googleSecret=${COMPANION_GOOGLE_SECRET} \
+--from-literal=awsKey=${COMPANION_AWS_KEY} \
+--from-literal=awsSecret=${COMPANION_AWS_SECRET} \
+--from-literal=awsBucket=${COMPANION_AWS_BUCKET} \
+--from-literal=oauthDomain=${COMPANION_OAUTH_DOMAIN} \
+--from-literal=uploadUrls=${COMPANION_UPLOAD_URLS}
+
+## @todo we need exoscale in two separate namespaces.
+##       Is it worth using secrets reflector?
+kubectl --namespace cert-manager delete secret exoscale --ignore-not-found
+kubectl --namespace cert-manager create secret generic exoscale \
+--from-literal=apiKey=${EXOSCALE_API_KEY} \
+--from-literal=apiSecret=${EXOSCALE_API_SECRET}
+kubectl --namespace futureporn delete secret exoscale --ignore-not-found
+kubectl --namespace futureporn create secret generic exoscale \
+--from-literal=apiKey=${EXOSCALE_API_KEY} \
+--from-literal=apiSecret=${EXOSCALE_API_SECRET}
+
+kubectl --namespace futureporn delete secret grafana --ignore-not-found
+kubectl --namespace futureporn create secret generic grafana \
+--from-literal=admin-user=${GRAFANA_USERNAME} \
+--from-literal=admin-password=${GRAFANA_PASSWORD}
+
+
+# kubectl --namespace futureporn delete secret link2cid --ignore-not-found
+# kubectl --namespace futureporn create secret generic link2cid \
+# --from-literal=apiKey=${LINK2CID_API_KEY}
+
+kubectl --namespace cert-manager delete secret vultr --ignore-not-found
+kubectl --namespace cert-manager create secret generic vultr \
+--from-literal=apiKey=${VULTR_API_KEY}
+
+kubectl --namespace futureporn delete secret vultr --ignore-not-found
+kubectl --namespace futureporn create secret generic vultr \
+--from-literal=containerRegistryUsername=${VULTR_CONTAINER_REGISTRY_USERNAME} \
+--from-literal=apiKey=${VULTR_API_KEY}
+
+kubectl --namespace futureporn delete secret postgresql --ignore-not-found
+kubectl --namespace futureporn create secret generic postgresql \
+--from-literal=replication-password=${POSTGRES_PASSWORD} \
+--from-literal=postgres-password=${POSTGRES_PASSWORD} \
+--from-literal=password=${POSTGRES_PASSWORD} \
+--from-literal=db-password=${POSTGRES_PASSWORD}
+
+kubectl --namespace futureporn delete secret pgadmin --ignore-not-found
+kubectl --namespace futureporn create secret generic pgadmin \
+--from-literal=defaultEmail=${PGADMIN_DEFAULT_EMAIL} \
+--from-literal=defaultPassword=${PGADMIN_DEFAULT_PASSWORD}
+
+kubectl --namespace futureporn delete secret strapi --ignore-not-found
+kubectl --namespace futureporn create secret generic strapi \
+--from-literal=adminJwtSecret=${STRAPI_ADMIN_JWT_SECRET} \
+--from-literal=apiTokenSalt=${STRAPI_API_TOKEN_SALT} \
+--from-literal=appKeys=${STRAPI_APP_KEYS} \
+--from-literal=databaseUrl=postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB} \
+--from-literal=jwtSecret=${STRAPI_JWT_SECRET} \
+--from-literal=muxPlaybackRestrictionId=${MUX_PLAYBACK_RESTRICTION_ID} \
+--from-literal=muxSigningKeyPrivateKey=${MUX_SIGNING_KEY_PRIVATE_KEY} \
+--from-literal=s3UscBucketApplicationKey=${S3_USC_BUCKET_APPLICATION_KEY} \
+--from-literal=s3UscBucketEndpoint=${S3_USC_BUCKET_ENDPOINT} \
+--from-literal=s3UscBucketName=${S3_USC_BUCKET_NAME} \
+--from-literal=s3UscBucketKeyId=${S3_USC_BUCKET_KEY_ID} \
+--from-literal=s3UscBucketRegion=${S3_USC_BUCKET_REGION} \
+--from-literal=muxSigningKeyId=${MUX_SIGNING_KEY_ID} \
+--from-literal=strapiAdminEmail=${STRAPI_ADMIN_EMAIL} \
+--from-literal=sendgridApiKey=${SENDGRID_API_KEY} \
+--from-literal=cdnBucketUscUrl=${CDN_BUCKET_USC_URL} \
+--from-literal=transferTokenSalt=${TRANSFER_TOKEN_SALT}
--- a/packages/scripts/kind-load.sh
+++ b/packages/scripts/kind-load.sh
@ -0,0 +1,16 @@
+#!/bin/bash
+
+## this script copies images from local machine into the (kind) kubernetes image store.
+## this is meant to save bandwidth and increase `tilt up` speed.
+
+
+nodeslist=kind-control-plane
+
+
+## we use individual `kind load` incantations for each image
+## in case the image is not present locally, the next image will continue loading rather than bork
+kind load docker-image postgres:16 --nodes $nodeslist
+kind load docker-image redis:latest --nodes $nodeslist
+kind load docker-image quay.io/jetstack/cert-manager-controller:v1.15.1 --nodes $nodeslist
+
+exit 0
--- a/packages/scripts/kind-with-local-registry.sh
+++ b/packages/scripts/kind-with-local-registry.sh
@ -0,0 +1,81 @@
+#!/bin/sh
+set -o errexit
+
+if [ -z "${ENV}" ]; then \
+		echo "Error: ENV variable is not defined. Please set to one of development|staging|production"; exit 1; \
+fi
+
+if [ "${ENV}" != "development" ]; then \
+    echo "kind is only for development environment. Skipping local registry creation."
+		exit 0
+fi
+
+
+# 1. Create registry container unless it already exists
+reg_name='kind-registry'
+reg_port='5001'
+if [ "$(docker inspect -f '{{.State.Running}}' "${reg_name}" 2>/dev/null || true)" != 'true' ]; then
+  docker run \
+    -d --restart=always -p "127.0.0.1:${reg_port}:5000" --network bridge --name "${reg_name}" \
+    registry:2
+fi
+
+# 2. Create kind cluster with containerd registry config dir enabled
+# TODO: kind will eventually enable this by default and this patch will
+# be unnecessary.
+#
+# See:
+# https://github.com/kubernetes-sigs/kind/issues/2875
+# https://github.com/containerd/containerd/blob/main/docs/cri/config.md#registry-configuration
+# See: https://github.com/containerd/containerd/blob/main/docs/hosts.md
+cat <<EOF | kind create cluster --config=-
+kind: Cluster
+apiVersion: kind.x-k8s.io/v1alpha4
+nodes:
+- role: control-plane
+- role: worker
+- role: worker
+- role: worker
+- role: worker
+- role: worker
+containerdConfigPatches:
+- |-
+  [plugins."io.containerd.grpc.v1.cri".registry]
+    config_path = "/etc/containerd/certs.d"
+EOF
+
+# 3. Add the registry config to the nodes
+#
+# This is necessary because localhost resolves to loopback addresses that are
+# network-namespace local.
+# In other words: localhost in the container is not localhost on the host.
+#
+# We want a consistent name that works from both ends, so we tell containerd to
+# alias localhost:${reg_port} to the registry container when pulling images
+REGISTRY_DIR="/etc/containerd/certs.d/localhost:${reg_port}"
+for node in $(kind get nodes); do
+  docker exec "${node}" mkdir -p "${REGISTRY_DIR}"
+  cat <<EOF | docker exec -i "${node}" cp /dev/stdin "${REGISTRY_DIR}/hosts.toml"
+[host."http://${reg_name}:5000"]
+EOF
+done
+
+# 4. Connect the registry to the cluster network if not already connected
+# This allows kind to bootstrap the network but ensures they're on the same network
+if [ "$(docker inspect -f='{{json .NetworkSettings.Networks.kind}}' "${reg_name}")" = 'null' ]; then
+  docker network connect "kind" "${reg_name}"
+fi
+
+# 5. Document the local registry
+# https://github.com/kubernetes/enhancements/tree/master/keps/sig-cluster-lifecycle/generic/1755-communicating-a-local-registry
+cat <<EOF | kubectl apply -f -
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: local-registry-hosting
+  namespace: kube-public
+data:
+  localRegistryHosting.v1: |
+    host: "localhost:${reg_port}"
+    help: "https://kind.sigs.k8s.io/docs/user/local-registry/"
+EOF
--- a/packages/scripts/pgadmin-connection-profile.json
+++ b/packages/scripts/pgadmin-connection-profile.json
@ -0,0 +1,16 @@
+{
+    "Servers": {
+        "1": {
+            "Name": "futureporn",
+            "Group": "Servers",
+            "Host": "postgresql-primary.futureporn.svc.cluster.local",
+            "Port": 5432,
+            "MaintenanceDB": "postgres",
+            "Username": "postgres",
+            "UseSSHTunnel": 0,
+            "TunnelPort": "22",
+            "TunnelAuthentication": 0,
+            "KerberosAuthentication": false
+        }
+    }
+}
--- a/packages/scripts/pgadmin-import-connection.sh
+++ b/packages/scripts/pgadmin-import-connection.sh
@ -0,0 +1,20 @@
+# @todo this script is meant for first-time setup of the cluster
+#       it sets up the UI to have a futureporn postgres server connection
+#
+# @see https://www.pgadmin.org/docs/pgadmin4/development/import_export_servers.html#json-format
+#
+
+bindir=$(dirname "$(readlink -fm "$0")")
+
+# kubectl -n futureporn exec pgadmin -- /usr/bin/python /pgadmin4/setup.py load-servers pgadmin-connection-profile.json
+# kubectl -n futureporn exec pgadmin -- /usr/bin/python3 /pgadmin4/setup.py
+kubectl -n futureporn cp ${bindir}/pgadmin-connection-profile.json pgadmin:/tmp/pgadmin-connection-profile.json
+# kubectl -n futureporn exec pgadmin -- chown root:root /tmp/pgadmin-connection-profile.json
+# kubectl -n futureporn exec pgadmin -- mv /tmp/pgadmin-connection-profile.json /pgadmin4/pgadmin-connection-profile.json
+# kubectl -n futureporn cp pgadmin:/tmp/pgadmin-connection-profile.json pgadmin:/tmp/pgadmin-connection-profile.json
+kubectl -n futureporn exec pgadmin -- ls -la /tmp/
+kubectl -n futureporn exec pgadmin -- cat /tmp/pgadmin-connection-profile.json
+kubectl -n futureporn exec pgadmin -- /venv/bin/python3 setup.py load-servers /tmp/pgadmin-connection-profile.json --replace --user cj@futureporn.net
+
+
+
--- a/packages/scripts/postgres-backup.sh
+++ b/packages/scripts/postgres-backup.sh
@ -0,0 +1,23 @@
+#!/bin/bash
+
+
+
+## restore
+# kubectl -n futureporn exec postgres -- psql -U postgres -d futureporn_db -f - < "/home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql"
+# kubectl -n futureporn exec -it postgres -- bash -c "psql -U postgres futureporn_db -f /home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql"
+# kubectl -n futureporn exec -i postgres -- pg_restore -U postgres -d futureporn_db < /home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql
+
+# kubectl exec -i POD_NAME -- pg_restore -U USERNAME -C -d DATABASE < dump.sql
+
+
+# kubectl -n futureporn cp /home/cj/Documents/futureporn-meta/backups/2024-05-29-futureporn_db-dev.psql postgres:/tmp/db.psql
+# kubectl -n futureporn exec -i postgres -- pg_restore -U postgres -d futureporn_db /tmp/db.psql
+# kubectl -n futureporn exec -ti db-postgresql-0 -- rm /tmp/db.psql
+
+
+datestamp=$(date -u "+%Y%m%dT%H%M%SZ")
+outputfilename="${datestamp}_development.psql"
+outputfullpath="/tmp/${outputfilename}"
+kubectl -n futureporn exec -i postgres -- pg_dump --file "${outputfullpath}" --port "5432" --username "postgres" --no-password --format=c --large-objects --verbose "futureporn_db"
+echo "outputfilename=${outputfilename}, outputfullpath=${outputfullpath}"
+kubectl -n futureporn cp "postgres:${outputfullpath}" "/home/cj/Documents/futureporn-meta/backups/${outputfilename}"
--- a/packages/scripts/postgres-create-bright.sh
+++ b/packages/scripts/postgres-create-bright.sh
@ -0,0 +1,8 @@
+
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env"
+    exit 5
+fi
+
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "CREATE DATABASE bright;"
--- a/packages/scripts/postgres-create-superstreamer.sh
+++ b/packages/scripts/postgres-create-superstreamer.sh
@ -0,0 +1,8 @@
+
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env"
+    exit 5
+fi
+
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "CREATE DATABASE sprs;"
--- a/packages/scripts/postgres-create.sh
+++ b/packages/scripts/postgres-create.sh
@ -0,0 +1,107 @@
+#!/bin/sh
+
+# bindir=$(dirname "$(readlink -fm "$0")")
+# source "${bindir}/../.env"
+
+
+postgres_pod_name=postgresql-primary-0
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env. Are you executing this script via Tilt? (that is the intended method)"
+    exit 5
+fi
+
+# ## Enable pgcrypto (needed by pg-boss)
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     CREATE EXTENSION pgcrypto;"
+
+# ## Create the temporal databases
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     CREATE DATABASE temporal_visibility \
+#     WITH \
+#     OWNER = postgres \
+#     ENCODING = 'UTF8' \
+#     LOCALE_PROVIDER = 'libc' \
+#     CONNECTION LIMIT = -1 \
+#     IS_TEMPLATE = False;"
+
+
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     CREATE DATABASE temporal \
+#     WITH \
+#     OWNER = postgres \
+#     ENCODING = 'UTF8' \
+#     LOCALE_PROVIDER = 'libc' \
+#     CONNECTION LIMIT = -1 \
+#     IS_TEMPLATE = False;"
+
+
+
+
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(TEMPORAL_DB) drop -f
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(TEMPORAL_DB) create
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(TEMPORAL_DB) setup -v 0.0
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(TEMPORAL_DB) update-schema -d ./schema/postgresql/v12/temporal/versioned
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(VISIBILITY_DB) drop -f
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(VISIBILITY_DB) create
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(VISIBILITY_DB) setup-schema -v 0.0
+# 	./temporal-sql-tool -u $(SQL_USER) --pw $(SQL_PASSWORD) -p 5432 --pl postgres12 --db $(VISIBILITY_DB) update-schema -d ./schema/postgresql/v12/visibility/versioned
+
+
+
+## Create the futureporn Strapi database
+kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+    CREATE DATABASE futureporn_db \
+    WITH \
+    OWNER = postgres \
+    ENCODING = 'UTF8' \
+    LOCALE_PROVIDER = 'libc' \
+    CONNECTION LIMIT = -1 \
+    IS_TEMPLATE = False;"
+
+
+## Create the futureporn Postgrest database
+## !!! Don't create the database here! Allow @services/migrations to create the database.
+
+
+# @futureporn/migrations takes care of these tasks now
+# ## Create graphile_worker db (for backend tasks)
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     CREATE DATABASE graphile_worker \
+#     WITH \
+#     OWNER = postgres \
+#     ENCODING = 'UTF8' \
+#     LOCALE_PROVIDER = 'libc' \
+#     CONNECTION LIMIT = -1 \
+#     IS_TEMPLATE = False;"
+
+
+# ## create futureporn user
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     CREATE ROLE futureporn \
+#     WITH \
+# 	LOGIN \
+# 	NOSUPERUSER \
+# 	NOCREATEDB \
+# 	NOCREATEROLE \
+# 	INHERIT \
+# 	NOREPLICATION \
+# 	NOBYPASSRLS \
+# 	CONNECTION LIMIT -1 \
+# 	PASSWORD '$POSTGRES_REALTIME_PASSWORD';"
+
+
+## grant futureporn user all privs
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     GRANT ALL PRIVILEGES ON DATABASE postgrest TO futureporn;"
+# kubectl -n futureporn exec ${postgres_pod_name} -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+#     GRANT ALL PRIVILEGES ON DATABASE graphile_worker TO futureporn;"
+
+
+
+## import schema
+## I have a file, schema.psql that I want to import. How do I do that?
+# kubectl -n futureporn exec postgresql -- psql -U postgres --command "\ ;"
+# kubectl -n futureporn exec postgresql -- psql -U postgres -f - < "${bindir}/postgres-2024-05-09-futureporn_db-schema-only.psql"
+
+
--- a/packages/scripts/postgres-drop.sh
+++ b/packages/scripts/postgres-drop.sh
@ -0,0 +1,16 @@
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env"
+    exit 5
+fi
+
+## drop futureporn_db
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP DATABASE futureporn_db WITH (FORCE);"
+
+## drop futureporn
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP DATABASE futureporn WITH (FORCE);"
+
+## delete postgrest roles
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP ROLE authenticator;"
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP ROLE automation;"
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP ROLE web_anon;"
--- a/packages/scripts/postgres-migrations.sh
+++ b/packages/scripts/postgres-migrations.sh
@ -0,0 +1,13 @@
+#!/bin/bash
+
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env. In development environment, runing this command via the UI button in Tilt is recommended as it sets the env var for you."
+    exit 5
+fi
+
+
+# kubectl -n futureporn run postgrest-migrations -i --rm=true --image=gitea.futureporn.net/futureporn/migrations:latest --env=DATABASE_PASSWORD=${POSTGRES_PASSWORD}
+kubectl -n futureporn run postgres-migrations -i --rm=true --image=fp/migrations:latest --env=DATABASE_PASSWORD=${POSTGRES_PASSWORD}
+
+
--- a/packages/scripts/postgres-refresh.sh
+++ b/packages/scripts/postgres-refresh.sh
@ -0,0 +1,9 @@
+
+if [ -z $POSTGRES_PASSWORD ]; then 
+    echo "POSTGRES_PASSWORD was missing in env"
+    exit 5
+fi
+
+# reload the schema 
+# @see https://postgrest.org/en/latest/references/schema_cache.html#schema-reloading
+kubectl -n futureporn exec postgresql-primary-0 -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "NOTIFY pgrst, 'reload schema'"
--- a/packages/scripts/postgres-restore.sh
+++ b/packages/scripts/postgres-restore.sh
@ -0,0 +1,32 @@
+#!/bin/bash
+postgres_pod_name="postgresql-primary-0"
+dbname=20240704T204659Z_development.psql
+
+## drop futureporn_db
+kubectl -n futureporn exec "${postgres_pod_name}" -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "DROP DATABASE futureporn_db;"
+
+
+## create futureporn_db
+kubectl -n futureporn exec "${postgres_pod_name}" -- env PGPASSWORD=${POSTGRES_PASSWORD} psql -U postgres --command "\
+    CREATE DATABASE futureporn_db \
+    WITH \
+    OWNER = postgres \
+    ENCODING = 'UTF8' \
+    LOCALE_PROVIDER = 'libc' \
+    CONNECTION LIMIT = -1 \
+    IS_TEMPLATE = False;"
+
+
+
+
+## restore
+# kubectl -n futureporn exec postgres -- psql -U postgres -d futureporn_db -f - < "/home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql"
+# kubectl -n futureporn exec -it postgres -- bash -c "psql -U postgres futureporn_db -f /home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql"
+# kubectl -n futureporn exec -i postgres -- pg_restore -U postgres -d futureporn_db < /home/cj/Documents/futureporn-meta/backups/2024-05-21_21-44-35-futureporn-db.psql
+
+# kubectl exec -i POD_NAME -- pg_restore -U USERNAME -C -d DATABASE < dump.sql
+
+
+kubectl -n futureporn cp /home/cj/Documents/futureporn-meta/backups/$dbname "${postgres_pod_name}":/tmp/db.psql
+kubectl -n futureporn exec -i "${postgres_pod_name}" -- env PGPASSWORD=${POSTGRES_PASSWORD} pg_restore -U postgres -d futureporn_db /tmp/db.psql
+# kubectl -n futureporn exec -ti db-postgresql-0 -- rm /tmp/db.psql
--- a/packages/scripts/velero-create.sh
+++ b/packages/scripts/velero-create.sh
@ -0,0 +1,11 @@
+#!/bin/bash
+
+
+velero install \
+    --provider aws \
+    --bucket futureporn-db-backup \
+    --plugins velero/velero-plugin-for-aws:v1.10.0 \
+    --namespace=futureporn \
+    --secret-file=.env.velero \
+    --use-volume-snapshots=false \
+    --backup-location-config region=us-west-000,s3ForcePathStyle="true",s3Url=https://s3.us-west-000.backblazeb2.com
--- a/services/bright/assets/package.json
+++ b/services/bright/assets/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "hls.js": "^1.5.18",
+    "vidstack": "^1.12.12"
+  }
+}
--- a/services/bright/lib/bright/platforms.ex
+++ b/services/bright/lib/bright/platforms.ex
@ -0,0 +1,104 @@
+defmodule Bright.Platforms do
+  @moduledoc """
+  The Platforms context.
+  """
+
+  import Ecto.Query, warn: false
+  alias Bright.Repo
+
+  alias Bright.Platforms.Platform
+
+  @doc """
+  Returns the list of platforms.
+
+  ## Examples
+
+      iex> list_platforms()
+      [%Platform{}, ...]
+
+  """
+  def list_platforms do
+    Repo.all(Platform)
+  end
+
+  @doc """
+  Gets a single platform.
+
+  Raises `Ecto.NoResultsError` if the Platform does not exist.
+
+  ## Examples
+
+      iex> get_platform!(123)
+      %Platform{}
+
+      iex> get_platform!(456)
+      ** (Ecto.NoResultsError)
+
+  """
+  def get_platform!(id), do: Repo.get!(Platform, id)
+
+  @doc """
+  Creates a platform.
+
+  ## Examples
+
+      iex> create_platform(%{field: value})
+      {:ok, %Platform{}}
+
+      iex> create_platform(%{field: bad_value})
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def create_platform(attrs \\ %{}) do
+    %Platform{}
+    |> Platform.changeset(attrs)
+    |> Repo.insert()
+  end
+
+  @doc """
+  Updates a platform.
+
+  ## Examples
+
+      iex> update_platform(platform, %{field: new_value})
+      {:ok, %Platform{}}
+
+      iex> update_platform(platform, %{field: bad_value})
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def update_platform(%Platform{} = platform, attrs) do
+    platform
+    |> Platform.changeset(attrs)
+    |> Repo.update()
+  end
+
+  @doc """
+  Deletes a platform.
+
+  ## Examples
+
+      iex> delete_platform(platform)
+      {:ok, %Platform{}}
+
+      iex> delete_platform(platform)
+      {:error, %Ecto.Changeset{}}
+
+  """
+  def delete_platform(%Platform{} = platform) do
+    Repo.delete(platform)
+  end
+
+  @doc """
+  Returns an `%Ecto.Changeset{}` for tracking platform changes.
+
+  ## Examples
+
+      iex> change_platform(platform)
+      %Ecto.Changeset{data: %Platform{}}
+
+  """
+  def change_platform(%Platform{} = platform, attrs \\ %{}) do
+    Platform.changeset(platform, attrs)
+  end
+end
--- a/services/bright/lib/free_oban_ui.ex
+++ b/services/bright/lib/free_oban_ui.ex
@ -0,0 +1,9 @@
+defmodule FreeObanUi do
+  @moduledoc """
+  FreeObanUi keeps the contexts that define your domain
+  and business logic.
+
+  Contexts are also responsible for managing your data, regardless
+  if it comes from the database, an external API or others.
+  """
+end
--- a/services/bright/lib/free_oban_ui/application.ex
+++ b/services/bright/lib/free_oban_ui/application.ex
@ -0,0 +1,37 @@
+defmodule FreeObanUi.Application do
+  # See https://hexdocs.pm/elixir/Application.html
+  # for more information on OTP Applications
+  @moduledoc false
+
+  use Application
+
+  @impl true
+  def start(_type, _args) do
+    children = [
+      FreeObanUiWeb.Telemetry,
+      FreeObanUi.Repo,
+      {DNSCluster, query: Application.get_env(:free_oban_ui, :dns_cluster_query) || :ignore},
+      {Phoenix.PubSub, name: FreeObanUi.PubSub},
+      # Start the Finch HTTP client for sending emails
+      {Finch, name: FreeObanUi.Finch},
+      {Oban, Application.fetch_env!(:free_oban_ui, Oban)},
+      # Start a worker by calling: FreeObanUi.Worker.start_link(arg)
+      # {FreeObanUi.Worker, arg},
+      # Start to serve requests, typically the last entry
+      FreeObanUiWeb.Endpoint
+    ]
+
+    # See https://hexdocs.pm/elixir/Supervisor.html
+    # for other strategies and supported options
+    opts = [strategy: :one_for_one, name: FreeObanUi.Supervisor]
+    Supervisor.start_link(children, opts)
+  end
+
+  # Tell Phoenix to update the endpoint configuration
+  # whenever the application is updated.
+  @impl true
+  def config_change(changed, _new, removed) do
+    FreeObanUiWeb.Endpoint.config_change(changed, removed)
+    :ok
+  end
+end
--- a/services/bright/lib/free_oban_ui/mailer.ex
+++ b/services/bright/lib/free_oban_ui/mailer.ex
@ -0,0 +1,3 @@
+defmodule FreeObanUi.Mailer do
+  use Swoosh.Mailer, otp_app: :free_oban_ui
+end
--- a/services/bright/lib/free_oban_ui/repo.ex
+++ b/services/bright/lib/free_oban_ui/repo.ex
@ -0,0 +1,5 @@
+defmodule FreeObanUi.Repo do
+  use Ecto.Repo,
+    otp_app: :free_oban_ui,
+    adapter: Ecto.Adapters.Postgres
+end
--- a/services/bright/lib/free_oban_ui_web.ex
+++ b/services/bright/lib/free_oban_ui_web.ex
@ -0,0 +1,113 @@
+defmodule FreeObanUiWeb do
+  @moduledoc """
+  The entrypoint for defining your web interface, such
+  as controllers, components, channels, and so on.
+
+  This can be used in your application as:
+
+      use FreeObanUiWeb, :controller
+      use FreeObanUiWeb, :html
+
+  The definitions below will be executed for every controller,
+  component, etc, so keep them short and clean, focused
+  on imports, uses and aliases.
+
+  Do NOT define functions inside the quoted expressions
+  below. Instead, define additional modules and import
+  those modules here.
+  """
+
+  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+
+  def router do
+    quote do
+      use Phoenix.Router, helpers: false
+
+      # Import common connection and controller functions to use in pipelines
+      import Plug.Conn
+      import Phoenix.Controller
+      import Phoenix.LiveView.Router
+    end
+  end
+
+  def channel do
+    quote do
+      use Phoenix.Channel
+    end
+  end
+
+  def controller do
+    quote do
+      use Phoenix.Controller,
+        formats: [:html, :json],
+        layouts: [html: FreeObanUiWeb.Layouts]
+
+      import Plug.Conn
+      import FreeObanUiWeb.Gettext
+
+      unquote(verified_routes())
+    end
+  end
+
+  def live_view do
+    quote do
+      use Phoenix.LiveView,
+        layout: {FreeObanUiWeb.Layouts, :app}
+
+      unquote(html_helpers())
+    end
+  end
+
+  def live_component do
+    quote do
+      use Phoenix.LiveComponent
+
+      unquote(html_helpers())
+    end
+  end
+
+  def html do
+    quote do
+      use Phoenix.Component
+
+      # Import convenience functions from controllers
+      import Phoenix.Controller,
+        only: [get_csrf_token: 0, view_module: 1, view_template: 1]
+
+      # Include general helpers for rendering HTML
+      unquote(html_helpers())
+    end
+  end
+
+  defp html_helpers do
+    quote do
+      # HTML escaping functionality
+      import Phoenix.HTML
+      # Core UI components and translation
+      import FreeObanUiWeb.CoreComponents
+      import FreeObanUiWeb.Gettext
+
+      # Shortcut for generating JS commands
+      alias Phoenix.LiveView.JS
+
+      # Routes generation with the ~p sigil
+      unquote(verified_routes())
+    end
+  end
+
+  def verified_routes do
+    quote do
+      use Phoenix.VerifiedRoutes,
+        endpoint: FreeObanUiWeb.Endpoint,
+        router: FreeObanUiWeb.Router,
+        statics: FreeObanUiWeb.static_paths()
+    end
+  end
+
+  @doc """
+  When used, dispatch to the appropriate controller/live_view/etc.
+  """
+  defmacro __using__(which) when is_atom(which) do
+    apply(__MODULE__, which, [])
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/components/core_components.ex
+++ b/services/bright/lib/free_oban_ui_web/components/core_components.ex
@ -0,0 +1,676 @@
+defmodule FreeObanUiWeb.CoreComponents do
+  @moduledoc """
+  Provides core UI components.
+
+  At first glance, this module may seem daunting, but its goal is to provide
+  core building blocks for your application, such as modals, tables, and
+  forms. The components consist mostly of markup and are well-documented
+  with doc strings and declarative assigns. You may customize and style
+  them in any way you want, based on your application growth and needs.
+
+  The default components use Tailwind CSS, a utility-first CSS framework.
+  See the [Tailwind CSS documentation](https://tailwindcss.com) to learn
+  how to customize them or feel free to swap in another framework altogether.
+
+  Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
+  """
+  use Phoenix.Component
+
+  alias Phoenix.LiveView.JS
+  import FreeObanUiWeb.Gettext
+
+  @doc """
+  Renders a modal.
+
+  ## Examples
+
+      <.modal id="confirm-modal">
+        This is a modal.
+      </.modal>
+
+  JS commands may be passed to the `:on_cancel` to configure
+  the closing/cancel event, for example:
+
+      <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
+        This is another modal.
+      </.modal>
+
+  """
+  attr :id, :string, required: true
+  attr :show, :boolean, default: false
+  attr :on_cancel, JS, default: %JS{}
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <div
+      id={@id}
+      phx-mounted={@show && show_modal(@id)}
+      phx-remove={hide_modal(@id)}
+      data-cancel={JS.exec(@on_cancel, "phx-remove")}
+      class="relative z-50 hidden"
+    >
+      <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
+      <div
+        class="fixed inset-0 overflow-y-auto"
+        aria-labelledby={"#{@id}-title"}
+        aria-describedby={"#{@id}-description"}
+        role="dialog"
+        aria-modal="true"
+        tabindex="0"
+      >
+        <div class="flex min-h-full items-center justify-center">
+          <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
+            <.focus_wrap
+              id={"#{@id}-container"}
+              phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
+              phx-key="escape"
+              phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
+              class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition"
+            >
+              <div class="absolute top-6 right-5">
+                <button
+                  phx-click={JS.exec("data-cancel", to: "##{@id}")}
+                  type="button"
+                  class="-m-3 flex-none p-3 opacity-20 hover:opacity-40"
+                  aria-label={gettext("close")}
+                >
+                  <.icon name="hero-x-mark-solid" class="h-5 w-5" />
+                </button>
+              </div>
+              <div id={"#{@id}-content"}>
+                <%= render_slot(@inner_block) %>
+              </div>
+            </.focus_wrap>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders flash notices.
+
+  ## Examples
+
+      <.flash kind={:info} flash={@flash} />
+      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
+  """
+  attr :id, :string, doc: "the optional id of flash container"
+  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
+  attr :title, :string, default: nil
+  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
+
+  slot :inner_block, doc: "the optional inner block that renders the flash message"
+
+  def flash(assigns) do
+    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
+
+    ~H"""
+    <div
+      :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
+      id={@id}
+      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+      role="alert"
+      class={[
+        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
+        @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
+        @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
+      ]}
+      {@rest}
+    >
+      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
+        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
+        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
+        <%= @title %>
+      </p>
+      <p class="mt-2 text-sm leading-5"><%= msg %></p>
+      <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
+        <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
+      </button>
+    </div>
+    """
+  end
+
+  @doc """
+  Shows the flash group with standard titles and content.
+
+  ## Examples
+
+      <.flash_group flash={@flash} />
+  """
+  attr :flash, :map, required: true, doc: "the map of flash messages"
+  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
+
+  def flash_group(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.flash kind={:info} title={gettext("Success!")} flash={@flash} />
+      <.flash kind={:error} title={gettext("Error!")} flash={@flash} />
+      <.flash
+        id="client-error"
+        kind={:error}
+        title={gettext("We can't find the internet")}
+        phx-disconnected={show(".phx-client-error #client-error")}
+        phx-connected={hide("#client-error")}
+        hidden
+      >
+        <%= gettext("Attempting to reconnect") %>
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+
+      <.flash
+        id="server-error"
+        kind={:error}
+        title={gettext("Something went wrong!")}
+        phx-disconnected={show(".phx-server-error #server-error")}
+        phx-connected={hide("#server-error")}
+        hidden
+      >
+        <%= gettext("Hang in there while we get back on track") %>
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a simple form.
+
+  ## Examples
+
+      <.simple_form for={@form} phx-change="validate" phx-submit="save">
+        <.input field={@form[:email]} label="Email"/>
+        <.input field={@form[:username]} label="Username" />
+        <:actions>
+          <.button>Save</.button>
+        </:actions>
+      </.simple_form>
+  """
+  attr :for, :any, required: true, doc: "the data structure for the form"
+  attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+
+  attr :rest, :global,
+    include: ~w(autocomplete name rel action enctype method novalidate target multipart),
+    doc: "the arbitrary HTML attributes to apply to the form tag"
+
+  slot :inner_block, required: true
+  slot :actions, doc: "the slot for form actions, such as a submit button"
+
+  def simple_form(assigns) do
+    ~H"""
+    <.form :let={f} for={@for} as={@as} {@rest}>
+      <div class="mt-10 space-y-8 bg-white">
+        <%= render_slot(@inner_block, f) %>
+        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
+          <%= render_slot(action, f) %>
+        </div>
+      </div>
+    </.form>
+    """
+  end
+
+  @doc """
+  Renders a button.
+
+  ## Examples
+
+      <.button>Send!</.button>
+      <.button phx-click="go" class="ml-2">Send!</.button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  @doc """
+  Renders an input with label and error messages.
+
+  A `Phoenix.HTML.FormField` may be passed as argument,
+  which is used to retrieve the input name, id, and values.
+  Otherwise all attributes may be passed explicitly.
+
+  ## Types
+
+  This function accepts all HTML input types, considering that:
+
+    * You may also set `type="select"` to render a `<select>` tag
+
+    * `type="checkbox"` is used exclusively to render boolean values
+
+    * For live file uploads, see `Phoenix.Component.live_file_input/1`
+
+  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+  for more information. Unsupported types, such as hidden and radio,
+  are best written directly in your templates.
+
+  ## Examples
+
+      <.input field={@form[:email]} type="email" />
+      <.input name="my-input" errors={["oh no!"]} />
+  """
+  attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
+
+  attr :type, :string,
+    default: "text",
+    values: ~w(checkbox color date datetime-local email file month number password
+               range search select tel text textarea time url week)
+
+  attr :field, Phoenix.HTML.FormField,
+    doc: "a form field struct retrieved from the form, for example: @form[:email]"
+
+  attr :errors, :list, default: []
+  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
+  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
+  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
+  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
+
+  attr :rest, :global,
+    include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
+                multiple pattern placeholder readonly required rows size step)
+
+  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
+    errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
+
+    assigns
+    |> assign(field: nil, id: assigns.id || field.id)
+    |> assign(:errors, Enum.map(errors, &translate_error(&1)))
+    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
+    |> assign_new(:value, fn -> field.value end)
+    |> input()
+  end
+
+  def input(%{type: "checkbox"} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn ->
+        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+      end)
+
+    ~H"""
+    <div>
+      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+        <input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
+        <input
+          type="checkbox"
+          id={@id}
+          name={@name}
+          value="true"
+          checked={@checked}
+          class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
+          {@rest}
+        />
+        <%= @label %>
+      </label>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
+  def input(%{type: "select"} = assigns) do
+    ~H"""
+    <div>
+      <.label for={@id}><%= @label %></.label>
+      <select
+        id={@id}
+        name={@name}
+        class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+        multiple={@multiple}
+        {@rest}
+      >
+        <option :if={@prompt} value=""><%= @prompt %></option>
+        <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+      </select>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
+  def input(%{type: "textarea"} = assigns) do
+    ~H"""
+    <div>
+      <.label for={@id}><%= @label %></.label>
+      <textarea
+        id={@id}
+        name={@name}
+        class={[
+          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 min-h-[6rem]",
+          @errors == [] && "border-zinc-300 focus:border-zinc-400",
+          @errors != [] && "border-rose-400 focus:border-rose-400"
+        ]}
+        {@rest}
+      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
+  # All other inputs text, datetime-local, url, password, etc. are handled here...
+  def input(assigns) do
+    ~H"""
+    <div>
+      <.label for={@id}><%= @label %></.label>
+      <input
+        type={@type}
+        name={@name}
+        id={@id}
+        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
+        class={[
+          "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
+          @errors == [] && "border-zinc-300 focus:border-zinc-400",
+          @errors != [] && "border-rose-400 focus:border-rose-400"
+        ]}
+        {@rest}
+      />
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a label.
+  """
+  attr :for, :string, default: nil
+  slot :inner_block, required: true
+
+  def label(assigns) do
+    ~H"""
+    <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
+      <%= render_slot(@inner_block) %>
+    </label>
+    """
+  end
+
+  @doc """
+  Generates a generic error message.
+  """
+  slot :inner_block, required: true
+
+  def error(assigns) do
+    ~H"""
+    <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600">
+      <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
+  @doc """
+  Renders a header with title.
+  """
+  attr :class, :string, default: nil
+
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
+
+  def header(assigns) do
+    ~H"""
+    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
+      <div>
+        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+          <%= render_slot(@inner_block) %>
+        </h1>
+        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+          <%= render_slot(@subtitle) %>
+        </p>
+      </div>
+      <div class="flex-none"><%= render_slot(@actions) %></div>
+    </header>
+    """
+  end
+
+  @doc ~S"""
+  Renders a table with generic styling.
+
+  ## Examples
+
+      <.table id="users" rows={@users}>
+        <:col :let={user} label="id"><%= user.id %></:col>
+        <:col :let={user} label="username"><%= user.username %></:col>
+      </.table>
+  """
+  attr :id, :string, required: true
+  attr :rows, :list, required: true
+  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
+  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
+
+  attr :row_item, :any,
+    default: &Function.identity/1,
+    doc: "the function for mapping each row before calling the :col and :action slots"
+
+  slot :col, required: true do
+    attr :label, :string
+  end
+
+  slot :action, doc: "the slot for showing user actions in the last table column"
+
+  def table(assigns) do
+    assigns =
+      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
+        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
+      end
+
+    ~H"""
+    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
+      <table class="w-[40rem] mt-11 sm:w-full">
+        <thead class="text-sm text-left leading-6 text-zinc-500">
+          <tr>
+            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :if={@action != []} class="relative p-0 pb-4">
+              <span class="sr-only"><%= gettext("Actions") %></span>
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          id={@id}
+          phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
+          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+        >
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
+            <td
+              :for={{col, i} <- Enum.with_index(@col)}
+              phx-click={@row_click && @row_click.(row)}
+              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
+            >
+              <div class="block py-4 pr-6">
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
+                <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
+                  <%= render_slot(col, @row_item.(row)) %>
+                </span>
+              </div>
+            </td>
+            <td :if={@action != []} class="relative w-14 p-0">
+              <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
+                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
+                <span
+                  :for={action <- @action}
+                  class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+                >
+                  <%= render_slot(action, @row_item.(row)) %>
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a data list.
+
+  ## Examples
+
+      <.list>
+        <:item title="Title"><%= @post.title %></:item>
+        <:item title="Views"><%= @post.views %></:item>
+      </.list>
+  """
+  slot :item, required: true do
+    attr :title, :string, required: true
+  end
+
+  def list(assigns) do
+    ~H"""
+    <div class="mt-14">
+      <dl class="-my-4 divide-y divide-zinc-100">
+        <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
+          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
+          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+        </div>
+      </dl>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a back navigation link.
+
+  ## Examples
+
+      <.back navigate={~p"/posts"}>Back to posts</.back>
+  """
+  attr :navigate, :any, required: true
+  slot :inner_block, required: true
+
+  def back(assigns) do
+    ~H"""
+    <div class="mt-16">
+      <.link
+        navigate={@navigate}
+        class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
+      >
+        <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
+        <%= render_slot(@inner_block) %>
+      </.link>
+    </div>
+    """
+  end
+
+  @doc """
+  Renders a [Heroicon](https://heroicons.com).
+
+  Heroicons come in three styles – outline, solid, and mini.
+  By default, the outline style is used, but solid and mini may
+  be applied by using the `-solid` and `-mini` suffix.
+
+  You can customize the size and colors of the icons by setting
+  width, height, and background color classes.
+
+  Icons are extracted from the `deps/heroicons` directory and bundled within
+  your compiled app.css by the plugin in your `assets/tailwind.config.js`.
+
+  ## Examples
+
+      <.icon name="hero-x-mark-solid" />
+      <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+  """
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
+
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
+
+  ## JS Commands
+
+  def show(js \\ %JS{}, selector) do
+    JS.show(js,
+      to: selector,
+      time: 300,
+      transition:
+        {"transition-all transform ease-out duration-300",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+         "opacity-100 translate-y-0 sm:scale-100"}
+    )
+  end
+
+  def hide(js \\ %JS{}, selector) do
+    JS.hide(js,
+      to: selector,
+      time: 200,
+      transition:
+        {"transition-all transform ease-in duration-200",
+         "opacity-100 translate-y-0 sm:scale-100",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+    )
+  end
+
+  def show_modal(js \\ %JS{}, id) when is_binary(id) do
+    js
+    |> JS.show(to: "##{id}")
+    |> JS.show(
+      to: "##{id}-bg",
+      time: 300,
+      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
+    )
+    |> show("##{id}-container")
+    |> JS.add_class("overflow-hidden", to: "body")
+    |> JS.focus_first(to: "##{id}-content")
+  end
+
+  def hide_modal(js \\ %JS{}, id) do
+    js
+    |> JS.hide(
+      to: "##{id}-bg",
+      transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
+    )
+    |> hide("##{id}-container")
+    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+    |> JS.remove_class("overflow-hidden", to: "body")
+    |> JS.pop_focus()
+  end
+
+  @doc """
+  Translates an error message using gettext.
+  """
+  def translate_error({msg, opts}) do
+    # When using gettext, we typically pass the strings we want
+    # to translate as a static argument:
+    #
+    #     # Translate the number of files with plural rules
+    #     dngettext("errors", "1 file", "%{count} files", count)
+    #
+    # However the error messages in our forms and APIs are generated
+    # dynamically, so we need to translate them by calling Gettext
+    # with our gettext backend as first argument. Translations are
+    # available in the errors.po file (as we use the "errors" domain).
+    if count = opts[:count] do
+      Gettext.dngettext(FreeObanUiWeb.Gettext, "errors", msg, msg, count, opts)
+    else
+      Gettext.dgettext(FreeObanUiWeb.Gettext, "errors", msg, opts)
+    end
+  end
+
+  @doc """
+  Translates the errors for a field from a keyword list of errors.
+  """
+  def translate_errors(errors, field) when is_list(errors) do
+    for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/components/layouts.ex
+++ b/services/bright/lib/free_oban_ui_web/components/layouts.ex
@ -0,0 +1,14 @@
+defmodule FreeObanUiWeb.Layouts do
+  @moduledoc """
+  This module holds different layouts used by your application.
+
+  See the `layouts` directory for all templates available.
+  The "root" layout is a skeleton rendered as part of the
+  application router. The "app" layout is set as the default
+  layout on both `use FreeObanUiWeb, :controller` and
+  `use FreeObanUiWeb, :live_view`.
+  """
+  use FreeObanUiWeb, :html
+
+  embed_templates "layouts/*"
+end
--- a/services/bright/lib/free_oban_ui_web/components/layouts/app.html.heex
+++ b/services/bright/lib/free_oban_ui_web/components/layouts/app.html.heex
@ -0,0 +1,2 @@
+<.flash_group flash={@flash} />
+<%= @inner_content %>
--- a/services/bright/lib/free_oban_ui_web/components/layouts/root.html.heex
+++ b/services/bright/lib/free_oban_ui_web/components/layouts/root.html.heex
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title suffix=" · Phoenix Framework">
+      <%= assigns[:page_title] || "FreeObanUi" %>
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body class="bg-neutral-100">
+    <%= @inner_content %>
+  </body>
+</html>
--- a/services/bright/lib/free_oban_ui_web/controllers/error_html.ex
+++ b/services/bright/lib/free_oban_ui_web/controllers/error_html.ex
@ -0,0 +1,24 @@
+defmodule FreeObanUiWeb.ErrorHTML do
+  @moduledoc """
+  This module is invoked by your endpoint in case of errors on HTML requests.
+
+  See config/config.exs.
+  """
+  use FreeObanUiWeb, :html
+
+  # If you want to customize your error pages,
+  # uncomment the embed_templates/1 call below
+  # and add pages to the error directory:
+  #
+  #   * lib/free_oban_ui_web/controllers/error_html/404.html.heex
+  #   * lib/free_oban_ui_web/controllers/error_html/500.html.heex
+  #
+  # embed_templates "error_html/*"
+
+  # The default is to render a plain text page based on
+  # the template name. For example, "404.html" becomes
+  # "Not Found".
+  def render(template, _assigns) do
+    Phoenix.Controller.status_message_from_template(template)
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/controllers/error_json.ex
+++ b/services/bright/lib/free_oban_ui_web/controllers/error_json.ex
@ -0,0 +1,21 @@
+defmodule FreeObanUiWeb.ErrorJSON do
+  @moduledoc """
+  This module is invoked by your endpoint in case of errors on JSON requests.
+
+  See config/config.exs.
+  """
+
+  # If you want to customize a particular status code,
+  # you may add your own clauses, such as:
+  #
+  # def render("500.json", _assigns) do
+  #   %{errors: %{detail: "Internal Server Error"}}
+  # end
+
+  # By default, Phoenix returns the status message from
+  # the template name. For example, "404.json" becomes
+  # "Not Found".
+  def render(template, _assigns) do
+    %{errors: %{detail: Phoenix.Controller.status_message_from_template(template)}}
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/controllers/page_controller.ex
+++ b/services/bright/lib/free_oban_ui_web/controllers/page_controller.ex
@ -0,0 +1,9 @@
+defmodule FreeObanUiWeb.PageController do
+  use FreeObanUiWeb, :controller
+
+  def home(conn, _params) do
+    # The home page is often custom made,
+    # so skip the default app layout.
+    render(conn, :home, layout: false)
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/controllers/page_html.ex
+++ b/services/bright/lib/free_oban_ui_web/controllers/page_html.ex
@ -0,0 +1,10 @@
+defmodule FreeObanUiWeb.PageHTML do
+  @moduledoc """
+  This module contains pages rendered by PageController.
+
+  See the `page_html` directory for all templates available.
+  """
+  use FreeObanUiWeb, :html
+
+  embed_templates "page_html/*"
+end
--- a/services/bright/lib/free_oban_ui_web/controllers/page_html/home.html.heex
+++ b/services/bright/lib/free_oban_ui_web/controllers/page_html/home.html.heex
@ -0,0 +1,222 @@
+<.flash_group flash={@flash} />
+<div class="left-[40rem] fixed inset-y-0 right-0 z-0 hidden lg:block xl:left-[50rem]">
+  <svg
+    viewBox="0 0 1480 957"
+    fill="none"
+    aria-hidden="true"
+    class="absolute inset-0 h-full w-full"
+    preserveAspectRatio="xMinYMid slice"
+  >
+    <path fill="#EE7868" d="M0 0h1480v957H0z" />
+    <path
+      d="M137.542 466.27c-582.851-48.41-988.806-82.127-1608.412 658.2l67.39 810 3083.15-256.51L1535.94-49.622l-98.36 8.183C1269.29 281.468 734.115 515.799 146.47 467.012l-8.928-.742Z"
+      fill="#FF9F92"
+    />
+    <path
+      d="M371.028 528.664C-169.369 304.988-545.754 149.198-1361.45 665.565l-182.58 792.025 3014.73 694.98 389.42-1689.25-96.18-22.171C1505.28 697.438 924.153 757.586 379.305 532.09l-8.277-3.426Z"
+      fill="#FA8372"
+    />
+    <path
+      d="M359.326 571.714C-104.765 215.795-428.003-32.102-1349.55 255.554l-282.3 1224.596 3047.04 722.01 312.24-1354.467C1411.25 1028.3 834.355 935.995 366.435 577.166l-7.109-5.452Z"
+      fill="#E96856"
+      fill-opacity=".6"
+    />
+    <path
+      d="M1593.87 1236.88c-352.15 92.63-885.498-145.85-1244.602-613.557l-5.455-7.105C-12.347 152.31-260.41-170.8-1225-131.458l-368.63 1599.048 3057.19 704.76 130.31-935.47Z"
+      fill="#C42652"
+      fill-opacity=".2"
+    />
+    <path
+      d="M1411.91 1526.93c-363.79 15.71-834.312-330.6-1085.883-863.909l-3.822-8.102C72.704 125.95-101.074-242.476-1052.01-408.907l-699.85 1484.267 2837.75 1338.01 326.02-886.44Z"
+      fill="#A41C42"
+      fill-opacity=".2"
+    />
+    <path
+      d="M1116.26 1863.69c-355.457-78.98-720.318-535.27-825.287-1115.521l-1.594-8.816C185.286 163.833 112.786-237.016-762.678-643.898L-1822.83 608.665 571.922 2635.55l544.338-771.86Z"
+      fill="#A41C42"
+      fill-opacity=".2"
+    />
+  </svg>
+</div>
+<div class="px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32">
+  <div class="mx-auto max-w-xl lg:mx-0">
+    <svg viewBox="0 0 71 48" class="h-12" aria-hidden="true">
+      <path
+        d="m26.371 33.477-.552-.1c-3.92-.729-6.397-3.1-7.57-6.829-.733-2.324.597-4.035 3.035-4.148 1.995-.092 3.362 1.055 4.57 2.39 1.557 1.72 2.984 3.558 4.514 5.305 2.202 2.515 4.797 4.134 8.347 3.634 3.183-.448 5.958-1.725 8.371-3.828.363-.316.761-.592 1.144-.886l-.241-.284c-2.027.63-4.093.841-6.205.735-3.195-.16-6.24-.828-8.964-2.582-2.486-1.601-4.319-3.746-5.19-6.611-.704-2.315.736-3.934 3.135-3.6.948.133 1.746.56 2.463 1.165.583.493 1.143 1.015 1.738 1.493 2.8 2.25 6.712 2.375 10.265-.068-5.842-.026-9.817-3.24-13.308-7.313-1.366-1.594-2.7-3.216-4.095-4.785-2.698-3.036-5.692-5.71-9.79-6.623C12.8-.623 7.745.14 2.893 2.361 1.926 2.804.997 3.319 0 4.149c.494 0 .763.006 1.032 0 2.446-.064 4.28 1.023 5.602 3.024.962 1.457 1.415 3.104 1.761 4.798.513 2.515.247 5.078.544 7.605.761 6.494 4.08 11.026 10.26 13.346 2.267.852 4.591 1.135 7.172.555ZM10.751 3.852c-.976.246-1.756-.148-2.56-.962 1.377-.343 2.592-.476 3.897-.528-.107.848-.607 1.306-1.336 1.49Zm32.002 37.924c-.085-.626-.62-.901-1.04-1.228-1.857-1.446-4.03-1.958-6.333-2-1.375-.026-2.735-.128-4.031-.61-.595-.22-1.26-.505-1.244-1.272.015-.78.693-1 1.31-1.184.505-.15 1.026-.247 1.6-.382-1.46-.936-2.886-1.065-4.787-.3-2.993 1.202-5.943 1.06-8.926-.017-1.684-.608-3.179-1.563-4.735-2.408l-.043.03a2.96 2.96 0 0 0 .04-.029c-.038-.117-.107-.12-.197-.054l.122.107c1.29 2.115 3.034 3.817 5.004 5.271 3.793 2.8 7.936 4.471 12.784 3.73A66.714 66.714 0 0 1 37 40.877c1.98-.16 3.866.398 5.753.899Zm-9.14-30.345c-.105-.076-.206-.266-.42-.069 1.745 2.36 3.985 4.098 6.683 5.193 4.354 1.767 8.773 2.07 13.293.51 3.51-1.21 6.033-.028 7.343 3.38.19-3.955-2.137-6.837-5.843-7.401-2.084-.318-4.01.373-5.962.94-5.434 1.575-10.485.798-15.094-2.553Zm27.085 15.425c.708.059 1.416.123 2.124.185-1.6-1.405-3.55-1.517-5.523-1.404-3.003.17-5.167 1.903-7.14 3.972-1.739 1.824-3.31 3.87-5.903 4.604.043.078.054.117.066.117.35.005.699.021 1.047.005 3.768-.17 7.317-.965 10.14-3.7.89-.86 1.685-1.817 2.544-2.71.716-.746 1.584-1.159 2.645-1.07Zm-8.753-4.67c-2.812.246-5.254 1.409-7.548 2.943-1.766 1.18-3.654 1.738-5.776 1.37-.374-.066-.75-.114-1.124-.17l-.013.156c.135.07.265.151.405.207.354.14.702.308 1.07.395 4.083.971 7.992.474 11.516-1.803 2.221-1.435 4.521-1.707 7.013-1.336.252.038.503.083.756.107.234.022.479.255.795.003-2.179-1.574-4.526-2.096-7.094-1.872Zm-10.049-9.544c1.475.051 2.943-.142 4.486-1.059-.452.04-.643.04-.827.076-2.126.424-4.033-.04-5.733-1.383-.623-.493-1.257-.974-1.889-1.457-2.503-1.914-5.374-2.555-8.514-2.5.05.154.054.26.108.315 3.417 3.455 7.371 5.836 12.369 6.008Zm24.727 17.731c-2.114-2.097-4.952-2.367-7.578-.537 1.738.078 3.043.632 4.101 1.728.374.388.763.768 1.182 1.106 1.6 1.29 4.311 1.352 5.896.155-1.861-.726-1.861-.726-3.601-2.452Zm-21.058 16.06c-1.858-3.46-4.981-4.24-8.59-4.008a9.667 9.667 0 0 1 2.977 1.39c.84.586 1.547 1.311 2.243 2.055 1.38 1.473 3.534 2.376 4.962 2.07-.656-.412-1.238-.848-1.592-1.507Zm17.29-19.32c0-.023.001-.045.003-.068l-.006.006.006-.006-.036-.004.021.018.012.053Zm-20 14.744a7.61 7.61 0 0 0-.072-.041.127.127 0 0 0 .015.043c.005.008.038 0 .058-.002Zm-.072-.041-.008-.034-.008.01.008-.01-.022-.006.005.026.024.014Z"
+        fill="#FD4F00"
+      />
+    </svg>
+    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
+      Phoenix Framework
+      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
+        v<%= Application.spec(:phoenix, :vsn) %>
+      </small>
+    </h1>
+    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900 text-balance">
+      Peace of mind from prototype to production.
+    </p>
+    <p class="mt-4 text-base leading-7 text-zinc-600">
+      Build rich, interactive web applications quickly, with less code and fewer moving parts. Join our growing community of developers using Phoenix to craft APIs, HTML5 apps and more, for fun or at scale.
+    </p>
+    <div class="flex">
+      <div class="w-full sm:w-auto">
+        <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
+          <a
+            href="https://hexdocs.pm/phoenix/overview.html"
+            class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+          >
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            </span>
+            <span class="relative flex items-center gap-4 sm:flex-col">
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6">
+                <path d="m12 4 10-2v18l-10 2V4Z" fill="#18181B" fill-opacity=".15" />
+                <path
+                  d="M12 4 2 2v18l10 2m0-18v18m0-18 10-2v18l-10 2"
+                  stroke="#18181B"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Guides &amp; Docs
+            </span>
+          </a>
+          <a
+            href="https://github.com/phoenixframework/phoenix"
+            class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+          >
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            </span>
+            <span class="relative flex items-center gap-4 sm:flex-col">
+              <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M12 0C5.37 0 0 5.506 0 12.303c0 5.445 3.435 10.043 8.205 11.674.6.107.825-.262.825-.585 0-.292-.015-1.261-.015-2.291C6 21.67 5.22 20.346 4.98 19.654c-.135-.354-.72-1.446-1.23-1.738-.42-.23-1.02-.8-.015-.815.945-.015 1.62.892 1.845 1.261 1.08 1.86 2.805 1.338 3.495 1.015.105-.8.42-1.338.765-1.645-2.67-.308-5.46-1.37-5.46-6.075 0-1.338.465-2.446 1.23-3.307-.12-.308-.54-1.569.12-3.26 0 0 1.005-.323 3.3 1.26.96-.276 1.98-.415 3-.415s2.04.139 3 .416c2.295-1.6 3.3-1.261 3.3-1.261.66 1.691.24 2.952.12 3.26.765.861 1.23 1.953 1.23 3.307 0 4.721-2.805 5.767-5.475 6.075.435.384.81 1.122.81 2.276 0 1.645-.015 2.968-.015 3.383 0 .323.225.707.825.585a12.047 12.047 0 0 0 5.919-4.489A12.536 12.536 0 0 0 24 12.304C24 5.505 18.63 0 12 0Z"
+                  fill="#18181B"
+                />
+              </svg>
+              Source Code
+            </span>
+          </a>
+          <a
+            href={"https://github.com/phoenixframework/phoenix/blob/v#{Application.spec(:phoenix, :vsn)}/CHANGELOG.md"}
+            class="group relative rounded-2xl px-6 py-4 text-sm font-semibold leading-6 text-zinc-900 sm:py-6"
+          >
+            <span class="absolute inset-0 rounded-2xl bg-zinc-50 transition group-hover:bg-zinc-100 sm:group-hover:scale-105">
+            </span>
+            <span class="relative flex items-center gap-4 sm:flex-col">
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="h-6 w-6">
+                <path
+                  d="M12 1v6M12 17v6"
+                  stroke="#18181B"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="4"
+                  fill="#18181B"
+                  fill-opacity=".15"
+                  stroke="#18181B"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              Changelog
+            </span>
+          </a>
+        </div>
+        <div class="mt-10 grid grid-cols-1 gap-y-4 text-sm leading-6 text-zinc-700 sm:grid-cols-2">
+          <div>
+            <a
+              href="https://twitter.com/elixirphoenix"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="h-4 w-4 fill-zinc-400 group-hover:fill-zinc-600"
+              >
+                <path d="M5.403 14c5.283 0 8.172-4.617 8.172-8.62 0-.131 0-.262-.008-.391A6.033 6.033 0 0 0 15 3.419a5.503 5.503 0 0 1-1.65.477 3.018 3.018 0 0 0 1.263-1.676 5.579 5.579 0 0 1-1.824.736 2.832 2.832 0 0 0-1.63-.916 2.746 2.746 0 0 0-1.821.319A2.973 2.973 0 0 0 8.076 3.78a3.185 3.185 0 0 0-.182 1.938 7.826 7.826 0 0 1-3.279-.918 8.253 8.253 0 0 1-2.64-2.247 3.176 3.176 0 0 0-.315 2.208 3.037 3.037 0 0 0 1.203 1.836A2.739 2.739 0 0 1 1.56 6.22v.038c0 .7.23 1.377.65 1.919.42.54 1.004.912 1.654 1.05-.423.122-.866.14-1.297.052.184.602.541 1.129 1.022 1.506a2.78 2.78 0 0 0 1.662.598 5.656 5.656 0 0 1-2.007 1.074A5.475 5.475 0 0 1 1 12.64a7.827 7.827 0 0 0 4.403 1.358" />
+              </svg>
+              Follow on Twitter
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://elixirforum.com"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="h-4 w-4 fill-zinc-400 group-hover:fill-zinc-600"
+              >
+                <path d="M8 13.833c3.866 0 7-2.873 7-6.416C15 3.873 11.866 1 8 1S1 3.873 1 7.417c0 1.081.292 2.1.808 2.995.606 1.05.806 2.399.086 3.375l-.208.283c-.285.386-.01.905.465.85.852-.098 2.048-.318 3.137-.81a3.717 3.717 0 0 1 1.91-.318c.263.027.53.041.802.041Z" />
+              </svg>
+              Discuss on the Elixir Forum
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://web.libera.chat/#elixir"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="h-4 w-4 fill-zinc-400 group-hover:fill-zinc-600"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M6.356 2.007a.75.75 0 0 1 .637.849l-1.5 10.5a.75.75 0 1 1-1.485-.212l1.5-10.5a.75.75 0 0 1 .848-.637ZM11.356 2.008a.75.75 0 0 1 .637.848l-1.5 10.5a.75.75 0 0 1-1.485-.212l1.5-10.5a.75.75 0 0 1 .848-.636Z"
+                />
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M14 5.25a.75.75 0 0 1-.75.75h-9.5a.75.75 0 0 1 0-1.5h9.5a.75.75 0 0 1 .75.75ZM13 10.75a.75.75 0 0 1-.75.75h-9.5a.75.75 0 0 1 0-1.5h9.5a.75.75 0 0 1 .75.75Z"
+                />
+              </svg>
+              Chat on Libera IRC
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://discord.gg/elixir"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                aria-hidden="true"
+                class="h-4 w-4 fill-zinc-400 group-hover:fill-zinc-600"
+              >
+                <path d="M13.545 2.995c-1.02-.46-2.114-.8-3.257-.994a.05.05 0 0 0-.052.024c-.141.246-.297.567-.406.82a12.377 12.377 0 0 0-3.658 0 8.238 8.238 0 0 0-.412-.82.052.052 0 0 0-.052-.024 13.315 13.315 0 0 0-3.257.994.046.046 0 0 0-.021.018C.356 6.063-.213 9.036.066 11.973c.001.015.01.029.02.038a13.353 13.353 0 0 0 3.996 1.987.052.052 0 0 0 .056-.018c.308-.414.582-.85.818-1.309a.05.05 0 0 0-.028-.069 8.808 8.808 0 0 1-1.248-.585.05.05 0 0 1-.005-.084c.084-.062.168-.126.248-.191a.05.05 0 0 1 .051-.007c2.619 1.176 5.454 1.176 8.041 0a.05.05 0 0 1 .053.006c.08.065.164.13.248.192a.05.05 0 0 1-.004.084c-.399.23-.813.423-1.249.585a.05.05 0 0 0-.027.07c.24.457.514.893.817 1.307a.051.051 0 0 0 .056.019 13.31 13.31 0 0 0 4.001-1.987.05.05 0 0 0 .021-.037c.334-3.396-.559-6.345-2.365-8.96a.04.04 0 0 0-.021-.02Zm-8.198 7.19c-.789 0-1.438-.712-1.438-1.587 0-.874.637-1.586 1.438-1.586.807 0 1.45.718 1.438 1.586 0 .875-.637 1.587-1.438 1.587Zm5.316 0c-.788 0-1.438-.712-1.438-1.587 0-.874.637-1.586 1.438-1.586.807 0 1.45.718 1.438 1.586 0 .875-.63 1.587-1.438 1.587Z" />
+              </svg>
+              Join our Discord server
+            </a>
+          </div>
+          <div>
+            <a
+              href="https://fly.io/docs/elixir/getting-started/"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-zinc-50 hover:text-zinc-900"
+            >
+              <svg
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+                class="h-4 w-4 fill-zinc-400 group-hover:fill-zinc-600"
+              >
+                <path d="M1 12.5A4.5 4.5 0 005.5 17H15a4 4 0 001.866-7.539 3.504 3.504 0 00-4.504-4.272A4.5 4.5 0 004.06 8.235 4.502 4.502 0 001 12.5z" />
+              </svg>
+              Deploy your application
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/services/bright/lib/free_oban_ui_web/endpoint.ex
+++ b/services/bright/lib/free_oban_ui_web/endpoint.ex
@ -0,0 +1,53 @@
+defmodule FreeObanUiWeb.Endpoint do
+  use Phoenix.Endpoint, otp_app: :free_oban_ui
+
+  # The session will be stored in the cookie and signed,
+  # this means its contents can be read but not tampered with.
+  # Set :encryption_salt if you would also like to encrypt it.
+  @session_options [
+    store: :cookie,
+    key: "_free_oban_ui_key",
+    signing_salt: "O5fc1lbf",
+    same_site: "Lax"
+  ]
+
+  socket "/live", Phoenix.LiveView.Socket,
+    websocket: [connect_info: [session: @session_options]],
+    longpoll: [connect_info: [session: @session_options]]
+
+  # Serve at "/" the static files from "priv/static" directory.
+  #
+  # You should set gzip to true if you are running phx.digest
+  # when deploying your static files in production.
+  plug Plug.Static,
+    at: "/",
+    from: :free_oban_ui,
+    gzip: false,
+    only: FreeObanUiWeb.static_paths()
+
+  # Code reloading can be explicitly enabled under the
+  # :code_reloader configuration of your endpoint.
+  if code_reloading? do
+    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
+    plug Phoenix.LiveReloader
+    plug Phoenix.CodeReloader
+    plug Phoenix.Ecto.CheckRepoStatus, otp_app: :free_oban_ui
+  end
+
+  plug Phoenix.LiveDashboard.RequestLogger,
+    param_key: "request_logger",
+    cookie_key: "request_logger"
+
+  plug Plug.RequestId
+  plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
+
+  plug Plug.Parsers,
+    parsers: [:urlencoded, :multipart, :json],
+    pass: ["*/*"],
+    json_decoder: Phoenix.json_library()
+
+  plug Plug.MethodOverride
+  plug Plug.Head
+  plug Plug.Session, @session_options
+  plug FreeObanUiWeb.Router
+end
--- a/services/bright/lib/free_oban_ui_web/gettext.ex
+++ b/services/bright/lib/free_oban_ui_web/gettext.ex
@ -0,0 +1,24 @@
+defmodule FreeObanUiWeb.Gettext do
+  @moduledoc """
+  A module providing Internationalization with a gettext-based API.
+
+  By using [Gettext](https://hexdocs.pm/gettext),
+  your module gains a set of macros for translations, for example:
+
+      import FreeObanUiWeb.Gettext
+
+      # Simple translation
+      gettext("Here is the string to translate")
+
+      # Plural translation
+      ngettext("Here is the string to translate",
+               "Here are the strings to translate",
+               3)
+
+      # Domain-based translation
+      dgettext("errors", "Here is the error message to translate")
+
+  See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
+  """
+  use Gettext, otp_app: :free_oban_ui
+end
--- a/services/bright/lib/free_oban_ui_web/live/oban_live/index.ex
+++ b/services/bright/lib/free_oban_ui_web/live/oban_live/index.ex
@ -0,0 +1,233 @@
+defmodule FreeObanUiWeb.ObanLive.Index do
+  use FreeObanUiWeb, :live_view
+  alias FreeObanUi.Repo
+  import Ecto.Query
+
+  @impl true
+  def mount(params, _session, socket) do
+    if connected?(socket) do
+      :timer.send_interval(2000, self(), :update)
+    end
+
+    {:ok,
+     socket
+     |> assign(
+       jobs: [],
+       job: nil,
+       selected_jobs: MapSet.new(),
+       auto_refresh: true,
+       page: params["page"] || "0"
+     )
+     |> assign_params(params)
+     |> assign_counts()
+     |> fetch_jobs()}
+  end
+
+  defp assign_params(socket, params) do
+    socket
+    |> assign(
+      state: params["state"],
+      queue: params["queue"],
+      id: params["id"],
+      page: params["page"] || "0"
+    )
+  end
+
+  @impl true
+  def handle_params(params, _url, socket) do
+    {:noreply,
+     socket
+     |> assign_params(params)
+     |> fetch_jobs()
+     |> apply_action(socket.assigns.live_action, params)}
+  end
+
+  defp apply_action(socket, :index, _params) do
+    socket
+    |> assign(:page_title, "Oban Jobs")
+    |> assign(:job, nil)
+  end
+
+  defp apply_action(socket, :show, %{"id" => id}) do
+    job = get_job(id)
+
+    socket
+    |> assign(:page_title, "Job #{job.id}")
+    |> assign(:job, get_job(id))
+  end
+
+  @impl true
+  def handle_event("delete", %{"id" => id}, socket) do
+    action_job("delete", id)
+
+    {:noreply,
+     socket
+     |> put_flash(:info, "Job ##{id} deleted")
+     |> redirect_back()}
+  end
+
+  defp action_job(action, id) do
+    case action do
+      # Same implementation as `retry` atm.
+      # Alt: is to overwrite `scheduled_at` timestamp: https://elixirforum.com/t/53920/2
+      "run" -> get_job(id) |> Oban.retry_job()
+      "retry" -> get_job(id) |> Oban.retry_job()
+      "cancel" -> get_job(id) |> Oban.cancel_job()
+      "delete" -> get_job(id) |> Repo.delete()
+    end
+  end
+
+  @impl true
+  def handle_event("execute_action", %{"action" => action}, socket) do
+    id = socket.assigns.job.id
+    action_job(action, id)
+
+    socket =
+      if action == "delete" do
+        socket
+        |> put_flash(:info, "Job ##{id} deleted")
+        |> redirect_back()
+      else
+        fetch_jobs(socket)
+      end
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("bulk_action", %{"action" => action}, socket) do
+    Enum.each(socket.assigns.selected_jobs, fn id ->
+      action_job(action, id)
+    end)
+
+    {:noreply, socket |> assign(selected_jobs: MapSet.new()) |> fetch_jobs()}
+  end
+
+  @impl true
+  def handle_event("paginate", %{"page" => page}, socket) do
+    {:noreply,
+     push_patch(socket,
+       to: ~p"/oban?#{[queue: socket.assigns.queue, state: socket.assigns.state, page: page]}"
+     )}
+  end
+
+  @impl true
+  def handle_event("toggle_refresh", _, socket) do
+    {:noreply, assign(socket, auto_refresh: !socket.assigns.auto_refresh)}
+  end
+
+  @impl true
+  def handle_info(:update, %{assigns: %{auto_refresh: true}} = socket) do
+    {:noreply, fetch_jobs(socket)}
+  end
+
+  @impl true
+  def handle_info(:update, socket), do: {:noreply, socket}
+
+  def available_actions(state) do
+    case state do
+      "executing" -> ~w(cancel)
+      "scheduled" -> ~w(run cancel delete)
+      "retryable" -> ~w(retry cancel delete)
+      "cancelled" -> ~w(retry delete)
+      "discarded" -> ~w(retry delete)
+      "complete" -> ~w(retry delete)
+      _ -> ~w(delete)
+    end
+  end
+
+  def back_url(assigns) do
+    ~p"/oban?#{[queue: assigns.queue, state: assigns.state, page: assigns.page]}"
+  end
+
+  defp redirect_back(socket) do
+    push_patch(socket, to: back_url(socket.assigns))
+  end
+
+  defp job_stats(job) do
+    [
+      %{title: "State", value: job.state},
+      %{title: "Queue", value: job.queue},
+      %{title: "Worker", value: job.worker},
+      %{title: "Inserted At", value: job.inserted_at},
+      %{title: "Scheduled At", value: job.scheduled_at},
+      %{title: "Discarded At", value: job.discarded_at},
+      %{title: "Cancelled At", value: job.cancelled_at},
+      %{title: "Attempted At", value: job.attempted_at},
+      %{title: "Completed At", value: job.completed_at},
+      %{title: "Attempt", value: "#{job.attempt} of #{job.max_attempts}"}
+    ]
+  end
+
+  defp assign_counts(socket) do
+    counts =
+      Oban.Job
+      |> group_by([j], j.state)
+      |> select([j], {j.state, count(j.id)})
+      |> Repo.all()
+      |> Enum.into(%{})
+
+    queues =
+      Oban.Job
+      |> group_by([j], j.queue)
+      |> select([j], {j.queue, count(j.id)})
+      |> Repo.all()
+      |> Enum.into(%{})
+
+    assign(socket, counts: counts, queues: queues)
+  end
+
+  defp fetch_jobs(socket) do
+    # Fetch & refresh `jobs` for :index, and `job` for :show
+    if socket.assigns.live_action == :index do
+      jobs =
+        Oban.Job
+        |> filter_by_state(socket.assigns.state)
+        |> filter_by_queue(socket.assigns.queue)
+        |> order_by([j], desc: j.inserted_at)
+        |> paginate(socket.assigns.page)
+        |> Repo.all()
+
+      assign(socket, jobs: jobs)
+    else
+      assign(socket, jobs: [], job: get_job(socket.assigns.id))
+    end
+  end
+
+  defp paginate(query, page) when page in [nil, ""], do: query
+
+  defp paginate(query, page) do
+    per_page = 25
+    page = String.to_integer(page)
+    offset_by = per_page * page
+
+    query
+    |> limit(^per_page)
+    |> offset(^offset_by)
+  end
+
+  defp get_job(id) when id in [nil, ""], do: nil
+  defp get_job(id), do: Oban.Job |> Repo.get!(id)
+
+  defp filter_by_state(query, state) when state in [nil, ""], do: query
+  defp filter_by_state(query, state), do: where(query, [j], j.state == ^state)
+
+  defp filter_by_queue(query, queue) when queue in [nil, ""], do: query
+  defp filter_by_queue(query, queue), do: where(query, [j], j.queue == ^queue)
+
+  def from_now_short(now \\ DateTime.utc_now(), later) do
+    diff = DateTime.diff(now, later)
+
+    cond do
+      diff <= -24 * 3600 -> "in #{div(-diff, 24 * 3600)}d"
+      diff <= -3600 -> "in #{div(-diff, 3600)}h"
+      diff <= -60 -> "in #{div(-diff, 60)}m"
+      diff <= -5 -> "in #{-diff}s"
+      diff <= 5 -> "now"
+      diff <= 60 -> "#{diff}s ago"
+      diff <= 3600 -> "#{div(diff, 60)} minutes ago"
+      diff <= 24 * 3600 -> "#{div(diff, 3600)}m ago"
+      true -> "#{div(diff, 24 * 3600)}d ago"
+    end
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/live/oban_live/index.html.heex
+++ b/services/bright/lib/free_oban_ui_web/live/oban_live/index.html.heex
@ -0,0 +1,244 @@
+<div class="flex flex-col sm:flex-row">
+  <div class="w-full sm:w-1/4 bg-gray-100 p-4">
+    <div class="flex justify-between mt-2 mb-4">
+      <h2 class="text-xl font-bold">States</h2>
+      <%= if @state not in ["", nil] do %>
+        <.link patch={~p"/oban?#{[queue: @queue, state: nil]}"} class="">
+          Clear
+        </.link>
+      <% end %>
+    </div>
+    <%= for state <- ~w(scheduled executing completed retryable cancelled discarded) do %>
+      <.link
+        patch={~p"/oban?#{[state: state, queue: @queue]}"}
+        class={"#{if @state == state, do: "bg-gray-200 text-gray-900 dark:bg-gray-900 dark:text-white", else: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300"} text-gray-600 hover:bg-gray-300 hover:text-gray-900 group flex items-center px-2 py-2.5 fw-500 rounded-md dark:hover:bg-gray-700 dark:hover:text-white"}
+      >
+        <%= state %> (<%= @counts[state] || 0 %>)
+      </.link>
+    <% end %>
+
+    <div class="flex justify-between mt-8 mb-4">
+      <h2 class="text-xl font-bold">Queues</h2>
+      <%= if @queue not in ["", nil] do %>
+        <.link patch={~p"/oban?#{[queue: nil, state: @state]}"} class="">
+          Clear
+        </.link>
+      <% end %>
+    </div>
+    <%= for {queue, count} <- @queues do %>
+      <.link
+        patch={~p"/oban?#{[queue: queue, state: @state]}"}
+        class={"#{if @queue == queue, do: "bg-gray-200 text-gray-900 dark:bg-gray-900 dark:text-white", else: "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300"} text-gray-600 hover:bg-gray-300 hover:text-gray-900 group flex items-center px-2 py-2.5 fw-500 rounded-md dark:hover:bg-gray-700 dark:hover:text-white"}
+      >
+        <%= queue %> (<%= count %>)
+      </.link>
+    <% end %>
+  </div>
+
+  <div class="w-full sm:w-3/4 p-4">
+    <div class="mb-4 flex justify-between items-center">
+      <%= if @live_action == :index do %>
+        <h1 class="text-2xl font-bold">Oban Jobs</h1>
+      <% else %>
+        <.link patch={back_url(assigns)} class="text-2xl font-bold hover:text-gray-500">← Oban Jobs</.link>
+      <% end %>
+      <div>
+        <button
+          phx-click="toggle_refresh"
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          <%= if @auto_refresh, do: "Disable", else: "Enable" %> Auto-refresh
+        </button>
+      </div>
+    </div>
+
+    <div class="mb-4">
+      <% state = if @live_action == :index, do: @state, else: @job.state %>
+      <% event = if @live_action == :index, do: "bulk_action", else: "execute_action" %>
+      <%= for action <- available_actions(state) do %>
+        <button
+          phx-click={event}
+          phx-value-action={action}
+          data-confirm={"Are you sure you want to #{action} this job now?"}
+          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2"
+          disabled={@live_action == :index && Enum.empty?(@selected_jobs)}
+        >
+          <%= action |> String.capitalize() %>
+        </button>
+      <% end %>
+    </div>
+
+    <%= if @live_action == :index do %>
+      <div class="overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+          <div class="relative border rounded ">
+            <!-- Selected row actions, only show when rows are selected. -->
+            <!-- <div class="absolute top-0 left-14 flex h-12 items-center space-x-3 bg-white sm:left-12"> -->
+            <!--   <button type="button" class="inline-flex items-center rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white">Bulk edit</button> -->
+            <!--   <button type="button" class="inline-flex items-center rounded bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white">Delete all</button> -->
+            <!-- </div> -->
+            <table class="min-w-full table-fixed divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th scope="col" class="relative px-7 sm:w-12 sm:px-6">
+                    <input
+                      type="checkbox"
+                      class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600"
+                    />
+                  </th>
+                  <th
+                    scope="col"
+                    class="pr-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    ID
+                  </th>
+                  <th
+                    scope="col"
+                    class="min-w-[12rem] max-w-xs py-3.5 pr-3 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Worker
+                  </th>
+                  <th
+                    scope="col"
+                    class="min-w-[12rem] py-3.5 pr-3 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Attempt
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    State
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Queue
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Inserted
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 bg-white">
+                <!-- Selected: "bg-gray-50" -->
+                <%= for job <- @jobs do %>
+                  <tr>
+                    <td class="relative px-7 sm:w-12 sm:px-6">
+                      <!-- Selected row marker, only show when row is selected. -->
+                      <!-- <div class="absolute inset-y-0 left-0 w-0.5 bg-blue-600"></div> -->
+                      <input
+                        type="checkbox"
+                        class="absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600"
+                      />
+                    </td>
+                    <td class="whitespace-nowrap pr-3 py-4 text-sm text-gray-500">
+                      <%= job.id %>
+                    </td>
+                    <!-- Selected: "text-blue-600", Not Selected: "text-gray-900" -->
+                    <td class="flex flex-col max-w-sm py-4 pr-3 font-medium text-gray-900">
+                      <.link
+                        class="text-blue-600 hover:text-blue-800 hover:text-underline"
+                        patch={~p"/oban/#{job.id}?#{[queue: @queue, state: @state, page: @page]}"}
+                      >
+                        <%= job.worker %>
+                      </.link>
+                      <samp
+                        title={Jason.encode!(job.args)}
+                        class="line-clamp-3 break-all text-sm text-gray-500 font-mono max-w-md"
+                      >
+                        <%= Jason.encode!(job.args) %>
+                      </samp>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <%= job.attempt %> / <%= job.max_attempts %>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1.5 text-xs fs-14 font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+                        <%= job.state %>
+                      </span>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <span class="inline-flex items-center rounded-full bg-gray-50 px-2.5 py-1.5 text-xs fs-14 font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">
+                        <%= job.queue %>
+                      </span>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                      <%= from_now_short(job.inserted_at) %>
+                    </td>
+                  </tr>
+                <% end %>
+              </tbody>
+            </table>
+          </div>
+          <div class="flex">
+            <button
+              class={(if @page == "0", do: "cursor-not-allowed text-gray-500", else: "cursor-pointer text-blue-500 hover:bg-gray-100") <> " w-1/2 p-5 font-medium text-center bg-white border border-t-0 border-r-0 rounded-bl"}
+              phx-click="paginate"
+              phx-value-page={String.to_integer(assigns.page) - 1}
+              disabled={@page == "0"}
+              type="button"
+            >
+              Previous
+            </button>
+
+            <div class="bg-white p-5 text-center border border-t-0">
+              <%= @page %>
+            </div>
+            <button
+              class={(if length(@jobs) == 0, do: "cursor-not-allowed text-gray-500", else: "cursor-pointer text-blue-500 hover:bg-gray-100") <> " w-1/2 p-5 font-medium text-center bg-white border border-t-0 rounded-br border-l-0"}
+              phx-click="paginate"
+              phx-value-page={String.to_integer(assigns.page) + 1}
+              disabled={length(@jobs) == 0}
+              type="button"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    <% else %>
+      <%= if @job do %>
+        <div class="bg-white border rounded">
+          <header class="flex 2 py-3 border-b px-4">
+            <h1 class="w-3/5 text-xl leading-6 fw-700 text-gray-900">Job #<%= @job.id %></h1>
+          </header>
+
+          <dl class="grid grid-cols-1 sm:grid-cols-2 px-4 border-b">
+            <%= for stat <- job_stats(@job) do %>
+              <div class="border-t border-gray-100 px-4 py-3 sm:col-span-1 sm:px-0">
+                <dt class="font-bold leading-6 text-gray-900"><%= stat.title %></dt>
+                <dd class="mt-1 leading-6 text-gray-500 sm:mt-2 font-mono font-medium"><%= stat.value %></dd>
+              </div>
+            <% end %>
+            <div class="border-t border-gray-100 px-4 py-3 sm:col-span-2 sm:px-0">
+              <dt class="font-bold">Args</dt>
+              <dd><pre><%= Jason.encode!(@job.args, pretty: true) %></pre></dd>
+            </div>
+            <div class="border-t border-gray-100 px-4 py-3 sm:col-span-2 sm:px-0">
+              <dt class="font-bold">Meta</dt>
+              <dd><pre><%= Jason.encode!(@job.meta, pretty: true) %></pre></dd>
+            </div>
+
+            <div class="border-t border-gray-100 px-4 py-3 sm:col-span-2 sm:px-0">
+              <dt class="font-bold">Errors</dt>
+              <dd>
+              <%= for error <- @job.errors do %>
+                  <div class="fw-500 mt-4">
+                    Attempt <%= error["attempt"] %> / <%= @job.max_attempts %> at <%= error["at"] %>
+                  </div>
+                  <div class="break-all font-mono font-medium text-gray-500"><%= raw error["error"] %></div>
+                <% end %>
+              </dd>
+            </div>
+          </dl>
+
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>
--- a/services/bright/lib/free_oban_ui_web/router.ex
+++ b/services/bright/lib/free_oban_ui_web/router.ex
@ -0,0 +1,51 @@
+defmodule FreeObanUiWeb.Router do
+  use FreeObanUiWeb, :router
+
+  pipeline :browser do
+    plug :accepts, ["html"]
+    plug :fetch_session
+    plug :fetch_live_flash
+    plug :put_root_layout, html: {FreeObanUiWeb.Layouts, :root}
+    plug :protect_from_forgery
+    plug :put_secure_browser_headers
+  end
+
+  pipeline :api do
+    plug :accepts, ["json"]
+  end
+
+  scope "/", FreeObanUiWeb do
+    pipe_through :browser
+
+    get "/", PageController, :home
+  end
+
+  scope "/oban", FreeObanUiWeb do
+    pipe_through [:browser]
+
+    live "/", ObanLive.Index, :index
+    live "/:id", ObanLive.Index, :show
+  end
+
+  # Other scopes may use custom stacks.
+  # scope "/api", FreeObanUiWeb do
+  #   pipe_through :api
+  # end
+
+  # Enable LiveDashboard and Swoosh mailbox preview in development
+  if Application.compile_env(:free_oban_ui, :dev_routes) do
+    # If you want to use the LiveDashboard in production, you should put
+    # it behind authentication and allow only admins to access it.
+    # If your application does not have an admins-only section yet,
+    # you can use Plug.BasicAuth to set up some basic authentication
+    # as long as you are also using SSL (which you should anyway).
+    import Phoenix.LiveDashboard.Router
+
+    scope "/dev" do
+      pipe_through :browser
+
+      live_dashboard "/dashboard", metrics: FreeObanUiWeb.Telemetry
+      forward "/mailbox", Plug.Swoosh.MailboxPreview
+    end
+  end
+end
--- a/services/bright/lib/free_oban_ui_web/telemetry.ex
+++ b/services/bright/lib/free_oban_ui_web/telemetry.ex
@ -0,0 +1,92 @@
+defmodule FreeObanUiWeb.Telemetry do
+  use Supervisor
+  import Telemetry.Metrics
+
+  def start_link(arg) do
+    Supervisor.start_link(__MODULE__, arg, name: __MODULE__)
+  end
+
+  @impl true
+  def init(_arg) do
+    children = [
+      # Telemetry poller will execute the given period measurements
+      # every 10_000ms. Learn more here: https://hexdocs.pm/telemetry_metrics
+      {:telemetry_poller, measurements: periodic_measurements(), period: 10_000}
+      # Add reporters as children of your supervision tree.
+      # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()}
+    ]
+
+    Supervisor.init(children, strategy: :one_for_one)
+  end
+
+  def metrics do
+    [
+      # Phoenix Metrics
+      summary("phoenix.endpoint.start.system_time",
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.endpoint.stop.duration",
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.router_dispatch.start.system_time",
+        tags: [:route],
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.router_dispatch.exception.duration",
+        tags: [:route],
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.router_dispatch.stop.duration",
+        tags: [:route],
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.socket_connected.duration",
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.channel_joined.duration",
+        unit: {:native, :millisecond}
+      ),
+      summary("phoenix.channel_handled_in.duration",
+        tags: [:event],
+        unit: {:native, :millisecond}
+      ),
+
+      # Database Metrics
+      summary("free_oban_ui.repo.query.total_time",
+        unit: {:native, :millisecond},
+        description: "The sum of the other measurements"
+      ),
+      summary("free_oban_ui.repo.query.decode_time",
+        unit: {:native, :millisecond},
+        description: "The time spent decoding the data received from the database"
+      ),
+      summary("free_oban_ui.repo.query.query_time",
+        unit: {:native, :millisecond},
+        description: "The time spent executing the query"
+      ),
+      summary("free_oban_ui.repo.query.queue_time",
+        unit: {:native, :millisecond},
+        description: "The time spent waiting for a database connection"
+      ),
+      summary("free_oban_ui.repo.query.idle_time",
+        unit: {:native, :millisecond},
+        description:
+          "The time the connection spent waiting before being checked out for the query"
+      ),
+
+      # VM Metrics
+      summary("vm.memory.total", unit: {:byte, :kilobyte}),
+      summary("vm.total_run_queue_lengths.total"),
+      summary("vm.total_run_queue_lengths.cpu"),
+      summary("vm.total_run_queue_lengths.io")
+    ]
+  end
+
+  defp periodic_measurements do
+    [
+      # A module, function and arguments to be invoked periodically.
+      # This function must call :telemetry.execute/3 and a metric must be added above.
+      # {FreeObanUiWeb, :count_users, []}
+    ]
+  end
+end
--- a/services/bright/test.txt
+++ b/services/bright/test.txt
@ -0,0 +1,3 @@
+HELLO MAMA
+
+haha