Function SettingsDrawer

ui/src/appComponents/SettingsDrawer.tsx:70–467

({
  onClose,
  onGraphCleared,
  onLimitsChanged,
  onAnimationSettingsChanged,
}: SettingsDrawerProps)

}

export default function SettingsDrawer({
  onClose,
  onGraphCleared,
  onLimitsChanged,
  onAnimationSettingsChanged,
}: SettingsDrawerProps) {
  const { store } = useStore();
  const panelRef = useRef<HTMLDivElement>(null);
  const { width: panelWidth, handleMouseDown } = useResizablePanel({
    storageKey: 'ot_settings_drawer_width',
    defaultWidth: 420,
    minWidth: 360,
    maxWidth: 700,
    side: 'left',
    panelRef,
  });
  const [clearing, setClearing] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [summaryStrategy, setSummaryStrategy] =
    useState<SummarizationStrategyType>(loadSummarizerStrategy);
  const [llmConfig, setLlmConfig] = useState(loadSummarizerLlmConfig);
  const [llmModels, setLlmModels] = useState<string[] | null>(null);
  const [llmModelsFetching, setLlmModelsFetching] = useState(false);
  // String state so intermediate keystrokes (typing "4" before "000") are
  // not clamped to `min` while still in flight. Parsed/clamped only when
  // the user commits by clicking "Update".
  const [maxNodesText, setMaxNodesText] = useState(() =>
    String(loadLimit(LS_KEY_NODES, DEFAULT_MAX_NODES)),
  );
  const [maxEdgesText, setMaxEdgesText] = useState(() =>
    String(loadLimit(LS_KEY_EDGES, DEFAULT_MAX_EDGES)),
  );
  const [animSettings, setAnimSettings] = useState(loadAnimationSettings);

  const handleAnimToggle = (key: keyof AnimationSettings) => {
    const next = { ...animSettings, [key]: !animSettings[key] };
    setAnimSettings(next);
    saveAnimationSetting(key, next[key]);
    onAnimationSettingsChanged?.(next);
  };

  const handleClear = async () => {
    setClearing(true);
    setError(null);
    try {
      await store.clearGraph();
      setConfirmOpen(false);
      onGraphCleared();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to clear graph');
    } finally {
      setClearing(false);
    }
  };

  const handleStrategyChange = (strategy: SummarizationStrategyType) => {
    setSummaryStrategy(strategy);