From b6c993d28288689a5cae01fc5a2044fea1bc3804 Mon Sep 17 00:00:00 2001 From: Benjamin Shafii Date: Fri, 8 May 2026 18:18:25 -0700 Subject: [PATCH 1/3] fix(app): reduce React Doctor architecture warnings --- .../session/modals/model-picker-modal.tsx | 693 +++++++++++------- .../domains/settings/pages/advanced-view.tsx | 469 +++++++----- .../domains/settings/pages/config-view.tsx | 663 ++++++++--------- .../settings/pages/environment-view.tsx | 582 +++++++++------ .../panels/authorized-folders-panel.tsx | 309 +++++--- 5 files changed, 1534 insertions(+), 1182 deletions(-) diff --git a/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx b/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx index 9af2c776f..20f025cf6 100644 --- a/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx +++ b/apps/app/src/react-app/domains/session/modals/model-picker-modal.tsx @@ -7,6 +7,7 @@ import { useRef, useState, type KeyboardEvent as ReactKeyboardEvent, + type RefObject, } from "react"; import { CheckCircle2, Circle, Search, X } from "lucide-react"; @@ -67,6 +68,13 @@ type RenderedItem = matchCount: number; }; +type ProviderLinkItem = { + providerID: string; + title: string; + matchCount: number; + index: number; +}; + export function ModelPickerModal(props: ModelPickerModalProps) { const searchInputRef = useRef(null); const optionRefs = useRef([]); @@ -272,308 +280,425 @@ export function ModelPickerModal(props: ModelPickerModalProps) { optionRefs.current[index] = el; }; - const renderOption = (opt: ModelOption, index: number) => { - const active = modelEquals(props.current, { - providerID: opt.providerID, - modelID: opt.modelID, - }); - const isKeyboardActive = index === activeIndex; - - return ( -
setActiveIndex(index)} - onClick={() => - props.onSelect({ - providerID: opt.providerID, - modelID: opt.modelID, - }) - } - onKeyDown={(event: ReactKeyboardEvent) => { - if (event.key !== "Enter" && event.key !== " ") return; - if (event.nativeEvent.isComposing) return; - event.preventDefault(); - props.onSelect({ - providerID: opt.providerID, - modelID: opt.modelID, - }); - }} - > -
- + ); +} + +function ModelPickerDialog(props: { + target: "default" | "session"; + query: string; + totalOptions: number; + filteredCount: number; + current: ModelRef; + searchInputRef: RefObject; + activeIndex: number; + renderedCount: number; + recommendedOptions: { opt: ModelOption; index: number }[]; + otherEnabledOptions: { opt: ModelOption; index: number }[]; + otherOptions: ProviderLinkItem[]; + registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void; + onSetQuery: (value: string) => void; + onSetActiveIndex: (index: number) => void; + onSelect: (model: ModelRef) => void; + onBehaviorChange: (model: ModelRef, value: string | null) => void; + onOpenSettings: () => void; + onClose: (options?: { restorePromptFocus?: boolean }) => void; +}) { + return ( +
+
+
+ + -
-
- {opt.title} -
-
+
+
- {opt.footer ? ( -
- {opt.footer} -
- ) : null} - {active && (opt.behaviorOptions?.length ?? 0) > 0 ? ( -
event.stopPropagation()} - onKeyDown={(event) => event.stopPropagation()} - > - - {opt.behaviorTitle}: - -
- {(opt.behaviorOptions ?? []).map((option) => ( - - ))} -
-
- ) : null} + {t("settings.done")} +
- ); - }; +
+ ); +} + +function ModelPickerHeader(props: { + target: "default" | "session"; + onClose: (options?: { restorePromptFocus?: boolean }) => void; +}) { + return ( +
+
+

+ {t(props.target === "default" ? "model_picker.default_model_title" : "model_picker.chat_model_title")} +

+

+ {t(props.target === "default" ? "model_picker.default_model_desc" : "model_picker.chat_model_desc")} +

+
+ +
+ ); +} + +function ModelPickerSearch(props: { + query: string; + totalOptions: number; + filteredCount: number; + searchInputRef: RefObject; + onSetQuery: (value: string) => void; +}) { + return ( +
+
+ + props.onSetQuery(event.currentTarget.value)} + placeholder={t("settings.search_models")} + className="w-full bg-dls-surface border border-dls-border rounded-xl py-2.5 pl-9 pr-3 text-sm text-dls-text placeholder:text-dls-secondary focus:outline-none focus:ring-1 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] focus:border-dls-accent" + /> +
+ {props.query.trim() ? ( +
+ {t("settings.showing_models", { count: props.filteredCount, total: props.totalOptions })} +
+ ) : null} +
+ ); +} + +function ModelPickerSections(props: { + current: ModelRef; + activeIndex: number; + renderedCount: number; + recommendedOptions: { opt: ModelOption; index: number }[]; + otherEnabledOptions: { opt: ModelOption; index: number }[]; + otherOptions: ProviderLinkItem[]; + registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void; + onSetActiveIndex: (index: number) => void; + onSelect: (model: ModelRef) => void; + onBehaviorChange: (model: ModelRef, value: string | null) => void; + onOpenSettings: () => void; + onClose: (options?: { restorePromptFocus?: boolean }) => void; +}) { + return ( +
+ + + {props.otherOptions.length > 0 ? ( +
+
+ {t("model_picker.more_providers")} +
+ {props.otherOptions.map((provider) => ( + + ))} +
+ ) : null} + {props.renderedCount === 0 ? ( +
+ {t("model_picker.no_results")} +
+ ) : null} +
+ ); +} + +function ModelOptionsSection(props: { + title: string; + options: { opt: ModelOption; index: number }[]; + current: ModelRef; + activeIndex: number; + registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void; + onSetActiveIndex: (index: number) => void; + onSelect: (model: ModelRef) => void; + onBehaviorChange: (model: ModelRef, value: string | null) => void; +}) { + if (props.options.length === 0) return null; + return ( +
+
+ {props.title} +
+ {props.options.map(({ opt, index }) => ( + + ))} +
+ ); +} + +function ModelOptionRow(props: { + opt: ModelOption; + index: number; + activeIndex: number; + current: ModelRef; + registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void; + onSetActiveIndex: (index: number) => void; + onSelect: (model: ModelRef) => void; + onBehaviorChange: (model: ModelRef, value: string | null) => void; +}) { + const { opt } = props; + const active = modelEquals(props.current, { + providerID: opt.providerID, + modelID: opt.modelID, + }); + const isKeyboardActive = props.index === props.activeIndex; + + const selectOption = () => props.onSelect({ providerID: opt.providerID, modelID: opt.modelID }); - const renderProviderLink = (provider: { - providerID: string; - title: string; - matchCount: number; - index: number; - }) => { - const isKeyboardActive = provider.index === activeIndex; - return ( -
setActiveIndex(provider.index)} - onClick={() => { - props.onClose({ restorePromptFocus: false }); - props.onOpenSettings(); - }} - onKeyDown={(event: ReactKeyboardEvent) => { - if (event.key !== "Enter" && event.key !== " ") return; - if (event.nativeEvent.isComposing) return; - event.preventDefault(); - props.onClose({ restorePromptFocus: false }); - props.onOpenSettings(); - }} - > -
- props.onSetActiveIndex(props.index)} + onClick={selectOption} + onKeyDown={(event: ReactKeyboardEvent) => { + if (event.key !== "Enter" && event.key !== " ") return; + if (event.nativeEvent.isComposing) return; + event.preventDefault(); + selectOption(); + }} + > +
+ +
+
-
-
- {provider.title} -
-
- - {t("model_picker.connect_provider_hint")} - - - {t("model_picker.model_count", { count: provider.matchCount })} - -
+ > + {opt.title}
+
+ {opt.description ?? opt.providerID} + + {opt.providerID}/{opt.modelID} + +
+ {opt.footer ? ( +
+ {opt.footer} +
+ ) : null} + {active && (opt.behaviorOptions?.length ?? 0) > 0 ? ( + + ) : null}
- ); - }; +
+ ); +} +function ModelBehaviorOptions(props: { + opt: ModelOption; + onBehaviorChange: (model: ModelRef, value: string | null) => void; +}) { return ( -
-
-
-
-
-

- {t( - props.target === "default" - ? "model_picker.default_model_title" - : "model_picker.chat_model_title", - )} -

-

- {t( - props.target === "default" - ? "model_picker.default_model_desc" - : "model_picker.chat_model_desc", - )} -

-
- -
+
event.stopPropagation()} + onKeyDown={(event) => event.stopPropagation()} + > + + {props.opt.behaviorTitle}: + +
+ {(props.opt.behaviorOptions ?? []).map((option) => ( + + ))} +
+
+ ); +} -
-
- - props.setQuery(event.currentTarget.value)} - placeholder={t("settings.search_models")} - className="w-full bg-dls-surface border border-dls-border rounded-xl py-2.5 pl-9 pr-3 text-sm text-dls-text placeholder:text-dls-secondary focus:outline-none focus:ring-1 focus:ring-[rgba(var(--dls-accent-rgb),0.2)] focus:border-dls-accent" - /> -
- {props.query.trim() ? ( -
- {t("settings.showing_models", { - count: filteredOptions.length, - total: props.options.length, - })} -
- ) : null} -
+function ProviderLinkRow(props: { + provider: ProviderLinkItem; + activeIndex: number; + registerOptionRef: (index: number) => (el: HTMLDivElement | null) => void; + onSetActiveIndex: (index: number) => void; + onOpenSettings: () => void; + onClose: (options?: { restorePromptFocus?: boolean }) => void; +}) { + const isKeyboardActive = props.provider.index === props.activeIndex; + const openProviderSettings = () => { + props.onClose({ restorePromptFocus: false }); + props.onOpenSettings(); + }; -
- {recommendedOptions.length > 0 ? ( -
-
- {t("model_picker.recommended")} -
- {recommendedOptions.map(({ opt, index }) => - renderOption(opt, index), - )} -
- ) : null} - - {otherEnabledOptions.length > 0 ? ( -
-
- {t("model_picker.other_connected_models")} -
- {otherEnabledOptions.map(({ opt, index }) => - renderOption(opt, index), - )} -
- ) : null} - - {otherOptions.length > 0 ? ( -
-
- {t("model_picker.more_providers")} -
- {otherOptions.map(renderProviderLink)} -
- ) : null} - - {renderedItems.length === 0 ? ( -
- {t("model_picker.no_results")} -
- ) : null} + return ( +
props.onSetActiveIndex(props.provider.index)} + onClick={openProviderSettings} + onKeyDown={(event: ReactKeyboardEvent) => { + if (event.key !== "Enter" && event.key !== " ") return; + if (event.nativeEvent.isComposing) return; + event.preventDefault(); + openProviderSettings(); + }} + > +
+ +
+
+ {props.provider.title}
- -
- +
+ {t("model_picker.connect_provider_hint")} + + {t("model_picker.model_count", { count: props.provider.matchCount })} +
diff --git a/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx b/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx index 2e3e9dcfe..bc3befe5c 100644 --- a/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx +++ b/apps/app/src/react-app/domains/settings/pages/advanced-view.tsx @@ -291,216 +291,323 @@ export function AdvancedView(props: AdvancedViewProps) { return (
-
-
-
{t("settings.runtime_title")}
-
{t("settings.runtime_desc")}
-
+ + + + + + + dispatchLocal({ type: "toggleDeepLink" })} + onDeepLinkInput={(input) => dispatchLocal({ type: "deepLinkInput", input })} + onSubmitDeepLink={submitDebugDeepLink} + /> + + -
- } - title={t("settings.opencode_engine_label")} - description={t("settings.opencode_engine_desc")} - statusLabel={clientStatusLabel} - statusStyle={clientStatusStyle} - statusDot={clientStatusDot} - detailLines={[ - t("settings.diag_opencode_binary", undefined, { - binary: formatOpencodeBinary(props.engineInfo), - }), - ]} - /> - } - title={t("settings.openwork_server_label")} - description={t("settings.openwork_server_desc")} - statusLabel={openworkStatusLabel} - statusStyle={openworkStatusStyle} - statusDot={openworkStatusDot} - /> -
+ {props.developerMode ? : null} +
+ ); +} + +function AdvancedRuntimeSection(props: { + engineInfo: EngineInfo | null; + clientStatusLabel: string; + clientStatusStyle: string; + clientStatusDot: string; + openworkStatusLabel: string; + openworkStatusStyle: string; + openworkStatusDot: string; +}) { + return ( +
+
+
{t("settings.runtime_title")}
+
{t("settings.runtime_desc")}
-
-
-
{t("settings.opencode_section_label")}
-
{t("settings.opencode_engine_desc")}
-
+
+ } + title={t("settings.opencode_engine_label")} + description={t("settings.opencode_engine_desc")} + statusLabel={props.clientStatusLabel} + statusStyle={props.clientStatusStyle} + statusDot={props.clientStatusDot} + detailLines={[ + t("settings.diag_opencode_binary", undefined, { + binary: formatOpencodeBinary(props.engineInfo), + }), + ]} + /> + } + title={t("settings.openwork_server_label")} + description={t("settings.openwork_server_desc")} + statusLabel={props.openworkStatusLabel} + statusStyle={props.openworkStatusStyle} + statusDot={props.openworkStatusDot} + /> +
+
+ ); +} -
-
-
{t("settings.enable_exa")}
-
{t("settings.enable_exa_desc")}
-
- +function AdvancedOpencodeSection(props: { busy: boolean; enabled: boolean; onToggle: () => void }) { + return ( +
+
+
{t("settings.opencode_section_label")}
+
{t("settings.opencode_engine_desc")}
+
+ +
+
+
{t("settings.enable_exa")}
+
{t("settings.enable_exa_desc")}
+ +
-
{t("settings.exa_restart_hint")}
+
{t("settings.exa_restart_hint")}
+
+ ); +} + +function AdvancedFeatureFlagsSection(props: { + busy: boolean; + microsandboxCreateSandboxEnabled: boolean; + onToggleMicrosandboxCreateSandbox: () => void; +}) { + return ( +
+
+
Feature flags
+
Experimental controls for sandbox and workspace behaviors.
-
-
-
Feature flags
-
- Experimental controls for sandbox and workspace behaviors. +
+
+
Create Sandbox uses microsandbox image
+
+ When enabled, Create Sandbox launches the detached worker with the microsandbox image flow instead of the default Docker image flow.
+ +
+
+ ); +} -
-
-
Create Sandbox uses microsandbox image
-
- When enabled, Create Sandbox launches the detached worker with the microsandbox image - flow instead of the default Docker image flow. -
-
- +function AdvancedDeveloperSection(props: { + busy: boolean; + developerMode: boolean; + opencodeDevModeEnabled: boolean; + deepLinkOpen: boolean; + deepLinkInput: string; + deepLinkBusy: boolean; + deepLinkStatus: string | null; + onToggleDeveloperMode: () => void; + onToggleDeepLink: () => void; + onDeepLinkInput: (input: string) => void; + onSubmitDeepLink: () => Promise; +}) { + return ( +
+
{t("settings.developer_mode_title")}
+
{t("settings.developer_mode_desc")}
+
+ +
+ {props.developerMode ? t("settings.developer_panel_enabled") : t("settings.developer_panel_disabled")}
-
-
{t("settings.developer_mode_title")}
-
{t("settings.developer_mode_desc")}
-
- -
- {props.developerMode - ? t("settings.developer_panel_enabled") - : t("settings.developer_panel_disabled")} + {isDesktopRuntime() && props.opencodeDevModeEnabled && props.developerMode ? ( +
+
+
+
{t("settings.open_deeplink_title")}
+
{t("settings.open_deeplink_desc")}
+
+
-
- {isDesktopRuntime() && props.opencodeDevModeEnabled && props.developerMode ? ( -
-
-
-
{t("settings.open_deeplink_title")}
-
{t("settings.open_deeplink_desc")}
+ {props.deepLinkOpen ? ( +
+