cli-jaw 2.17.30 → 2.17.35

package/public/manager/src/manager-p0-1-1.css

@@ -1,34 +1,56 @@
 .command-bar {
-    gap: 4px;
-    padding: 6px 10px;
+    box-sizing: border-box;
+    height: var(--workspace-topbar-height);
+    min-height: var(--workspace-topbar-height);
+    gap: 0;
+    padding: 0 10px;
 }
 .command-center.command-bar.is-electron-titlebar,
 :root[data-cli-jaw-desktop="true"] .command-center.command-bar {
-    --electron-titlebar-left-reserve: 132px;
-    padding: 6px 10px 6px var(--electron-titlebar-left-reserve);
+    --electron-titlebar-left-reserve: 90px;
+    padding: 0 10px 0 var(--electron-titlebar-left-reserve);
 }
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar {
-    -webkit-app-region: drag;
-}
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar button,
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar input,
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar select,
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar a,
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar .command-actions,
-:root[data-cli-jaw-desktop="true"] .command-center.command-bar .command-search {
+:root[data-window-fullscreen="true"] .command-center.command-bar.is-electron-titlebar,
+:root[data-cli-jaw-desktop="true"][data-window-fullscreen="true"] .command-center.command-bar {
+    --electron-titlebar-left-reserve: 12px;
+}
+:root[data-cli-jaw-desktop="true"] .command-center.command-bar { -webkit-app-region: drag; }
+:root[data-cli-jaw-desktop="true"] .command-center.command-bar :is(button, input, select, a, .command-actions, .command-search, .drawer-trigger, .theme-switch, .command-panel-controls, .search-input-wrapper, .desktop-open-button, .desktop-status-badge) {
     -webkit-app-region: no-drag;
 }
 
 .command-primary {
+    height: 100%;
     gap: 8px;
-    grid-template-columns: minmax(112px, 148px) max-content minmax(max-content, 1fr);
-}
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas: "title search actions";
+}
+.drawer-trigger { grid-area: title; }
+/* .command-icon-button is more specific than the components display:none;
+   keep the mobile drawer trigger hidden on desktop. */
+.command-primary .drawer-trigger.command-icon-button { display: none; }
+@media (max-width: 1023px) {
+    .command-primary {
+        grid-template-columns: auto auto minmax(0, 1fr) auto;
+        grid-template-areas: "drawer title search actions";
+    }
+    .command-primary .drawer-trigger.command-icon-button { display: inline-grid; grid-area: drawer; }
+}
+@media (max-width: 767px) {
+    .command-primary {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-areas: "drawer search actions";
+    }
+}
+.command-title { grid-area: title; }
+.command-search { grid-area: search; width: 100%; max-width: none; }
+.command-actions { grid-area: actions; }
 
 .command-title {
     --manager-brand-cyan: #21e6f3;
     position: relative;
-    display: flex;
-    gap: 0;
+    display: inline-flex;
+    gap: 8px;
     align-content: center;
     align-items: center;
     min-width: 0;
@@ -37,16 +59,16 @@
 
 .command-title h1,
 .command-title .manager-brand-heading {
-    max-width: 136px;
+    max-width: 148px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--manager-brand-cyan);
     font-family: "Satoshi", "Geist Mono", "IBM Plex Mono", monospace;
-    font-size: 14px;
-    font-weight: 850;
-    letter-spacing: 0;
-    line-height: 0.95;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    line-height: 1;
     text-shadow: 0 0 16px color-mix(in srgb, var(--manager-brand-cyan) 28%, transparent);
 }
 
@@ -60,6 +82,7 @@
 
 .manager-brand-wordmark {
     flex: 0 0 auto;
+    letter-spacing: 0.02em;
 }
 
 .manager-brand-dash {
@@ -89,18 +112,21 @@
     gap: 4px;
 }
 
+.command-icon-button,
 .command-panel-toggle {
-    width: 30px;
-    min-width: 30px;
-    height: 30px;
-    min-height: 30px;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    min-height: 28px;
     display: inline-grid;
     place-items: center;
+    padding: 0;
+    border-radius: var(--control-radius);
+}
+.command-panel-toggle {
     border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
-    border-radius: 8px;
     background: color-mix(in srgb, var(--accent) 7%, transparent);
     color: var(--text-primary);
-    padding: 0;
 }
 
 .command-panel-toggle:hover,
@@ -114,6 +140,21 @@
     background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised));
 }
 
+.search-input-wrapper.is-ghost input {
+    height: 28px;
+    min-height: 28px;
+    border: 1px solid transparent;
+    background: var(--sidebar-control-surface);
+    border-radius: var(--control-radius);
+    padding: 0 8px 0 32px;
+    font-size: 12px;
+}
+.command-palette-trigger {
+    height: 28px;
+    min-height: 28px;
+    border-radius: var(--control-radius);
+}
+
 .workbench-preview .workbench-header {
     padding: 4px 8px;
 }
@@ -132,11 +173,6 @@
     border-radius: 4px;
 }
 
-.manager-shell.is-sidebar-collapsed .manager-workspace,
-.manager-workspace.is-sidebar-collapsed {
-    --sidebar-width: 44px;
-}
-
 .manager-shell.is-sidebar-collapsed .sidebar-rail {
     padding: 6px 4px;
 }
@@ -165,9 +201,9 @@
 }
 
 .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .rail-button {
-    width: 30px;
-    min-width: 30px;
-    min-height: 30px;
+    width: 32px;
+    min-width: 32px;
+    min-height: 32px;
 }
 
 .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .rail-spacer {

package/public/manager/src/manager-polish.css

@@ -2,10 +2,6 @@
     --activity-dock-height: 0px;
 }
 
-.dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace {
-    --sidebar-width: 300px;
-}
-
 .manager-workspace.is-inspector-collapsed .manager-activity {
     display: none;
 }
@@ -15,8 +11,8 @@
 }
 
 .rail-button {
-    width: auto;
-    min-width: 34px;
+    width: 32px;
+    min-width: 32px;
     gap: 6px;
     color: var(--text-secondary);
     font-size: 12px;
@@ -28,14 +24,10 @@
 
 .rail-button-short {
     display: none;
-    font-family: "Geist Mono", "JetBrains Mono", monospace;
+    font-family: var(--font-mono);
     font-weight: 700;
 }
 
-.rail-button.is-active {
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
-}
-
 .manager-shell.is-sidebar-collapsed .rail-button {
     width: 38px;
     min-width: 38px;
@@ -50,33 +42,10 @@
     display: inline;
 }
 
-.command-bar {
-    gap: 4px;
-    padding: 6px 10px;
-}
-.command-bar.is-electron-titlebar {
-    padding-left: 132px;
-}
-
-.command-primary {
-    gap: 8px;
-    grid-template-columns: minmax(108px, 150px) max-content minmax(max-content, 1fr);
-}
-
 .command-title .eyebrow {
     display: none;
 }
 
-.command-title h1 {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-primary);
-    font-size: 14px;
-    font-weight: 700;
-}
-
 .command-filter-strip {
     gap: 6px;
     flex-wrap: nowrap;
@@ -159,11 +128,6 @@
     border-radius: 4px;
 }
 
-.manager-shell.is-sidebar-collapsed .manager-workspace,
-.manager-workspace.is-sidebar-collapsed {
-    --sidebar-width: 44px;
-}
-
 .manager-shell.is-sidebar-collapsed .sidebar-rail {
     padding: 6px 4px;
 }
@@ -189,7 +153,7 @@
 .manager-sidebar .instance-row {
     gap: 4px;
     margin-bottom: 4px;
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
     padding: 7px 8px;
 }
 
@@ -273,6 +237,7 @@
 .manager-sidebar .instance-actions button,
 .manager-sidebar .instance-actions .open-link {
     min-height: 24px;
+    border-radius: var(--control-radius);
     padding-inline: 5px;
     font-size: 10.5px;
 }
@@ -282,12 +247,8 @@
 }
 
 @media (max-width: 1279px) and (min-width: 1024px) {
-    .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace {
-        --sidebar-width: 280px;
-    }
-
     .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace.is-right-panel-open {
-        grid-template-columns: var(--sidebar-width, 300px) minmax(0, 1fr) var(--right-panel-width, 320px);
+        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--right-panel-width, 320px);
         grid-template-areas: "sidebar center right" "sidebar bottom right";
     }
 

package/public/manager/src/manager-shortcut-runner.ts

@@ -1,6 +1,8 @@
-import type { DashboardDetailTab, DashboardInstance, DashboardShortcutAction, DashboardSidebarMode } from './types';
+import type { DashboardDetailTab, DashboardInstance, DashboardShortcutAction, DashboardShortcutKeymap, DashboardSidebarMode } from './types';
+import { actionForShortcutEvent } from './manager-shortcuts';
 import { panelShortcutBus } from './panels/panel-shortcut-bus';
 import { getDesktop } from './panels/desktop-bridge';
+import { getInstanceJumpSelector, jumpInstanceIndexFromAction, readRenderedInstancePorts } from './components/sidebar-keyboard';
 
 /**
  * Dependencies the manager keyboard-shortcut runner needs from <App>.
@@ -22,6 +24,14 @@ export interface ManagerShortcutRunnerDeps {
 
 export function runManagerShortcut(action: DashboardShortcutAction, deps: ManagerShortcutRunnerDeps): void {
     if (panelShortcutBus.dispatch(action)) return;
+    const jumpIndex = jumpInstanceIndexFromAction(action);
+    if (jumpIndex != null) {
+        const root = document.getElementById('manager-sidebar-list');
+        if (!root) return;
+        const port = readRenderedInstancePorts(root)[jumpIndex];
+        if (port != null) getInstanceJumpSelector()?.(port);
+        return;
+    }
     if (action === 'focusInstances') {
         deps.handleSidebarModeChange('instances');
         deps.setDrawerOpen(false);
@@ -106,4 +116,30 @@ export function runManagerShortcut(action: DashboardShortcutAction, deps: Manage
         deps.handleSidebarToggle();
         return;
     }
+    if (action === 'resetSidebarWidth') {
+        document.dispatchEvent(new CustomEvent('jaw:shortcut-action', { detail: 'resetSidebarWidth' }));
+        return;
+    }
+}
+
+const CAPTURE_TOGGLE_ACTIONS = new Set<DashboardShortcutAction>([
+    'toggleLeftSidebar',
+    'toggleRightPanel',
+    'resetSidebarWidth',
+]);
+
+export function createManagerCaptureKeydownHandler(
+    getKeymap: () => DashboardShortcutKeymap,
+    onAction: (action: DashboardShortcutAction) => void,
+): (event: KeyboardEvent) => void {
+    return (event: KeyboardEvent) => {
+        if (event.defaultPrevented) return;
+        const target = event.target;
+        if (target instanceof Element && target.closest('[data-keybinding-capture]')) return;
+        const action = actionForShortcutEvent(event, getKeymap());
+        if (!action || !CAPTURE_TOGGLE_ACTIONS.has(action)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onAction(action);
+    };
 }

package/public/manager/src/manager-shortcuts.ts

@@ -27,6 +27,16 @@ export const MANAGER_SHORTCUT_ACTIONS: DashboardShortcutAction[] = [
     'terminalClear',
     'terminalNewTab',
     'toggleLeftSidebar',
+    'resetSidebarWidth',
+    'jumpInstance1',
+    'jumpInstance2',
+    'jumpInstance3',
+    'jumpInstance4',
+    'jumpInstance5',
+    'jumpInstance6',
+    'jumpInstance7',
+    'jumpInstance8',
+    'jumpInstance9',
 ];
 
 export const DEFAULT_MANAGER_SHORTCUT_KEYMAP: DashboardShortcutKeymap = {
@@ -56,6 +66,16 @@ export const DEFAULT_MANAGER_SHORTCUT_KEYMAP: DashboardShortcutKeymap = {
     terminalClear: 'Meta+K',
     terminalNewTab: 'Meta+T',
     toggleLeftSidebar: 'Meta+Shift+B',
+    resetSidebarWidth: 'Alt+Shift+B',
+    jumpInstance1: 'Alt+1',
+    jumpInstance2: 'Alt+2',
+    jumpInstance3: 'Alt+3',
+    jumpInstance4: 'Alt+4',
+    jumpInstance5: 'Alt+5',
+    jumpInstance6: 'Alt+6',
+    jumpInstance7: 'Alt+7',
+    jumpInstance8: 'Alt+8',
+    jumpInstance9: 'Alt+9',
 };
 
 const MANAGER_SHORTCUT_ALIASES: Partial<Record<DashboardShortcutAction, string[]>> = {
@@ -117,6 +137,7 @@ export function normalizeManagerShortcutKeymap(value: unknown): DashboardShortcu
 
 function resolveEventKey(event: KeyboardEvent): string {
     if (event.code === 'Backquote') return '`';
+    if (event.altKey && event.code?.startsWith('Digit')) return event.code.slice(5);
     const k = normalizeKey(event.key);
     if (k.length === 1) return k;
     // macOS Option+letter produces special chars (e.g. ∆ for Alt+J).