feat(v0.2): multi-tab terminal + titles + Claude Code shortcut bar

Frontend feature (backend unchanged — manager was already multi-session):
- Multi-tab: each tab = independent WS + Terminal + session (terminal-session.ts,
  tabs.ts); tab bar with +, ×, middle-click close; persisted to localStorage
  (migrates v0.1 single-session key)
- Tab titles: auto from xterm onTitleChange (OSC 0/2), double-click to rename
  inline (manual wins over auto); ellipsis + tooltip
- Shortcut key bar now shown on ALL devices (clickable buttons trigger shortcuts),
  reordered for Claude Code (Esc prominent, ⇧Tab, ↑↓, ⏎, ^C, Tab, ←→, /);
  responsive sizing via @media (pointer:coarse) for touch
- Verified in browser: rename, two independent sessions, keybar on desktop +
  narrow viewport. 191 tests green; both typechecks + esbuild build pass.

public/style.css

@@ -1,6 +1,20 @@
 /* Web Terminal Styling */
 
-/* Full-screen terminal layout */
+:root {
+  /* Key bar is shown on ALL devices (clickable shortcut buttons). Touch
+     devices get a taller bar with bigger tap targets. */
+  --tabbar-h: 36px;
+  --keybar-h: 42px;
+}
+
+/* Touch devices: bigger tap targets for tabs and the key bar. */
+@media (pointer: coarse) {
+  :root {
+    --tabbar-h: 44px;
+    --keybar-h: 58px;
+  }
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -11,24 +25,128 @@ html, body {
   overflow: hidden;
 }
 
-#term {
-  position: absolute;
+/* ── Tab bar (top) ───────────────────────────────────────────────── */
+#tabbar {
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  bottom: 60px;
-  width: 100%;
+  height: var(--tabbar-h);
+  background-color: #222;
+  border-bottom: 1px solid #3a3a3a;
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  overflow-y: hidden;
+  z-index: 1001;
+  scrollbar-width: thin;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  padding: 0 4px 0 12px;
+  color: #aaa;
+  background-color: #2a2a2a;
+  border-right: 1px solid #1a1a1a;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 13px;
+  user-select: none;
+  max-width: 200px;
+}
+
+.tab.active {
+  background-color: #1a1a1a;
+  color: #fff;
+  box-shadow: inset 0 -2px 0 #4a9eff; /* active underline accent */
+}
+
+.tab-label {
+  padding-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Inline rename input (double-click a tab) */
+.tab-rename {
+  width: 110px;
+  margin: 0 4px;
+  padding: 2px 4px;
+  font: inherit;
+  font-size: 13px;
+  color: #fff;
+  background: #111;
+  border: 1px solid #4a9eff;
+  border-radius: 3px;
+  outline: none;
+}
+
+.tab-close {
+  background: none;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 3px;
+  flex: none;
+}
+
+.tab-close:hover {
+  background-color: #444;
+  color: #fff;
+}
+
+/* Desktop (mouse): reveal × on hover/active to reduce clutter.
+   Touch devices keep × always visible (no hover). */
+@media (pointer: fine) {
+  .tab:not(.active):not(:hover) .tab-close {
+    opacity: 0;
+  }
+}
+
+.tab-add {
+  background: none;
+  border: none;
+  color: #aaa;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0 14px;
+  user-select: none;
+  flex: none;
+}
+
+.tab-add:hover {
+  color: #fff;
+}
+
+/* ── Terminal area (holds one .term-pane per tab) ────────────────── */
+#term {
+  position: absolute;
+  top: var(--tabbar-h);
+  left: 0;
+  right: 0;
+  bottom: var(--keybar-h);
   background-color: #1a1a1a;
   overflow: hidden;
 }
 
-/* Mobile touch keybar — fixed at bottom, horizontal layout */
+.term-pane {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+/* ── Shortcut key bar (bottom) — shown on ALL devices ────────────── */
 #keybar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  height: 60px;
+  height: var(--keybar-h);
   background-color: #2a2a2a;
   border-top: 1px solid #3a3a3a;
   display: flex;
@@ -37,21 +155,24 @@ html, body {
   overflow-y: hidden;
   z-index: 1000;
   gap: 0;
+  scrollbar-width: thin;
 }
 
-/* Keybar buttons */
 #keybar button {
-  flex: 1;
-  min-width: 50px;
-  height: 60px;
-  padding: 0;
+  flex: 1 0 auto;
+  min-width: 48px;
+  height: var(--keybar-h);
+  padding: 0 8px;
   border: 1px solid #444;
+  border-top: none;
+  border-bottom: none;
   background-color: #333;
   color: #ddd;
-  font-size: 12px;
+  font-family: inherit;
+  font-size: 14px;
   cursor: pointer;
   border-radius: 0;
-  transition: background-color 0.2s;
+  transition: background-color 0.12s;
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
@@ -61,13 +182,14 @@ html, body {
   background-color: #555;
 }
 
-/* Hide keybar on desktop (viewport width > 768px) */
-@media (min-width: 769px) {
-  #keybar {
-    display: none;
-  }
-
-  #term {
-    bottom: 0;
-  }
+/* Esc is the most-used (interrupt) — make it prominent. */
+#keybar button.keybar-btn-primary {
+  background-color: #5a3a12;
+  color: #ffcf8f;
+  font-weight: 600;
+  min-width: 56px;
+}
+
+#keybar button.keybar-btn-primary:active {
+  background-color: #7a4f18;
 }