cli-jaw 2.17.30 → 2.17.35

package/public/manager/src/browser-panel/browser-panel.css

@@ -16,10 +16,10 @@
 .browser-tab-strip {
     display: flex;
     align-items: center;
-    gap: 3px;
+    gap: 4px;
     min-width: 0;
     min-height: 32px;
-    padding: 4px 6px 0;
+    padding: 5px 6px 0;
     overflow-x: auto;
     border-bottom: 1px solid var(--border-subtle);
     background: var(--bg-panel);
@@ -45,14 +45,34 @@
 .browser-tab {
     all: unset;
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     flex: 1 1 auto;
     min-width: 0;
     padding: 4px 4px 4px 7px;
     color: var(--text-dim);
     font-size: 11px;
 }
+.browser-tab-favicon {
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    object-fit: contain;
+    background: var(--bg-raised);
+}
+.browser-tab-favicon.is-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--text-primary);
+    background: var(--sidebar-row-hover);
+}
 .browser-tab-item.is-active .browser-tab {
-    color: var(--text-base);
+    color: var(--text-primary);
 }
 .browser-tab-title {
     display: block;
@@ -84,8 +104,8 @@
 .browser-tab-add:focus-visible,
 .browser-collapse-button:hover,
 .browser-collapse-button:focus-visible {
-    color: var(--text-base);
-    background: var(--bg-hover);
+    color: var(--text-primary);
+    background: var(--sidebar-row-hover);
 }
 .browser-tab-add {
     margin-left: 1px;
@@ -120,7 +140,7 @@
     font-size: 13px;
     color: var(--text-dim);
 }
-.browser-nav-btn:hover { background: var(--bg-hover); color: var(--text-base); }
+.browser-nav-btn:hover { background: var(--sidebar-row-hover); color: var(--text-primary); }
 .browser-nav-btn:disabled {
     cursor: default;
     opacity: 0.38;
@@ -136,23 +156,23 @@
     border: 1px solid var(--border-subtle);
     border-radius: 4px;
     background: var(--canvas-deep);
-    color: var(--text-base);
+    color: var(--text-primary);
     font-size: 11px;
-    outline: none;
 }
-.browser-url-input:focus { border-color: var(--accent-primary); }
+.browser-url-input:focus { border-color: var(--accent-primary); outline: none; }
+.browser-url-input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
 .browser-go-btn {
     all: unset;
     cursor: pointer;
     padding: 3px 8px;
     border-radius: 4px;
     border: 1px solid var(--border-subtle);
-    color: var(--text-base);
+    color: var(--text-primary);
     background: var(--bg-raised);
     font-size: 11px;
 }
 .browser-go-btn:hover {
-    background: var(--bg-hover);
+    background: var(--sidebar-row-hover);
     border-color: var(--border-strong);
 }
 .browser-toolbar [data-tooltip] {
@@ -170,7 +190,7 @@
     border: 1px solid var(--border-strong);
     border-radius: 5px;
     background: var(--bg-raised);
-    color: var(--text-base);
+    color: var(--text-primary);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
     font-size: 11px;
     line-height: 1.2;
@@ -196,6 +216,90 @@
     color: var(--status-error);
     background: color-mix(in srgb, var(--status-error) 10%, transparent);
 }
+.browser-loading-track {
+    flex-shrink: 0;
+    height: 2px;
+    overflow: hidden;
+    background: transparent;
+}
+.browser-loading-bar {
+    height: 2px;
+    width: 100%;
+    transform-origin: left center;
+    background: var(--accent-primary);
+    box-shadow: 0 0 6px 1px var(--accent-primary);
+    opacity: 0;
+    transform: scaleX(1);
+    transition: transform 150ms ease-out, opacity 150ms ease-out 220ms;
+}
+.browser-loading-bar[data-loading="true"] {
+    opacity: 1;
+    animation: browser-loading-progress 5.3s cubic-bezier(0.1, 0.5, 0.2, 1) forwards;
+}
+@keyframes browser-loading-progress {
+    from { transform: scaleX(0.04); }
+    to { transform: scaleX(0.9); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .browser-loading-bar,
+    .browser-loading-bar[data-loading="true"] {
+        transition: none;
+        animation: none;
+    }
+    .browser-loading-bar[data-loading="true"] {
+        transform: scaleX(0.9);
+        opacity: 1;
+    }
+}
+.browser-history-empty {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    overflow: auto;
+    padding: 16px;
+    background: var(--canvas-deep);
+}
+.browser-history-item {
+    all: unset;
+    box-sizing: border-box;
+    display: grid;
+    gap: 2px;
+    width: 100%;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 12px;
+    cursor: pointer;
+}
+.browser-history-item:hover,
+.browser-history-item:focus-visible {
+    background: var(--sidebar-row-hover);
+}
+.browser-history-item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
+.browser-history-title {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.browser-history-url {
+    color: var(--text-dim);
+    font-size: 11px;
+    font-family: var(--font-mono);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.browser-history-empty::before {
+    content: 'Recent';
+    display: block;
+    margin: 0 10px 8px;
+    color: var(--text-dim);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
 .browser-webview-stack {
     display: flex;
     flex: 1 1 0;
@@ -243,7 +347,7 @@
 }
 
 .browser-external-title {
-    color: var(--text-base);
+    color: var(--text-primary);
     font-size: 13px;
     font-weight: 600;
 }
@@ -262,14 +366,14 @@
     padding: 5px 9px;
     border: 1px solid var(--border-subtle);
     border-radius: 4px;
-    color: var(--text-base);
+    color: var(--text-primary);
     background: var(--bg-raised);
     font-size: 11px;
 }
 
 .browser-external-open:hover,
 .browser-external-open:focus-visible {
-    background: var(--bg-hover);
+    background: var(--sidebar-row-hover);
     border-color: var(--border-strong);
 }
 
@@ -297,8 +401,8 @@
 }
 .browser-action-btn:hover,
 .browser-action-btn:focus-visible {
-    background: var(--bg-hover);
-    color: var(--text-base);
+    background: var(--sidebar-row-hover);
+    color: var(--text-primary);
 }
 .browser-action-btn:focus-visible {
     outline: 2px solid var(--focus-ring);
@@ -306,7 +410,7 @@
 }
 .browser-action-btn.is-active {
     background: var(--bg-raised);
-    color: var(--text-base);
+    color: var(--text-primary);
 }
 .browser-action-btn.is-shared {
     color: var(--accent, #7aa2ff);
@@ -339,13 +443,26 @@
     width: 100%;
     padding: 7px 10px;
     border-radius: 6px;
-    color: var(--text-base);
+    color: var(--text-primary);
     font-size: 12px;
     cursor: pointer;
 }
 .browser-more-item:hover,
 .browser-more-item:focus-visible {
-    background: var(--bg-hover);
+    background: var(--sidebar-row-hover);
+}
+.browser-more-zoom {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+}
+.browser-more-zoom-label {
+    min-width: 3.5ch;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    font-size: 12px;
+    color: var(--text-dim);
 }
 
 /* Transparent click-catcher for element inspect picking */
@@ -441,7 +558,7 @@
     border: 1px solid var(--border-subtle);
     border-radius: 8px;
     background: var(--bg-panel);
-    color: var(--text-base);
+    color: var(--text-primary);
     font-size: 12px;
 }
 .browser-comment-actions {
@@ -457,8 +574,8 @@
     padding: 5px 10px;
     border-radius: 6px;
     font-size: 12px;
-    color: var(--text-base);
-    background: var(--bg-hover);
+    color: var(--text-primary);
+    background: var(--sidebar-row-hover);
     cursor: pointer;
 }
 .browser-comment-save:disabled {
@@ -522,7 +639,7 @@
     font-size: 11px;
 }
 .browser-picked-selector {
-    font-family: var(--mono, ui-monospace, monospace);
+    font-family: var(--font-mono);
     color: #6fa8dc;
     overflow: hidden;
     text-overflow: ellipsis;

package/public/manager/src/components/CommandBar.tsx

@@ -19,8 +19,10 @@ export function CommandBar(props: CommandBarProps) {
     return (
         <CommandCenter
             mobileMenuButton={(
-                <button className="drawer-trigger" type="button" onClick={props.onOpenDrawer} aria-label="Open sidebar">
-                    ☰
+                <button className="drawer-trigger command-icon-button" type="button" onClick={props.onOpenDrawer} aria-label="Open sidebar">
+                    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true" focusable="false">
+                        <path d="M4 6h12M4 10h12M4 14h12" />
+                    </svg>
                 </button>
             )}
             title={(
@@ -30,7 +32,7 @@ export function CommandBar(props: CommandBarProps) {
                 </h1>
             )}
             search={(
-                <div className="search-input-wrapper">
+                <div className="search-input-wrapper is-ghost">
                     <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     <input
                         value={props.query}
@@ -54,8 +56,18 @@ export function CommandBar(props: CommandBarProps) {
                         <span aria-hidden="true">⌘K</span>
                     </button>
                     <ThemeSwitch theme={props.theme} onChange={props.onThemeChange} />
-                    <button type="button" onClick={props.onRefresh} disabled={props.loading}>
-                        {props.loading ? 'Scanning' : 'Refresh'}
+                    <button
+                        type="button"
+                        className="command-icon-button"
+                        onClick={props.onRefresh}
+                        disabled={props.loading}
+                        aria-label={props.loading ? 'Scanning' : 'Refresh'}
+                        title={props.loading ? 'Scanning' : 'Refresh'}
+                    >
+                        <svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+                            <path d="M16 10a6 6 0 1 1-2-4.5" />
+                            <path d="M16 4v4h-4" />
+                        </svg>
                     </button>
                 </div>
             )}

package/public/manager/src/components/InstanceGroups.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react';
 import { InstanceRow } from './InstanceRow';
 import type {
     DashboardInstance,
@@ -6,6 +6,16 @@ import type {
     DashboardLifecycleAction,
     DashboardProfile,
 } from '../types';
+import { comparePinnedThenLabel } from './instance-row-status';
+import { useSidebarGroupCollapse } from '../hooks/useSidebarGroupCollapse';
+import {
+    SETTLED_TAIL_INITIAL_COUNT,
+    SETTLED_TAIL_PAGE_COUNT,
+    getJumpHintsVisible,
+    isSettledStatus,
+    pageSettledPorts,
+    subscribeJumpHints,
+} from './sidebar-keyboard';
 
 type InstanceGroupsProps = {
     instances: DashboardInstance[];
@@ -21,6 +31,7 @@ type InstanceGroupsProps = {
     showInlineLabelEditor?: boolean;
     showSidebarRuntimeLine?: boolean;
     showSelectedRowActions?: boolean;
+    density?: 'compact' | 'comfortable' | 'rail';
     /** Session disclosure for the Active row (devlog 260806 D2). */
     activeSessionCount?: number;
     activeSessionsOpen?: boolean;
@@ -35,6 +46,18 @@ type InstanceGroupsProps = {
     onLifecycle: (action: DashboardLifecycleAction, instance: DashboardInstance) => void;
 };
 
+type InstanceGroupSectionProps = {
+    group: DashboardInstanceGroup;
+    props: InstanceGroupsProps;
+    profileMap: Map<string, DashboardProfile>;
+    collapsed: boolean;
+    onToggle: () => void;
+    jumpStartIndex: number;
+    showJumpHints: boolean;
+    settledVisibleCount: number;
+    onShowMoreSettled: () => void;
+};
+
 function withoutPorts(instances: DashboardInstance[], used: Set<number>): DashboardInstance[] {
     return instances.filter(instance => !used.has(instance.port));
 }
@@ -57,8 +80,14 @@ function groupInstances(instances: DashboardInstance[], selectedPort: number | n
 
     const remaining = withoutPorts(instances, used);
     const running = remaining.filter(instance => instance.status === 'online');
-    const attention = remaining.filter(instance => ['timeout', 'error', 'unknown'].includes(instance.status));
-    const offline = remaining.filter(instance => instance.status === 'offline');
+    const attention = remaining.filter(instance => instance.status === 'error');
+    const settled = remaining.filter(instance => isSettledStatus(instance.status));
+    const labelOf = (instance: Pick<DashboardInstance, 'label' | 'port'>) => instance.label || String(instance.port);
+    favorites.sort((a, b) => comparePinnedThenLabel(a, b, labelOf));
+    running.sort((a, b) => comparePinnedThenLabel(a, b, labelOf));
+    attention.sort((a, b) => comparePinnedThenLabel(a, b, labelOf));
+    settled.sort((a, b) => comparePinnedThenLabel(a, b, labelOf));
+    for (const group of userGroups.values()) group.sort((a, b) => comparePinnedThenLabel(a, b, labelOf));
 
     const groups: DashboardInstanceGroup[] = [
         { id: 'active', label: 'Active', instances: selected },
@@ -70,7 +99,7 @@ function groupInstances(instances: DashboardInstance[], selectedPort: number | n
         })),
         { id: 'running', label: 'Running', instances: running },
         { id: 'attention', label: 'Attention', instances: attention },
-        { id: 'offline', label: 'Offline', instances: offline },
+        { id: 'settled', label: 'Settled', instances: settled },
     ];
 
     return groups.filter(group => group.instances.length > 0);
@@ -81,6 +110,7 @@ function renderInstanceRow(
     instance: DashboardInstance,
     profile?: DashboardProfile,
     priority: 'active' | 'normal' = 'normal',
+    jumpHint?: string | null,
 ) {
     return (
         <InstanceRow
@@ -97,6 +127,7 @@ function renderInstanceRow(
             {...(props.showInlineLabelEditor !== undefined ? { showInlineLabelEditor: props.showInlineLabelEditor } : {})}
             {...(props.showSidebarRuntimeLine !== undefined ? { showRuntimeLine: props.showSidebarRuntimeLine } : {})}
             {...(props.showSelectedRowActions !== undefined ? { showSelectedActions: props.showSelectedRowActions } : {})}
+            {...(props.density !== undefined ? { density: props.density } : {})}
             {...(priority === 'active' && props.activeSessionCount !== undefined ? { sessionCount: props.activeSessionCount } : {})}
             {...(priority === 'active' && props.activeSessionsOpen !== undefined ? { sessionsOpen: props.activeSessionsOpen } : {})}
             {...(priority === 'active' && props.onToggleActiveSessions ? { onToggleSessions: props.onToggleActiveSessions } : {})}
@@ -108,51 +139,140 @@ function renderInstanceRow(
             onMarkActivitySeen={props.onMarkActivitySeen}
             onInstanceLabelSave={props.onInstanceLabelSave}
             onLifecycle={props.onLifecycle}
+            jumpHint={jumpHint ?? null}
         />
     );
 }
 
-function renderRows(
-    props: InstanceGroupsProps,
-    instances: DashboardInstance[],
-    profileMap: Map<string, DashboardProfile> = new Map(),
-) {
-    return groupInstances(instances, props.selectedPort).map(group => (
+function visibleGroupInstances(
+    group: DashboardInstanceGroup,
+    selectedPort: number | null,
+    collapsed: boolean,
+    settledVisibleCount: number,
+): DashboardInstance[] {
+    const selected = group.instances.find(instance => instance.port === selectedPort);
+    const pagedSettled = group.id === 'settled'
+        ? pageSettledPorts(
+            group.instances.map(instance => instance.port),
+            settledVisibleCount,
+            selectedPort,
+        )
+        : [];
+    const settledByPort = new Map(group.instances.map(instance => [instance.port, instance]));
+    const expandedInstances = group.id === 'settled'
+        ? pagedSettled.map(port => settledByPort.get(port)).filter((instance): instance is DashboardInstance => instance != null)
+        : group.instances;
+    return group.id === 'active' || !collapsed
+        ? expandedInstances
+        : selected ? [selected] : [];
+}
+
+function InstanceGroupSection(section: InstanceGroupSectionProps) {
+    const { group, props, profileMap, collapsed, onToggle, jumpStartIndex, showJumpHints, settledVisibleCount, onShowMoreSettled } = section;
+    const settledExpanded = group.id !== 'settled' || !collapsed;
+    const visible = visibleGroupInstances(group, props.selectedPort, collapsed, settledVisibleCount);
+    const hiddenSettled = group.id === 'settled' && settledExpanded
+        ? Math.max(0, group.instances.length - settledVisibleCount)
+        : 0;
+    const header = group.id === 'active' ? (
+        <div className="instance-group-header">
+            <span>{group.label}</span>
+            <strong>{group.instances.length}</strong>
+        </div>
+    ) : (
+        <button
+            type="button"
+            className="instance-group-header instance-group-toggle"
+            aria-expanded={!collapsed}
+            aria-controls={`instance-group-body-${group.id}`}
+            onClick={onToggle}
+        >
+            <span>
+                <svg className="instance-group-chevron" viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3.5 6l4.5 4.5L12.5 6" /></svg>
+                {' '}{group.label}
+            </span>
+            <strong>{group.instances.length}</strong>
+        </button>
+    );
+
+    return (
         <section className="instance-group" key={group.id} aria-label={`${group.label} instances`}>
-            <div className="instance-group-header">
-                <span>{group.label}</span>
-                <strong>{group.instances.length}</strong>
+            {header}
+            <div id={`instance-group-body-${group.id}`} hidden={collapsed && visible.length === 0}>
+                {visible.map((instance, rowIndex) => {
+                    const jumpIndex = jumpStartIndex + rowIndex;
+                    const jumpHint = showJumpHints && jumpIndex < 9 ? String(jumpIndex + 1) : null;
+                    return renderInstanceRow(
+                        props,
+                        instance,
+                        instance.profileId ? profileMap.get(instance.profileId) : undefined,
+                        group.id === 'active' ? 'active' : 'normal',
+                        jumpHint,
+                    );
+                })}
+                {group.id === 'active' && visible[0] ? props.renderActiveSessionList?.(visible[0].port) : null}
+                {group.id === 'settled' && settledExpanded && hiddenSettled > 0 ? (
+                    <button
+                        type="button"
+                        className="instance-settled-more"
+                        onClick={onShowMoreSettled}
+                    >
+                        Show {Math.min(hiddenSettled, SETTLED_TAIL_PAGE_COUNT)} more
+                    </button>
+                ) : null}
             </div>
-            {group.instances.map(instance => renderInstanceRow(
-                props,
-                instance,
-                instance.profileId ? profileMap.get(instance.profileId) : undefined,
-                group.id === 'active' ? 'active' : 'normal',
-            ))}
-            {group.id === 'active' && group.instances[0] ? props.renderActiveSessionList?.(group.instances[0].port) : null}
         </section>
-    ));
+    );
 }
 
 export function InstanceGroups(props: InstanceGroupsProps) {
     const groups = groupInstances(props.instances, props.selectedPort);
     const profileMap = new Map((props.profiles || []).map(profile => [profile.profileId, profile]));
+    const { isCollapsed, toggle: toggleGroup } = useSidebarGroupCollapse();
+    const showJumpHints = useSyncExternalStore(subscribeJumpHints, getJumpHintsVisible);
+    const [settledVisibleCount, setSettledVisibleCount] = useState(SETTLED_TAIL_INITIAL_COUNT);
+
+    useEffect(() => {
+        setSettledVisibleCount(SETTLED_TAIL_INITIAL_COUNT);
+    }, [props.instances]);
 
     if (groups.length === 0 && profileMap.size === 0) {
         return <section className="state">No matching instances found.</section>;
     }
 
+    let jumpCursor = 0;
+    const sections = groups.map(group => {
+        const collapsed = group.id === 'active' ? false : isCollapsed(group.id);
+        const visibleCount = visibleGroupInstances(group, props.selectedPort, collapsed, settledVisibleCount).length;
+        const jumpStartIndex = jumpCursor;
+        jumpCursor += visibleCount;
+        return (
+            <InstanceGroupSection
+                key={group.id}
+                group={group}
+                props={props}
+                profileMap={profileMap}
+                collapsed={collapsed}
+                onToggle={() => toggleGroup(group.id)}
+                jumpStartIndex={jumpStartIndex}
+                showJumpHints={showJumpHints}
+                settledVisibleCount={settledVisibleCount}
+                onShowMoreSettled={() => setSettledVisibleCount(count => count + SETTLED_TAIL_PAGE_COUNT)}
+            />
+        );
+    });
+
     if (profileMap.size > 0) {
         return (
             <div className="instance-groups profile-instance-groups is-profile-merged">
-                {renderRows(props, props.instances, profileMap)}
+                {sections}
             </div>
         );
     }
 
     return (
         <div className="instance-groups">
-            {renderRows(props, props.instances)}
+            {sections}
         </div>
     );
 }

package/public/manager/src/components/InstanceNavigator.tsx

@@ -1,14 +1,45 @@
-import type { ReactNode } from 'react';
+import { useEffect, type ReactNode } from 'react';
 import type { DashboardInstance } from '../types';
+import {
+    INSTANCE_JUMP_HINT_SHOW_DELAY_MS,
+    createJumpHintVisibilityController,
+    handleInstanceListKeyDown,
+    setJumpHintsVisible,
+    shouldArmJumpHint,
+} from './sidebar-keyboard';
 
 type InstanceNavigatorProps = {
     active: DashboardInstance | null;
     hiddenCount: number;
     collapsed: boolean;
     children: ReactNode;
+    query: string;
+    onQueryChange: (value: string) => void;
+    onSelectPort: (port: number) => void;
 };
 
 export function InstanceNavigator(props: InstanceNavigatorProps) {
+    useEffect(() => {
+        const controller = createJumpHintVisibilityController({
+            delayMs: INSTANCE_JUMP_HINT_SHOW_DELAY_MS,
+            onVisibilityChange: setJumpHintsVisible,
+        });
+        const onKeyDown = (event: KeyboardEvent) => {
+            controller.sync(shouldArmJumpHint(event));
+        };
+        const onKeyUp = (event: KeyboardEvent) => {
+            controller.sync(shouldArmJumpHint(event));
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            controller.dispose();
+            setJumpHintsVisible(false);
+        };
+    }, []);
+
     if (props.collapsed) {
         return <div className="instance-navigator is-collapsed">{props.children}</div>;
     }
@@ -21,8 +52,30 @@ export function InstanceNavigator(props: InstanceNavigatorProps) {
                     <strong>{props.active ? `:${props.active.port}` : 'No active target'}</strong>
                 </div>
                 <span>{props.hiddenCount} hidden</span>
+                <label className="instance-navigator-search">
+                    <span className="visually-hidden">Search instances</span>
+                    <input
+                        id="manager-sidebar-search"
+                        value={props.query}
+                        placeholder="Search instances"
+                        aria-label="Search instances"
+                        onChange={event => props.onQueryChange(event.currentTarget.value)}
+                        onKeyDown={event => {
+                            if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                props.onQueryChange('');
+                            }
+                        }}
+                    />
+                </label>
             </header>
-            <div className="instance-navigator-scroll">{props.children}</div>
+            <div
+                className="instance-navigator-scroll"
+                onKeyDown={event => handleInstanceListKeyDown(event.nativeEvent, event.currentTarget, props.onSelectPort)}
+            >
+                {props.children}
+            </div>
         </section>
     );
 }