From 45da07ed20d0b1ae7b4319e023b189418c16bb06 Mon Sep 17 00:00:00 2001
From: "Vyctor H. Brzezowski" <krzyszchweski@gmail.com>
Date: Mon, 10 Aug 2026 01:18:35 -0300
Subject: [PATCH] improve(ui): align session context menu rows, icons, and
 shortcut hints (#121383)

Menu rows stacked Web Awesome's shadow icon margin on top of our flex gap
(~17px gutter), let the icon slot baseline-align ~2px above the label centre,
drew shortcut hints at 550 weight beside 400-weight labels, and left the submenu
chevron 4px inside the hint column at a heavier size.

Rows now use a single icon column, optically centred icons, quiet mono keycap
hints on one rail, a chevron sharing that rail, and a divider inset to the same
columns. The control UI mock harness also advertises the session mutation
methods so the menu renders enabled instead of fully disabled.
---
 scripts/control-ui-mock-dev.ts | 12 ++++++++++++
 ui/src/styles/layout.css       | 33 +++++++++++++++++++++++++++++----
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/scripts/control-ui-mock-dev.ts b/scripts/control-ui-mock-dev.ts
index ce193a1accd5..989e451d0e6f 100644
--- a/scripts/control-ui-mock-dev.ts
+++ b/scripts/control-ui-mock-dev.ts
@@ -1454,6 +1454,10 @@ async function createChatPickerScenario(
     assistantAgentId: "main",
     assistantName: "Molty",
     defaultAgentId: "main",
+    // Advertised Gateway methods gate session actions (see
+    // ui/src/lib/session-method-access.ts). Omitting the mutation methods left
+    // every session context-menu row disabled, so the harness could not show
+    // the menu operators actually see.
     featureMethods: [
       "chat.metadata",
       "chat.startup",
@@ -1461,8 +1465,16 @@ async function createChatPickerScenario(
       "openclaw.changes.list",
       "openclaw.chat",
       "openclaw.chat.history",
+      "sessions.delete",
       "sessions.diff",
       "sessions.files.set",
+      "sessions.fork",
+      "sessions.groups.delete",
+      "sessions.groups.list",
+      "sessions.groups.put",
+      "sessions.groups.rename",
+      "sessions.patch",
+      "sessions.patchMany",
       "sessions.catalog.list",
       "sessions.catalog.read",
       "system.info",
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index 021eb2fc7068..6d326a75dbc4 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -2637,6 +2637,28 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
   text-align: left;
 }
 
+/* Web Awesome's shadow row adds `margin-inline-end: 0.75em !important` to the
+   slotted icon, which the light DOM cannot outrank. Dropping the gap leaves
+   that margin as the icon column instead of stacking into a ~17px gutter. */
+wa-dropdown-item.session-menu__item {
+  gap: 0;
+}
+
+/* The icon slot wrapper is a block-level flex item, so its inline child sits on
+   the row's text baseline ~2px above the label's optical centre. */
+wa-dropdown-item.session-menu__item::part(icon) {
+  display: flex;
+  align-items: center;
+}
+
+/* Web Awesome insets the submenu chevron 1em at its own font size, landing it
+   inside the shortcut column and heavier than the hints. Share their rail. */
+wa-dropdown-item.session-menu__item::part(submenu-icon) {
+  inset-inline-end: 8px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
 .session-menu__item:hover:not(:disabled),
 .session-menu__item:focus-visible,
 .sidebar-session-sort-menu__item:hover,
@@ -2700,12 +2722,15 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
   white-space: nowrap;
 }
 
+/* Keycap hint, not content: the app's quiet mono shortcut idiom (see
+   .chat-question-panel__option kbd), fixed-width so letters and digits share
+   one rail beside the labels. */
 .session-menu__shortcut {
   flex: 0 0 auto;
+  min-width: 12px;
   color: var(--muted);
-  font-size: 11px;
-  font-weight: 550;
-  letter-spacing: 0.04em;
+  font: 11px/1 var(--mono);
+  text-align: center;
 }
 
 .session-menu__info {
@@ -2715,7 +2740,7 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
 }
 
 .session-menu__separator {
-  margin: 6px 4px;
+  margin: 4px 8px;
   border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
 }