config Command

The config command provides an interactive terminal interface for viewing and editing Claude Code's configuration settings, including model settings, UI preferences, and API keys.

Implementation

The command is implemented in commands/config.tsx as a type: 'local-jsx' command that renders a React component:

import { Command } from "../commands";
import { Config } from "../components/Config";
import * as React from "react";

const config = {
  type: "local-jsx",
  name: "config",
  description: "Open config panel",
  isEnabled: true,
  isHidden: false,
  async call(onDone) {
    return <Config onClose={onDone} />;
  },
  userFacingName() {
    return "config";
  },
} satisfies Command;

export default config;

Like the bug command, this command uses JSX to render an interactive UI component. The actual functionality is implemented in the Config component located in components/Config.tsx.

UI Component

The Config component implements a rich terminal-based settings interface with the following features:

  1. Settings Management: Displays a list of configurable settings with their current values.

  2. Multiple Setting Types: Supports various setting types:

    • boolean: Toggle settings (true/false)
    • enum: Options from a predefined list
    • string: Text input values
    • number: Numeric values

  3. Interactive Editing: Allows users to:

    • Navigate settings with arrow keys
    • Toggle boolean and enum settings with Enter/Space
    • Edit string and number settings with a text input mode
    • Exit configuration with Escape

  4. Configuration Persistence: Saves settings to a configuration file using saveGlobalConfig.

Configuration Options

The component exposes numerous configuration options, including:

  1. Model Configuration:

    • AI Provider selection (anthropic, openai, custom)
    • API keys for small and large models
    • Model names for both small and large models
    • Base URLs for API endpoints
    • Max token settings
    • Reasoning effort levels

  2. User Interface:

    • Theme selection (light, dark, light-daltonized, dark-daltonized)
    • Verbose output toggle

  3. System Settings:

    • Notification preferences
    • HTTP proxy configuration

Technical Implementation Notes

The Config component demonstrates several advanced patterns:

  1. State Management: Uses React's useState to track:

    • Current configuration state
    • Selected setting index
    • Editing mode state
    • Current input text
    • Input validation errors

  2. Reference Comparison: Maintains a reference to the initial configuration using useRef to track changes.

  3. Keyboard Input Handling: Implements sophisticated keyboard handling for navigation and editing:

    • Arrow keys for selection
    • Enter/Space for toggling/editing
    • Escape for cancellation
    • Input handling with proper validation

  4. Input Sanitization: Cleans input text to prevent control characters and other problematic input.

  5. Visual Feedback: Provides clear visual indication of:

    • Currently selected item
    • Editing state
    • Input errors
    • Available actions

  6. Change Tracking: Tracks and logs configuration changes when exiting.

User Experience Design

The config component showcases several UI/UX design principles for terminal applications:

  1. Modal Interface: Creates a focused settings panel that temporarily takes over the terminal.

  2. Progressive Disclosure: Shows relevant controls and options based on the current state.

  3. Clear Instructions: Displays context-sensitive help text at the bottom of the interface.

  4. Visual Highlighting: Uses color and indicators to show the current selection and editing state.

  5. Immediate Feedback: Changes take effect immediately, with visual confirmation.

  6. Multiple Input Methods: Supports keyboard navigation, toggling, and text input in a unified interface.

  7. Safe Editing: Provides validation and escape routes for configuration editing.

The config command demonstrates how Claude Code effectively combines the simplicity of terminal interfaces with the rich interaction capabilities typically associated with graphical applications, creating a powerful yet accessible configuration experience.