cli-jaw 2.17.30 → 2.17.35

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

@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { FormEvent, MouseEvent } from 'react';
 import type { DashboardInstance, DashboardLifecycleAction, DashboardProfile } from '../types';
+import { composeInstanceRowTitle, formatWorkingDurationLabel, resolveInstanceRowStatus } from './instance-row-status';
 
 type InstanceRowProps = {
     instance: DashboardInstance;
@@ -28,6 +29,7 @@ type InstanceRowProps = {
     onMarkActivitySeen: (port: number) => void;
     onInstanceLabelSave: (port: number, label: string | null) => Promise<void>;
     onLifecycle: (action: DashboardLifecycleAction, instance: DashboardInstance) => void;
+    jumpHint?: string | null;
 };
 
 const TRANSITION_LABELS: Record<DashboardLifecycleAction, string> = {
@@ -63,6 +65,21 @@ const ChevronIcon = ({ open }: { open: boolean }) => (
     </svg>
 );
 
+function WorkingDuration(props: { startedAtMs: number | null }) {
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (props.startedAtMs == null) return undefined;
+        const id = window.setInterval(() => setTick(tick => tick + 1), 1000);
+        return () => window.clearInterval(id);
+    }, [props.startedAtMs]);
+    if (props.startedAtMs == null) return null;
+    return (
+        <span className="instance-row-working-duration">
+            {formatWorkingDurationLabel(Date.now() - props.startedAtMs)}
+        </span>
+    );
+}
+
 export function InstanceRow(props: InstanceRowProps) {
     const lifecycle = props.instance.lifecycle;
     const reason = lifecycle?.reason || props.instance.healthReason || 'ok';
@@ -76,7 +93,24 @@ export function InstanceRow(props: InstanceRowProps) {
     }
 
     const transitionLabel = props.transitioning ? TRANSITION_LABELS[props.transitioning] : null;
-    const dotClass = `${statusClass(props.instance.status)}${transitionLabel ? ' is-transitioning' : ''}${props.agentBusy ? ' is-busy' : ''}`;
+    const rowStatus = resolveInstanceRowStatus(props.instance, {
+        busy: Boolean(props.agentBusy),
+        transitioning: props.transitioning || null,
+    });
+    const startedAtRef = useRef<number | null>(null);
+    if (rowStatus === 'working') {
+        if (startedAtRef.current == null) startedAtRef.current = Date.now();
+    } else {
+        startedAtRef.current = null;
+    }
+    const statusLabel = rowStatus === 'transitioning' && transitionLabel
+        ? transitionLabel
+        : rowStatus === 'working' ? 'Working'
+            : rowStatus === 'offline' ? 'Offline'
+                : rowStatus === 'attention' ? 'Attention'
+                    : 'Online';
+    const hideStatusLine = props.density === 'compact' || props.density === 'rail';
+    const dotClass = `${statusClass(props.instance.status)}${transitionLabel ? ' is-transitioning' : ''}${props.agentBusy ? ' is-busy' : ''} is-${rowStatus}`;
     const primaryLabel = props.instance.label || props.profile?.label || props.label;
     async function submitLabel(event: FormEvent<HTMLFormElement>): Promise<void> {
         event.preventDefault();
@@ -94,10 +128,15 @@ export function InstanceRow(props: InstanceRowProps) {
     }
 
     return (
-        <article className={`instance-row density-${props.density || 'comfortable'} priority-${props.priority || 'normal'} ${props.selected ? 'is-selected' : ''}${transitionLabel ? ' is-transitioning-row' : ''}`}>
+        <article
+            className={`instance-row density-${props.density || 'comfortable'} priority-${props.priority || 'normal'} ${props.selected ? 'is-selected' : ''}${transitionLabel ? ' is-transitioning-row' : ''} is-${rowStatus}`}
+            title={composeInstanceRowTitle(props.instance)}
+            aria-current={props.selected ? 'true' : undefined}
+        >
             <button
                 className="instance-row-select"
                 type="button"
+                data-instance-port={props.instance.port}
                 aria-pressed={props.selected}
                 onClick={() => {
                     props.onSelect(props.instance);
@@ -106,6 +145,14 @@ export function InstanceRow(props: InstanceRowProps) {
                 <div className="instance-row-main">
                     <span className={dotClass} aria-label={props.instance.status} />
                     <div className="instance-row-title">
+                        {!hideStatusLine ? (
+                            <div className="instance-row-status-line" data-status={rowStatus}>
+                                <span className={`instance-row-status-pill is-${rowStatus} health-${props.instance.status}`}>
+                                    {statusLabel}
+                                </span>
+                                {rowStatus === 'working' ? <WorkingDuration startedAtMs={startedAtRef.current} /> : null}
+                            </div>
+                        ) : null}
                         <div className="instance-row-title-line">
                             <strong>{props.instance.favorite ? `Pinned ${primaryLabel}` : primaryLabel}</strong>
                             {props.activityUnreadCount ? (
@@ -219,6 +266,7 @@ export function InstanceRow(props: InstanceRowProps) {
                     </svg>
                 </button>
             ) : null}
+            {props.jumpHint ? <span className="instance-jump-hint" aria-hidden="true">{props.jumpHint}</span> : null}
             {props.showSelectedActions !== false && (
             <div className="instance-actions">
                 <button

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

@@ -18,11 +18,11 @@ function ChevronIcon({ direction }: { direction: 'left' | 'right' }) {
         <svg
             className="rail-collapse-chevron"
             viewBox="0 0 16 20"
-            width="14"
-            height="14"
+            width="18"
+            height="18"
             fill="none"
             stroke="currentColor"
-            strokeWidth="1.6"
+            strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
             aria-hidden="true"
@@ -35,7 +35,7 @@ function ChevronIcon({ direction }: { direction: 'left' | 'right' }) {
 
 function MonitorIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <rect x="3" y="4" width="14" height="10" rx="1.5" />
             <path d="M8 17h4M10 14v3" />
         </svg>
@@ -44,7 +44,7 @@ function MonitorIcon() {
 
 function NoteIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <path d="M6 3h6l3 3v11H6z" />
             <path d="M12 3v4h3M8 10h5M8 13h5" />
         </svg>
@@ -53,7 +53,7 @@ function NoteIcon() {
 
 function BoardIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <rect x="3" y="4" width="14" height="12" rx="1.5" />
             <path d="M7 4v12M13 4v12" />
         </svg>
@@ -62,7 +62,7 @@ function BoardIcon() {
 
 function ScheduleIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <rect x="3" y="5" width="14" height="12" rx="1.5" />
             <path d="M3 9h14M7 3v4M13 3v4" />
         </svg>
@@ -71,7 +71,7 @@ function ScheduleIcon() {
 
 function ReminderIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <path d="M5 4h10v13H5z" />
             <path d="M8 2v4M12 2v4M8 10h4M8 13h3" />
         </svg>
@@ -80,7 +80,7 @@ function ReminderIcon() {
 
 function SettingsIcon() {
     return (
-        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
             <circle cx="12" cy="12" r="3" />
         </svg>
@@ -89,7 +89,7 @@ function SettingsIcon() {
 
 function HelpIcon() {
     return (
-        <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">
+        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
             <circle cx="10" cy="10" r="7" />
             <path d="M7.6 7.6a2.4 2.4 0 0 1 4.8 0c0 1.4-1.6 1.7-2.2 2.5-.3.4-.3.8-.3 1.2" />
             <circle cx="10" cy="14.2" r="0.6" fill="currentColor" stroke="none" />

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

@@ -0,0 +1,22 @@
+import { PanelResizer } from '../panels/PanelResizer';
+
+type SidebarResizeHandleProps = {
+    width: number;
+    onDelta: (delta: number) => void;
+    onEnd: () => void;
+    onDoubleClick: () => void;
+};
+
+export function SidebarResizeHandle(props: SidebarResizeHandleProps) {
+    return (
+        <PanelResizer
+            direction="horizontal"
+            onDelta={props.onDelta}
+            onEnd={props.onEnd}
+            onDoubleClick={props.onDoubleClick}
+            className="sidebar-resize-handle"
+            ariaLabel="Resize sidebar"
+            ariaValueNow={props.width}
+        />
+    );
+}

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

@@ -1,4 +1,6 @@
 import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
+import { SidebarResizeHandle } from './SidebarResizeHandle';
+import { SIDEBAR_COLLAPSED_WIDTH } from '../hooks/useSidebarWidth';
 
 type WorkspaceLayoutProps = {
     navigator: ReactNode;
@@ -19,11 +21,15 @@ type WorkspaceLayoutProps = {
     bottomPanelContent?: ReactNode;
     bottomPanelHeight?: number;
     bottomPanelOpen?: boolean;
+    sidebarWidth: number;
+    onSidebarWidthDelta: (delta: number) => void;
+    onSidebarWidthEnd: () => void;
+    onSidebarWidthReset: () => void;
 };
 
 type WorkspaceLayoutStyle = CSSProperties & {
     '--activity-dock-height': string;
-    '--sidebar-width'?: string | undefined;
+    '--sidebar-width': string;
     '--right-panel-width'?: string | undefined;
     '--bottom-panel-height'?: string | undefined;
 };
@@ -48,13 +54,10 @@ function useViewportWidth(): number {
     return viewportWidth;
 }
 
-function clampRightPanelRenderWidth(width: number | undefined, sidebarCollapsed: boolean, viewportWidth: number): number {
+function clampRightPanelRenderWidth(width: number | undefined, sidebarWidth: number, viewportWidth: number): number {
     const desired = typeof width === 'number' && Number.isFinite(width)
         ? Math.round(width)
         : 480;
-    const sidebarWidth = sidebarCollapsed
-        ? 56
-        : viewportWidth >= 1440 ? 360 : 300;
     const maxByViewport = Math.max(
         RIGHT_PANEL_RENDER_MIN_WIDTH,
         viewportWidth - sidebarWidth - WORKSPACE_CENTER_MIN_WIDTH,
@@ -67,13 +70,14 @@ function clampRightPanelRenderWidth(width: number | undefined, sidebarCollapsed:
 
 export function WorkspaceLayout(props: WorkspaceLayoutProps) {
     const viewportWidth = useViewportWidth();
+    const sidebarRenderWidth = props.sidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : props.sidebarWidth;
     const rightPanelWidth = props.rightPanelOpen
-        ? clampRightPanelRenderWidth(props.rightPanelWidth, props.sidebarCollapsed, viewportWidth)
+        ? clampRightPanelRenderWidth(props.rightPanelWidth, sidebarRenderWidth, viewportWidth)
         : 0;
 
     const style: WorkspaceLayoutStyle = {
         '--activity-dock-height': `${props.inspectorHeight}px`,
-        '--sidebar-width': props.sidebarCollapsed ? '56px' : undefined,
+        '--sidebar-width': props.sidebarCollapsed ? `${SIDEBAR_COLLAPSED_WIDTH}px` : `${props.sidebarWidth}px`,
         '--right-panel-width': props.rightPanelOpen
             ? `${rightPanelWidth}px`
             : props.sidePanel ? undefined : '0px',
@@ -97,7 +101,17 @@ export function WorkspaceLayout(props: WorkspaceLayoutProps) {
     return (
         <div className={cls} style={style}>
             {props.drawerOpen && <div className="drawer-backdrop" onClick={props.onCloseDrawer} />}
-            <aside className="manager-sidebar" aria-label={props.navigatorLabel ?? 'Jaw instances'}>{props.navigator}</aside>
+            <aside className="manager-sidebar" aria-label={props.navigatorLabel ?? 'Jaw instances'}>
+                {props.navigator}
+            </aside>
+            {!props.sidebarCollapsed && viewportWidth >= 1024 && (
+                <SidebarResizeHandle
+                    width={props.sidebarWidth}
+                    onDelta={props.onSidebarWidthDelta}
+                    onEnd={props.onSidebarWidthEnd}
+                    onDoubleClick={props.onSidebarWidthReset}
+                />
+            )}
             <section className="manager-detail" aria-label="Manager workbench">{props.workbench}</section>
             <section className="manager-activity" aria-label="Manager inspector">{props.inspector}</section>
             {props.sidePanel && <aside className="manager-ceo-panel" aria-label="Jaw CEO console">{props.sidePanel}</aside>}

package/public/manager/src/components/instance-row-status.ts

@@ -0,0 +1,48 @@
+import type { DashboardInstance, DashboardLifecycleAction } from '../types';
+
+export type InstanceRowStatus =
+    | 'working'
+    | 'online'
+    | 'offline'
+    | 'attention'
+    | 'transitioning';
+
+export function resolveInstanceRowStatus(
+    instance: Pick<DashboardInstance, 'status'>,
+    flags: { busy?: boolean; transitioning?: DashboardLifecycleAction | null } = {},
+): InstanceRowStatus {
+    if (flags.transitioning) return 'transitioning';
+    if (flags.busy) return 'working';
+    if (instance.status === 'offline') return 'offline';
+    if (instance.status === 'online') return 'online';
+    return 'attention';
+}
+
+export function formatWorkingDurationLabel(elapsedMs: number): string {
+    const seconds = Number.isFinite(elapsedMs) ? Math.max(0, Math.floor(elapsedMs / 1000)) : 0;
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m`;
+    return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+
+export function composeInstanceRowTitle(instance: Pick<DashboardInstance, 'port' | 'homeDisplay' | 'currentCli' | 'currentModel' | 'version'>): string {
+    return [
+        `:${instance.port}`,
+        instance.homeDisplay || 'home n/a',
+        instance.currentCli || 'cli n/a',
+        instance.currentModel || 'model n/a',
+        `v${instance.version || 'n/a'}`,
+    ].join(' · ');
+}
+
+export function comparePinnedThenLabel<T extends Pick<DashboardInstance, 'favorite' | 'label' | 'port'>>(
+    a: T,
+    b: T,
+    labelOf: (instance: T) => string,
+): number {
+    const fav = Number(Boolean(b.favorite)) - Number(Boolean(a.favorite));
+    if (fav !== 0) return fav;
+    const byLabel = labelOf(a).localeCompare(labelOf(b), undefined, { sensitivity: 'base' });
+    return byLabel !== 0 ? byLabel : a.port - b.port;
+}

package/public/manager/src/components/sidebar-keyboard.ts

@@ -0,0 +1,129 @@
+export const INSTANCE_JUMP_HINT_SHOW_DELAY_MS = 200;
+export const SETTLED_TAIL_INITIAL_COUNT = 10;
+export const SETTLED_TAIL_PAGE_COUNT = 25;
+
+export type TraverseDir = 'previous' | 'next';
+export type InstanceJumpSelector = (port: number) => void;
+
+export function resolveAdjacentPort(list: readonly number[], current: number | null, dir: TraverseDir): number | null {
+    if (list.length === 0) return null;
+    if (current == null) return dir === 'previous' ? (list[list.length - 1] ?? null) : (list[0] ?? null);
+    const idx = list.indexOf(current);
+    if (idx === -1) return null;
+    if (dir === 'previous') return idx > 0 ? (list[idx - 1] ?? null) : null;
+    return idx < list.length - 1 ? (list[idx + 1] ?? null) : null;
+}
+
+export function jumpInstanceIndexFromAction(action: string): number | null {
+    const match = /^jumpInstance([1-9])$/.exec(action);
+    return match ? Number(match[1]!) - 1 : null;
+}
+
+export function isSettledStatus(status: string): boolean {
+    return status === 'offline' || status === 'unknown' || status === 'timeout';
+}
+
+export function pageSettledPorts(settledPorts: readonly number[], visibleCount: number, selectedPort: number | null): number[] {
+    const visible = settledPorts.slice(0, Math.max(0, visibleCount));
+    if (selectedPort != null && settledPorts.includes(selectedPort) && !visible.includes(selectedPort)) {
+        return [...visible, selectedPort];
+    }
+    return visible;
+}
+
+export function createJumpHintVisibilityController(input: {
+    delayMs: number;
+    onVisibilityChange: (visible: boolean) => void;
+    setTimeoutFn?: typeof setTimeout;
+    clearTimeoutFn?: typeof clearTimeout;
+}): { sync: (shouldShow: boolean) => void; dispose: () => void } {
+    const setTimeoutFn = input.setTimeoutFn ?? setTimeout;
+    const clearTimeoutFn = input.clearTimeoutFn ?? clearTimeout;
+    let isVisible = false;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    const clearPending = (): void => {
+        if (timeoutId == null) return;
+        clearTimeoutFn(timeoutId);
+        timeoutId = null;
+    };
+    return {
+        sync(shouldShow: boolean): void {
+            if (!shouldShow) {
+                clearPending();
+                if (isVisible) {
+                    isVisible = false;
+                    input.onVisibilityChange(false);
+                }
+                return;
+            }
+            if (isVisible || timeoutId != null) return;
+            timeoutId = setTimeoutFn(() => {
+                timeoutId = null;
+                isVisible = true;
+                input.onVisibilityChange(true);
+            }, input.delayMs);
+        },
+        dispose(): void { clearPending(); },
+    };
+}
+
+let jumpHintsVisible = false;
+const jumpHintListeners = new Set<() => void>();
+
+export function subscribeJumpHints(cb: () => void): () => void {
+    jumpHintListeners.add(cb);
+    return () => { jumpHintListeners.delete(cb); };
+}
+
+export function getJumpHintsVisible(): boolean {
+    return jumpHintsVisible;
+}
+
+export function setJumpHintsVisible(next: boolean): void {
+    if (jumpHintsVisible === next) return;
+    jumpHintsVisible = next;
+    jumpHintListeners.forEach(listener => listener());
+}
+
+export function shouldArmJumpHint(event: Pick<KeyboardEvent, 'altKey' | 'metaKey' | 'ctrlKey' | 'shiftKey' | 'key'>): boolean {
+    return event.altKey && !event.metaKey && !event.ctrlKey && !event.shiftKey;
+}
+
+export function readRenderedInstancePorts(root: ParentNode): number[] {
+    return Array.from(root.querySelectorAll<HTMLElement>('[data-instance-port]'))
+        .map(el => Number(el.dataset['instancePort']))
+        .filter(port => Number.isInteger(port));
+}
+
+export function handleInstanceListKeyDown(event: KeyboardEvent, root: ParentNode, onSelectPort: (port: number) => void): void {
+    if (event.isComposing || event.keyCode === 229) return;
+    const buttons = Array.from(root.querySelectorAll<HTMLElement>('[data-instance-port]'));
+    if (buttons.length === 0) return;
+    const ports = buttons.map(el => Number(el.dataset['instancePort']));
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const currentEl = active?.closest('[data-instance-port]');
+    const currentPort = currentEl instanceof HTMLElement ? Number(currentEl.dataset['instancePort']) : null;
+    let next: number | null = null;
+    if (event.key === 'ArrowDown') next = resolveAdjacentPort(ports, currentPort, 'next');
+    else if (event.key === 'ArrowUp') next = resolveAdjacentPort(ports, currentPort, 'previous');
+    else if (event.key === 'Home') next = ports[0] ?? null;
+    else if (event.key === 'End') next = ports[ports.length - 1] ?? null;
+    else if (event.key === 'Enter' && currentPort != null) {
+        event.preventDefault();
+        onSelectPort(currentPort);
+        return;
+    }
+    if (next == null) return;
+    event.preventDefault();
+    buttons.find(el => Number(el.dataset['instancePort']) === next)?.focus();
+}
+
+let instanceJumpSelector: InstanceJumpSelector | null = null;
+
+export function registerInstanceJumpSelector(fn: InstanceJumpSelector | null): void {
+    instanceJumpSelector = fn;
+}
+
+export function getInstanceJumpSelector(): InstanceJumpSelector | null {
+    return instanceJumpSelector;
+}

package/public/manager/src/dashboard-settings/DashboardSettingsWorkspace.tsx

@@ -100,6 +100,16 @@ const COPY = {
                 scope: '단축키',
                 description: '현재 필터 목록에서 다음 인스턴스를 선택합니다.',
             },
+            shortcutResetSidebarWidth: {
+                label: '사이드바 폭 리셋',
+                scope: '단축키',
+                description: '기본 300으로 되돌리고 \'jaw.sidebarWidth\' 키를 지운다.',
+            },
+            shortcutJumpInstance: {
+                label: '인스턴스 점프',
+                scope: '단축키',
+                description: '렌더된 사이드바 행 1–9로 이동합니다. Meta+1–4는 탭 전환에 남아 있어 Alt를 씁니다.',
+            },
         },
         support: {
             ariaLabel: '작업 제목 출처 준비 상태',
@@ -176,6 +186,16 @@ const COPY = {
                 scope: 'Shortcut',
                 description: 'Select the next instance in the current filtered list.',
             },
+            shortcutResetSidebarWidth: {
+                label: 'Reset sidebar width',
+                scope: 'Shortcut',
+                description: 'Restore the default 300px width and delete the \'jaw.sidebarWidth\' key.',
+            },
+            shortcutJumpInstance: {
+                label: 'Jump to instance',
+                scope: 'Shortcut',
+                description: 'Jump to rendered sidebar rows 1–9. Meta+1–4 stay on tab switching, so these use Alt.',
+            },
         },
         support: {
             ariaLabel: 'Activity title source readiness',
@@ -252,6 +272,16 @@ const COPY = {
                 scope: '快捷键',
                 description: '选择当前筛选列表中的下一个实例。',
             },
+            shortcutResetSidebarWidth: {
+                label: '重置侧边栏宽度',
+                scope: '快捷键',
+                description: '恢复默认 300px 宽度并删除 \'jaw.sidebarWidth\' 键。',
+            },
+            shortcutJumpInstance: {
+                label: '跳转到实例',
+                scope: '快捷键',
+                description: '跳转到已渲染的侧边栏第 1–9 行。Meta+1–4 仍用于切换标签，因此这里使用 Alt。',
+            },
         },
         support: {
             ariaLabel: '活动标题来源就绪状态',
@@ -328,6 +358,16 @@ const COPY = {
                 scope: 'ショートカット',
                 description: '現在のフィルタ一覧で次のインスタンスを選択します。',
             },
+            shortcutResetSidebarWidth: {
+                label: 'サイドバー幅をリセット',
+                scope: 'ショートカット',
+                description: '既定の 300px に戻し、\'jaw.sidebarWidth\' キーを削除します。',
+            },
+            shortcutJumpInstance: {
+                label: 'インスタンスへジャンプ',
+                scope: 'ショートカット',
+                description: '描画済みサイドバー行 1–9 へ移動します。Meta+1–4 はタブ切替のままなので Alt を使います。',
+            },
         },
         support: {
             ariaLabel: 'アクティビティタイトル取得元の準備状態',
@@ -445,6 +485,8 @@ function shortcutCopyKey(action: DashboardShortcutAction): keyof typeof COPY.ko.
     if (action === 'focusActiveSession') return 'shortcutFocusActiveSession';
     if (action === 'focusNotes') return 'shortcutFocusNotes';
     if (action === 'previousInstance') return 'shortcutPreviousInstance';
+    if (action === 'resetSidebarWidth') return 'shortcutResetSidebarWidth';
+    if (action.startsWith('jumpInstance')) return 'shortcutJumpInstance';
     return 'shortcutNextInstance';
 }
 

package/public/manager/src/help/helpContent.tsx

@@ -148,6 +148,7 @@ const ShortcutsHelp = (
             <li><kbd>{formatShortcut(DEFAULT_MANAGER_SHORTCUT_KEYMAP.focusActiveSession)}</kbd>는 선택된 인스턴스의 Preview 탭으로 이동해요.</li>
             <li><kbd>{formatShortcut(DEFAULT_MANAGER_SHORTCUT_KEYMAP.focusNotes)}</kbd>는 Notes workspace로 이동해요.</li>
             <li><kbd>{formatShortcut(DEFAULT_MANAGER_SHORTCUT_KEYMAP.previousInstance)}</kbd> / <kbd>{formatShortcut(DEFAULT_MANAGER_SHORTCUT_KEYMAP.nextInstance)}</kbd>는 현재 필터된 인스턴스 목록에서 이전/다음 행을 선택해요.</li>
+            <li><kbd>Alt+1</kbd> … <kbd>Alt+9</kbd>는 렌더된 사이드바 행으로 점프하고, Alt를 200ms 누르면 행 오른쪽에 점프 힌트가 떠요.</li>
             <li><kbd>⌘/Ctrl + S</kbd>는 Notes와 Settings처럼 저장 가능한 화면에서 현재 편집 내용을 저장해요.</li>
             <li><kbd>⌘/Ctrl + E</kbd>는 Notes 편집 모드를 순환해요.</li>
             <li>Manager 단축키는 Dashboard settings에서 켜고 끄거나 keymap을 바꿀 수 있어요.</li>

package/public/manager/src/hooks/useSidebarGroupCollapse.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react';
+
+export const SIDEBAR_GROUP_COLLAPSED_KEY = 'jaw.sidebarGroupCollapsed';
+
+function readMap(): Record<string, boolean> {
+    try {
+        if (typeof localStorage === 'undefined') return {};
+        const raw = localStorage.getItem(SIDEBAR_GROUP_COLLAPSED_KEY);
+        if (!raw) return {};
+        const parsed: unknown = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+        const next: Record<string, boolean> = {};
+        for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+            if (typeof value === 'boolean') next[key] = value;
+        }
+        return next;
+    } catch {
+        return {};
+    }
+}
+
+function writeMap(value: Record<string, boolean>): void {
+    try {
+        if (typeof localStorage === 'undefined') return;
+        localStorage.setItem(SIDEBAR_GROUP_COLLAPSED_KEY, JSON.stringify(value));
+    } catch {
+        // private mode
+    }
+}
+
+export function useSidebarGroupCollapse(): {
+    isCollapsed: (groupKey: string) => boolean;
+    toggle: (groupKey: string) => void;
+    toggleGroup: (groupKey: string) => void;
+} {
+    const [collapsedByKey, setCollapsedByKey] = useState<Record<string, boolean>>(readMap);
+    const isCollapsed = useCallback((groupKey: string) => collapsedByKey[groupKey] === true, [collapsedByKey]);
+    const toggle = useCallback((groupKey: string) => {
+        setCollapsedByKey(prev => {
+            const next = { ...prev, [groupKey]: !prev[groupKey] };
+            writeMap(next);
+            return next;
+        });
+    }, []);
+    return { isCollapsed, toggle, toggleGroup: toggle };
+}