From c1f5a7ce3738dcab7a53876f0f34ec955f520b8a Mon Sep 17 00:00:00 2001
From: Adam Ladachowski <adam.ladachowski@gmail.com>
Date: Sat, 14 Feb 2026 03:14:53 +0100
Subject: [PATCH] Apply tengu.to color scheme and styling

- Background: #0f0f0f
- Cards: #1a1a1a with #333 borders
- Accent: #4ade80 (green) for active/code
- Primary button: #dc2626 (red)
- Text: #e5e5e5, muted #888/#666
- Monospace font for prompts
- 8px border-radius on all components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 tensors/server/static/index.html | 112 ++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 41 deletions(-)

diff --git a/tensors/server/static/index.html b/tensors/server/static/index.html
index f7bc9e3..0b994a2 100644
--- a/tensors/server/static/index.html
+++ b/tensors/server/static/index.html
@@ -8,9 +8,9 @@
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #1a1a1a;
-      color: #fff;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: #0f0f0f;
+      color: #e5e5e5;
       min-height: 100vh;
       display: flex;
     }
@@ -18,7 +18,7 @@
     /* Sidebar */
     .sidebar {
       width: 60px;
-      background: #111;
+      background: #0f0f0f;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -39,8 +39,8 @@
       justify-content: center;
       transition: all 0.2s;
     }
-    .sidebar button:hover { background: #222; color: #fff; }
-    .sidebar button.active { background: #333; color: #fff; }
+    .sidebar button:hover { background: #1a1a1a; color: #e5e5e5; }
+    .sidebar button.active { background: #1a1a1a; color: #4ade80; }
     .sidebar svg { width: 24px; height: 24px; }
 
     /* Main content */
@@ -55,17 +55,18 @@
     .gallery {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-      gap: 8px;
-      padding: 12px;
+      gap: 12px;
+      padding: 1rem;
     }
     @media (min-width: 768px) {
-      .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+      .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; padding: 1.5rem; }
     }
     .gallery a {
       aspect-ratio: 1;
       overflow: hidden;
-      border-radius: 6px;
-      background: #333;
+      border-radius: 8px;
+      background: #1a1a1a;
+      border: 1px solid #333;
     }
     .gallery img {
       width: 100%;
@@ -83,28 +84,37 @@
     .chat-area {
       flex: 1;
       overflow-y: auto;
-      padding: 12px;
+      padding: 1rem;
+    }
+    @media (min-width: 768px) {
+      .chat-area { padding: 1.5rem; }
     }
     .chat-message {
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem;
     }
     .chat-prompt {
-      color: #888;
-      font-size: 0.85rem;
-      margin-bottom: 0.5rem;
-      padding-left: 4px;
+      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+      color: #4ade80;
+      font-size: 0.9rem;
+      margin-bottom: 0.75rem;
+      padding: 0.75rem 1rem;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 8px;
+      display: inline-block;
     }
     .chat-images {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 12px;
     }
     .chat-images a {
       width: 150px;
       height: 150px;
-      border-radius: 6px;
+      border-radius: 8px;
       overflow: hidden;
-      background: #333;
+      background: #1a1a1a;
+      border: 1px solid #333;
     }
     @media (min-width: 768px) {
       .chat-images a { width: 200px; height: 200px; }
@@ -115,18 +125,26 @@
       object-fit: cover;
     }
     .chat-images .generating {
+      width: 150px;
+      height: 150px;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #666;
-      font-size: 0.8rem;
+      color: #888;
+      font-size: 0.85rem;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 8px;
+    }
+    @media (min-width: 768px) {
+      .chat-images .generating { width: 200px; height: 200px; }
     }
     .chat-images .generating::after {
       content: '';
       width: 20px;
       height: 20px;
-      border: 2px solid #444;
-      border-top-color: #888;
+      border: 2px solid #333;
+      border-top-color: #4ade80;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       margin-left: 8px;
@@ -135,53 +153,63 @@
 
     /* Input area */
     .input-area {
-      padding: 12px;
-      background: #222;
+      padding: 1rem;
+      background: #0f0f0f;
       border-top: 1px solid #333;
     }
+    @media (min-width: 768px) {
+      .input-area { padding: 1.5rem; }
+    }
     .input-row {
       display: flex;
-      gap: 8px;
+      gap: 10px;
       max-width: 800px;
       margin: 0 auto;
     }
     .input-row input[type="text"] {
       flex: 1;
-      padding: 12px 16px;
-      border: 1px solid #444;
+      padding: 1rem 1.25rem;
+      border: 1px solid #333;
       border-radius: 8px;
       background: #1a1a1a;
-      color: #fff;
+      color: #e5e5e5;
       font-size: 1rem;
     }
+    .input-row input[type="text"]::placeholder { color: #666; }
     .input-row input[type="text"]:focus {
       outline: none;
-      border-color: #666;
+      border-color: #4ade80;
     }
     .input-row input[type="number"] {
-      width: 60px;
-      padding: 12px 8px;
-      border: 1px solid #444;
+      width: 70px;
+      padding: 1rem 0.5rem;
+      border: 1px solid #333;
       border-radius: 8px;
       background: #1a1a1a;
-      color: #fff;
+      color: #e5e5e5;
       font-size: 1rem;
       text-align: center;
     }
+    .input-row input[type="number"]:focus {
+      outline: none;
+      border-color: #4ade80;
+    }
     .input-row button {
-      padding: 12px 20px;
+      padding: 1rem 1.5rem;
       border: none;
       border-radius: 8px;
-      background: #0066cc;
+      background: #dc2626;
       color: #fff;
       font-size: 1rem;
+      font-weight: 600;
       cursor: pointer;
       transition: background 0.2s;
     }
-    .input-row button:hover { background: #0077ee; }
-    .input-row button:disabled { background: #444; cursor: not-allowed; }
+    .input-row button:hover { background: #b91c1c; }
+    .input-row button:disabled { background: #333; color: #666; cursor: not-allowed; }
 
     .empty { text-align: center; padding: 4rem 1rem; color: #666; }
+    .error { color: #dc2626; }
   </style>
 </head>
 <body>
@@ -315,11 +343,13 @@
             </a>
           `).join('');
           initLightbox();
+        } else if (data.error) {
+          imagesDiv.innerHTML = `<div class="empty error">${escapeHtml(data.error)}</div>`;
         } else {
-          imagesDiv.innerHTML = '<div class="empty">Generation failed</div>';
+          imagesDiv.innerHTML = '<div class="empty error">Generation failed</div>';
         }
       } catch (e) {
-        msgDiv.querySelector('.chat-images').innerHTML = '<div class="empty">Error: ' + e.message + '</div>';
+        msgDiv.querySelector('.chat-images').innerHTML = '<div class="empty error">Error: ' + escapeHtml(e.message) + '</div>';
       }
 
       generateBtn.disabled = false;