rails-ai-gateway 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67143b76482c8cdcfc4e4badd4801e1d46c9ecc5bc309e2ddd137f14df7a0e67
-  data.tar.gz: 1ac58e22f791aead20feabf049dc8f89250eff16170b860c9f4da690b096af96
+  metadata.gz: af35d6d1d275d95fdc5823eded924c98cd4e39e18e1f67388f1fd0f7e9f056f3
+  data.tar.gz: bc9d7f02956947396a2801b27199328aba3b38b1d9917e2e00d9a70a1fc46b11
 SHA512:
-  metadata.gz: 6cdeafa5eaf720bd486ff259620eb6868aa0829f96b9c461626fbd6bb696227534330672480df8b4496fc8182ec56563bd422a476b6c0b4dabb1cfc4e16ddf7d
-  data.tar.gz: 550e16aece7e78223753f79cdbe2a2f6c3308767b3e259cce7b917687dd32055daadeae9e9df9134ce205741267208339126b3b2c531d6a2809ea22562a172de
+  metadata.gz: 352f0608dbf281db2d14dcb452913cae5c758b4347d41a87bc38dc1fbc564792890a6b7f09edcab39741db71accdebb8ddeffb881a67c0b9900c358412da574f
+  data.tar.gz: 28780f6a22d71ac9c77ddc1a1f236fbbcf2e9fd12f8ed5412c495b7977ead1096c94a797e42642a1f1c8f87459077d5d8d8d35559645bb3f8d5652c7e85bcdd1

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.2.0 - 2026-09-20
+
+- Redesign admin UI as a responsive AI gateway operations console.
+- Add generated WebP brand mark and favicon served under any engine mount path.
+- Improve dashboard metrics, provider and route summaries, key status, and request-log scanning.
+- Add mobile card tables, stronger keyboard focus, and reduced-motion support.
+
+## 0.1.1 - 2026-09-20
+
+- Fix automatic Bundler loading for hyphenated gem name.
+- Fix install generator migration task for host Rails applications.
+- Normalize provider API roots to prevent duplicated endpoint paths.
+- Normalize upstream errors, preserve safe `Retry-After`, and terminate failed SSE streams.
+- Validate successful embedding response shape.
+- Improve installation, security, development, and contribution documentation.
+
 ## 0.1.0 - 2026-09-20
 
 - Add mountable Rails engine with OpenAI-compatible chat, embedding, and model endpoints.

data/README.md

@@ -51,7 +51,7 @@ Provider API keys cannot be saved without it.
 Web UI guides initial setup:
 
 1. Add provider with full API base URL, such as `https://api.openai.com/v1`.
-2. Add public model route, such as `fast-chat` mapped to `gpt-4o-mini`.
+2. Add public model route, such as `fast-chat` mapped to `gpt-5.6-luna`.
 3. Create gateway key and save token when shown. Raw token cannot be displayed again.
 
 Routes with same public model name form fallback chain. Lower priority runs first. Gateway

data/app/assets/stylesheets/rails_ai_gateway/admin.css

@@ -1,41 +1,170 @@
-:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172538; background: #f5f7fa; line-height: 1.5; }
+:root {
+  color-scheme: dark;
+  --ink: #07111f;
+  --panel: #0d1929;
+  --panel-raised: #122238;
+  --line: #263850;
+  --text: #f3f7f5;
+  --muted: #98a9b9;
+  --acid: #a8ff2a;
+  --cyan: #24d6ee;
+  --danger: #ff6b78;
+  font-family: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  color: var(--text);
+  background: var(--ink);
+  line-height: 1.5;
+  scroll-behavior: smooth;
+}
+
 * { box-sizing: border-box; }
-body { margin: 0; }
-header { background: #14283f; color: #fff; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem max(1rem, calc((100vw - 1200px) / 2)); }
-header a { color: #fff; text-decoration: none; }
-.brand { font-weight: 750; font-size: 1.15rem; }
-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
-main, footer { max-width: 1200px; margin: auto; padding: 1.5rem; }
-h1 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .4rem; }
-h2 { margin-top: 0; }
-a { color: #175da1; }
-section { margin: 1.5rem 0; padding: 1.5rem; background: #fff; border: 1px solid #d8e0e9; border-radius: .5rem; scroll-margin-top: 1rem; }
-.muted, footer { color: #536477; }
-.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
-.stats div { background: #fff; border: 1px solid #d8e0e9; padding: 1.25rem; border-radius: .5rem; }
-.stats span, .stats strong { display: block; }
-.stats strong { font-size: 2rem; margin-top: .4rem; }
-.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; align-items: end; margin: 1rem 0; }
-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
+body { margin: 0; min-width: 320px; background: var(--ink); }
+a { color: var(--cyan); text-underline-offset: .18em; }
+code, pre, textarea { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; overflow-wrap: anywhere; }
+
+.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, .94); backdrop-filter: blur(14px); }
+.header-inner { max-width: 1320px; min-height: 76px; margin: auto; padding: .7rem 1.5rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
+.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; }
+.brand img { width: 44px; height: 44px; border-radius: 11px; border: 1px solid #32445a; }
+.brand span, .brand strong, .brand small { display: block; }
+.brand strong { font-size: .98rem; letter-spacing: -.01em; }
+.brand small { margin-top: .05rem; color: var(--muted); font: 500 .66rem "Fira Code", monospace; text-transform: uppercase; letter-spacing: .09em; }
+nav { display: flex; align-items: center; gap: .25rem; }
+nav a { color: var(--muted); padding: .5rem .7rem; border-radius: 5px; font-size: .85rem; font-weight: 600; text-decoration: none; transition: color .18s ease, background .18s ease; }
+nav a:hover { color: var(--text); background: var(--panel-raised); }
+.system-state { justify-self: end; display: inline-flex; align-items: center; gap: .45rem; color: #c6d0da; font: 500 .7rem "Fira Code", monospace; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
+.system-state i, .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px rgba(168, 255, 42, .7); }
+
+main, footer { max-width: 1320px; margin: auto; padding: 0 1.5rem; }
+main { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 4rem; }
+footer { padding-top: 1.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font: 400 .72rem "Fira Code", monospace; }
+
+.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: end; gap: clamp(2rem, 8vw, 7rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
+.eyebrow, .section-index { margin: 0 0 .8rem; color: var(--acid); font: 600 .72rem "Fira Code", monospace; letter-spacing: .14em; text-transform: uppercase; }
+h1 { margin: 0; max-width: 820px; font-size: clamp(3.2rem, 8vw, 7.3rem); line-height: .88; letter-spacing: -.065em; }
+h1 em { color: var(--acid); font-style: normal; }
+.hero-copy { max-width: 650px; margin: 1.5rem 0 0; color: #bac6d1; font-size: clamp(1rem, 1.8vw, 1.25rem); }
+.endpoint-card { min-width: 0; padding: 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: #091522; }
+.endpoint-card span, .endpoint-card small { display: block; color: var(--muted); font-size: .73rem; }
+.endpoint-card code { display: block; margin: .65rem 0; overflow: hidden; color: var(--text); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
+
+.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
+.stats div { min-width: 0; padding: 1.25rem; background: var(--panel); }
+.stats span, .stats strong, .stats small { display: block; }
+.stats span { color: var(--muted); font: 500 .7rem "Fira Code", monospace; text-transform: uppercase; letter-spacing: .08em; }
+.stats strong { margin: .5rem 0 .2rem; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.05em; }
+.stats strong i { color: var(--muted); font: 500 .8rem "Fira Code", monospace; letter-spacing: 0; }
+.stats small { color: #71869a; font-size: .75rem; }
+
+section { margin-top: clamp(4rem, 8vw, 7rem); scroll-margin-top: 100px; }
+.section-heading { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, .8fr); align-items: end; gap: 2rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
+.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: .95; letter-spacing: -.045em; }
+.section-heading p:last-child { max-width: 520px; margin: 0; color: var(--muted); }
+
+details { border-bottom: 1px solid var(--line); background: transparent; }
+details:first-of-type { border-top: 1px solid var(--line); }
+summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .4rem; cursor: pointer; font-weight: 600; list-style: none; transition: color .18s ease, background .18s ease; }
+summary::-webkit-details-marker { display: none; }
+summary:hover { color: var(--acid); background: rgba(168, 255, 42, .025); }
+summary::after { content: "+"; flex: 0 0 auto; color: var(--muted); font: 400 1.4rem "Fira Code", monospace; }
+details[open] > summary::after { content: "−"; }
+summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
+summary small { display: block; margin-top: .2rem; color: var(--muted); font: 400 .72rem "Fira Code", monospace; }
+.badge, .route-meta { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: #d7e0e8; font: 500 .7rem "Fira Code", monospace; white-space: nowrap; }
+.badge.inactive i { background: #64768a; box-shadow: none; }
+.route-meta b { padding: .2rem .4rem; border: 1px solid var(--line); color: var(--acid); font-weight: 500; }
+.create-panel { margin-top: 1rem; border: 1px dashed #3a5068 !important; }
+.create-panel > summary { padding-left: 1rem; padding-right: 1rem; color: var(--cyan); }
+.create-panel > summary span b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: .45rem; border: 1px solid currentColor; border-radius: 50%; font: 400 1rem "Fira Code", monospace; }
+
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; align-items: end; margin: 0; padding: 1rem .4rem 1.5rem; }
+label { display: block; margin-bottom: .4rem; color: #cbd5df; font: 500 .72rem "Fira Code", monospace; }
 input, select, textarea, button { font: inherit; }
-input:not([type=checkbox]), select, textarea { width: 100%; padding: .6rem; border: 1px solid #8595a7; border-radius: .25rem; background: #fff; color: inherit; }
-button, input[type=submit] { background: #195a97; color: #fff; border: 1px solid #195a97; border-radius: .25rem; padding: .6rem .85rem; cursor: pointer; font-weight: 600; }
-button.danger { color: #a12828; background: #fff; border-color: #d5aaaa; font-size: .85rem; }
-input:disabled { opacity: .5; cursor: not-allowed; }
-.check { display: flex; align-items: center; gap: .5rem; min-height: 2.8rem; }
+input:not([type=checkbox]), select, textarea { width: 100%; min-height: 44px; padding: .7rem .75rem; border: 1px solid #38506a; border-radius: 4px; outline: none; background: #091522; color: var(--text); transition: border .18s ease, box-shadow .18s ease; }
+input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: #58708a; }
+input:not([type=checkbox]):focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(36, 214, 238, .12); }
+input::placeholder, textarea::placeholder { color: #65798d; }
+button, input[type=submit], .back-link { min-height: 42px; padding: .65rem 1rem; border: 1px solid var(--acid); border-radius: 4px; cursor: pointer; background: var(--acid); color: #0a1410; font-weight: 700; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease; }
+button:hover, input[type=submit]:hover, .back-link:hover { border-color: #c0ff66; background: #c0ff66; }
+button.danger { min-height: 34px; padding: .4rem .65rem; border-color: #68404c; background: transparent; color: #ff8c96; font-size: .75rem; }
+button.danger:hover { border-color: var(--danger); background: rgba(255, 107, 120, .08); }
+input:disabled { opacity: .45; cursor: not-allowed; }
+.check { min-height: 44px; display: flex; align-items: center; gap: .55rem; }
 .check label { margin: 0; }
-details { padding: .85rem 0; border-top: 1px solid #e3e8ef; }
-summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
-.badge { font-weight: 400; color: #536477; font-size: .85rem; margin-left: .5rem; }
-.table-wrap { overflow-x: auto; }
-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
-caption { text-align: left; color: #536477; margin-bottom: .75rem; }
-th, td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid #e3e8ef; vertical-align: top; }
-th { background: #f5f7fa; white-space: nowrap; }
-td details { border: 0; padding: 0; }
-code, pre, textarea { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
-pre { max-width: 28rem; white-space: pre-wrap; }
-:focus-visible { outline: 3px solid #b46b00; outline-offset: 3px; }
+input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--acid); }
+
+.filter-bar { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--panel); }
+.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); }
+table { width: 100%; border-collapse: collapse; font-size: .83rem; }
+caption { padding: .75rem 1rem; text-align: left; color: var(--muted); font: 400 .7rem "Fira Code", monospace; background: #091522; }
+th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
+th { color: #8ea1b3; background: var(--panel); font: 500 .65rem "Fira Code", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
+tbody tr { background: #0a1624; transition: background .15s ease; }
+tbody tr:hover { background: #101f31; }
+tbody tr:last-child td { border-bottom: 0; }
+td code { padding: .2rem .35rem; color: var(--cyan); background: #06101b; }
+.status { display: inline-flex; align-items: center; min-width: 56px; padding: .22rem .45rem; border: 1px solid #365744; color: #b8f5ca; background: rgba(69, 202, 106, .07); font: 500 .66rem "Fira Code", monospace; }
+.status-revoked, .status-expired, .status-error { border-color: #66404a; color: #ff9ba4; background: rgba(255, 107, 120, .07); }
+.status-pending { border-color: #59606a; color: #bdc5cc; }
+.timestamp { white-space: nowrap; }
+.timestamp small { display: block; color: var(--muted); font: 400 .68rem "Fira Code", monospace; }
+.log-detail { border: 0; }
+.log-detail summary { min-height: 0; padding: 0; color: var(--cyan); font-size: .78rem; }
+.log-detail summary::after { font-size: 1rem; }
+.log-detail code, .log-detail pre { display: block; max-width: 30rem; margin-top: .7rem; white-space: pre-wrap; }
+.muted { color: var(--muted); }
+
+.focus-page { max-width: 820px; min-height: 65vh; display: flex; flex-direction: column; justify-content: center; }
+.focus-page h1 { font-size: clamp(3rem, 8vw, 6rem); }
+.token-card { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--acid); background: rgba(168, 255, 42, .04); }
+.token-card textarea { resize: vertical; color: var(--acid); }
+.back-link { align-self: flex-start; }
+.error-label { color: var(--danger); }
+.error-list { margin: 2rem 0; padding: 1.25rem 1.25rem 1.25rem 2.5rem; border-left: 3px solid var(--danger); background: rgba(255, 107, 120, .06); }
+
+:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
 .skip { position: absolute; left: -10000px; }
-.skip:focus { left: 1rem; top: .5rem; padding: .5rem; background: #fff; z-index: 1; }
-@media (max-width: 600px) { main, footer { padding: 1rem; } section { padding: 1rem; } }
+.skip:focus { left: 1rem; top: .75rem; z-index: 20; padding: .5rem .75rem; background: var(--text); color: var(--ink); }
+
+@media (max-width: 950px) {
+  .header-inner { grid-template-columns: auto 1fr; }
+  nav { justify-content: flex-end; }
+  .system-state { display: none; }
+  .hero { grid-template-columns: 1fr; }
+  .endpoint-card { max-width: 560px; }
+  .stats { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 680px) {
+  .header-inner { display: flex; flex-wrap: wrap; padding: .65rem 1rem; }
+  .brand { flex: 1; }
+  nav { width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: .1rem; }
+  nav a { padding-left: .5rem; padding-right: .5rem; white-space: nowrap; }
+  main { padding: 3.5rem 1rem 3rem; }
+  footer { padding-left: 1rem; padding-right: 1rem; flex-direction: column; }
+  h1 { font-size: clamp(3rem, 15vw, 5rem); }
+  .stats { grid-template-columns: 1fr 1fr; }
+  .section-heading { grid-template-columns: 1fr; gap: .75rem; }
+  summary { align-items: flex-start; }
+  .badge, .route-meta { margin-top: .15rem; }
+  .table-wrap { border: 0; overflow: visible; }
+  table, thead, tbody, tr, th, td { display: block; }
+  caption { border: 1px solid var(--line); }
+  thead { position: absolute; left: -10000px; }
+  tbody { display: grid; gap: .75rem; margin-top: .75rem; }
+  tbody tr { padding: .65rem 1rem; border: 1px solid var(--line); }
+  tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); text-align: right; }
+  tbody td::before { content: attr(data-label); color: var(--muted); font: 500 .65rem "Fira Code", monospace; text-transform: uppercase; text-align: left; }
+  tbody td:last-child { border-bottom: 0; }
+  .log-detail code, .log-detail pre { max-width: 55vw; text-align: left; }
+}
+
+@media (max-width: 420px) {
+  .stats { grid-template-columns: 1fr; }
+  .brand small { display: none; }
+  .route-meta { white-space: normal; justify-content: flex-end; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { scroll-behavior: auto; }
+  *, *::before, *::after { transition-duration: .01ms !important; }
+}

data/app/controllers/rails_ai_gateway/admin_controller.rb

@@ -66,6 +66,14 @@ module RailsAiGateway
       send_file Engine.root.join("app/assets/stylesheets/rails_ai_gateway/admin.css"), type: "text/css", disposition: "inline"
     end
 
+    def logo
+      send_file Engine.root.join("app/assets/images/rails_ai_gateway/logo.webp"), type: "image/webp", disposition: "inline"
+    end
+
+    def favicon
+      send_file Engine.root.join("app/assets/images/rails_ai_gateway/favicon.webp"), type: "image/webp", disposition: "inline"
+    end
+
     private
 
     def authorize_admin

data/app/models/rails_ai_gateway/provider.rb

@@ -4,6 +4,7 @@ module RailsAiGateway
   class Provider < ApplicationRecord
     encrypts :api_key
     has_many :model_routes, dependent: :restrict_with_error
+    before_validation :normalize_base_url
     validates :name, presence: true, uniqueness: true, length: { maximum: 255 }
     validates :base_url, presence: true, length: { maximum: 2048 }
     validates :api_key, format: { without: /[\r\n]/ }, allow_nil: true
@@ -11,6 +12,10 @@ module RailsAiGateway
 
     private
 
+    def normalize_base_url
+      self.base_url = base_url.to_s.strip.sub(%r{/+(?:chat/completions|responses|embeddings)?/*\z}, "")
+    end
+
     def valid_base_url
       uri = URI.parse(base_url.to_s)
       schemes = RailsAiGateway.configuration.allow_http ? %w[https http] : %w[https]

data/app/views/layouts/rails_ai_gateway/admin.html.erb

@@ -3,22 +3,31 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#07111f">
     <title>Rails AI Gateway</title>
     <%= csrf_meta_tags %>
+    <%= tag.link rel: "icon", href: favicon_path, type: "image/webp" %>
     <%= stylesheet_link_tag style_path %>
   </head>
   <body>
     <a class="skip" href="#main">Skip to content</a>
-    <header>
-      <%= link_to "Rails AI Gateway", admin_path, class: "brand" %>
-      <nav aria-label="Gateway sections">
-        <%= link_to "Providers", admin_path(anchor: "providers") %>
-        <%= link_to "Models", admin_path(anchor: "models") %>
-        <%= link_to "Keys", admin_path(anchor: "keys") %>
-        <%= link_to "Logs", admin_path(anchor: "logs") %>
-      </nav>
+    <header class="site-header">
+      <div class="header-inner">
+        <%= link_to admin_path, class: "brand", aria: { label: "Rails AI Gateway overview" } do %>
+          <%= image_tag logo_path, alt: "", width: 44, height: 44 %>
+          <span><strong>Rails AI</strong><small>Gateway console</small></span>
+        <% end %>
+        <nav aria-label="Gateway sections">
+          <%= link_to "Overview", admin_path %>
+          <%= link_to "Providers", admin_path(anchor: "providers") %>
+          <%= link_to "Models", admin_path(anchor: "models") %>
+          <%= link_to "Keys", admin_path(anchor: "keys") %>
+          <%= link_to "Logs", admin_path(anchor: "logs") %>
+        </nav>
+        <span class="system-state"><i aria-hidden="true"></i> Engine online</span>
+      </div>
     </header>
     <main id="main"><%= yield %></main>
-    <footer>Rails AI Gateway <%= RailsAiGateway::VERSION %> · Request metadata only. Prompts and responses are not stored.</footer>
+    <footer><span>Rails AI Gateway <%= RailsAiGateway::VERSION %></span><span>Request metadata only. Prompts and responses are not stored.</span></footer>
   </body>
 </html>

data/app/views/rails_ai_gateway/admin/errors.html.erb

@@ -1,3 +1,6 @@
-<h1>Could not save changes</h1>
-<ul role="alert"><% @errors.each do |error| %><li><%= error %></li><% end %></ul>
-<%= link_to "Back to gateway", admin_path %>
+<div class="focus-page">
+  <p class="eyebrow error-label">Validation error</p>
+  <h1>Could not save changes.</h1>
+  <ul class="error-list" role="alert"><% @errors.each do |error| %><li><%= error %></li><% end %></ul>
+  <%= link_to "Return to gateway", admin_path, class: "back-link" %>
+</div>

data/app/views/rails_ai_gateway/admin/index.html.erb

@@ -1,17 +1,27 @@
-<h1>Gateway overview</h1>
-<p class="muted">One endpoint for your models. Configuration and traffic live in your Rails database.</p>
+<div class="hero">
+  <div>
+    <p class="eyebrow">Control plane</p>
+    <h1>Your models,<br><em>one endpoint.</em></h1>
+    <p class="hero-copy">Route, protect, and observe AI traffic from the Rails app you already operate.</p>
+  </div>
+  <div class="endpoint-card">
+    <span>OpenAI-compatible base URL</span>
+    <code><%= request.base_url %><%= request.script_name %>/v1</code>
+    <small>Bearer authentication required</small>
+  </div>
+</div>
 <div class="stats" aria-label="Last 24 hours">
-  <div><span>Requests · 24 hours</span><strong><%= @requests %></strong></div>
-  <div><span>Errors · 24 hours</span><strong><%= @errors %></strong></div>
-  <div><span>Average latency</span><strong><%= @latency %> ms</strong></div>
+  <div><span>Requests</span><strong><%= @requests %></strong><small>Last 24 hours</small></div>
+  <div><span>Errors</span><strong><%= @errors %></strong><small><%= @requests.zero? ? "No traffic yet" : "#{((@errors.to_f / @requests) * 100).round(1)}% error rate" %></small></div>
+  <div><span>Average latency</span><strong><%= @latency %><i>ms</i></strong><small>Across completed requests</small></div>
+  <div><span>Active routes</span><strong><%= @routes.size %></strong><small><%= @providers.count(&:enabled?) %> enabled providers</small></div>
 </div>
 
 <section id="providers">
-  <h2>Providers</h2>
-  <p>Use the complete API base URL, including <code>/v1</code> where required. Credentials are encrypted with ActiveRecord encryption.</p>
+  <div class="section-heading"><div><p class="section-index">01 / Connections</p><h2>Providers</h2></div><p>Connect OpenAI-compatible upstreams. Credentials stay encrypted through ActiveRecord.</p></div>
   <% @providers.each do |provider| %>
     <details>
-      <summary><%= provider.name %> <span class="badge"><%= provider.enabled? ? "Enabled" : "Disabled" %></span></summary>
+      <summary><span><%= provider.name %><small><%= provider.base_url %></small></span> <span class="badge <%= "inactive" unless provider.enabled? %>"><i></i><%= provider.enabled? ? "Enabled" : "Disabled" %></span></summary>
       <%= form_with scope: :provider, url: provider_path(provider), method: :patch, local: true, class: "grid", namespace: "provider_#{provider.id}" do |form| %>
         <div><%= form.label :name %><%= form.text_field :name, value: provider.name, required: true %></div>
         <div><%= form.label :base_url, "API base URL" %><%= form.url_field :base_url, value: provider.base_url, required: true %></div>
@@ -22,8 +32,8 @@
       <% end %>
     </details>
   <% end %>
-  <details <%= "open" if @providers.empty? %>>
-    <summary>Add provider</summary>
+  <details class="create-panel" <%= "open" if @providers.empty? %>>
+    <summary><span><b>+</b> Add provider<small>Connect another OpenAI-compatible API</small></span></summary>
     <%= form_with scope: :provider, url: providers_path, local: true, class: "grid", namespace: "new_provider" do |form| %>
       <div><%= form.label :name %><%= form.text_field :name, required: true, placeholder: "OpenAI" %></div>
       <div><%= form.label :base_url, "API base URL" %><%= form.url_field :base_url, required: true, placeholder: "https://api.openai.com/v1" %></div>
@@ -34,11 +44,10 @@
 </section>
 
 <section id="models">
-  <h2>Model routing</h2>
-  <p>Clients use the public model name. Lower priority runs first; matching names form an ordered fallback chain.</p>
+  <div class="section-heading"><div><p class="section-index">02 / Traffic</p><h2>Model routing</h2></div><p>Map stable public names to upstream models. Lower priority runs first.</p></div>
   <% @routes.each do |route| %>
     <details>
-      <summary><%= route.name %> <span class="badge"><%= route.provider.name %> · priority <%= route.priority %></span></summary>
+      <summary><span><%= route.name %><small><%= route.upstream_model %></small></span> <span class="route-meta"><%= route.provider.name %><b>P<%= route.priority %></b></span></summary>
       <%= form_with scope: :model_route, url: model_route_path(route), method: :patch, local: true, class: "grid", namespace: "route_#{route.id}" do |form| %>
         <div><%= form.label :name, "Public model name" %><%= form.text_field :name, value: route.name, required: true %></div>
         <div><%= form.label :provider_id %><%= form.collection_select :provider_id, @providers, :id, :name, selected: route.provider_id %></div>
@@ -49,12 +58,12 @@
       <%= button_to "Delete route", model_route_path(route), method: :delete, class: "danger" %>
     </details>
   <% end %>
-  <details>
-    <summary>Add model route</summary>
+  <details class="create-panel">
+    <summary><span><b>+</b> Add model route<small>Create alias or fallback destination</small></span></summary>
     <%= form_with scope: :model_route, url: model_routes_path, local: true, class: "grid", namespace: "new_route" do |form| %>
       <div><%= form.label :name, "Public model name" %><%= form.text_field :name, required: true, placeholder: "fast-chat" %></div>
       <div><%= form.label :provider_id %><%= form.collection_select :provider_id, @providers, :id, :name %></div>
-      <div><%= form.label :upstream_model %><%= form.text_field :upstream_model, required: true, placeholder: "gpt-4o-mini" %></div>
+      <div><%= form.label :upstream_model %><%= form.text_field :upstream_model, required: true, placeholder: "gpt-5.6-luna" %></div>
       <div><%= form.label :priority %><%= form.number_field :priority, value: 0, min: 0, required: true %></div>
       <%= form.submit "Add route", disabled: @providers.empty? %>
     <% end %>
@@ -62,20 +71,21 @@
 </section>
 
 <section id="keys">
-  <h2>Gateway keys</h2>
+  <div class="section-heading"><div><p class="section-index">03 / Access</p><h2>Gateway keys</h2></div><p>Issue scoped client credentials. Raw tokens are shown exactly once.</p></div>
   <div class="table-wrap">
     <table>
       <caption>Client access keys</caption>
       <thead><tr><th scope="col">Name</th><th scope="col">Prefix</th><th scope="col">Models</th><th scope="col">Expires</th><th scope="col">Status</th><th scope="col">Action</th></tr></thead>
       <tbody>
         <% @keys.each do |key| %>
-          <tr><td><%= key.name %></td><td><code><%= key.prefix %>…</code></td><td><%= key.allowed_models.empty? ? "All models" : key.allowed_models.join(", ") %></td><td><%= key.expires_at || "Never" %></td><td><%= key.revoked_at ? "Revoked" : key.expires_at&.past? ? "Expired" : "Active" %></td><td><%= button_to "Revoke #{key.name}", gateway_key_path(key), method: :delete, class: "danger" unless key.revoked_at %></td></tr>
+          <% key_status = key.revoked_at ? "Revoked" : key.expires_at&.past? ? "Expired" : "Active" %>
+          <tr><td data-label="Name"><strong><%= key.name %></strong></td><td data-label="Prefix"><code><%= key.prefix %>…</code></td><td data-label="Models"><%= key.allowed_models.empty? ? "All models" : key.allowed_models.join(", ") %></td><td data-label="Expires"><%= key.expires_at || "Never" %></td><td data-label="Status"><span class="status status-<%= key_status.downcase %>"><%= key_status %></span></td><td data-label="Action"><%= button_to "Revoke", gateway_key_path(key), method: :delete, class: "danger", aria: { label: "Revoke #{key.name}" } unless key.revoked_at %></td></tr>
         <% end %>
       </tbody>
     </table>
   </div>
-  <details>
-    <summary>Create gateway key</summary>
+  <details class="create-panel">
+    <summary><span><b>+</b> Create gateway key<small>Grant access to clients and services</small></span></summary>
     <%= form_with scope: :gateway_key, url: gateway_keys_path, local: true, class: "grid" do |form| %>
       <div><%= form.label :name %><%= form.text_field :name, required: true, placeholder: "Production app" %></div>
       <div><%= form.label :allowed_models, "Allowed models (comma separated; blank allows all)" %><%= form.text_field :allowed_models, placeholder: "fast-chat, embeddings" %></div>
@@ -86,8 +96,8 @@
 </section>
 
 <section id="logs">
-  <h2>Request logs</h2>
-  <%= form_with url: admin_path(anchor: "logs"), method: :get, local: true, class: "grid" do |form| %>
+  <div class="section-heading"><div><p class="section-index">04 / Observe</p><h2>Request logs</h2></div><p>Inspect routing attempts without storing prompts or responses.</p></div>
+  <%= form_with url: admin_path(anchor: "logs"), method: :get, local: true, class: "grid filter-bar" do |form| %>
     <div><%= form.label :model, "Model filter" %><%= form.text_field :model, value: params[:model] %></div>
     <div><%= form.label :status, "HTTP status filter" %><%= form.number_field :status, value: params[:status], min: 100, max: 599 %></div>
     <%= form.submit "Filter logs" %>
@@ -98,7 +108,7 @@
       <thead><tr><th scope="col">Time</th><th scope="col">Model</th><th scope="col">Status</th><th scope="col">Latency</th><th scope="col">Reported tokens</th><th scope="col">Details</th></tr></thead>
       <tbody>
         <% @logs.each do |log| %>
-          <tr><td><%= log.created_at.strftime("%Y-%m-%d %H:%M:%S %Z") %></td><td><%= log.model %></td><td><%= log.status || "Pending" %></td><td><%= log.duration_ms %> ms</td><td><%= log.usage&.fetch("total_tokens", nil) || "Not reported" %></td><td><details><summary>Attempts and request ID</summary><code><%= log.request_id %></code><pre><%= JSON.pretty_generate(log.attempts) %></pre></details></td></tr>
+          <tr><td data-label="Time"><span class="timestamp"><%= log.created_at.strftime("%b %d") %><small><%= log.created_at.strftime("%H:%M:%S") %></small></span></td><td data-label="Model"><strong><%= log.model %></strong></td><td data-label="Status"><span class="status status-<%= log.status.to_i >= 400 ? "error" : log.status ? "active" : "pending" %>"><%= log.status || "Pending" %></span></td><td data-label="Latency"><%= log.duration_ms %> ms</td><td data-label="Tokens"><%= log.usage&.fetch("total_tokens", nil) || "—" %></td><td data-label="Details"><details class="log-detail"><summary>Inspect</summary><code><%= log.request_id %></code><pre><%= JSON.pretty_generate(log.attempts) %></pre></details></td></tr>
         <% end %>
       </tbody>
     </table>

data/app/views/rails_ai_gateway/admin/key.html.erb

@@ -1,5 +1,10 @@
-<h1>Gateway key created</h1>
-<p>Copy this token now. Only its digest is stored; it cannot be displayed again.</p>
-<label for="new-token"><%= @key.name %></label>
-<textarea id="new-token" readonly rows="3" autocomplete="off" spellcheck="false"><%= @token %></textarea>
-<p><%= link_to "Back to gateway", admin_path %></p>
+<div class="focus-page">
+  <p class="eyebrow">Credential issued</p>
+  <h1>Save this key now.</h1>
+  <p class="hero-copy">Only its digest is stored. This token cannot be displayed again after leaving this page.</p>
+  <div class="token-card">
+    <label for="new-token"><%= @key.name %></label>
+    <textarea id="new-token" readonly rows="3" autocomplete="off" spellcheck="false"><%= @token %></textarea>
+  </div>
+  <%= link_to "Return to gateway", admin_path, class: "back-link" %>
+</div>

data/config/routes.rb

@@ -13,4 +13,6 @@ RailsAiGateway::Engine.routes.draw do
   post "admin/gateway_keys", to: "admin#create_gateway_key", as: :gateway_keys
   delete "admin/gateway_keys/:id", to: "admin#revoke_gateway_key", as: :gateway_key
   get "admin/style", to: "admin#style", as: :style
+  get "admin/logo", to: "admin#logo", as: :logo
+  get "admin/favicon", to: "admin#favicon", as: :favicon
 end

data/lib/generators/rails_ai_gateway/install_generator.rb

@@ -7,7 +7,7 @@ module RailsAiGateway
 
     def install
       template "initializer.rb", "config/initializers/rails_ai_gateway.rb"
-      rake "rails_ai_gateway:install:migrations"
+      rake "railties:install:migrations"
       route 'mount RailsAiGateway::Engine, at: "/ai"'
       say "Configure admin_authorization and ActiveRecord encryption, then run bin/rails db:migrate."
     end

data/lib/rails-ai-gateway.rb

@@ -0,0 +1 @@
+require "rails_ai_gateway"

data/lib/rails_ai_gateway/proxy.rb

@@ -39,6 +39,15 @@ module RailsAiGateway
     end
 
     RETRY_STATUSES = [429, 500, 502, 503, 504].freeze
+    ERROR_TYPES = {
+      400 => ["invalid_request_error", "invalid_request"],
+      401 => ["authentication_error", "invalid_api_key"],
+      403 => ["permission_error", "permission_denied"],
+      404 => ["invalid_request_error", "model_not_found"],
+      409 => ["conflict_error", "conflict"],
+      422 => ["invalid_request_error", "unprocessable_entity"],
+      429 => ["rate_limit_error", "rate_limit_exceeded"]
+    }.freeze
     PRIVATE_RANGES = %w[0.0.0.0/8 10.0.0.0/8 100.64.0.0/10 127.0.0.0/8 169.254.0.0/16
       172.16.0.0/12 192.0.0.0/24 192.0.2.0/24 192.168.0.0/16 198.18.0.0/15
       198.51.100.0/24 203.0.113.0/24 224.0.0.0/4 240.0.0.0/4 ::/128 ::1/128
@@ -122,6 +131,9 @@ module RailsAiGateway
               ready << [response.code.to_i, headers]
               response.read_body { |chunk| chunks << chunk }
             end
+            if sent_headers && result.first >= 400
+              chunks << "data: #{JSON.generate(error_payload("Upstream stream failed", result.first))}\n\ndata: [DONE]\n\n"
+            end
             ready << result unless sent_headers
           rescue StandardError
             ready << error("Gateway failed", 500) unless sent_headers
@@ -169,6 +181,8 @@ module RailsAiGateway
                 status = attempt[:status] = response.code.to_i
                 raise Failure, "Upstream redirects are not supported" if (300..399).cover?(status)
                 headers = { "content-type" => "application/json", "cache-control" => "no-store", "x-request-id" => request_id }
+                retry_after = response["retry-after"].to_s
+                headers["retry-after"] = retry_after if retry_after.match?(/\A\d{1,10}\z/)
                 if payload["stream"] && (200..299).cover?(status)
                   raise Failure, "Upstream did not return an event stream" unless response["content-type"].to_s.split(";").first == "text/event-stream"
                   headers.merge!("content-type" => "text/event-stream", "x-accel-buffering" => "no")
@@ -189,7 +203,14 @@ module RailsAiGateway
                     end
                     raise Failure, "Upstream did not return a JSON object" unless parsed.is_a?(Hash)
                     usage = parsed["usage"].slice("prompt_tokens", "completion_tokens", "total_tokens").select { |_, value| value.is_a?(Integer) && value >= 0 } if parsed["usage"].is_a?(Hash)
-                    result = [status, headers, [body]]
+                    if (200..299).cover?(status)
+                      raise Failure, "Upstream embeddings response is malformed" if @endpoint == "embeddings" && !parsed["data"].is_a?(Array)
+                      result = [status, headers, [body]]
+                    else
+                      message = parsed.dig("error", "message") || parsed["message"] || parsed["error"]
+                      message = "Upstream request failed" unless message.is_a?(String) && message.present?
+                      result = [status, headers, [JSON.generate(error_payload(message, status))]]
+                    end
                   end
                 end
               end
@@ -233,7 +254,7 @@ module RailsAiGateway
     end
 
     def error(message, status, request_id = nil)
-      response = json(status, error: { message: message, type: "gateway_error", code: status })
+      response = json(status, error_payload(message, status))
       response[1]["www-authenticate"] = "Bearer" if status == 401
       response[1]["x-request-id"] = request_id if request_id
       response
@@ -242,5 +263,10 @@ module RailsAiGateway
     def json(status, payload)
       [status, { "content-type" => "application/json", "cache-control" => "no-store" }, [JSON.generate(payload)]]
     end
+
+    def error_payload(message, status)
+      type, code = ERROR_TYPES.fetch(status, ["server_error", status == 504 ? "gateway_timeout" : "bad_gateway"])
+      { error: { message: message, type: type, code: code } }
+    end
   end
 end

data/lib/rails_ai_gateway/version.rb

@@ -1,3 +1,3 @@
 module RailsAiGateway
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-ai-gateway
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Rails AI Gateway contributors
@@ -120,6 +120,8 @@ files:
 - CONTRIBUTING.md
 - LICENSE
 - README.md
+- app/assets/images/rails_ai_gateway/favicon.webp
+- app/assets/images/rails_ai_gateway/logo.webp
 - app/assets/stylesheets/rails_ai_gateway/admin.css
 - app/controllers/rails_ai_gateway/admin_controller.rb
 - app/models/rails_ai_gateway/application_record.rb
@@ -135,6 +137,7 @@ files:
 - db/migrate/20260920000000_create_rails_ai_gateway.rb
 - lib/generators/rails_ai_gateway/install_generator.rb
 - lib/generators/rails_ai_gateway/templates/initializer.rb
+- lib/rails-ai-gateway.rb
 - lib/rails_ai_gateway.rb
 - lib/rails_ai_gateway/configuration.rb
 - lib/rails_ai_gateway/engine.rb