fix: add missing _content partial templates for HTMX nav (terminal, sftp, settings, brief)

- Create terminal_content.html, sftp_content.html, settings_content.html, brief_content.html
- Update full page templates to use partial templates via {{template}}
- Handlers already rendered these templates on HX-Request, but files were missing → 500
- All pages now return 200 for both full page and HTMX nav requests

app/backend/static/css/output.css

@@ -6,10 +6,8 @@
     --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
     --font-mono: 'JetBrains Mono', ui-monospace, monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
-    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
-    --color-red-600: oklch(57.7% 0.245 27.325);
     --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-purple-50: oklch(97.7% 0.014 308.299);
@@ -17,7 +15,6 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
@@ -315,9 +312,6 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mt-6 {
-    margin-top: calc(var(--spacing) * 6);
-  }
   .mr-1 {
     margin-right: var(--spacing);
   }
@@ -330,18 +324,12 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
-  .ml-0\.5 {
-    margin-left: calc(var(--spacing) * 0.5);
-  }
   .ml-1 {
     margin-left: var(--spacing);
   }
@@ -465,27 +453,18 @@
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
-  .w-14 {
-    width: calc(var(--spacing) * 14);
-  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
-  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
   .w-\[260px\] {
     width: 260px;
   }
-  .w-fit {
-    width: fit-content;
-  }
   .w-full {
     width: 100%;
   }
@@ -510,9 +489,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-0 {
     min-width: 0;
   }
@@ -775,12 +751,6 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .border-\[\#58a6ff\] {
-    border-color: #58a6ff;
-  }
-  .border-\[\#30363d\] {
-    border-color: #30363d;
-  }
   .border-error-container\/40 {
     border-color: color-mix(in srgb, #f9dedc 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -847,9 +817,6 @@
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-red-200 {
-    border-color: var(--color-red-200);
-  }
   .border-secondary\/20 {
     border-color: color-mix(in srgb, #006e2f 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -865,27 +832,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .bg-\[\#0d1117\] {
-    background-color: #0d1117;
-  }
-  .bg-\[\#3fb950\] {
-    background-color: #3fb950;
-  }
-  .bg-\[\#8b949e\] {
-    background-color: #8b949e;
-  }
-  .bg-\[\#161b22\] {
-    background-color: #161b22;
-  }
-  .bg-\[\#191c1e\] {
-    background-color: #191c1e;
-  }
-  .bg-black\/30 {
-    background-color: color-mix(in srgb, #000 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -967,9 +913,6 @@
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
-  .bg-red-500 {
-    background-color: var(--color-red-500);
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -1006,24 +949,12 @@
   .bg-surface-container-low {
     background-color: var(--color-surface-container-low);
   }
-  .bg-surface-container-low\/30 {
-    background-color: color-mix(in srgb, #f0f2f5 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-surface-container-low) 30%, transparent);
-    }
-  }
   .bg-surface-container-low\/50 {
     background-color: color-mix(in srgb, #f0f2f5 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-surface-container-low) 50%, transparent);
     }
   }
-  .bg-tertiary\/10 {
-    background-color: color-mix(in srgb, #7e23cc 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-tertiary) 10%, transparent);
-    }
-  }
   .bg-tertiary\/20 {
     background-color: color-mix(in srgb, #7e23cc 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1048,12 +979,6 @@
       background-color: color-mix(in oklab, var(--color-white) 40%, transparent);
     }
   }
-  .bg-white\/50 {
-    background-color: color-mix(in srgb, #fff 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
-    }
-  }
   .bg-white\/70 {
     background-color: color-mix(in srgb, #fff 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1195,9 +1120,6 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
-  .pb-16 {
-    padding-bottom: calc(var(--spacing) * 16);
-  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1305,9 +1227,6 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-\[\#8b949e\] {
-    color: #8b949e;
-  }
   .text-\[\#191c1e\] {
     color: #191c1e;
   }
@@ -1332,18 +1251,6 @@
   .text-on-surface-variant {
     color: var(--color-on-surface-variant);
   }
-  .text-on-surface-variant\/40 {
-    color: color-mix(in srgb, #424656 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-on-surface-variant) 40%, transparent);
-    }
-  }
-  .text-on-surface-variant\/50 {
-    color: color-mix(in srgb, #424656 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-on-surface-variant) 50%, transparent);
-    }
-  }
   .text-outline {
     color: var(--color-outline);
   }
@@ -1371,12 +1278,6 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
-  .text-red-500 {
-    color: var(--color-red-500);
-  }
-  .text-red-600 {
-    color: var(--color-red-600);
-  }
   .text-secondary {
     color: var(--color-secondary);
   }
@@ -1523,10 +1424,6 @@
     -webkit-user-select: all;
     user-select: all;
   }
-  .select-none {
-    -webkit-user-select: none;
-    user-select: none;
-  }
   .group-hover\:scale-110 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1586,12 +1483,6 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .last\:border-0 {
-    &:last-child {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-  }
   .hover\:border-error {
     &:hover {
       @media (hover: hover) {
@@ -1606,23 +1497,6 @@
       }
     }
   }
-  .hover\:border-primary\/30 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: color-mix(in srgb, #0050cb 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-\[\#30363d\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #30363d;
-      }
-    }
-  }
   .hover\:bg-black\/10 {
     &:hover {
       @media (hover: hover) {
@@ -1697,13 +1571,6 @@
       }
     }
   }
-  .hover\:bg-red-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-red-600);
-      }
-    }
-  }
   .hover\:bg-surface-container {
     &:hover {
       @media (hover: hover) {
@@ -1718,13 +1585,6 @@
       }
     }
   }
-  .hover\:text-\[\#c9d1d9\] {
-    &:hover {
-      @media (hover: hover) {
-        color: #c9d1d9;
-      }
-    }
-  }
   .hover\:text-error {
     &:hover {
       @media (hover: hover) {
@@ -1753,16 +1613,6 @@
       }
     }
   }
-  .hover\:text-primary\/50 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, #0050cb 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-        }
-      }
-    }
-  }
   .hover\:text-primary\/80 {
     &:hover {
       @media (hover: hover) {
@@ -1780,20 +1630,6 @@
       }
     }
   }
-  .hover\:text-red-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-red-600);
-      }
-    }
-  }
-  .hover\:text-white {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -1850,14 +1686,6 @@
       }
     }
   }
-  .focus\:ring-primary\/30 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, #0050cb 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-      }
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;

app/backend/static/js/clipboard.js

@@ -1,10 +1,14 @@
-function copyToClipboard(text) {
+document.addEventListener('click', function(e) {
+  const btn = e.target.closest('[data-copy]');
+  if (!btn) return;
+  const text = btn.getAttribute('data-copy');
+  if (!text) return;
   if (navigator.clipboard && navigator.clipboard.writeText) {
     navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
   } else {
     fallbackCopy(text);
   }
-}
+});
 
 function fallbackCopy(text) {
   const ta = document.createElement('textarea');

app/backend/views/brief.html

@@ -19,82 +19,7 @@
         <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
       </header>
       <main id="main-content" class="flex-1 overflow-auto p-6">
-        <div class="max-w-3xl mx-auto space-y-6">
+        {{template "brief_content" .}}
-          <!-- Color Palette -->
-          <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
-            <h3 class="font-bold text-on-surface flex items-center gap-2">
-              <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
-              Color Palette — Lumina System
-            </h3>
-            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
-              <div class="rounded-xl p-3" style="background:#0050cb"><span class="text-white text-xs font-mono font-bold">Primary #0050cb</span></div>
-              <div class="rounded-xl p-3" style="background:#006e2f"><span class="text-white text-xs font-mono font-bold">Secondary #006e2f</span></div>
-              <div class="rounded-xl p-3" style="background:#7e23cc"><span class="text-white text-xs font-mono font-bold">Tertiary #7e23cc</span></div>
-              <div class="rounded-xl p-3" style="background:#b3261e"><span class="text-white text-xs font-mono font-bold">Error #b3261e</span></div>
-              <div class="rounded-xl p-3 border border-outline-variant/30" style="background:#f7f9fb"><span class="text-[#191c1e] text-xs font-mono font-bold">Surface #f7f9fb</span></div>
-              <div class="rounded-xl p-3" style="background:#191c1e"><span class="text-white text-xs font-mono font-bold">On-Surface #191c1e</span></div>
-              <div class="rounded-xl p-3" style="background:#424656"><span class="text-white text-xs font-mono font-bold">On-Surface-Var #424656</span></div>
-              <div class="rounded-xl p-3" style="background:#c2c6d8"><span class="text-[#191c1e] text-xs font-mono font-bold">Outline-Var #c2c6d8</span></div>
-            </div>
-          </div>
-
-          <!-- Typography -->
-          <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
-            <h3 class="font-bold text-on-surface flex items-center gap-2">
-              <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
-              Typography
-            </h3>
-            <div class="space-y-3">
-              <div><p class="text-xl font-bold tracking-tight">Heading XL — Inter 800</p><p class="text-xs text-on-surface-variant font-mono">text-xl font-bold tracking-tight</p></div>
-              <div><p class="text-base font-bold">Heading Base — Inter 700</p><p class="text-xs text-on-surface-variant font-mono">text-base font-bold</p></div>
-              <div><p class="text-sm font-medium">Body — Inter 500</p><p class="text-xs text-on-surface-variant font-mono">text-sm font-medium</p></div>
-              <div><p class="text-xs text-on-surface-variant">Caption — Inter 400/500</p><p class="text-xs text-on-surface-variant font-mono">text-xs text-on-surface-variant</p></div>
-              <div><p class="text-xs font-mono">Monospace — JetBrains Mono 400/600</p><p class="text-xs text-on-surface-variant font-mono">text-xs font-mono</p></div>
-            </div>
-          </div>
-
-          <!-- Elevation -->
-          <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
-            <h3 class="font-bold text-on-surface flex items-center gap-2">
-              <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
-              Elevation & Layout
-            </h3>
-            <div class="space-y-3 text-sm">
-              <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
-                <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-sm</span>
-                <div class="flex-1 h-8 rounded-lg bg-white shadow-sm border border-outline-variant/20"></div>
-              </div>
-              <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
-                <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-md</span>
-                <div class="flex-1 h-8 rounded-lg bg-white shadow-md border border-outline-variant/20"></div>
-              </div>
-              <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
-                <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-lg</span>
-                <div class="flex-1 h-8 rounded-lg bg-white shadow-lg border border-outline-variant/20"></div>
-              </div>
-              <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
-                <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-2xl</span>
-                <div class="flex-1 h-8 rounded-lg bg-white shadow-2xl border border-outline-variant/20"></div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Keyboard Shortcuts -->
-          <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
-            <h3 class="font-bold text-on-surface flex items-center gap-2">
-              <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-              Keyboard Shortcuts
-            </h3>
-            <div class="space-y-2 text-sm">
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Host</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + N</kbd></div>
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Snippet</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + I</kbd></div>
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Toggle View</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + T</kbd></div>
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Search</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + P</kbd></div>
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Quick Terminal</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + K</kbd></div>
-              <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Close Panel</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Esc</kbd></div>
-            </div>
-          </div>
-        </div>
       </main>
     </div>
   </div>

app/backend/views/brief_content.html

@@ -0,0 +1,78 @@
+{{define "brief_content"}}
+<div class="max-w-3xl mx-auto space-y-6">
+  <!-- Color Palette -->
+  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
+    <h3 class="font-bold text-on-surface flex items-center gap-2">
+      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
+      Color Palette — Lumina System
+    </h3>
+    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      <div class="rounded-xl p-3" style="background:#0050cb"><span class="text-white text-xs font-mono font-bold">Primary #0050cb</span></div>
+      <div class="rounded-xl p-3" style="background:#006e2f"><span class="text-white text-xs font-mono font-bold">Secondary #006e2f</span></div>
+      <div class="rounded-xl p-3" style="background:#7e23cc"><span class="text-white text-xs font-mono font-bold">Tertiary #7e23cc</span></div>
+      <div class="rounded-xl p-3" style="background:#b3261e"><span class="text-white text-xs font-mono font-bold">Error #b3261e</span></div>
+      <div class="rounded-xl p-3 border border-outline-variant/30" style="background:#f7f9fb"><span class="text-[#191c1e] text-xs font-mono font-bold">Surface #f7f9fb</span></div>
+      <div class="rounded-xl p-3" style="background:#191c1e"><span class="text-white text-xs font-mono font-bold">On-Surface #191c1e</span></div>
+      <div class="rounded-xl p-3" style="background:#424656"><span class="text-white text-xs font-mono font-bold">On-Surface-Var #424656</span></div>
+      <div class="rounded-xl p-3" style="background:#c2c6d8"><span class="text-[#191c1e] text-xs font-mono font-bold">Outline-Var #c2c6d8</span></div>
+    </div>
+  </div>
+
+  <!-- Typography -->
+  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
+    <h3 class="font-bold text-on-surface flex items-center gap-2">
+      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/></svg>
+      Typography
+    </h3>
+    <div class="space-y-3">
+      <div><p class="text-xl font-bold tracking-tight">Heading XL — Inter 800</p><p class="text-xs text-on-surface-variant font-mono">text-xl font-bold tracking-tight</p></div>
+      <div><p class="text-base font-bold">Heading Base — Inter 700</p><p class="text-xs text-on-surface-variant font-mono">text-base font-bold</p></div>
+      <div><p class="text-sm font-medium">Body — Inter 500</p><p class="text-xs text-on-surface-variant font-mono">text-sm font-medium</p></div>
+      <div><p class="text-xs text-on-surface-variant">Caption — Inter 400/500</p><p class="text-xs text-on-surface-variant font-mono">text-xs text-on-surface-variant</p></div>
+      <div><p class="text-xs font-mono">Monospace — JetBrains Mono 400/600</p><p class="text-xs text-on-surface-variant font-mono">text-xs font-mono</p></div>
+    </div>
+  </div>
+
+  <!-- Elevation -->
+  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
+    <h3 class="font-bold text-on-surface flex items-center gap-2">
+      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+      Elevation & Layout
+    </h3>
+    <div class="space-y-3 text-sm">
+      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
+        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-sm</span>
+        <div class="flex-1 h-8 rounded-lg bg-white shadow-sm border border-outline-variant/20"></div>
+      </div>
+      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
+        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-md</span>
+        <div class="flex-1 h-8 rounded-lg bg-white shadow-md border border-outline-variant/20"></div>
+      </div>
+      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
+        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-lg</span>
+        <div class="flex-1 h-8 rounded-lg bg-white shadow-lg border border-outline-variant/20"></div>
+      </div>
+      <div class="flex items-center gap-4 p-3 rounded-lg bg-surface-container-low">
+        <span class="w-16 text-xs font-mono text-on-surface-variant">shadow-2xl</span>
+        <div class="flex-1 h-8 rounded-lg bg-white shadow-2xl border border-outline-variant/20"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Keyboard Shortcuts -->
+  <div class="bg-white rounded-2xl border border-outline-variant/30 p-6 space-y-4">
+    <h3 class="font-bold text-on-surface flex items-center gap-2">
+      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+      Keyboard Shortcuts
+    </h3>
+    <div class="space-y-2 text-sm">
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Host</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + N</kbd></div>
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">New Snippet</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + I</kbd></div>
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Toggle View</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + T</kbd></div>
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Search</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + P</kbd></div>
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Quick Terminal</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Cmd + K</kbd></div>
+      <div class="flex items-center justify-between py-1.5 border-b border-outline-variant/10"><span class="text-on-surface-variant">Close Panel</span><kbd class="px-2 py-0.5 rounded bg-surface-container-low text-xs font-mono text-on-surface">Esc</kbd></div>
+    </div>
+  </div>
+</div>
+{{end}}

app/backend/views/host_modal.html

@@ -57,13 +57,13 @@
           <div class="grid grid-cols-3 gap-2">
             <button type="button" @click="type = 'api'"
                     :class="type === 'api' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
-                    class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">API Node</button>
+                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">API Node</button>
             <button type="button" @click="type = 'db'"
                     :class="type === 'db' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
-                    class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">DB Node</button>
+                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">DB Node</button>
             <button type="button" @click="type = 'web'"
                     :class="type === 'web' ? 'bg-primary text-white border-primary' : 'bg-surface-container-low border-outline-variant/40 text-on-surface-variant hover:bg-surface-container'"
-                    class="py-2 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">Web Node</button>
+                    class="py-2.5 px-3 border rounded-lg font-bold text-xs uppercase tracking-wider transition-all">Web Node</button>
           </div>
           <input type="hidden" name="type" :value="type">
         </div>

app/backend/views/index.html

@@ -17,12 +17,15 @@
   <div class="flex min-h-screen">
     {{template "nav" .}}
     <div class="flex-1 flex flex-col overflow-hidden">
-      <header class="h-14 border-b border-outline-variant/30 flex items-center gap-3 px-6 bg-white/70 backdrop-blur-md">
+      <header class="h-14 border-b border-outline-variant/30 flex items-center px-6 bg-white/70 backdrop-blur-md">
-        <h1 class="text-xl font-bold tracking-tight text-on-surface">Hosts</h1>
+        <h1 class="text-lg font-semibold text-on-surface">Hosts</h1>
-        <span class="text-xs text-on-surface-variant mt-0.5">Manage connections, monitor uptime, and deploy</span>
       </header>
       <main id="main-content" class="flex-1 overflow-auto p-6">
         <div id="dashboard-page" class="max-w-7xl mx-auto space-y-8">
+          <div class="border-b border-outline-variant/30 pb-4">
+            <h2 class="text-xl font-bold text-on-surface tracking-tight">Hosts</h2>
+            <p class="text-xs text-on-surface-variant mt-0.5">Manage connections, monitor uptime, and deploy</p>
+          </div>
           <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
             <div class="md:col-span-8 p-6 rounded-2xl bg-white border border-outline-variant shadow-sm flex items-center justify-between overflow-hidden relative group">
               <div class="relative z-10 space-y-2">

app/backend/views/key_grid.html

@@ -1,5 +1,4 @@
 {{define "credential_grid"}}
-<div id="key-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
 {{range $i, $key := .Keys}}
 <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 hover:border-primary hover:shadow-lg transition-all flex flex-col justify-between space-y-4"
      x-data="{ reveal: false }">
@@ -46,7 +45,7 @@
           <svg x-show="reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.06 10.06 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88L6.59 6.59m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
           <svg x-show="!reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
         </button>
-          <button onclick="copyToClipboard('{{.Passphrase}}')"
+        <button data-copy="{{.Passphrase}}"
                 class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Copy secret">
           <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
         </button>
@@ -83,5 +82,4 @@
   No credentials found. Add your first credential.
 </div>
 {{end}}
-</div>
 {{end}}

app/backend/views/keychain.html

@@ -44,7 +44,7 @@
           </div>
 
           <!-- Grid List -->
-          <div id="key-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="key-grid">
             {{template "credential_grid" .}}
           </div>
 
@@ -70,7 +70,7 @@
                 <h3 class="font-bold text-lg text-on-surface">Register Secure Credential</h3>
                 <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
               </div>
-              <form hx-post="/keys" hx-target="#key-grid" hx-swap="outerHTML"
+              <form hx-post="/keys" hx-target="#key-grid" hx-swap="innerHTML"
                     @submit="open = false" class="space-y-4 text-sm">
                 <div class="flex flex-col gap-1">
                   <label class="text-xs font-bold text-on-surface-variant">CREDENTIAL NAME / LABEL</label>

app/backend/views/nav.html

@@ -1,6 +1,6 @@
 {{define "nav"}}
 <nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0">
-  <div class="p-4 border-b border-outline-variant/20">
+  <div class="p-3 border-b border-outline-variant/20">
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
       <span class="font-bold text-lg text-on-surface">Hostkeeper</span>

app/backend/views/settings.html

@@ -21,248 +21,7 @@
         <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
       </header>
       <main id="main-content" class="flex-1 overflow-auto p-6">
-        <div class="max-w-7xl mx-auto space-y-8 text-sm" x-data="{ toast: '', showToast: false, saveSuccess: false }"
+        {{template "settings_content" .}}
-             x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))">
-
-          <!-- Toast -->
-          <div x-show="showToast" x-cloak
-               class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
-            <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-            <span x-text="toast"></span>
-          </div>
-
-          <!-- Header -->
-          <div class="border-b border-outline-variant/30 pb-4">
-            <h2 class="text-xl font-bold text-on-surface tracking-tight">Workspace Preferences</h2>
-            <p class="text-xs text-on-surface-variant mt-0.5">Configure authentication sync protocols and cloud billing</p>
-          </div>
-
-          <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
-            <!-- Left: profile + toggles -->
-            <div class="lg:col-span-8 space-y-8">
-
-              <!-- Profile Form -->
-              <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
-                <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
-                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
-                  Developer Profile
-                </h3>
-                <form method="post" action="/settings" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
-                  <div class="flex flex-col gap-1.5">
-                    <label class="text-xs font-bold text-on-surface-variant">FULL NAME</label>
-                    <input type="text" name="name" value="User"
-                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-semibold text-on-surface">
-                  </div>
-                  <div class="flex flex-col gap-1.5">
-                    <label class="text-xs font-bold text-on-surface-variant">EMAIL ADDRESS</label>
-                    <input type="email" name="email" value="user@hostkeeper.io"
-                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
-                  </div>
-                  <div class="flex flex-col gap-1.5 sm:col-span-2">
-                    <label class="text-xs font-bold text-on-surface-variant">WORKPLACE DESIGNATION / ROLE</label>
-                    <input type="text" name="role" value="DevOps Engineer"
-                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
-                  </div>
-                  <div class="sm:col-span-2 pt-2 flex justify-end">
-                    <button type="submit"
-                            class="flex items-center gap-2 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2.5 px-6 rounded-xl shadow-md transition-all">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
-                      Save Changes
-                    </button>
-                  </div>
-                </form>
-              </div>
-
-              <!-- Feature Toggles -->
-              <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
-                <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
-                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
-                  Security & Transmission Protocols
-                </h3>
-                <div class="space-y-4 divide-y divide-outline-variant/20">
-                  <label class="flex items-center justify-between py-3">
-                    <div class="space-y-0.5 pr-4">
-                      <h4 class="font-bold text-on-surface text-xs sm:text-sm">Cryptographic Keychain Backup</h4>
-                      <p class="text-xs text-on-surface-variant">Synchronize securely encrypted keys automatically inside iCloud/Google drive sandboxes.</p>
-                    </div>
-                    <button type="button" role="switch"
-                            x-data="{ on: true }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-
-                  <label class="flex items-center justify-between pt-3">
-                    <div class="space-y-0.5 pr-4">
-                      <h4 class="font-bold text-on-surface text-xs sm:text-sm">Real-time SFTP Connection Polling</h4>
-                      <p class="text-xs text-on-surface-variant">Enable background file watchers to automatically refresh the directory tree upon local file modifications.</p>
-                    </div>
-                    <button type="button" role="switch"
-                            x-data="{ on: true }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-
-                  <label class="flex items-center justify-between pt-3">
-                    <div class="space-y-0.5 pr-4">
-                      <h4 class="font-bold text-on-surface text-xs sm:text-sm">Desktop Push Notifications</h4>
-                      <p class="text-xs text-on-surface-variant">Trigger native system indicators upon complete transmissions of download/upload streams.</p>
-                    </div>
-                    <button type="button" role="switch"
-                            x-data="{ on: false }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-                </div>
-              </div>
-
-              <!-- Terminal Settings -->
-              <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
-                <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
-                  <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
-                  Terminal Preferences
-                </h3>
-                <form method="post" action="/settings" class="space-y-5">
-                  <div class="grid grid-cols-2 gap-4">
-                    <div class="flex flex-col gap-1">
-                      <label class="text-xs font-bold text-on-surface-variant">FONT SIZE</label>
-                      <select name="fontSize"
-                              class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
-                        <option value="12">12px</option>
-                        <option value="13">13px</option>
-                        <option value="14" selected>14px</option>
-                        <option value="15">15px</option>
-                        <option value="16">16px</option>
-                        <option value="18">18px</option>
-                      </select>
-                    </div>
-                    <div class="flex flex-col gap-1">
-                      <label class="text-xs font-bold text-on-surface-variant">SCROLLBACK</label>
-                      <select name="scrollback"
-                              class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
-                        <option value="1000">1,000</option>
-                        <option value="5000" selected>5,000</option>
-                        <option value="10000">10,000</option>
-                      </select>
-                    </div>
-                  </div>
-                  <label class="flex items-center justify-between py-2">
-                    <span class="text-sm font-medium text-on-surface">Blinking Cursor</span>
-                    <button type="button" role="switch"
-                            x-data="{ on: true }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-                  <label class="flex items-center justify-between py-2">
-                    <span class="text-sm font-medium text-on-surface">Terminal Bell</span>
-                    <button type="button" role="switch"
-                            x-data="{ on: false }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-                  <label class="flex items-center justify-between py-2">
-                    <span class="text-sm font-medium text-on-surface">Auto-Reconnect</span>
-                    <button type="button" role="switch"
-                            x-data="{ on: true }"
-                            @click="on = !on; $el.classList.toggle('active')"
-                            :class="on ? 'active' : ''"
-                            class="toggle-switch" style="width:44px;height:24px">
-                      <span class="toggle-knob"></span>
-                    </button>
-                  </label>
-                  <div class="pt-2 flex justify-end">
-                    <button type="submit"
-                            class="bg-primary text-white py-2 px-6 rounded-xl font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Settings</button>
-                  </div>
-                </form>
-              </div>
-            </div>
-
-            <!-- Right: billing + devices + danger -->
-            <div class="lg:col-span-4 space-y-8">
-
-              <!-- Billing Card -->
-              <div class="bg-primary text-on-primary p-6 rounded-2xl shadow-lg relative overflow-hidden flex flex-col justify-between h-48">
-                <div class="relative z-10">
-                  <div class="flex justify-between items-start">
-                    <span class="px-2.5 py-1 bg-white/20 rounded-full font-bold text-[9px] uppercase tracking-wider text-white">HostKeeper Pro</span>
-                    <svg class="w-5 h-5 text-white fill-white" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                  </div>
-                  <h3 class="font-black text-2xl tracking-tight mt-3">Active Workspace</h3>
-                </div>
-                <div class="relative z-10 flex justify-between items-end">
-                  <div>
-                    <span class="text-xs opacity-80 uppercase font-semibold">RENEWAL CYCLE</span>
-                    <p class="text-xs font-bold text-white">July 2026</p>
-                  </div>
-                  <span class="text-[10px] font-bold bg-white text-primary rounded-lg px-2.5 py-1 flex items-center gap-1">
-                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
-                    PAID ACCOUNT
-                  </span>
-                </div>
-                <div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
-                  <svg class="w-48 h-48 -rotate-45" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-                </div>
-              </div>
-
-              <!-- Devices -->
-              <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 shadow-sm space-y-4">
-                <h3 class="font-bold text-on-surface text-sm flex items-center gap-2">
-                  <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
-                  Synchronized Devices
-                </h3>
-                <div class="space-y-3.5">
-                  {{range .Devices}}
-                  <div class="flex items-center justify-between text-xs">
-                    <div class="flex items-center gap-2.5 min-w-0">
-                      <div class="p-1.5 bg-surface-container-low border border-outline-variant/20 rounded-lg shrink-0">
-                        <svg class="w-4 h-4 {{if eq .Type "desktop"}}text-primary{{else}}text-outline{{end}}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          {{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
-                          {{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
-                          {{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
-                        </svg>
-                      </div>
-                      <span class="font-bold text-on-surface truncate pr-2">{{.Name}}</span>
-                    </div>
-                    <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 shrink-0 {{if .Current}}bg-secondary/10 text-secondary{{else}}bg-surface-container text-outline{{end}}">
-                      <span class="w-1 h-1 rounded-full {{if .Current}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
-                      {{if .Current}}Online{{else}}Offline{{end}}
-                    </span>
-                  </div>
-                  {{end}}
-                </div>
-              </div>
-
-              <!-- Danger Zone -->
-              <div class="p-4 border border-error-container/40 rounded-2xl bg-error-container/5 space-y-3 text-xs" x-data="{ confirm: false }">
-                <h4 class="font-bold text-error flex items-center gap-2">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
-                  Reset Local State
-                </h4>
-                <p class="text-on-surface-variant">Resetting will clear all your locally loaded keystores, snippets, and connection cache buffers from the browser storage.</p>
-                <button @click="if(confirm('Are you sure you want to flush all local storage configurations?')) { localStorage.clear(); alert('Workspace storage cleared successfully.'); window.location.reload(); }"
-                        class="w-full py-2 border border-error/30 rounded-xl font-bold text-error hover:bg-error/10 transition-colors">
-                  Flush All App State
-                </button>
-              </div>
-
-            </div>
-          </div>
-        </div>
       </main>
     </div>
   </div>

app/backend/views/settings_content.html

@@ -0,0 +1,244 @@
+{{define "settings_content"}}
+<div class="max-w-7xl mx-auto space-y-8 text-sm" x-data="{ toast: '', showToast: false, saveSuccess: false }"
+     x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3000))">
+
+  <!-- Toast -->
+  <div x-show="showToast" x-cloak
+       class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
+    <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    <span x-text="toast"></span>
+  </div>
+
+  <!-- Header -->
+  <div class="border-b border-outline-variant/30 pb-4">
+    <h2 class="text-xl font-bold text-on-surface tracking-tight">Workspace Preferences</h2>
+    <p class="text-xs text-on-surface-variant mt-0.5">Configure authentication sync protocols and cloud billing</p>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
+    <!-- Left: profile + toggles -->
+    <div class="lg:col-span-8 space-y-8">
+
+      <!-- Profile Form -->
+      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
+        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
+          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
+          Developer Profile
+        </h3>
+        <form method="post" action="/settings" class="grid grid-cols-1 sm:grid-cols-2 gap-5">
+          <div class="flex flex-col gap-1.5">
+            <label class="text-xs font-bold text-on-surface-variant">FULL NAME</label>
+            <input type="text" name="name" value="User"
+                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-semibold text-on-surface">
+          </div>
+          <div class="flex flex-col gap-1.5">
+            <label class="text-xs font-bold text-on-surface-variant">EMAIL ADDRESS</label>
+            <input type="email" name="email" value="user@hostkeeper.io"
+                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
+          </div>
+          <div class="flex flex-col gap-1.5 sm:col-span-2">
+            <label class="text-xs font-bold text-on-surface-variant">WORKPLACE DESIGNATION / ROLE</label>
+            <input type="text" name="role" value="DevOps Engineer"
+                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
+          </div>
+          <div class="sm:col-span-2 pt-2 flex justify-end">
+            <button type="submit"
+                    class="flex items-center gap-2 bg-primary text-white hover:bg-primary/90 font-bold text-xs py-2.5 px-6 rounded-xl shadow-md transition-all">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
+              Save Changes
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <!-- Feature Toggles -->
+      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
+        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
+          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
+          Security & Transmission Protocols
+        </h3>
+        <div class="space-y-4 divide-y divide-outline-variant/20">
+          <label class="flex items-center justify-between py-3">
+            <div class="space-y-0.5 pr-4">
+              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Cryptographic Keychain Backup</h4>
+              <p class="text-xs text-on-surface-variant">Synchronize securely encrypted keys automatically inside iCloud/Google drive sandboxes.</p>
+            </div>
+            <button type="button" role="switch"
+                    x-data="{ on: true }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+
+          <label class="flex items-center justify-between pt-3">
+            <div class="space-y-0.5 pr-4">
+              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Real-time SFTP Connection Polling</h4>
+              <p class="text-xs text-on-surface-variant">Enable background file watchers to automatically refresh the directory tree upon local file modifications.</p>
+            </div>
+            <button type="button" role="switch"
+                    x-data="{ on: true }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+
+          <label class="flex items-center justify-between pt-3">
+            <div class="space-y-0.5 pr-4">
+              <h4 class="font-bold text-on-surface text-xs sm:text-sm">Desktop Push Notifications</h4>
+              <p class="text-xs text-on-surface-variant">Trigger native system indicators upon complete transmissions of download/upload streams.</p>
+            </div>
+            <button type="button" role="switch"
+                    x-data="{ on: false }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+        </div>
+      </div>
+
+      <!-- Terminal Settings -->
+      <div class="bg-white p-6 rounded-2xl border border-outline-variant/30 shadow-sm space-y-6">
+        <h3 class="font-bold text-on-surface text-base flex items-center gap-2">
+          <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+          Terminal Preferences
+        </h3>
+        <form method="post" action="/settings" class="space-y-5">
+          <div class="grid grid-cols-2 gap-4">
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-bold text-on-surface-variant">FONT SIZE</label>
+              <select name="fontSize"
+                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
+                <option value="12">12px</option>
+                <option value="13">13px</option>
+                <option value="14" selected>14px</option>
+                <option value="15">15px</option>
+                <option value="16">16px</option>
+                <option value="18">18px</option>
+              </select>
+            </div>
+            <div class="flex flex-col gap-1">
+              <label class="text-xs font-bold text-on-surface-variant">SCROLLBACK</label>
+              <select name="scrollback"
+                      class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
+                <option value="1000">1,000</option>
+                <option value="5000" selected>5,000</option>
+                <option value="10000">10,000</option>
+              </select>
+            </div>
+          </div>
+          <label class="flex items-center justify-between py-2">
+            <span class="text-sm font-medium text-on-surface">Blinking Cursor</span>
+            <button type="button" role="switch"
+                    x-data="{ on: true }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+          <label class="flex items-center justify-between py-2">
+            <span class="text-sm font-medium text-on-surface">Terminal Bell</span>
+            <button type="button" role="switch"
+                    x-data="{ on: false }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+          <label class="flex items-center justify-between py-2">
+            <span class="text-sm font-medium text-on-surface">Auto-Reconnect</span>
+            <button type="button" role="switch"
+                    x-data="{ on: true }"
+                    @click="on = !on; $el.classList.toggle('active')"
+                    :class="on ? 'active' : ''"
+                    class="toggle-switch" style="width:44px;height:24px">
+              <span class="toggle-knob"></span>
+            </button>
+          </label>
+          <div class="pt-2 flex justify-end">
+            <button type="submit"
+                    class="bg-primary text-white py-2 px-6 rounded-xl font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Settings</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Right: billing + devices + danger -->
+    <div class="lg:col-span-4 space-y-8">
+
+      <!-- Billing Card -->
+      <div class="bg-primary text-on-primary p-6 rounded-2xl shadow-lg relative overflow-hidden flex flex-col justify-between h-48">
+        <div class="relative z-10">
+          <div class="flex justify-between items-start">
+            <span class="px-2.5 py-1 bg-white/20 rounded-full font-bold text-[9px] uppercase tracking-wider text-white">HostKeeper Pro</span>
+            <svg class="w-5 h-5 text-white fill-white" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+          </div>
+          <h3 class="font-black text-2xl tracking-tight mt-3">Active Workspace</h3>
+        </div>
+        <div class="relative z-10 flex justify-between items-end">
+          <div>
+            <span class="text-xs opacity-80 uppercase font-semibold">RENEWAL CYCLE</span>
+            <p class="text-xs font-bold text-white">July 2026</p>
+          </div>
+          <span class="text-[10px] font-bold bg-white text-primary rounded-lg px-2.5 py-1 flex items-center gap-1">
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
+            PAID ACCOUNT
+          </span>
+        </div>
+        <div class="absolute right-0 bottom-0 opacity-10 pointer-events-none">
+          <svg class="w-48 h-48 -rotate-45" viewBox="0 0 24 24" fill="currentColor"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+        </div>
+      </div>
+
+      <!-- Devices -->
+      <div class="bg-white p-5 rounded-2xl border border-outline-variant/30 shadow-sm space-y-4">
+        <h3 class="font-bold text-on-surface text-sm flex items-center gap-2">
+          <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
+          Synchronized Devices
+        </h3>
+        <div class="space-y-3.5">
+          {{range .Devices}}
+          <div class="flex items-center justify-between text-xs">
+            <div class="flex items-center gap-2.5 min-w-0">
+              <div class="p-1.5 bg-surface-container-low border border-outline-variant/20 rounded-lg shrink-0">
+                <svg class="w-4 h-4 {{if eq .Type "desktop"}}text-primary{{else}}text-outline{{end}}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  {{if eq .Type "desktop"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>{{end}}
+                  {{if eq .Type "mobile"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
+                  {{if eq .Type "tablet"}}<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>{{end}}
+                </svg>
+              </div>
+              <span class="font-bold text-on-surface truncate pr-2">{{.Name}}</span>
+            </div>
+            <span class="px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center gap-1 shrink-0 {{if .Current}}bg-secondary/10 text-secondary{{else}}bg-surface-container text-outline{{end}}">
+              <span class="w-1 h-1 rounded-full {{if .Current}}bg-secondary animate-pulse{{else}}bg-outline{{end}}"></span>
+              {{if .Current}}Online{{else}}Offline{{end}}
+            </span>
+          </div>
+          {{end}}
+        </div>
+      </div>
+
+      <!-- Danger Zone -->
+      <div class="p-4 border border-error-container/40 rounded-2xl bg-error-container/5 space-y-3 text-xs" x-data="{ confirm: false }">
+        <h4 class="font-bold text-error flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+          Reset Local State
+        </h4>
+        <p class="text-on-surface-variant">Resetting will clear all your locally loaded keystores, snippets, and connection cache buffers from the browser storage.</p>
+        <button @click="if(confirm('Are you sure you want to flush all local storage configurations?')) { localStorage.clear(); alert('Workspace storage cleared successfully.'); window.location.reload(); }"
+                class="w-full py-2 border border-error/30 rounded-xl font-bold text-error hover:bg-error/10 transition-colors">
+          Flush All App State
+        </button>
+      </div>
+
+    </div>
+  </div>
+</div>
+{{end}}

app/backend/views/sftp.html

@@ -19,144 +19,7 @@
         <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
       </header>
       <main id="main-content" class="flex-1 overflow-auto p-6">
-        <div id="sftp-page" class="max-w-7xl mx-auto space-y-6 relative"
+        {{template "sftp_content" .}}
-             x-data="{ toast: '', showToast: false, showFolderModal: false, folderPane: 'local' }"
-             x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3500))">
-
-          <!-- Toast -->
-          <div x-show="showToast" x-cloak
-               class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
-            <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-            <span x-text="toast"></span>
-          </div>
-
-          <!-- Header Panel -->
-          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
-            <div>
-              <h2 class="text-xl font-bold text-on-surface tracking-tight">SFTP Secure File Sync</h2>
-              <p class="text-xs text-on-surface-variant mt-0.5">Dual streams for real-time asset transmission and file editing</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <button hx-get="/sftp" hx-target="#main-content"
-                      class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant/30 hover:border-primary text-xs font-semibold text-on-surface bg-white transition-all hover:bg-surface-container">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
-                Reset State
-              </button>
-            </div>
-          </div>
-
-          <!-- Dual Panel Body -->
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-
-            <!-- Local Pane -->
-            <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
-              <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
-                <div class="flex items-center gap-2 min-w-0">
-                  <svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
-                  <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Local Workstation</span>
-                </div>
-                <button @click="$dispatch('open-folder-modal', { pane: 'local' })"
-                        class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Local Folder">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
-                </button>
-              </div>
-
-              <!-- Breadcrumb -->
-              <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
-                {{range .LocalBreadcrumb}}
-                <a href="#" hx-get="/sftp/pane?pane=local&dir={{.Path}}" hx-target="#local-pane"
-                   class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
-                <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-                {{end}}
-              </div>
-
-              <!-- Search -->
-              <div class="p-3 border-b border-outline-variant/10 relative">
-                <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-                <input type="search" name="q" placeholder="Filter local files..."
-                       hx-get="/sftp/pane?pane=local" hx-trigger="keyup delay:200ms" hx-target="#local-pane"
-                       class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
-              </div>
-
-              <div id="local-pane" class="flex-1 overflow-y-auto min-h-0">
-                {{template "sftp_pane" dict "Pane" "local" "Files" .LocalFiles "Breadcrumb" .LocalBreadcrumb}}
-              </div>
-            </div>
-
-            <!-- Remote Pane -->
-            <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
-              <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
-                <div class="flex items-center gap-2 min-w-0">
-                  <svg class="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
-                  <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Remote Cluster Node</span>
-                </div>
-                <button @click="$dispatch('open-folder-modal', { pane: 'remote' })"
-                        class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Remote Folder">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
-                </button>
-              </div>
-
-              <!-- Breadcrumb -->
-              <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
-                {{range .RemoteBreadcrumb}}
-                <a href="#" hx-get="/sftp/pane?pane=remote&dir={{.Path}}" hx-target="#remote-pane"
-                   class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
-                <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
-                {{end}}
-              </div>
-
-              <!-- Search -->
-              <div class="p-3 border-b border-outline-variant/10 relative">
-                <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-                <input type="search" name="q" placeholder="Filter remote files..."
-                       hx-get="/sftp/pane?pane=remote" hx-trigger="keyup delay:200ms" hx-target="#remote-pane"
-                       class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
-              </div>
-
-              <div id="remote-pane" class="flex-1 overflow-y-auto min-h-0">
-                {{template "sftp_pane" dict "Pane" "remote" "Files" .RemoteFiles "Breadcrumb" .RemoteBreadcrumb}}
-              </div>
-            </div>
-          </div>
-
-          <!-- Drop Zone -->
-          <div class="p-8 border-2 border-dashed border-outline-variant/40 rounded-2xl text-center bg-white/40 flex flex-col items-center justify-center space-y-2 relative group hover:border-primary transition-colors cursor-pointer">
-            <svg class="w-10 h-10 text-outline group-hover:text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
-            <h3 class="font-bold text-sm text-on-surface">Drag files directly here to start batch upload</h3>
-            <p class="text-xs text-on-surface-variant max-w-sm">
-              Files are automatically split into parallel streams of 5MB chunks and secured with AES-256 keychain keys.
-            </p>
-          </div>
-
-          <!-- Folder Modal -->
-          <div id="folder-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
-               @open-folder-modal.window="open = true; folderPane = $event.detail.pane" @keydown.escape.window="open = false">
-            <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
-            <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
-              <div class="bg-white rounded-2xl max-w-sm w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
-                <div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
-                  <h3 class="font-bold text-lg text-on-surface">New Folder</h3>
-                  <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
-                </div>
-                <form hx-post="/sftp/mkdir" hx-target="#local-pane" hx-swap="outerHTML"
-                      @submit="open = false" class="space-y-4 text-sm">
-                  <input type="hidden" name="pane" :value="folderPane">
-                  <div class="flex flex-col gap-1">
-                    <label class="text-xs font-bold text-on-surface-variant">FOLDER NAME</label>
-                    <input type="text" name="name" required placeholder="e.g. new-project"
-                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
-                  </div>
-                  <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
-                    <button type="button" @click="open = false"
-                            class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
-                    <button type="submit"
-                            class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Create Folder</button>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
       </main>
     </div>
   </div>

app/backend/views/sftp_content.html

@@ -0,0 +1,141 @@
+{{define "sftp_content"}}
+<div id="sftp-page" class="max-w-7xl mx-auto space-y-6 relative"
+     x-data="{ toast: '', showToast: false, showFolderModal: false, folderPane: 'local' }"
+     x-init="$watch('showToast', v => v && setTimeout(() => showToast = false, 3500))"
+     @toast-message.window="toast = $event.detail.message; showToast = true">
+
+  <!-- Toast -->
+  <div x-show="showToast" x-cloak
+       class="fixed bottom-6 right-6 z-[180] bg-inverse-surface text-inverse-on-surface px-5 py-3.5 rounded-xl shadow-xl flex items-center gap-3 border border-outline/20 animate-slide-in text-xs font-semibold">
+    <svg class="w-4 h-4 text-secondary animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    <span x-text="toast"></span>
+  </div>
+
+  <!-- Header Panel -->
+  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
+    <div>
+      <h2 class="text-xl font-bold text-on-surface tracking-tight">SFTP Secure File Sync</h2>
+      <p class="text-xs text-on-surface-variant mt-0.5">Dual streams for real-time asset transmission and file editing</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button hx-get="/sftp" hx-target="#main-content"
+              class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-outline-variant/30 hover:border-primary text-xs font-semibold text-on-surface bg-white transition-all hover:bg-surface-container">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        Reset State
+      </button>
+    </div>
+  </div>
+
+  <!-- Dual Panel Body -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+
+    <!-- Local Pane -->
+    <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
+      <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
+        <div class="flex items-center gap-2 min-w-0">
+          <svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+          <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Local Workstation</span>
+        </div>
+        <button @click="$dispatch('open-folder-modal', { pane: 'local' })"
+                class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Local Folder">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
+        </button>
+      </div>
+
+      <!-- Breadcrumb -->
+      <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
+        {{range .LocalBreadcrumb}}
+        <a href="#" hx-get="/sftp/pane?pane=local&dir={{.Path}}" hx-target="#local-pane"
+           class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
+        <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+        {{end}}
+      </div>
+
+      <!-- Search -->
+      <div class="p-3 border-b border-outline-variant/10 relative">
+        <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+        <input type="search" name="q" placeholder="Filter local files..."
+               hx-get="/sftp/pane?pane=local" hx-trigger="keyup delay:200ms" hx-target="#local-pane"
+               class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
+      </div>
+
+      <div id="local-pane" class="flex-1 overflow-y-auto min-h-0">
+        {{template "sftp_pane" dict "Pane" "local" "Files" .LocalFiles "Breadcrumb" .LocalBreadcrumb}}
+      </div>
+    </div>
+
+    <!-- Remote Pane -->
+    <div class="bg-white rounded-2xl border border-outline-variant/30 overflow-hidden shadow-sm flex flex-col h-[520px]">
+      <div class="p-4 border-b border-outline-variant/50 bg-surface-container-low flex items-center justify-between">
+        <div class="flex items-center gap-2 min-w-0">
+          <svg class="w-4 h-4 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
+          <span class="font-bold text-xs text-on-surface truncate uppercase tracking-wider">Remote Cluster Node</span>
+        </div>
+        <button @click="$dispatch('open-folder-modal', { pane: 'remote' })"
+                class="text-primary hover:text-primary/80 p-1 rounded hover:bg-primary/5 transition-all" title="New Remote Folder">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-5-8H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2v2"/></svg>
+        </button>
+      </div>
+
+      <!-- Breadcrumb -->
+      <div class="px-4 py-2 border-b border-outline-variant/20 bg-surface-container-lowest flex items-center gap-1.5 text-xs text-outline font-mono overflow-x-auto">
+        {{range .RemoteBreadcrumb}}
+        <a href="#" hx-get="/sftp/pane?pane=remote&dir={{.Path}}" hx-target="#remote-pane"
+           class="text-primary hover:underline cursor-pointer">{{.Name}}</a>
+        <svg class="w-3 h-3 text-outline/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+        {{end}}
+      </div>
+
+      <!-- Search -->
+      <div class="p-3 border-b border-outline-variant/10 relative">
+        <svg class="absolute left-6 top-1/2 -translate-y-1/2 text-outline w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+        <input type="search" name="q" placeholder="Filter remote files..."
+               hx-get="/sftp/pane?pane=remote" hx-trigger="keyup delay:200ms" hx-target="#remote-pane"
+               class="w-full bg-surface-container-low pl-10 pr-4 py-1.5 border border-outline-variant/30 rounded-lg text-xs font-medium focus:outline-none focus:border-primary focus:bg-white">
+      </div>
+
+      <div id="remote-pane" class="flex-1 overflow-y-auto min-h-0">
+        {{template "sftp_pane" dict "Pane" "remote" "Files" .RemoteFiles "Breadcrumb" .RemoteBreadcrumb}}
+      </div>
+    </div>
+  </div>
+
+  <!-- Drop Zone -->
+  <div class="p-8 border-2 border-dashed border-outline-variant/40 rounded-2xl text-center bg-white/40 flex flex-col items-center justify-center space-y-2 relative group hover:border-primary transition-colors cursor-pointer">
+    <svg class="w-10 h-10 text-outline group-hover:text-primary group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>
+    <h3 class="font-bold text-sm text-on-surface">Drag files directly here to start batch upload</h3>
+    <p class="text-xs text-on-surface-variant max-w-sm">
+      Files are automatically split into parallel streams of 5MB chunks and secured with AES-256 keychain keys.
+    </p>
+  </div>
+
+  <!-- Folder Modal -->
+  <div id="folder-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
+       @open-folder-modal.window="open = true; folderPane = $event.detail.pane" @keydown.escape.window="open = false">
+    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
+    <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
+      <div class="bg-white rounded-2xl max-w-sm w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
+        <div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
+          <h3 class="font-bold text-lg text-on-surface">New Folder</h3>
+          <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
+        </div>
+        <form hx-post="/sftp/mkdir" hx-target="#local-pane" hx-swap="outerHTML"
+              @submit="open = false" class="space-y-4 text-sm">
+          <input type="hidden" name="pane" :value="folderPane">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-bold text-on-surface-variant">FOLDER NAME</label>
+            <input type="text" name="name" required placeholder="e.g. new-project"
+                   class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
+          </div>
+          <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
+            <button type="button" @click="open = false"
+                    class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
+            <button type="submit"
+                    class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Create Folder</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+{{end}}

app/backend/views/sftp_pane.html

@@ -38,13 +38,13 @@
           <div class="flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
             {{if ne .Type "folder"}}
             {{if eq $.Pane "local"}}
-            <button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Uploading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
+            <button @click="$dispatch('toast-message', { message: 'Uploading {{.Name}}...' })"
                     class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Upload to remote">
               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
             </button>
             {{end}}
             {{if eq $.Pane "remote"}}
-            <button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Downloading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
+            <button @click="$dispatch('toast-message', { message: 'Downloading {{.Name}}...' })"
                     class="p-1 hover:bg-primary/10 rounded text-primary transition-colors" title="Download to local">
               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
             </button>

app/backend/views/snippet_grid.html

@@ -1,5 +1,5 @@
 {{define "snippet_grid"}}
-<div id="snippet-grid" class="space-y-6">
+<script id="snippet-data" type="application/json">{{.SnippetsJSON}}</script>
 {{range .Snippets}}
 <div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-sm flex flex-col group">
   <div class="p-5 flex justify-between items-start gap-4">
@@ -18,7 +18,7 @@
     </div>
 
     <div class="flex items-center gap-2 shrink-0">
-        <button onclick="copyToClipboard(`{{.Content}}`)"
+      <button data-copy="{{.Content}}"
               class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-primary text-outline hover:text-primary transition-colors"
               title="Copy code to clipboard">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
@@ -33,7 +33,7 @@
 
   <div class="bg-surface-container-low border-t border-outline-variant/40 p-4 font-mono text-xs text-on-surface relative group/code overflow-x-auto">
     <pre class="text-on-surface select-all leading-relaxed whitespace-pre font-medium">{{.Content}}</pre>
-      <button onclick="copyToClipboard(`{{.Content}}`)"
+    <button data-copy="{{.Content}}"
             class="absolute right-4 top-4 bg-white/90 backdrop-blur border border-outline-variant/30 shadow px-2.5 py-1 rounded text-[10px] font-mono font-bold hover:border-primary hover:text-primary transition-colors opacity-0 group-hover/code:opacity-100">
       COPY
     </button>
@@ -54,5 +54,4 @@
   No matching snippet found.
 </div>
 {{end}}
-</div>
 {{end}}

app/backend/views/snippets.html

@@ -110,7 +110,7 @@
                 <h3 class="font-bold text-lg text-on-surface">Store Custom Snippet</h3>
                 <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
               </div>
-              <form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="outerHTML"
+              <form hx-post="/snippets" hx-target="#snippet-grid" hx-swap="innerHTML"
                     @submit="open = false" class="space-y-4 text-sm">
                 <div class="flex flex-col gap-1">
                   <label class="text-xs font-bold text-on-surface-variant">SNIPPET TITLE</label>

app/backend/views/terminal.html

@@ -26,95 +26,7 @@
         </button>
       </header>
       <main id="main-content" class="flex-1 flex flex-col overflow-auto p-6">
-        <div class="max-w-7xl mx-auto space-y-6 flex flex-col flex-1 min-h-0 w-full">
+        {{template "terminal_content" .}}
-          <!-- Session Tab Toolbar -->
-          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-3">
-            <div class="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth pr-6">
-              <template x-for="(tab, i) in tabs" :key="tab.id">
-                <div @click="switchTab(i)"
-                     :class="activeTab === i ? 'bg-white text-primary border-primary shadow-[0_-4px_12px_rgba(0,80,203,0.06)]' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container border-transparent'"
-                     class="flex items-center gap-2 px-3.5 py-2 rounded-t-xl text-xs font-bold font-mono transition-all cursor-pointer border-t-2">
-                  <svg class="w-3.5 h-3.5" :class="activeTab === i ? 'text-primary' : 'text-outline'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 014 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0110 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25C19.496 5.875 20 6.379 20 7v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0116 17z"/></svg>
-                  <span class="truncate max-w-[120px]" x-text="tab.name"></span>
-                  <button @click.stop="closeTab(i)" class="p-0.5 hover:bg-black/10 rounded transition-colors">
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
-                  </button>
-                </div>
-              </template>
-              <button @click="addTab()"
-                      class="p-1.5 bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant rounded-lg transition-all" title="Open new terminal connection">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
-              </button>
-            </div>
-            <div class="flex items-center gap-4 text-xs font-mono shrink-0">
-              <div class="flex items-center gap-1.5 text-secondary">
-                <span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
-                <span>SECURE CRYPTO PATH</span>
-              </div>
-              <div class="text-outline">
-                HOST: <span class="text-on-surface font-semibold" x-text="tabs.length ? tabs[activeTab].host : '—'"></span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Terminal shell frame -->
-          <div class="flex-1 bg-white border border-outline-variant rounded-2xl shadow-sm flex flex-col overflow-hidden min-h-0">
-            <!-- Terminal Header -->
-            <div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center">
-              <div class="flex items-center gap-1.5">
-                <span class="w-3 h-3 rounded-full bg-error/80"></span>
-                <span class="w-3 h-3 rounded-full bg-primary-container/80"></span>
-                <span class="w-3 h-3 rounded-full bg-secondary/80"></span>
-                <span class="text-[10px] font-mono font-bold text-outline ml-2">ssh -i id_ed25519 root@<span x-text="tabs.length ? tabs[activeTab].host : '—'"></span></span>
-              </div>
-              <div class="flex items-center gap-3">
-                <button @click="clearBuffer()"
-                        class="text-[10px] uppercase font-bold text-outline hover:text-primary transition-colors flex items-center gap-1">
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
-                  Clear Buffer
-                </button>
-              </div>
-            </div>
-
-            <!-- Console display -->
-            <div class="flex-1 overflow-y-auto min-h-0 font-mono text-sm leading-relaxed p-5 bg-white" id="terminal-output">
-              <template x-for="(line, idx) in history" :key="idx">
-                <div :class="line.type === 'input' ? 'text-on-surface font-bold' : line.type === 'error' ? 'text-error bg-error-container/20 px-2.5 py-1 rounded-md' : line.type === 'success' ? 'text-secondary bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold' : 'text-[#2244aa]'"
-                     class="whitespace-pre-wrap" x-text="line.text"></div>
-              </template>
-              <div class="h-4"></div>
-            </div>
-
-            <!-- Input prompt -->
-            <form @submit.prevent="submitCommand()"
-                  class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5">
-              <span class="font-mono text-xs font-bold text-primary pl-2 shrink-0 flex items-center gap-1">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3"/></svg>
-                root@<span x-text="tabs.length ? tabs[activeTab].name : 'host'"></span>:~$
-              </span>
-              <input type="text" x-model="command" autofocus
-                     placeholder='Type a command (e.g. "help", "ls", "docker ps", "ping google.com")...'
-                     class="flex-1 bg-transparent border-none font-mono text-xs font-medium focus:ring-0 focus:outline-none text-on-surface p-0">
-              <button type="submit"
-                      class="p-1.5 bg-primary text-white rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all" title="Execute Command">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/></svg>
-              </button>
-            </form>
-          </div>
-
-          <!-- Shortcut pills -->
-          <div class="flex flex-wrap items-center gap-2 text-[11px] font-mono font-bold text-on-surface-variant">
-            <span class="text-outline">SHORTCUT SUGGESTIONS:</span>
-            <button type="button" @click="insertCommand('help')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">help</button>
-            <button type="button" @click="insertCommand('ls')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ls</button>
-            <button type="button" @click="insertCommand('docker ps')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">docker ps</button>
-            <button type="button" @click="insertCommand('uname -a')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">uname -a</button>
-            <button type="button" @click="insertCommand('ping 8.8.8.8')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ping 8.8.8.8</button>
-            <button type="button" @click="insertCommand('cat server.js')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">cat server.js</button>
-            <button type="button" @click="insertCommand('keychain')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">keychain</button>
-            <button type="button" @click="insertCommand('clear')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">clear</button>
-          </div>
-        </div>
       </main>
     </div>
   </div>

app/backend/views/terminal_content.html

@@ -0,0 +1,91 @@
+{{define "terminal_content"}}
+<div class="max-w-7xl mx-auto space-y-6 flex flex-col flex-1 min-h-0 w-full">
+  <!-- Session Tab Toolbar -->
+  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-3">
+    <div class="flex items-center gap-2 overflow-x-auto no-scrollbar scroll-smooth pr-6">
+      <template x-for="(tab, i) in tabs" :key="tab.id">
+        <div @click="switchTab(i)"
+             :class="activeTab === i ? 'bg-white text-primary border-primary shadow-[0_-4px_12px_rgba(0,80,203,0.06)]' : 'bg-surface-container-low text-on-surface-variant hover:bg-surface-container border-transparent'"
+             class="flex items-center gap-2 px-3.5 py-2 rounded-t-xl text-xs font-bold font-mono transition-all cursor-pointer border-t-2">
+          <svg class="w-3.5 h-3.5" :class="activeTab === i ? 'text-primary' : 'text-outline'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 014 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0110 17zm6 0V7c0-.621.504-1.125 1.125-1.125h2.25C19.496 5.875 20 6.379 20 7v10c0 .621-.504 1.125-1.125 1.125h-2.25A1.125 1.125 0 0116 17z"/></svg>
+          <span class="truncate max-w-[120px]" x-text="tab.name"></span>
+          <button @click.stop="closeTab(i)" class="p-0.5 hover:bg-black/10 rounded transition-colors">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+          </button>
+        </div>
+      </template>
+      <button @click="addTab()"
+              class="p-1.5 bg-surface-container hover:bg-primary-container hover:text-on-primary-container text-on-surface-variant rounded-lg transition-all" title="Open new terminal connection">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
+      </button>
+    </div>
+    <div class="flex items-center gap-4 text-xs font-mono shrink-0">
+      <div class="flex items-center gap-1.5 text-secondary">
+        <span class="w-2 h-2 rounded-full bg-secondary animate-pulse"></span>
+        <span>SECURE CRYPTO PATH</span>
+      </div>
+      <div class="text-outline">
+        HOST: <span class="text-on-surface font-semibold" x-text="tabs.length ? tabs[activeTab].host : '—'"></span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Terminal shell frame -->
+  <div class="flex-1 bg-white border border-outline-variant rounded-2xl shadow-sm flex flex-col overflow-hidden min-h-0">
+    <!-- Terminal Header -->
+    <div class="px-4 py-2 bg-surface-container-low border-b border-outline-variant/30 flex justify-between items-center">
+      <div class="flex items-center gap-1.5">
+        <span class="w-3 h-3 rounded-full bg-error/80"></span>
+        <span class="w-3 h-3 rounded-full bg-primary-container/80"></span>
+        <span class="w-3 h-3 rounded-full bg-secondary/80"></span>
+        <span class="text-[10px] font-mono font-bold text-outline ml-2">ssh -i id_ed25519 root@<span x-text="tabs.length ? tabs[activeTab].host : '—'"></span></span>
+      </div>
+      <div class="flex items-center gap-3">
+        <button @click="clearBuffer()"
+                class="text-[10px] uppercase font-bold text-outline hover:text-primary transition-colors flex items-center gap-1">
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
+          Clear Buffer
+        </button>
+      </div>
+    </div>
+
+    <!-- Console display -->
+    <div class="flex-1 overflow-y-auto min-h-0 font-mono text-sm leading-relaxed p-5 bg-white" id="terminal-output">
+      <template x-for="(line, idx) in history" :key="idx">
+        <div :class="line.type === 'input' ? 'text-on-surface font-bold' : line.type === 'error' ? 'text-error bg-error-container/20 px-2.5 py-1 rounded-md' : line.type === 'success' ? 'text-secondary bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold' : 'text-[#2244aa]'"
+             class="whitespace-pre-wrap" x-text="line.text"></div>
+      </template>
+      <div class="h-4"></div>
+    </div>
+
+    <!-- Input prompt -->
+    <form @submit.prevent="submitCommand()"
+          class="p-3 border-t border-outline-variant/40 bg-surface-container-low flex items-center gap-2.5">
+      <span class="font-mono text-xs font-bold text-primary pl-2 shrink-0 flex items-center gap-1">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3"/></svg>
+        root@<span x-text="tabs.length ? tabs[activeTab].name : 'host'"></span>:~$
+      </span>
+      <input type="text" x-model="command" autofocus
+             placeholder='Type a command (e.g. "help", "ls", "docker ps", "ping google.com")...'
+             class="flex-1 bg-transparent border-none font-mono text-xs font-medium focus:ring-0 focus:outline-none text-on-surface p-0">
+      <button type="submit"
+              class="p-1.5 bg-primary text-white rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all" title="Execute Command">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/></svg>
+      </button>
+    </form>
+  </div>
+
+  <!-- Shortcut pills -->
+  <div class="flex flex-wrap items-center gap-2 text-[11px] font-mono font-bold text-on-surface-variant">
+    <span class="text-outline">SHORTCUT SUGGESTIONS:</span>
+    <button type="button" @click="insertCommand('help')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">help</button>
+    <button type="button" @click="insertCommand('ls')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ls</button>
+    <button type="button" @click="insertCommand('docker ps')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">docker ps</button>
+    <button type="button" @click="insertCommand('uname -a')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">uname -a</button>
+    <button type="button" @click="insertCommand('ping 8.8.8.8')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">ping 8.8.8.8</button>
+    <button type="button" @click="insertCommand('cat server.js')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">cat server.js</button>
+    <button type="button" @click="insertCommand('keychain')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">keychain</button>
+    <button type="button" @click="insertCommand('clear')" class="px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10 transition-colors">clear</button>
+  </div>
+</div>
+{{end}}