@sleep2agi/agent-network-dashboard 0.5.7-preview.7 → 0.5.7-preview.75

package/app/settings/networks/page.tsx

@@ -96,24 +96,24 @@ export default function NetworksPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
-      <div className="flex items-center gap-4 mb-6">
-        <Link href="/settings" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Settings</Link>
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
+      {/* #217 D9: back link stacks above the title instead of sitting
+          beside it — the old single row read as an off-balance
+          "← Settings   Networks" pair on phones. */}
+      <div className="mb-6">
+        <Link href="/settings" className="inline-block text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10 mb-1">&larr; Settings</Link>
         <h1 className="text-2xl font-bold text-white">Networks</h1>
-        {/* Round 93: dropped {networks.length} header chip — the
-            My Networks panel below already carries `<N> total` in its
-            own subhead. Matches r86/r87 pattern. */}
       </div>
 
       <div className="max-w-2xl space-y-6">
         {/* Create */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-3">Create Network</h2>
           <div className="space-y-3">
             <input type="text" value={newName} onChange={e => setNewName(e.target.value)} placeholder="Network name"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <input type="text" value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="Description (optional)"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={createNetwork} disabled={!newName.trim()}
               className="px-4 py-2 bg-green-600 hover:bg-green-500 disabled:bg-gray-800 text-white text-sm rounded-lg transition-colors">
               Create
@@ -123,10 +123,12 @@ export default function NetworksPage() {
         </section>
 
         {/* List */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <div className="flex items-center justify-between mb-3">
             <h2 className="text-sm font-semibold text-gray-300">My Networks</h2>
-            {networks.length > 0 && (
+            {/* #217 D9: "N TOTAL" counter dropped below 4 rows — counting
+                a visibly one-item list is noise (D6 conditional rule). */}
+            {networks.length > 3 && (
               <span className="text-[10px] text-gray-600 uppercase tracking-wide">{networks.length} total</span>
             )}
           </div>
@@ -141,7 +143,7 @@ export default function NetworksPage() {
           ) : (
             <div className="space-y-3">
               {networks.map(n => (
-                <div key={n.network_id} className="bg-[#0a0a15] rounded-lg px-4 py-3 border border-[#1a1a2a]">
+                <div key={n.network_id} className="bg-[#0e0e10] rounded-lg px-4 py-3 border border-[#1c1c1f]">
                   <div className="flex items-start justify-between gap-3">
                     <div className="flex items-start gap-3 min-w-0">
                       <AliasAvatar alias={n.network_name} size={28} />
@@ -173,7 +175,7 @@ export default function NetworksPage() {
                   </div>
 
                   {expandedNetwork === n.network_id && (
-                    <div className="mt-3 pt-3 border-t border-[#1a1a2a]">
+                    <div className="mt-3 pt-3 border-t border-[#1c1c1f]">
                       <div className="text-xs text-gray-500 mb-2">Members ({(members[n.network_id] || []).length})</div>
                       {(members[n.network_id] || []).length === 0 ? (
                         <div className="text-[10px] text-gray-600">No members or V3 auth required</div>
@@ -195,11 +197,11 @@ export default function NetworksPage() {
                       )}
 
                       {/* Invite */}
-                      <div className="mt-3 pt-3 border-t border-[#1a1a2a]">
+                      <div className="mt-3 pt-3 border-t border-[#1c1c1f]">
                         <div className="text-xs text-gray-500 mb-2">Invite</div>
                         <div className="flex gap-2">
                           <select value={inviteRole} onChange={e => setInviteRole(e.target.value)}
-                            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white focus:outline-none">
+                            className="bg-[#0e0e10] border border-[#26262b] rounded px-2 py-1 text-base sm:text-xs text-white focus:outline-none">
                             <option value="member">member</option>
                             <option value="admin">admin</option>
                             <option value="viewer">viewer</option>

package/app/settings/page.tsx

@@ -2,15 +2,16 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { useAnetConfig, useHealth, useLicense } from '../lib/hooks';
+import { useAnetConfig, useHealth } from '../lib/hooks';
 import { DASHBOARD_VERSION } from '../lib/version';
 
 export default function SettingsPage() {
   const { config } = useAnetConfig();
-  const { health } = useHealth();
-  const { license: licData } = useLicense();
-  const [licKey, setLicKey] = useState('');
-  const [licResult, setLicResult] = useState('');
+  const { health, error: healthError } = useHealth();
+  const [theme, setTheme] = useState<string>(() => {
+    if (typeof window === 'undefined') return 'cyber';
+    try { return localStorage.getItem('anet-theme') || 'cyber'; } catch { return 'cyber'; }
+  });
   const [oldPwd, setOldPwd] = useState('');
   const [newPwd, setNewPwd] = useState('');
   const [pwdResult, setPwdResult] = useState('');
@@ -18,7 +19,7 @@ export default function SettingsPage() {
   const valueClass = 'break-all sm:max-w-[320px] sm:text-right';
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Settings</h1>
 
       {/* Section anchor nav (round 28) — jump to a group instead of scrolling
@@ -27,29 +28,75 @@ export default function SettingsPage() {
           R3 of #190 mobile polish: matches the /admin chip treatment
           (preview.3) — 44px tap-target + visible border so the chips read
           as tappable rather than as inert headings on 375–390px. */}
-      <nav className="mb-8 flex flex-wrap gap-2 text-xs">
+      {/* #209 R36: mb-8 → mb-4 sm:mb-8 — same pattern R31 applied to
+          /admin's identical jump-nav. Saves 16 px on phones. */}
+      <nav className="mb-4 sm:mb-8 flex flex-wrap gap-2 text-xs">
         {[
+          { href: '#appearance', label: 'Appearance' },
           { href: '#connection', label: 'Connection' },
           { href: '#account',    label: 'Account' },
           { href: '#resources',  label: 'Resources' },
         ].map(a => (
           <a key={a.href} href={a.href}
-            className="inline-flex min-h-[44px] items-center rounded-md border border-[#2a2a4a] bg-[#0a0a15]/60 px-3 py-2 text-gray-400 hover:border-cyan-500/50 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            className="inline-flex min-h-[44px] items-center rounded-md border border-[#26262b] bg-[#0e0e10]/60 px-3 py-2 text-gray-400 hover:border-cyan-500/50 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
             {a.label}
           </a>
         ))}
       </nav>
 
       <div className="max-w-2xl space-y-10">
+        {/* ── Group: Appearance (#217 S6 — Vincent: "设置里面再来一个
+            优化白色的主题"). The light theme tokens were restored from
+            pre-R8 history; this card is the visible owner of the toggle
+            (previously theme switching hid inside Cmd+K only). */}
+        <div id="appearance" className="space-y-4 scroll-mt-6">
+          <div className="flex items-center gap-2 px-1">
+            <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Appearance</div>
+            <div className="flex-1 h-px bg-[#26262b]" />
+          </div>
+          <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
+            <h2 className="text-sm font-semibold text-gray-300 mb-4">Theme</h2>
+            <div className="grid grid-cols-2 gap-3">
+              {([
+                { id: 'cyber', label: 'Dark', swatch: '#0b0b0d', ring: '#22d3ee' },
+                { id: 'light', label: 'Light', swatch: '#f6f7f9', ring: '#009e7e' },
+              ] as const).map(t => (
+                <button
+                  key={t.id}
+                  onClick={() => {
+                    try { localStorage.setItem('anet-theme', t.id); } catch {}
+                    document.documentElement.setAttribute('data-theme', t.id);
+                    setTheme(t.id);
+                  }}
+                  aria-pressed={theme === t.id}
+                  className={`flex items-center gap-3 rounded-lg border px-4 py-3 text-sm transition-colors ${
+                    theme === t.id
+                      ? 'border-cyan-500/60 bg-cyan-500/10 text-gray-100'
+                      : 'border-[#26262b] text-gray-400 hover:border-[#3a3a41]'
+                  }`}
+                >
+                  <span
+                    aria-hidden
+                    className="inline-block w-5 h-5 rounded-full border border-black/20 shrink-0"
+                    style={{ backgroundColor: t.swatch }}
+                  />
+                  {t.label}
+                  {theme === t.id && <span className="ml-auto text-cyan-400">✓</span>}
+                </button>
+              ))}
+            </div>
+          </section>
+        </div>
+
         {/* ── Group: Connection ─────────────────────────────────── */}
         <div id="connection" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Connection</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
 
         {/* CommHub Connection */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">CommHub Connection</h2>
           <div className="space-y-3 text-sm">
             <div className={rowClass}>
@@ -75,15 +122,26 @@ export default function SettingsPage() {
               </span>
             </div>
             {config?.error && (
-              <div className="border-t border-[#2a2a4a] pt-3 text-xs text-gray-600">
+              <div className="border-t border-[#26262b] pt-3 text-xs text-gray-600">
                 {config.error}
               </div>
             )}
+            {/* #214 F5: the red HealthBanner's "Open Settings" CTA used to
+                land on a read-only page with no next step. When the hub is
+                unreachable, give the user actual recovery commands. */}
+            {(healthError || health?.ok === false) && (
+              <div className="border-t border-red-500/20 pt-3 text-xs space-y-1.5" role="alert">
+                <div className="text-red-300 font-medium">CommHub unreachable — how to recover:</div>
+                <div className="text-gray-400">1. Check the hub process on the server: <code className="font-mono bg-[#0e0e10] border border-[#1c1c1f] rounded px-1.5 py-0.5">anet hub status</code></div>
+                <div className="text-gray-400">2. Start it if stopped: <code className="font-mono bg-[#0e0e10] border border-[#1c1c1f] rounded px-1.5 py-0.5">anet hub start</code></div>
+                <div className="text-gray-400">3. Confirm the Hub URL above matches where the hub actually listens.</div>
+              </div>
+            )}
           </div>
         </section>
 
         {/* Server Info */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Server Info</h2>
           <div className="space-y-3 text-sm">
             <div className={rowClass}>
@@ -106,7 +164,7 @@ export default function SettingsPage() {
         </section>
 
         {/* Dashboard Info */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Dashboard</h2>
           <div className="space-y-3 text-sm">
             <div className={rowClass}>
@@ -131,90 +189,17 @@ export default function SettingsPage() {
         <div id="account" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Account</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
 
-        {/* License */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4 flex items-center gap-2">
-            License
-            {licData?.license && (
-              <span
-                className={`inline-flex items-center gap-1.5 text-[10px] font-medium px-2 py-0.5 rounded-full border ${
-                  licData.license.type === 'pro'
-                    ? 'text-green-300 bg-green-500/10 border-green-500/30'
-                    : licData.license.days_left <= 7
-                      ? 'text-red-300 bg-red-500/10 border-red-500/30'
-                      : 'text-amber-300 bg-amber-500/10 border-amber-500/30'
-                }`}
-              >
-                <span aria-hidden className="w-1.5 h-1.5 rounded-full bg-current" />
-                {licData.license.type}{licData.license.days_left ? ` · ${licData.license.days_left}d left` : ''}
-              </span>
-            )}
-          </h2>
-          {licData?.license ? (
-            <div className="space-y-3 text-sm">
-              {/* Type + Days Left are summarized in the inline chip in the
-                  header. Surface "expiring soon" only when relevant. */}
-              {licData.license.days_left <= 7 && (
-                <div className={rowClass}>
-                  <span className="text-red-400 font-medium">⚠ Expiring soon</span>
-                  <span className="text-red-400">{licData.license.days_left} days left</span>
-                </div>
-              )}
-              <div className={rowClass}>
-                <span className="text-gray-500">Expires</span>
-                <span className={`text-gray-300 ${valueClass}`}>{licData.license.expires_at}</span>
-              </div>
-              {licData.limits && (
-                <>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Max Agents</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_agents}</span>
-                  </div>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Max Networks</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_networks}</span>
-                  </div>
-                  <div className={rowClass}>
-                    <span className="text-gray-500">Tasks/Day</span>
-                    <span className={`text-gray-300 ${valueClass}`}>{licData.limits.max_tasks_day}</span>
-                  </div>
-                </>
-              )}
-              <div className="pt-3 border-t border-[#2a2a4a]">
-                <div className="flex gap-2">
-                  <input type="text" value={licKey} onChange={e => setLicKey(e.target.value)}
-                    placeholder="anet-XXXX-XXXX-XXXX-XXXX"
-                    className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded px-3 py-2 text-xs text-white placeholder-gray-600 focus:outline-none" />
-                  <button onClick={async () => {
-                    if (!licKey.trim()) return;
-                    const res = await fetch('/api/hub/license', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: licKey }) });
-                    const data = await res.json();
-                    setLicResult(data.ok ? `Activated: ${data.type}` : `Failed: ${data.error}`);
-                    if (data.ok) setLicKey('');
-                    setTimeout(() => setLicResult(''), 5000);
-                  }} className="px-3 py-2 bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded transition-colors">
-                    Activate
-                  </button>
-                </div>
-                {licResult && <div className={`mt-2 text-xs ${licResult.startsWith('Failed') ? 'text-red-400' : 'text-green-400'}`}>{licResult}</div>}
-              </div>
-            </div>
-          ) : (
-            <div className="text-xs text-gray-600">License info not available</div>
-          )}
-        </section>
-
         {/* Change Password */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Change Password</h2>
           <div className="space-y-3">
             <input type="password" value={oldPwd} onChange={e => setOldPwd(e.target.value)} placeholder="Current password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <input type="password" value={newPwd} onChange={e => setNewPwd(e.target.value)} placeholder="New password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={async () => {
               if (!oldPwd || !newPwd) return;
               const saved = sessionStorage.getItem('anet_v3_auth');
@@ -244,7 +229,7 @@ export default function SettingsPage() {
         </section>
 
         {/* Session — tone-neutral, no longer "danger zone" red */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Sign out</h2>
           <p className="text-xs text-gray-500 mb-3">Signing out clears your dashboard session cookie. You'll return to the login page.</p>
           <button
@@ -252,7 +237,7 @@ export default function SettingsPage() {
               await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
               window.location.assign('/login');
             }}
-            className="px-4 py-2 bg-transparent hover:bg-[#1a1a2a] text-gray-300 text-sm rounded-lg border border-[#2a2a4a] hover:border-[#3a3a5a] transition-colors"
+            className="px-4 py-2 bg-transparent hover:bg-[#1c1c1f] text-gray-300 text-sm rounded-lg border border-[#26262b] hover:border-[#3a3a41] transition-colors"
           >
             Sign out
           </button>
@@ -263,21 +248,42 @@ export default function SettingsPage() {
         <div id="resources" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Resources</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
 
-        {/* API Tokens + Networks */}
+        {/* #209 (per Vincent 521/522): the low-frequency pages 通信龙
+            moved out of the sidebar (Messages, Audit Log, Server Logs)
+            need a discovery surface that isn't the primary nav — folded
+            into the Settings/Resources grid alongside Tokens + Networks
+            so the page tree stays the same (pages NOT deleted), the
+            sidebar stays at 6, and users still have a one-tap way to
+            reach them without remembering URLs or opening Cmd+K. */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <Link href="/settings/tokens" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+          <Link href="/settings/tokens" className="bg-[#161618] border border-[#26262b] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
             <h2 className="text-sm font-semibold text-gray-300">API Tokens</h2>
             <p className="text-xs text-gray-500 mt-2">Create and manage tokens for CLI access.</p>
             <span className="text-xs text-cyan-400 mt-3 inline-block">Manage &rarr;</span>
           </Link>
-          <Link href="/settings/networks" className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+          <Link href="/settings/networks" className="bg-[#161618] border border-[#26262b] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
             <h2 className="text-sm font-semibold text-gray-300">Networks</h2>
             <p className="text-xs text-gray-500 mt-2">Create, manage, and delete agent networks.</p>
             <span className="text-xs text-cyan-400 mt-3 inline-block">Manage &rarr;</span>
           </Link>
+          <Link href="/messages" className="bg-[#161618] border border-[#26262b] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Messages</h2>
+            <p className="text-xs text-gray-500 mt-2">Global timeline of CommHub messages across all agents.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
+          <Link href="/logs" className="bg-[#161618] border border-[#26262b] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Audit Log</h2>
+            <p className="text-xs text-gray-500 mt-2">Authentication, token rotations, and admin actions.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
+          <Link href="/server-logs" className="bg-[#161618] border border-[#26262b] rounded-xl p-5 hover:border-cyan-500/30 transition-colors">
+            <h2 className="text-sm font-semibold text-gray-300">Server Logs</h2>
+            <p className="text-xs text-gray-500 mt-2">Live stdout / stderr from the CommHub server.</p>
+            <span className="text-xs text-cyan-400 mt-3 inline-block">Open &rarr;</span>
+          </Link>
         </div>
         </div>
 

package/app/settings/tokens/page.tsx

@@ -67,7 +67,7 @@ export default function TokensPage() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       <div className="flex items-center gap-4 mb-6">
         <Link href="/settings" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Settings</Link>
         <h1 className="text-2xl font-bold text-white">API Tokens</h1>
@@ -75,12 +75,12 @@ export default function TokensPage() {
 
       <div className="max-w-2xl space-y-6">
         {/* Create token */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-3">Create Token</h2>
           <div className="flex gap-2">
             <input type="text" value={newName} onChange={e => setNewName(e.target.value)}
               placeholder="Token name (e.g. my-cli)"
-              className="flex-1 bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
+              className="flex-1 bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none" />
             <button onClick={createToken} disabled={!newName.trim()}
               className="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 disabled:bg-gray-800 text-white text-sm rounded-lg transition-colors">
               Create
@@ -96,7 +96,7 @@ export default function TokensPage() {
         </section>
 
         {/* Token list */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-3">Active Tokens ({tokens.length})</h2>
           {loading ? (
             <div className="animate-pulse space-y-2">{[1,2].map(i => <div key={i} className="h-12 bg-gray-800/20 rounded" />)}</div>
@@ -109,7 +109,7 @@ export default function TokensPage() {
           ) : (
             <div className="space-y-2">
               {tokens.map(t => (
-                <div key={t.token_id} className="flex items-center justify-between bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
+                <div key={t.token_id} className="flex items-center justify-between bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f]">
                   <div>
                     <div className="flex items-center gap-2">
                       <span className="text-sm text-white font-medium">{t.name}</span>

package/app/tasks/[id]/page.tsx

@@ -73,7 +73,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
         <div className="animate-pulse space-y-4">
           <div className="h-8 w-48 bg-gray-800 rounded" />
           <div className="h-64 bg-gray-800/20 rounded-lg" />
@@ -84,7 +84,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
 
   if (!task) {
     return (
-      <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono flex items-center justify-center">
+      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-6 flex items-center justify-center">
         <div className="text-center">
           <div className="text-gray-600 text-4xl mb-4">--</div>
           <p className="text-gray-400">Task not found</p>
@@ -103,7 +103,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
   ];
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       <div className="flex items-center gap-4 mb-6">
         <Link href="/tasks" className="text-gray-500 hover:text-gray-300 text-sm lg:ml-0 ml-10">&larr; Tasks</Link>
         <h1 className="text-xl font-bold text-white truncate">Task Detail</h1>
@@ -113,12 +113,12 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {/* Left: Timeline + Info */}
         <div className="space-y-4">
-          <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+          <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
             <h2 className="text-sm font-semibold text-gray-300 mb-4">Timeline</h2>
             <Timeline steps={steps} />
           </div>
 
-          <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+          <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
             <h2 className="text-sm font-semibold text-gray-300 mb-3">Info</h2>
             <div className="space-y-2 text-xs">
               {[
@@ -140,17 +140,17 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
 
         {/* Right: Content + Result */}
         <div className="lg:col-span-2 space-y-4">
-          <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+          <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
             <h2 className="text-sm font-semibold text-gray-300 mb-2">Content</h2>
-            <div className="text-sm text-gray-300 whitespace-pre-wrap bg-[#0a0a15] rounded-lg px-4 py-3 border border-[#1a1a2a]">
+            <div className="text-sm text-gray-300 whitespace-pre-wrap bg-[#0e0e10] rounded-lg px-4 py-3 border border-[#1c1c1f]">
               {task.content || '--'}
             </div>
           </div>
 
           {task.result && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-2">Result</h2>
-              <div className="text-sm text-gray-300 whitespace-pre-wrap bg-[#0a0a15] rounded-lg px-4 py-3 border border-[#1a1a2a] max-h-96 overflow-y-auto">
+              <div className="text-sm text-gray-300 whitespace-pre-wrap bg-[#0e0e10] rounded-lg px-4 py-3 border border-[#1c1c1f] max-h-96 overflow-y-auto">
                 {task.result}
               </div>
             </div>
@@ -158,7 +158,7 @@ export default function TaskDetailPage({ params }: { params: Promise<{ id: strin
 
           {/* Task Events */}
           {eventsData?.events && eventsData.events.length > 0 && (
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <h2 className="text-sm font-semibold text-gray-300 mb-3">Events ({eventsData.events.length})</h2>
               <div className="space-y-2 max-h-64 overflow-y-auto">
                 {eventsData.events.map((e: { id: number; event_type: string; from_status: string; to_status: string; detail: string; created_at: string }, i: number) => (