cli-jaw 2.0.10 → 2.0.16

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

@@ -0,0 +1,241 @@
+.browser-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+.browser-unavailable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-dim);
+    font-size: 12px;
+}
+.browser-tab-strip {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    min-width: 0;
+    min-height: 32px;
+    padding: 4px 6px 0;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+    flex-shrink: 0;
+}
+.browser-tab-item {
+    flex: 0 1 128px;
+    min-width: 72px;
+    max-width: 150px;
+    display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    border: 1px solid transparent;
+    border-bottom-color: transparent;
+    border-radius: 5px 5px 0 0;
+    background: transparent;
+}
+.browser-tab-item.is-active {
+    border-color: var(--border-subtle);
+    border-bottom-color: var(--bg-panel);
+    background: var(--canvas-deep);
+}
+.browser-tab {
+    all: unset;
+    cursor: pointer;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 4px 4px 4px 7px;
+    color: var(--text-dim);
+    font-size: 11px;
+}
+.browser-tab-item.is-active .browser-tab {
+    color: var(--text-base);
+}
+.browser-tab-title {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.browser-tab-close,
+.browser-tab-add,
+.browser-collapse-button {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+    flex: 0 0 auto;
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: var(--text-dim);
+    font-size: 14px;
+    line-height: 1;
+}
+.browser-tab-close:hover,
+.browser-tab-close:focus-visible,
+.browser-tab-add:hover,
+.browser-tab-add:focus-visible,
+.browser-collapse-button:hover,
+.browser-collapse-button:focus-visible {
+    color: var(--text-base);
+    background: var(--bg-hover);
+}
+.browser-tab-add {
+    margin-left: 1px;
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-raised);
+}
+.browser-collapse-button {
+    margin-left: auto;
+    position: sticky;
+    right: 0;
+    background: var(--bg-panel);
+}
+.browser-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--bg-panel);
+    flex-shrink: 0;
+}
+.browser-nav-btn {
+    all: unset;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+    font-size: 13px;
+    color: var(--text-dim);
+}
+.browser-nav-btn:hover { background: var(--bg-hover); color: var(--text-base); }
+.browser-nav-btn:disabled {
+    cursor: default;
+    opacity: 0.38;
+}
+.browser-nav-btn:disabled:hover {
+    background: transparent;
+    color: var(--text-dim);
+}
+.browser-url-input {
+    flex: 1;
+    min-width: 0;
+    padding: 3px 8px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    background: var(--canvas-deep);
+    color: var(--text-base);
+    font-size: 11px;
+    outline: none;
+}
+.browser-url-input:focus { border-color: var(--accent-primary); }
+.browser-go-btn {
+    all: unset;
+    cursor: pointer;
+    padding: 3px 8px;
+    border-radius: 4px;
+    border: 1px solid var(--border-subtle);
+    color: var(--text-base);
+    background: var(--bg-raised);
+    font-size: 11px;
+}
+.browser-go-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-strong);
+}
+.browser-status {
+    flex-shrink: 0;
+    padding: 5px 8px;
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text-dim);
+    font-size: 11px;
+}
+.browser-status.is-error {
+    color: var(--status-error);
+    background: color-mix(in srgb, var(--status-error) 10%, transparent);
+}
+.browser-webview-stack {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background: white;
+}
+.browser-webview-host {
+    display: none;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background: white;
+}
+.browser-webview-host.is-active {
+    display: flex;
+}
+.browser-webview {
+    flex: 1 1 auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    border: 0;
+    background: white;
+}
+
+.browser-external-surface {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 8px;
+    padding: 18px;
+    color: var(--text-dim);
+    background: var(--canvas-deep);
+}
+
+.browser-external-title {
+    color: var(--text-base);
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.browser-external-body {
+    max-width: 42ch;
+    font-size: 11px;
+    line-height: 1.45;
+}
+
+.browser-external-open {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+    margin-top: 2px;
+    padding: 5px 9px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    color: var(--text-base);
+    background: var(--bg-raised);
+    font-size: 11px;
+}
+
+.browser-external-open:hover,
+.browser-external-open:focus-visible {
+    background: var(--bg-hover);
+    border-color: var(--border-strong);
+}

package/public/manager/src/browser-panel/browser-url.ts

@@ -0,0 +1,55 @@
+const BLOCKED_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '0.0.0.0']);
+
+export const DEFAULT_BROWSER_URL = 'https://www.google.com/';
+export const GOOGLE_SEARCH_URL = 'https://www.google.com/search?q=';
+
+export function isPrivateHost(hostname: string): boolean {
+    return /^(10\.|172\.(1[6-9]|2\d|3[01])\.|192\.168\.)/.test(hostname);
+}
+
+export function bareHostname(target: string): string {
+    const authority = target.split(/[/?#]/, 1)[0] ?? '';
+    if (authority.startsWith('[')) {
+        const end = authority.indexOf(']');
+        return end > 0 ? authority.slice(1, end).toLowerCase() : authority.toLowerCase();
+    }
+    return authority.split(':', 1)[0]?.toLowerCase() ?? '';
+}
+
+export function shouldDefaultToHttp(target: string): boolean {
+    const authority = target.split(/[/?#]/, 1)[0] ?? '';
+    const host = bareHostname(target);
+    if (!host) return false;
+    if (host === 'localhost' || host === '0.0.0.0' || host === '127.0.0.1' || host === '::1') return true;
+    if (host.endsWith('.local') || isPrivateHost(host)) return true;
+    return /:\d+$/.test(authority);
+}
+
+function hasExplicitScheme(target: string): boolean {
+    return /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(target);
+}
+
+function isUrlLikeTarget(target: string): boolean {
+    const host = bareHostname(target);
+    const authority = target.split(/[/?#]/, 1)[0] ?? '';
+    if (!host) return false;
+    if (/\s/.test(authority)) return false;
+    if (host === 'localhost' || host === '0.0.0.0' || host === '127.0.0.1' || host === '::1') return true;
+    if (host.endsWith('.local') || isPrivateHost(host)) return true;
+    if (/^(\d{1,3}\.){3}\d{1,3}$/.test(host)) return true;
+    if (authority.includes(':') && /:\d+$/.test(authority)) return true;
+    return host.includes('.');
+}
+
+export function normalizeBrowserTarget(target: string): string | null {
+    const trimmed = target.trim();
+    if (!trimmed) return null;
+    if (/^https?:\/\//i.test(trimmed)) return trimmed;
+    if (isUrlLikeTarget(trimmed)) return `${shouldDefaultToHttp(trimmed) ? 'http' : 'https'}://${trimmed}`;
+    if (hasExplicitScheme(trimmed)) return trimmed;
+    return `${GOOGLE_SEARCH_URL}${encodeURIComponent(trimmed)}`;
+}
+
+export function isRestrictedBrowserHost(hostname: string): boolean {
+    return BLOCKED_HOSTS.has(hostname) || hostname.endsWith('.local') || isPrivateHost(hostname);
+}

package/public/manager/src/clipboard/copy-text.ts

@@ -0,0 +1,27 @@
+import { getDesktop } from '../panels/desktop-bridge';
+
+export type CopyTextResult = {
+    ok: boolean;
+    error?: string;
+};
+
+function messageFromError(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+}
+
+export async function copyText(text: string): Promise<CopyTextResult> {
+    try {
+        const bridge = getDesktop()?.clipboard;
+        if (bridge) {
+            const result = await bridge.writeText(text);
+            return result.ok ? { ok: true } : { ok: false, error: result.error ?? 'Clipboard bridge rejected the copy request.' };
+        }
+        if (!navigator.clipboard?.writeText) {
+            return { ok: false, error: 'Clipboard API is unavailable.' };
+        }
+        await navigator.clipboard.writeText(text);
+        return { ok: true };
+    } catch (error) {
+        return { ok: false, error: messageFromError(error) };
+    }
+}

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

@@ -1,6 +1,7 @@
 import type { DashboardUiTheme } from '../types';
 import { DesktopLink } from '../desktop-link';
 import { CommandCenter } from './CommandCenter';
+import { DesktopPanelControls } from './DesktopPanelControls';
 import { ThemeSwitch } from './ThemeSwitch';
 
 type CommandBarProps = {
@@ -41,6 +42,7 @@ export function CommandBar(props: CommandBarProps) {
             )}
             actions={(
                 <div className="command-actions-group">
+                    <DesktopPanelControls />
                     <DesktopLink />
                     <button
                         type="button"

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { isElectron } from '../panels/desktop-bridge';
 
 type CommandCenterProps = {
     title: ReactNode;
@@ -8,8 +9,9 @@ type CommandCenterProps = {
 };
 
 export function CommandCenter(props: CommandCenterProps) {
+    const electron = isElectron();
     return (
-        <div className="command-center command-bar">
+        <div className={`command-center command-bar${electron ? ' is-electron-titlebar' : ''}`}>
             <div className="command-primary">
                 {props.mobileMenuButton}
                 <div className="command-title">{props.title}</div>

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

@@ -0,0 +1,79 @@
+import { usePanelActions, usePanelLayout } from '../panels/PanelLayoutProvider';
+import { currentManagerSurface, panelCapabilityEnabled, resolvePanelCapabilities } from '../panels/panel-capabilities';
+
+function TerminalIcon() {
+    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">
+            <rect x="3" y="4" width="14" height="12" rx="1.5" />
+            <path d="M6 9l3 2-3 2" />
+            <path d="M11 13h3" />
+        </svg>
+    );
+}
+
+function PanelRightIcon() {
+    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">
+            <rect x="3" y="4" width="14" height="12" rx="1.5" />
+            <path d="M13 4v12" />
+        </svg>
+    );
+}
+
+export function DesktopPanelControls() {
+    const panelLayout = usePanelLayout();
+    const panelActions = usePanelActions();
+    const surface = currentManagerSurface();
+
+    if (surface !== 'electron') return null;
+
+    const capabilities = resolvePanelCapabilities(surface);
+    const terminalCapability = capabilities.terminal;
+    const rightCapability = capabilities.folder;
+    const terminalEnabled = panelCapabilityEnabled(terminalCapability);
+    const rightEnabled = panelCapabilityEnabled(rightCapability);
+
+    const bottomOpen = panelLayout.state.bottomPanel.open;
+    const rightOpen = panelLayout.effectiveRightOpen;
+
+    return (
+        <div className="command-panel-controls" aria-label="Desktop panels">
+            <button
+                className={`command-panel-toggle${bottomOpen ? ' is-active' : ''}`}
+                type="button"
+                disabled={!terminalEnabled}
+                onClick={() => {
+                    if (!terminalEnabled) return;
+                    if (bottomOpen) {
+                        panelActions.toggleBottomPanel();
+                    } else {
+                        panelActions.openBottomTab('terminal');
+                    }
+                }}
+                aria-label="Toggle terminal panel"
+                aria-pressed={bottomOpen}
+                title={terminalCapability.reason ?? 'Terminal (Ctrl+Shift+`)'}
+            >
+                <TerminalIcon />
+            </button>
+            <button
+                className={`command-panel-toggle${rightOpen ? ' is-active' : ''}`}
+                type="button"
+                disabled={!rightEnabled}
+                onClick={() => {
+                    if (!rightEnabled) return;
+                    if (rightOpen) {
+                        panelActions.toggleRightPanel();
+                    } else {
+                        panelActions.openRightPanel('folder');
+                    }
+                }}
+                aria-label="Toggle right panel"
+                aria-pressed={rightOpen}
+                title={rightCapability.reason ?? 'Side panel (Command+B)'}
+            >
+                <PanelRightIcon />
+            </button>
+        </div>
+    );
+}

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

@@ -178,7 +178,7 @@ export function SidebarRail(props: SidebarRailProps) {
             >
                 <SettingsIcon />
             </button>
-            <div className="rail-spacer" />
+            <div className="rail-spacer" aria-hidden="true" />
             <button
                 className={`rail-button rail-help-button${props.helpOpen ? ' is-active' : ''}`}
                 type="button"

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
 
 type WorkspaceLayoutProps = {
     navigator: ReactNode;
@@ -12,21 +12,89 @@ type WorkspaceLayoutProps = {
     inspectorCollapsed: boolean;
     inspectorHeight: number;
     onCloseDrawer: () => void;
+    rightPanelContent?: ReactNode;
+    rightPanelWidth?: number;
+    rightPanelOpen?: boolean;
+    bottomPanelContent?: ReactNode;
+    bottomPanelHeight?: number;
+    bottomPanelOpen?: boolean;
 };
 
 type WorkspaceLayoutStyle = CSSProperties & {
     '--activity-dock-height': string;
+    '--sidebar-width'?: string | undefined;
+    '--right-panel-width'?: string | undefined;
+    '--bottom-panel-height'?: string | undefined;
 };
 
+const RIGHT_PANEL_RENDER_MIN_WIDTH = 260;
+const RIGHT_PANEL_RENDER_MAX_WIDTH = 520;
+const WORKSPACE_CENTER_MIN_WIDTH = 360;
+
+function readViewportWidth(): number {
+    if (typeof window === 'undefined') return 1440;
+    return window.innerWidth;
+}
+
+function useViewportWidth(): number {
+    const [viewportWidth, setViewportWidth] = useState(readViewportWidth);
+
+    useEffect(() => {
+        const handleResize = () => setViewportWidth(readViewportWidth());
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return viewportWidth;
+}
+
+function clampRightPanelRenderWidth(width: number | undefined, sidebarCollapsed: boolean, viewportWidth: number): number {
+    const desired = typeof width === 'number' && Number.isFinite(width)
+        ? Math.round(width)
+        : RIGHT_PANEL_RENDER_MAX_WIDTH;
+    const sidebarWidth = sidebarCollapsed
+        ? 56
+        : viewportWidth >= 1440 ? 360 : 300;
+    const maxByViewport = Math.max(
+        RIGHT_PANEL_RENDER_MIN_WIDTH,
+        viewportWidth - sidebarWidth - WORKSPACE_CENTER_MIN_WIDTH,
+    );
+    const responsiveMax = Math.min(
+        RIGHT_PANEL_RENDER_MAX_WIDTH,
+        Math.floor(viewportWidth * 0.48),
+        maxByViewport,
+    );
+    return Math.max(
+        RIGHT_PANEL_RENDER_MIN_WIDTH,
+        Math.min(desired, responsiveMax),
+    );
+}
+
 export function WorkspaceLayout(props: WorkspaceLayoutProps) {
+    const viewportWidth = useViewportWidth();
+    const rightPanelWidth = props.rightPanelOpen
+        ? clampRightPanelRenderWidth(props.rightPanelWidth, props.sidebarCollapsed, viewportWidth)
+        : 0;
+
     const style: WorkspaceLayoutStyle = {
         '--activity-dock-height': `${props.inspectorHeight}px`,
+        '--sidebar-width': props.sidebarCollapsed ? '56px' : undefined,
+        '--right-panel-width': props.rightPanelOpen
+            ? `${rightPanelWidth}px`
+            : props.sidePanel ? undefined : '0px',
+        '--bottom-panel-height': props.bottomPanelOpen
+            ? `${props.bottomPanelHeight ?? 0}px`
+            : undefined,
     };
 
     const cls = [
         'manager-workspace',
         props.sidebarCollapsed && 'is-sidebar-collapsed',
         props.inspectorCollapsed && 'is-inspector-collapsed',
+        props.rightPanelOpen && 'is-right-panel-open',
+        !props.rightPanelOpen && !props.sidePanel && 'is-right-panel-closed',
+        props.bottomPanelOpen && 'is-bottom-panel-open',
+        !props.bottomPanelOpen && 'is-bottom-panel-closed',
         props.sidePanel && 'is-side-panel-open',
         props.drawerOpen && 'is-drawer-open',
     ].filter(Boolean).join(' ');
@@ -38,6 +106,8 @@ export function WorkspaceLayout(props: WorkspaceLayoutProps) {
             <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>}
+            {props.rightPanelContent}
+            {props.bottomPanelContent}
             <nav className="manager-mobile-nav" aria-label="Mobile dashboard navigation">
                 {props.mobileNav}
             </nav>

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

@@ -0,0 +1,123 @@
+import type { ReactElement } from 'react';
+import type { DashboardDiffMode, DashboardDiffRootPolicy, DashboardLocale, DashboardRegistryUi } from '../types';
+
+type Props = {
+    locale: DashboardLocale;
+    ui: DashboardRegistryUi;
+    onUiPatch: (patch: Partial<DashboardRegistryUi>) => void;
+};
+
+const COPY = {
+    ko: {
+        title: '개발 도구',
+        description: 'Diff 패널이 선택된 인스턴스의 repo root와 기본 비교 방식을 고르는 기준입니다.',
+        rootPolicy: ['Repo root 우선순위', 'Diff panel', '선택된 인스턴스에서 어떤 경로를 먼저 git repo로 볼지 정합니다.'],
+        diffMode: ['기본 diff 모드', 'Diff panel', '처음 열 때 사용할 비교 범위입니다.'],
+        baseRef: ['기본 base ref', 'Base ref 모드', 'origin/master, main, HEAD 같은 기준 ref입니다.'],
+        untracked: ['Untracked 포함', 'Diff summary', '아직 git에 추가되지 않은 파일도 목록에 표시합니다.'],
+    },
+    en: {
+        title: 'Developer tools',
+        description: 'Defaults used by the Diff panel when it resolves a repo root from the selected instance.',
+        rootPolicy: ['Repo root priority', 'Diff panel', 'Choose which selected-instance path is tried first as a git repository.'],
+        diffMode: ['Default diff mode', 'Diff panel', 'Comparison scope used when the panel opens.'],
+        baseRef: ['Default base ref', 'Base ref mode', 'Reference used for base comparisons, such as origin/master, main, or HEAD.'],
+        untracked: ['Include untracked', 'Diff summary', 'Show files that are not yet tracked by git.'],
+    },
+    zh: {
+        title: '开发工具',
+        description: 'Diff 面板从已选实例解析 repo root 与默认比较方式时使用的设置。',
+        rootPolicy: ['Repo root 优先级', 'Diff panel', '决定优先把已选实例中的哪个路径当作 git repo。'],
+        diffMode: ['默认 diff 模式', 'Diff panel', '面板打开时使用的比较范围。'],
+        baseRef: ['默认 base ref', 'Base ref 模式', '例如 origin/master、main 或 HEAD。'],
+        untracked: ['包含 untracked', 'Diff summary', '显示尚未被 git 跟踪的文件。'],
+    },
+    ja: {
+        title: '開発ツール',
+        description: 'Diff パネルが選択中インスタンスから repo root と比較方式を決めるときの既定値です。',
+        rootPolicy: ['Repo root の優先順位', 'Diff panel', '選択中インスタンスのどのパスを先に git repo として扱うかを決めます。'],
+        diffMode: ['既定の diff モード', 'Diff panel', 'パネルを開いたときの比較範囲です。'],
+        baseRef: ['既定の base ref', 'Base ref モード', 'origin/master、main、HEAD などの基準 ref です。'],
+        untracked: ['Untracked を含める', 'Diff summary', 'git で未追跡のファイルも一覧に表示します。'],
+    },
+} as const;
+
+const ROOT_POLICIES: Array<{ value: DashboardDiffRootPolicy; label: string }> = [
+    { value: 'project-first', label: 'Project dirs first' },
+    { value: 'working-dir-first', label: 'Working dir first' },
+    { value: 'manual', label: 'Pinned root first' },
+];
+
+const DIFF_MODES: Array<{ value: DashboardDiffMode; label: string }> = [
+    { value: 'unstaged', label: 'Unstaged' },
+    { value: 'staged', label: 'Staged' },
+    { value: 'head', label: 'HEAD' },
+    { value: 'base', label: 'Base ref' },
+];
+
+function row(id: string, text: readonly [string, string, string], control: ReactElement): ReactElement {
+    return (
+        <div className="dashboard-settings-row">
+            <div className="dashboard-settings-row-main">
+                <label className="dashboard-settings-row-heading" htmlFor={id}>
+                    <span>{text[0]}</span>
+                    <span className="dashboard-settings-row-scope">{text[1]}</span>
+                </label>
+                <p className="dashboard-settings-row-description">{text[2]}</p>
+            </div>
+            <div className="dashboard-settings-row-control">{control}</div>
+        </div>
+    );
+}
+
+export function DashboardDeveloperSettingsSection(props: Props): ReactElement {
+    const copy = COPY[props.locale] || COPY.ko;
+    return (
+        <section className="dashboard-settings-section">
+            <header>
+                <h3>{copy.title}</h3>
+                <p>{copy.description}</p>
+            </header>
+            <div className="dashboard-settings-field-list">
+                {row('dashboard-diff-root-policy', copy.rootPolicy, (
+                    <select
+                        id="dashboard-diff-root-policy"
+                        className="dashboard-settings-select"
+                        value={props.ui.diffRootPolicy}
+                        onChange={(event) => props.onUiPatch({ diffRootPolicy: event.currentTarget.value as DashboardDiffRootPolicy })}
+                    >
+                        {ROOT_POLICIES.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
+                    </select>
+                ))}
+                {row('dashboard-diff-default-mode', copy.diffMode, (
+                    <select
+                        id="dashboard-diff-default-mode"
+                        className="dashboard-settings-select"
+                        value={props.ui.diffDefaultMode}
+                        onChange={(event) => props.onUiPatch({ diffDefaultMode: event.currentTarget.value as DashboardDiffMode })}
+                    >
+                        {DIFF_MODES.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
+                    </select>
+                ))}
+                {row('dashboard-diff-base-ref', copy.baseRef, (
+                    <input
+                        id="dashboard-diff-base-ref"
+                        className="dashboard-settings-shortcut-input"
+                        type="text"
+                        value={props.ui.diffBaseRef}
+                        onChange={(event) => props.onUiPatch({ diffBaseRef: event.currentTarget.value })}
+                    />
+                ))}
+                {row('dashboard-diff-include-untracked', copy.untracked, (
+                    <input
+                        id="dashboard-diff-include-untracked"
+                        className="dashboard-settings-toggle"
+                        type="checkbox"
+                        checked={props.ui.diffIncludeUntracked}
+                        onChange={(event) => props.onUiPatch({ diffIncludeUntracked: event.currentTarget.checked })}
+                    />
+                ))}
+            </div>
+        </section>
+    );
+}