commands/config/ — Configuration Management Commands

Contents

Architecture

flowchart TD
  CMD["/config command"] -->|"load()"| ENTRY["config.tsx"]
  ENTRY -->|"call()"| SETTINGS["<Settings />"]
  SETTINGS --> CONFIG["<Config />"]
  CONFIG --> SEARCH["<SearchBox />"]
  CONFIG --> LIST["Settings List"]
  CONFIG --> SUB{"Submenu?"}
  SUB -->|Theme| TP["<ThemePicker />"]
  SUB -->|Model| MP["<ModelPicker />"]
  SUB -->|OutputStyle| OP["<OutputStylePicker />"]
  SUB -->|Language| LP["<LanguagePicker />"]
  SUB -->|ExternalIncludes| EI["<ClaudeMdExternalIncludesDialog />"]
  SUB -->|AutoUpdates| AU["<Dialog />"]
  CONFIG -->|"save"| GC["getGlobalConfig() / saveGlobalConfig()"]
  CONFIG -->|"save"| SS["updateSettingsForSource()"]
  CONFIG -->|"save"| AS["setAppState()"]

State & Persistence Flow

flowchart LR
  USER["User toggles setting"] --> HANDLER["onChange handler"]
  HANDLER --> GC["saveGlobalConfig()"]
  HANDLER --> SRC["updateSettingsForSource()"]
  HANDLER --> APP["setAppState()"]
  HANDLER --> CHG["setChanges()"]
  GC --> FILE1["~/.claude/config.json"]
  SRC --> FILE2["localSettings / userSettings"]
  APP --> MEM["In-Memory AppState"]
  CHG --> DIRTY["isDirty ref = true"]
  ESC["User presses Escape"] --> REVERT["revertChanges()"]
  REVERT --> SNAP1["Restore initialConfig"]
  REVERT --> SNAP2["Restore initialOutputStyle"]
  REVERT --> SNAP3["Restore initialAppState"]

Key Classes & Functions

Data Structures

Interactions

Configuration

Settings Categories (38 items)

Directory Map

config/
├── index.ts              ← Command registration (type: 'local-jsx', aliases: ['settings'])
└── config.tsx            ← Full implementation: Settings, Config components (~2356 lines)

Deep-Dive Highlights

Core mechanisms from this sub-module have been extracted into dedicated focus areas for in-depth exploration.

Code Examples

Example 1: Command Entry Point & Registration

// index.ts — Command registration
import type { Command } from '../../commands.js'

const config = {
  aliases: ['settings'],
  type: 'local-jsx',
  name: 'config',
  description: 'Open config panel',
  load: () => import('./config.js'),
} satisfies Command

export default config

// config.tsx — Entry point
export const call: LocalJSXCommandCall = async (onDone, context) => {
  return <Settings onClose={onDone} context={context} defaultTab="Config" />
}

Example 2: Model Change Handler with Analytics

// config.tsx — onChangeMainModelConfig (simplified)
function onChangeMainModelConfig(value: string | null): void {
  const previousModel = mainLoopModel

  // Track model change analytics
  logEvent('tengu_config_model_changed', {
    from_model: previousModel,
    to_model: value,
  })

  // Update session state
  setAppState(prev => ({
    ...prev,
    mainLoopModel: value,
    mainLoopModelForSession: null,
  }))

  // Record change for summary display
  const displayName = modelDisplayString(value)
  const billingNote = isBilledAsExtraUsage(value, currentPlan)
    ? ' · Billed as extra usage'
    : ''
  setChanges(prev => ({ ...prev, model: displayName + billingNote }))
}

Example 3: Revert on Escape (Snapshot Restore)

// config.tsx — revertChanges
function revertChanges(): void {
  if (!isDirty.current) return

  // Restore all snapshots taken at panel open
  saveGlobalConfig(() => initialConfig.current)
  setGlobalConfig(initialConfig.current)
  setCurrentOutputStyle(initialOutputStyle.current)
  setCurrentLanguage(initialLanguage.current)
  setTheme(initialThemeSetting.current)

  // Restore per-source settings
  updateSettingsForSource('localSettings', initialLocalSettings)
  updateSettingsForSource('userSettings', initialUserSettings)

  // Restore session state
  setAppState(initialAppState)
  setUserMsgOptIn(initialUserMsgOptIn)

  // Clear change tracking
  setChanges({})
}