[companion] fix(ui): refine mobile header and full-screen sidebar chrome

CHANGELOG.md

@@ -43,6 +43,11 @@ All notable changes to **omp-web** (`@kahme247/ompweb`) are documented in this f
 - omp-web no longer exits when a browser disconnects in the middle of a POST request, for example when a tab closes while a request is still in flight. A Next.js bug (vercel/next.js#99278) could turn that disconnect into an uncaught `Error: aborted`, which the crash handler treated as fatal. These disconnects are now logged to `diagnostics.log` as `client-abort` and the server keeps running; every other uncaught error still exits.
 - When `PI_CODING_AGENT_DIR` points away from `~/.omp/agent`, the crash journal (`diagnostics.log`) is written to `<agent dir>/omp-web/` instead of `~/.omp/omp-web/`, so isolated test and development servers no longer write to the real journal.
 - Slide the file panel in from the right edge on phones, with the same timing as the left sidebar, instead of popping it open full-screen. The first open slides too, without a **Loading…** placeholder or a dimmed backdrop flashing over the chat. The panel still covers the whole screen once open, and it opens and closes instantly when reduced motion is enabled.
+- On mobile, move the session information control (context ring with stats, tokens, cost, and **Compact context**) to the top-right of the top bar; desktop keeps it in the composer toolbar. Preserve the ring usage coloring, its popover, and the `/session` shortcut. Opening the panel moves focus into it; Escape dismisses it before run shortcuts and returns focus to its opener when focus is still within the panel.
+- Make the mobile workspace sidebar full-screen without a dimmed backdrop, with a visible top-left close button. Place the file-panel opener inside the upper bar and add a separate top-right close button inside the file panel, with keyboard focus returning to its opener. Keep the session-title pill centered between the header controls.
+- Continue the mobile file-panel tab-row border underneath its close-button cell, so the divider spans the full width.
+- On mobile, swipe anywhere on the app surface: swipe right to open the left sidebar or close the right one, and swipe left for the opposite action. No device-edge start or perfectly straight movement is required. Recognition follows overall dominant-axis displacement and tolerates curved thumb movement, a brief corrective start, and shorter deliberate drags. Taps, predominantly vertical movement, multi-touch, text editing or selection, native horizontal scrolling, and open popups retain their normal behavior; persistent drawer lists, including Git changes, remain swipeable. Embedded previews retain native input and full width; swipe on their surrounding toolbar to close the sidebar.
+- Let the centered session-title pill fit its content and grow for longer names up to the available header space, instead of stretching short names into a fixed-size box.
 - Keep **Collapse input** available after expanding a long user message with **Show full input**, so the message can be collapsed again.
 - Agent host tools (`open_url`, `notify`, `open_file`) no longer fail when you switch to another session mid-run. Any open omp-web tab now answers them, and a URL or file from a session you are not viewing opens only after you confirm it in a dialog.
 - Ask before opening links from the agent. Turn on **Open agent links without asking** in Settings → Interface & Behavior to open links from the session you are viewing right away; links from other sessions always ask.

app/globals.css

@@ -3332,15 +3332,24 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
 .shell-toolbar-btn:active:not(:disabled) {
   transform: scale(0.96);
 }
-.shell-panel-toggle {
-  border-radius: 0 !important;
-  background: var(--bg-panel);
-  color: var(--text-muted);
+.right-panel-toolbar {
+  --right-panel-close-width: 36px;
+  position: relative;
+  padding-right: var(--right-panel-close-width);
 }
-.shell-panel-toggle:hover:not(:disabled),
-.shell-panel-toggle[aria-pressed="true"] {
-  background: var(--bg-hover);
-  color: var(--text);
+html:root .shell-toolbar-btn.right-panel-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--right-panel-close-width) !important;
+  height: var(--shell-topbar-height) !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  border-radius: 0;
+}
+html[data-touch-targets="accessible"] .right-panel-toolbar {
+  --right-panel-close-width: 44px;
 }
 /* Subtle group separator between toolbar control clusters */
 .shell-toolbar-divider {
@@ -3359,6 +3368,13 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
     width: 40px;
     height: 40px;
   }
+  .right-panel-toolbar {
+    --right-panel-close-width: 44px;
+  }
+  html:root .shell-toolbar-btn.right-panel-close-button {
+    padding-top: env(safe-area-inset-top, 0px) !important;
+    border-bottom: 1px solid var(--border);
+  }
   .shell-toolbar-divider {
     margin: 0 4px;
   }
@@ -3380,7 +3396,17 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   }
 }
 
+:root {
+  --shell-topbar-height: 36px;
+}
+@media (min-width: 641px) {
+  html[data-touch-targets="accessible"] {
+    --shell-topbar-height: 44px;
+  }
+}
 .shell-topbar {
+  /* Fallback until AppShell measures the real clusters. */
+  --topbar-side: 260px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -3399,10 +3425,11 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
 }
 .shell-topbar-center {
   position: absolute;
-  top: 4.5px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: clamp(0px, calc(100% - 520px), 400px);
+  top: 0;
+  bottom: 0;
+  /* Equal insets center the content-sized pill between the control clusters. */
+  left: var(--topbar-side);
+  right: var(--topbar-side);
   pointer-events: none;
 }
 .shell-topbar-center > .shell-topbar-breadcrumb {
@@ -3416,42 +3443,23 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   }
 }
 
-@media (min-width: 641px) and (max-width: 960px) {
-  .shell-topbar-center {
-    display: flex !important;
-    width: min(260px, 28vw);
+@media (max-width: 640px) {
+  :root {
+    --shell-topbar-height: calc(44px + env(safe-area-inset-top, 0px));
   }
-  .shell-topbar-center > .shell-topbar-breadcrumb {
-    max-width: 100%;
+  .shell-topbar {
+    --topbar-side: max(96px, calc(92px + env(safe-area-inset-right, 0px)));
   }
-}
-
-@media (max-width: 640px) {
   .shell-topbar-center {
-    display: flex !important;
-    position: static;
-    inset: auto;
-    width: auto;
-    max-width: none;
-    min-width: 0;
-    flex: 1 1 auto;
-    justify-content: flex-start;
-    overflow: hidden;
-    transform: none;
-  }
-  .shell-topbar-center .shell-topbar-breadcrumb {
-    width: auto;
-    max-width: min(320px, 100%);
+    top: env(safe-area-inset-top, 0px);
   }
   .shell-topbar-center .shell-topbar-breadcrumb {
     visibility: visible;
   }
-
 }
 @media (max-width: 640px) {
   .shell-topbar {
     gap: 0 4px !important;
-    padding-right: 48px !important;
   }
   .shell-topbar-overflow-content {
     overflow-x: auto;
@@ -3470,20 +3478,13 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   .shell-topbar .shell-toolbar-divider {
     margin: 0;
   }
-  .shell-topbar [data-topbar-right-group] {
-    width: 0 !important;
-    min-width: 0 !important;
-    padding: 0 !important;
-  }
-  .shell-topbar-center {
-    margin: 0 4px;
-    justify-content: center;
+  .shell-topbar-metrics {
+    display: none;
   }
   .shell-topbar-project-context {
     display: none !important;
   }
   .shell-topbar-center .shell-topbar-breadcrumb {
-    max-width: 100%;
     height: 32px;
     padding-inline: 4px;
     border-color: transparent;
@@ -3544,7 +3545,7 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  max-width: min(440px, 32vw);
+  max-width: 100%;
   height: 26px;
   padding: 0 8px;
   border-radius: var(--radius-control);
@@ -4064,9 +4065,6 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
 
 /* Desktop sidebar: animate width */
 @media (min-width: 641px) {
-  .sidebar-overlay-backdrop {
-    display: none !important;
-  }
   .sidebar-container {
     position: relative;
     overflow: hidden;
@@ -4126,7 +4124,7 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   }
   .right-panel-container.right-panel-open {
     position: fixed;
-    top: 36px;
+    top: var(--shell-topbar-height);
     right: 0;
     bottom: 0;
     width: min(360px, 55vw);
@@ -4157,20 +4155,16 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   }
   .sidebar-container {
     position: fixed !important;
-    top: env(safe-area-inset-top, 0px);
-    left: 0;
-    bottom: 0;
-    width: 280px;
-    max-width: 85vw;
-    transition: transform var(--dur-slow) var(--ease-out-warm), box-shadow var(--dur-slow) var(--ease-out-warm);
+    inset: 0;
+    /* Full-screen drawer: safe-area padding (the list adds its own bottom). */
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
+    transition: transform var(--dur-slow) var(--ease-out-warm);
   }
   .sidebar-container.sidebar-open {
     transform: translateX(0);
-    box-shadow: var(--shadow-modal);
   }
   .sidebar-container.sidebar-closed {
     transform: translateX(-100%);
-    box-shadow: none;
   }
 
   /* Full-screen overlay that slides in from the right edge. Closed panels are
@@ -4186,7 +4180,7 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
   }
   .right-panel-toolbar {
     padding-top: env(safe-area-inset-top, 0px);
-    min-height: calc(44px + env(safe-area-inset-top, 0px)) !important;
+    min-height: var(--shell-topbar-height) !important;
   }
   .right-panel-container.right-panel-open {
     transform: none;
@@ -4325,7 +4319,8 @@ html[data-touch-targets="accessible"] .message-overflow-toggle {
 html[data-touch-targets="accessible"] :is(
   .shell-toolbar-btn,
   .right-panel-toolbar [role="toolbar"] > button,
-  .composer-primary-action
+  .composer-primary-action,
+  .composer-context-control
 ) {
   min-width: 44px;
 }
@@ -4339,6 +4334,7 @@ html[data-touch-targets="accessible"] :is(
   .composer-toolbar > button,
   .composer-toolbar > div > button,
   .composer-primary-action,
+  .composer-context-control,
   .shell-toolbar-btn,
   .sidebar-icon-button,
   .sidebar-project-action,