⚙️ Settings Panel Cheatsheet

🎯 Context

  • Goal: Safe, compact Settings UX.
  • Tech: api.js, ui.js, localStorage.

🛠️ Action Plan

  • 🎨 Design: Map config to OpenRouter payloads.
  • 💻 UX: Quick Help settings with “Reset” & “Advanced” toggle.
  • 💾 Persistence: Versioned, validated & clamped localStorage.

♿ UI & Accessibility Guidelines

  • 📁 Layout: Settings mega-panel structured as collapsible intent groups / accordion disclosures.

  • 🔄 Focus Lifecycle: Trap focus inside the settings panel. Loop focus via Tab/Shift+Tab and restore focus to the trigger on close. Escape key closes the panel.

  • 📐 Hit Targets: Minimum target size of 24x24px with spacing (44x44px on coarse pointers).

  • 🤖 Model: anthropic/claude-3-haiku (Default), openai/gpt-4o-mini, mistral/mistral-small.

  • 🌡️ temperature: 0.0 - 2.0 (Default: 0.3). XOR with top_p.

  • 🎯 top_p: 0.0 - 1.0 (Default: 1.0). XOR with temperature.

  • 🔢 max_tokens: 64 - 2048 (Default: 800).

  • 🛑 stop_sequences: Strings array (Default: []).

  • 🚫 frequency_penalty: 0.0 - 2.0 (Default: 0.0). XOR with presence.

  • presence_penalty: 0.0 - 2.0 (Default: 0.0). XOR with frequency.

  • 🎚️ use_temperature: Toggle (Default: true).

  • 🎚️ use_top_p: Toggle (Default: false).

  • 🎚️ use_frequency_penalty: Toggle (Default: false).

  • 🎚️ use_presence_penalty: Toggle (Default: false).

🚨 Validation & Telemetry

  • 🔒 Guards: Strict XOR validation (temp/top_p & freq/pres). Clamp inputs. Warn when max_tokens is too low for tree depth.
  • 📈 Logs: Print settings to debug log; log changes as events (never prompts).