cli-jaw 2.2.4 → 2.2.5

package/public/manager/src/panels/panels.css

@@ -136,6 +136,8 @@ body.is-resizing-vertical { cursor: row-resize !important; user-select: none; }
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    /* anchor for absolutely-positioned inactive keep-alive tab bodies */
+    position: relative;
 }
 .right-panel-body.is-split-panel {
     display: grid;
@@ -149,6 +151,20 @@ body.is-resizing-vertical { cursor: row-resize !important; user-select: none; }
     display: flex;
     flex-direction: column;
 }
+/*
+ * Inactive tab bodies stay mounted (keep-alive) so each module tab keeps its
+ * component state (webviews included). They must never take layout space or
+ * paint: absolute + visibility instead of display:none, which Electron
+ * webviews tolerate poorly. Exactly one body is visible at a time.
+ */
+.right-sub-panel[hidden],
+.right-sub-panel.is-inactive-tab {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: -1;
+}
 .right-panel-body.is-single-panel > .right-sub-panel {
     flex: 1 1 0;
 }
@@ -228,6 +244,404 @@ body.is-resizing-vertical { cursor: row-resize !important; user-select: none; }
     flex: 1 1 0;
 }
 
+/* ==========================================================================
+   Right sidebar launcher row + open tab strip (020B / 021 mockup)
+   ========================================================================== */
+
+/* Launcher button row: current-style icon controls, CEO hidden */
+.right-launcher-row {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    min-height: 38px;
+    padding: 5px 6px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+}
+.right-launcher-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+.right-launcher-button {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--text-dim);
+    cursor: pointer;
+}
+.right-launcher-button:hover,
+.right-launcher-button:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.right-launcher-button.is-active {
+    background: var(--bg-raised);
+    color: var(--text-base);
+    border-color: var(--border-subtle);
+}
+.right-launcher-button:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -1px;
+}
+
+.right-sidebar-tab-strip {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 38px;
+    padding: 5px 6px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+}
+
+/* Tab list container */
+.right-sidebar-tabs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* Individual tab: equal-width track, icon never shrinks, label truncates */
+.right-sidebar-tab {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 22px 0 10px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--text-dim);
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: 180px;
+    position: relative;
+    user-select: none;
+}
+.right-sidebar-tab > svg {
+    flex: 0 0 auto;
+}
+.right-sidebar-tab:hover,
+.right-sidebar-tab:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.right-sidebar-tab.is-active {
+    background: var(--bg-raised);
+    color: var(--text-base);
+    border-color: var(--border-subtle);
+}
+.right-sidebar-tab:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -1px;
+}
+
+/* Tab label truncation */
+.right-sidebar-tab-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+/*
+ * Close affordance: present in the DOM, visually quiet at rest, revealed on
+ * tab hover / focus-within. Absolutely positioned over the reserved right
+ * padding so its appearance never changes the tab width.
+ */
+.right-sidebar-tab-close {
+    all: unset;
+    box-sizing: border-box;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    color: var(--text-dim);
+    opacity: 0;
+    cursor: pointer;
+}
+.right-sidebar-tab:hover .right-sidebar-tab-close,
+.right-sidebar-tab:focus-within .right-sidebar-tab-close,
+.right-sidebar-tab-close:focus-visible {
+    opacity: 1;
+}
+.right-sidebar-tab-close:hover,
+.right-sidebar-tab-close:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.right-sidebar-tab-close:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -1px;
+}
+
+/* Density states: content adapts, row height and '+' position stay stable */
+.right-sidebar-tab-strip[data-density="compact"] .right-sidebar-tab {
+    padding: 0 18px 0 8px;
+    gap: 5px;
+}
+.right-sidebar-tab-strip[data-density="mini"] .right-sidebar-tab {
+    padding: 0 16px 0 6px;
+    gap: 4px;
+    font-size: 11px;
+}
+
+/* Fixed-width '+' attached to the tab row; never squeezed by tab labels */
+.right-sidebar-plus-wrap {
+    position: relative;
+    flex: 0 0 auto;
+}
+.right-sidebar-plus {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 6px;
+    color: var(--text-dim);
+    cursor: pointer;
+}
+.right-sidebar-plus:hover,
+.right-sidebar-plus:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.right-sidebar-plus:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: -1px;
+}
+
+/* Plus menu dropdown (tab strip and empty-state recovery affordance) */
+.right-sidebar-plus-menu {
+    position: absolute;
+    top: 36px;
+    right: 0;
+    min-width: 160px;
+    padding: 6px;
+    border: 1px solid var(--border-strong);
+    border-radius: 8px;
+    background: var(--bg-raised);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+    z-index: 120;
+}
+.right-sidebar-plus-menu-item {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: 32px;
+    padding: 0 10px;
+    border-radius: 6px;
+    color: var(--text-base);
+    font-size: 13px;
+    cursor: pointer;
+}
+.right-sidebar-plus-menu-item:hover,
+.right-sidebar-plus-menu-item:focus-visible {
+    background: var(--bg-hover);
+}
+
+/* Empty state */
+.right-sidebar-empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.right-sidebar-empty-plus-wrap {
+    position: relative;
+}
+.right-sidebar-empty-plus {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    color: var(--text-dim);
+    background: var(--bg-raised);
+    cursor: pointer;
+}
+.right-sidebar-empty-plus:hover,
+.right-sidebar-empty-plus:focus-visible {
+    color: var(--text-base);
+    border-color: var(--border-strong);
+    background: var(--bg-hover);
+}
+
+/* ==========================================================================
+   Files tab one-line toolbar (phase 013)
+   ========================================================================== */
+
+.right-files-chrome {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 6px 8px 5px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+}
+
+/*
+ * Single horizontal line:
+ *   breadcrumb (leading, flexible) ....... [ Open file ] [ folder icon ]
+ * The breadcrumb owns all the flexible width and truncates; the two trailing
+ * controls keep a fixed size and never wrap or get pushed out.
+ */
+.right-files-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+
+.right-files-load-folder {
+    all: unset;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    padding: 0 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    color: var(--text-dim);
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+.right-files-load-folder:hover:not(:disabled),
+.right-files-load-folder:focus-visible {
+    background: var(--bg-hover);
+    color: var(--text-base);
+}
+.right-files-load-folder:disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.right-files-open-file {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    color: var(--text-base);
+    background: var(--bg-raised);
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.right-files-open-file:hover,
+.right-files-open-file:focus-visible {
+    background: var(--bg-hover);
+    border-color: var(--border-strong);
+}
+
+/* Folder toggle: far-right icon button */
+.right-files-folder-toggle {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    color: var(--text-dim);
+    background: var(--bg-raised);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.right-files-folder-toggle:hover,
+.right-files-folder-toggle:focus-visible {
+    color: var(--text-base);
+    border-color: var(--border-strong);
+    background: var(--bg-hover);
+}
+.right-files-folder-toggle[aria-pressed="true"] {
+    color: var(--accent-primary);
+    border-color: color-mix(in srgb, var(--accent-primary) 52%, var(--border-subtle));
+    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-raised));
+}
+
+/* Breadcrumb: leading flexible segment of the one-line toolbar */
+.right-breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 0 2px;
+    color: var(--text-dim);
+    font-size: 12px;
+    overflow: hidden;
+}
+.right-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
+}
+.right-breadcrumb-sep {
+    color: var(--text-dim);
+    flex-shrink: 0;
+    font-size: 11px;
+    opacity: 0.6;
+}
+.right-breadcrumb-segment {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    /* Middle segments give up width first. */
+    flex-shrink: 1;
+}
+.right-breadcrumb-segment.is-final {
+    color: var(--text-base);
+    font-weight: 600;
+    /* Final file name keeps a readable floor and truncates only when narrow. */
+    min-width: 56px;
+    flex-shrink: 0;
+}
+
 .bottom-panel {
     grid-area: bottom;
     min-width: 0;
@@ -312,3 +726,68 @@ body.is-resizing-vertical { cursor: row-resize !important; user-select: none; }
 .bottom-panel.has-content-owned-chrome .bottom-panel-content {
     overflow: hidden;
 }
+
+/* --- File/Folder Split Panel (014) --- */
+
+.file-folder-split-panel {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.file-folder-split-file-pane {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.file-folder-split-folder-pane {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.file-folder-split-resizer.panel-resizer-horizontal {
+    width: 12px;
+    margin: 0 -6px;
+    z-index: 10;
+}
+
+/* Panel error boundary: contain panel crashes to an inline card */
+.panel-error-boundary {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 16px;
+    font-size: 12px;
+    color: var(--text-base);
+}
+.panel-error-title {
+    font-weight: 600;
+}
+.panel-error-message {
+    max-width: 100%;
+    overflow: auto;
+    padding: 8px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: var(--bg-panel);
+    color: var(--text-dim);
+    white-space: pre-wrap;
+}
+.panel-error-retry {
+    all: unset;
+    box-sizing: border-box;
+    padding: 5px 10px;
+    border-radius: 6px;
+    background: var(--bg-hover);
+    cursor: pointer;
+}
+.panel-error-retry:hover {
+    background: var(--bg-raised);
+}

package/public/manager/src/panels/right-sidebar-tab-display.ts

@@ -0,0 +1,36 @@
+import type { RightSidebarOpenTab } from './types';
+import { RIGHT_SIDEBAR_TAB_TITLES } from './types';
+
+export type RightSidebarTabDisplay = {
+    visibleLabel: string;
+    title: string;
+    ariaLabel: string;
+};
+
+/**
+ * Centralized tab-label resolver (020B).
+ *
+ * - Visible label: the concrete instance name (specificName).
+ * - Tooltip/title and ARIA carry both the kind and the full specific detail
+ *   (sourceLabel when available, e.g. a full path or URL).
+ * - The kind icon is derived from tab.kind at render time and never persisted.
+ */
+export function getRightSidebarTabDisplay(tab: RightSidebarOpenTab): RightSidebarTabDisplay {
+    const kindTitle = RIGHT_SIDEBAR_TAB_TITLES[tab.kind];
+    const detail = tab.sourceLabel ?? tab.specificName;
+    return {
+        visibleLabel: tab.specificName,
+        title: `${kindTitle}: ${detail}`,
+        ariaLabel: `${kindTitle} tab, ${detail}`,
+    };
+}
+
+/**
+ * Density class for the equal-width tab strip. Content inside each tab adapts
+ * as the strip gets crowded; row height and the '+' location stay stable.
+ */
+export function getRightSidebarTabDensity(openTabCount: number): 'comfortable' | 'compact' | 'mini' {
+    if (openTabCount <= 2) return 'comfortable';
+    if (openTabCount <= 4) return 'compact';
+    return 'mini';
+}

package/public/manager/src/panels/types.ts

@@ -1,7 +1,7 @@
-export type RightPanelMode = 'folder' | 'doc' | 'diff' | 'browser' | 'ceo';
+export type RightPanelMode = 'folder' | 'diff' | 'browser' | 'ceo';
 export type BottomPanelTab = 'terminal' | 'browser' | 'logs' | 'activity';
 
-export const RIGHT_PANEL_MODES: RightPanelMode[] = ['folder', 'doc', 'diff', 'browser', 'ceo'];
+export const RIGHT_PANEL_MODES: RightPanelMode[] = ['folder', 'diff', 'browser', 'ceo'];
 export const BOTTOM_PANEL_TABS: BottomPanelTab[] = ['terminal', 'browser', 'logs', 'activity'];
 
 export const RIGHT_PANEL_MIN_WIDTH = 260;
@@ -12,5 +12,80 @@ export const BOTTOM_PANEL_MIN_HEIGHT = 180;
 export const BOTTOM_PANEL_MAX_HEIGHT = 520;
 export const BOTTOM_PANEL_DEFAULT_HEIGHT = 320;
 
-export const RIGHT_SPLIT_MIN_RATIO = 0.3;
-export const RIGHT_SPLIT_MAX_RATIO = 0.7;
+// --- Right sidebar tab model (020) ---
+
+export type RightSidebarTabKind = 'files' | 'diff' | 'browser' | 'design';
+
+/** Per-tab page state for a Browser module tab: one module tab = one page. */
+export type RightSidebarBrowserTabState = {
+    url?: string;
+};
+
+/** Per-tab state for a Design module tab. One tab = one selected page (186). */
+export type RightSidebarDesignTabState = {
+    pageId?: string | null;
+    /** Bound project key, frozen from the selected instance's projectDir at tab create (OD-2 snapshot). */
+    projectKey?: string | null;
+    zoom?: number;
+};
+
+/** Per-tab resource state for a Files module tab (020 §5, Option B). */
+export type RightSidebarFilesTabState = {
+    activeFilePath?: string | null;
+    folderRootPath?: string | null;
+    repoRootPath?: string | null;
+    repoRootMode?: 'instance' | 'manual';
+};
+
+export type RightSidebarOpenTab = {
+    id: string;
+    kind: RightSidebarTabKind;
+    title: string;
+    /** Concrete instance label rendered in the tab (e.g. file basename, page title). */
+    specificName: string;
+    /** Full source detail for tooltips/aria (e.g. full path, URL). */
+    sourceLabel?: string;
+    /** Instance number for multi-instance kinds (right-files-2 -> 2). */
+    ordinal?: number;
+    pinned?: boolean;
+    /** Files-kind per-tab resource state. Absent on diff/browser tabs. */
+    files?: RightSidebarFilesTabState;
+    /** Browser-kind per-tab page state. One module tab owns one page. */
+    browser?: RightSidebarBrowserTabState;
+    /** Design-kind per-tab state. Absent on other kinds. */
+    design?: RightSidebarDesignTabState;
+};
+
+export type RightSidebarTabsState = {
+    openTabs: RightSidebarOpenTab[];
+    activeTabId: string | null;
+    nextOrdinalByKind: Partial<Record<RightSidebarTabKind, number>>;
+};
+
+export const RIGHT_SIDEBAR_TAB_KINDS: RightSidebarTabKind[] = ['files', 'diff', 'browser', 'design'];
+
+export const RIGHT_SIDEBAR_TAB_TITLES: Record<RightSidebarTabKind, string> = {
+    files: 'Files',
+    diff: 'Diff',
+    browser: 'Browser',
+    design: 'Design',
+};
+
+/** Kinds that may have multiple simultaneous module tabs. Diff stays singleton. */
+export const RIGHT_SIDEBAR_MULTI_INSTANCE_KINDS: RightSidebarTabKind[] = ['files', 'browser', 'design'];
+
+export const RIGHT_SIDEBAR_DIFF_DEFAULT_NAME = 'Working tree';
+
+// --- Files tab inner layout (010) ---
+
+export type FileFolderViewMode = 'split' | 'folder-only' | 'file-only';
+
+export type FileFolderLayoutState = {
+    mode: FileFolderViewMode;
+    splitRatio: number;
+    lastSplitRatio: number;
+};
+
+export const FILE_FOLDER_SPLIT_RATIO_DEFAULT = 0.5;
+export const FILE_FOLDER_FOLDER_ONLY_THRESHOLD = 0.12;
+export const FILE_FOLDER_FILE_ONLY_THRESHOLD = 0.88;

package/public/manager/src/types.ts

@@ -316,9 +316,20 @@ export type DashboardRegistryUi = {
     panelLayoutVersion?: number | undefined;
     rightPanelOpen?: boolean | undefined;
     rightPanelWidth?: number | undefined;
+    /** @deprecated Legacy two-slot field. Kept for hydration migration only. */
     rightPanelTopMode?: string | null | undefined;
+    /** @deprecated Legacy two-slot field. Kept for hydration migration only. */
     rightPanelBottomMode?: string | null | undefined;
+    /** @deprecated Legacy two-slot vertical split ratio. Dropped on migration. */
     rightPanelSplitRatio?: number | undefined;
+    // New right sidebar tab model (020)
+    rightSidebarOpenTabs?: Array<{ id: string; kind: string; title: string; specificName?: string; sourceLabel?: string; ordinal?: number; pinned?: boolean; design?: { pageId?: string | null; projectKey?: string | null; zoom?: number } }> | undefined;
+    rightSidebarActiveTabId?: string | null | undefined;
+    rightSidebarNextOrdinalByKind?: Record<string, number> | undefined;
+    /** @deprecated Legacy singleton-tab field. Readable for migration only; no longer written. */
+    rightSidebarLastActiveByKind?: Record<string, string> | undefined;
+    // Files tab inner layout (010)
+    fileFolderLayout?: { mode: string; splitRatio: number; lastSplitRatio: number } | undefined;
     bottomPanelOpen?: boolean | undefined;
     bottomPanelHeight?: number | undefined;
     bottomPanelTabs?: string[] | undefined;

package/scripts/bundle-sidecar.sh

@@ -80,6 +80,9 @@ rm -rf "$SIDECAR_DIR/node_modules/es-toolkit" 2>/dev/null || true
 rm -rf "$SIDECAR_DIR/node_modules/lodash" 2>/dev/null || true
 rm -rf "$SIDECAR_DIR/node_modules/web-streams-polyfill" 2>/dev/null || true
 
+echo "Removing stale .bin symlinks after dependency pruning..."
+find "$SIDECAR_DIR/node_modules/.bin" -type l ! -exec test -e {} \; -print -delete 2>/dev/null || true
+
 NODE_BIN="$SIDECAR_DIR/node"
 if [[ "$PLATFORM" == "win32" ]]; then
   NODE_BIN="$SIDECAR_DIR/node.exe"