update frontend

static/style.css

@@ -1,3 +1,4 @@
+/* ===== Dark theme (default) ===== */
 :root {
     --bg: #0f0f0f;
     --bg-sidebar: #161616;
@@ -18,6 +19,34 @@
     --radius: 12px;
     --radius-sm: 8px;
     --sidebar-w: 280px;
+    --footer-bg: #111;
+    --footer-border: #222;
+    --code-bg: #0a0a0a;
+    --table-header: #ffffff08;
+}
+
+/* ===== Light theme ===== */
+[data-theme="light"] {
+    --bg: #ffffff;
+    --bg-sidebar: #f7f7f8;
+    --bg-chat: #ffffff;
+    --bg-input: #f0f0f0;
+    --bg-user: #2563eb;
+    --bg-assistant: #f4f4f5;
+    --bg-hover: #ececec;
+    --bg-active: #2563eb15;
+    --border: #e0e0e0;
+    --text: #1a1a1a;
+    --text-dim: #666;
+    --text-muted: #999;
+    --accent: #2563eb;
+    --accent-hover: #1d4ed8;
+    --danger: #dc2626;
+    --danger-hover: #b91c1c;
+    --footer-bg: #f7f7f8;
+    --footer-border: #e0e0e0;
+    --code-bg: #f0f0f0;
+    --table-header: #00000008;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -35,7 +64,7 @@ body {
     height: 100vh;
 }
 
-/* Sidebar */
+/* ===== Sidebar ===== */
 .sidebar {
     width: var(--sidebar-w);
     background: var(--bg-sidebar);
@@ -59,6 +88,11 @@ body {
     font-weight: 600;
 }
 
+.sidebar-actions {
+    display: flex;
+    gap: 2px;
+}
+
 .session-list {
     flex: 1;
     overflow-y: auto;
@@ -111,7 +145,7 @@ body {
     line-height: 1.6;
 }
 
-/* Main */
+/* ===== Main ===== */
 .main {
     flex: 1;
     display: flex;
@@ -139,7 +173,7 @@ body {
     gap: 4px;
 }
 
-/* Messages */
+/* ===== Messages ===== */
 .messages {
     flex: 1;
     overflow-y: auto;
@@ -213,7 +247,7 @@ body {
 .bubble li { margin: 2px 0; }
 
 .bubble code {
-    background: #ffffff10;
+    background: var(--code-bg);
     padding: 1px 5px;
     border-radius: 4px;
     font-size: 13px;
@@ -221,7 +255,7 @@ body {
 }
 
 .bubble pre {
-    background: #0a0a0a;
+    background: var(--code-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 10px 12px;
@@ -243,9 +277,10 @@ body {
 }
 
 .bubble a {
-    color: #60a5fa;
+    color: #2563eb;
     text-decoration: none;
 }
+[data-theme="dark"] .bubble a { color: #60a5fa; }
 .bubble a:hover { text-decoration: underline; }
 
 .bubble table {
@@ -259,7 +294,7 @@ body {
     padding: 6px 10px;
     text-align: left;
 }
-.bubble th { background: #ffffff08; font-weight: 600; }
+.bubble th { background: var(--table-header); font-weight: 600; }
 
 .bubble strong { font-weight: 600; }
 .bubble em { font-style: italic; }
@@ -328,9 +363,9 @@ body {
     30% { transform: translateY(-4px); }
 }
 
-/* Input */
+/* ===== Input ===== */
 .input-area {
-    padding: 12px 16px 16px;
+    padding: 12px 16px 12px;
     border-top: 1px solid var(--border);
     background: var(--bg-sidebar);
 }
@@ -390,7 +425,27 @@ body {
     margin-top: 6px;
 }
 
-/* Buttons */
+/* ===== Footer ===== */
+.app-footer {
+    padding: 10px 16px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--text-muted);
+    background: var(--footer-bg);
+    border-top: 1px solid var(--footer-border);
+    flex-shrink: 0;
+}
+
+.app-footer a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.app-footer a:hover {
+    text-decoration: underline;
+}
+
+/* ===== Buttons ===== */
 .btn-icon {
     width: 32px;
     height: 32px;
@@ -408,13 +463,19 @@ body {
 .btn-icon:hover { background: var(--bg-hover); color: var(--text); }
 .btn-icon.btn-danger:hover { background: var(--danger); color: white; }
 
-/* Scrollbar */
+/* Theme toggle icons */
+[data-theme="dark"] .icon-sun { display: none; }
+[data-theme="dark"] .icon-moon { display: block; }
+[data-theme="light"] .icon-sun { display: block; }
+[data-theme="light"] .icon-moon { display: none; }
+
+/* ===== Scrollbar ===== */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
-/* Responsive */
+/* ===== Responsive ===== */
 @media (max-width: 768px) {
     .sidebar {
         position: fixed;