bug Command

The bug command provides users with a way to submit bug reports and feedback directly from the CLI interface.

Implementation

The command is implemented in commands/bug.tsx and leverages React components to create an interactive feedback form:

import { Command } from "../commands";
import { Bug } from "../components/Bug";
import * as React from "react";
import { PRODUCT_NAME } from "../constants/product";

const bug = {
  type: "local-jsx",
  name: "bug",
  description: `Submit feedback about ${PRODUCT_NAME}`,
  isEnabled: true,
  isHidden: false,
  async call(onDone) {
    return <Bug onDone={onDone} />;
  },
  userFacingName() {
    return "bug";
  },
} satisfies Command;

export default bug;

Unlike pure command-line commands, this command uses the type: 'local-jsx' designation, which allows it to render a React component as its output. This enables a rich, interactive interface for gathering bug reports.

UI Component

The core functionality is housed in the Bug component in components/Bug.tsx. Key aspects of this component include:

  1. Multi-Step Form: The UI guides users through a multi-step process:

    • User input (description of the bug)
    • Consent for information collection
    • Submission
    • Completion

  2. Information Collection: The component collects:

    • User-provided bug description
    • Environment information (platform, terminal, version)
    • Git repository metadata (disabled in the current implementation)
    • Model settings (without API keys)

  3. GitHub Integration: After submission, users can create a GitHub issue with pre-filled information including:

    • Bug description
    • Environment info
    • Model settings

  4. Privacy Considerations: The component has been carefully designed to avoid collecting sensitive information:

    • No API keys are included
    • Personal identifiers have been removed
    • Direct submission to Anthropic's feedback endpoint has been commented out

Technical Features

Several technical aspects of the implementation are worth noting:

  1. Stateful Form Management: Uses React's useState to manage the form state through multiple steps.

  2. Terminal Adaptation: Adapts to terminal size using the useTerminalSize hook to ensure a good experience regardless of window size.

  3. Keyboard Navigation: Implements customized keyboard handling with useInput from Ink to enable intuitive navigation.

  4. Error Handling: Includes robust error handling for submission failures.

  5. Title Generation: Originally included a capability to generate a concise title for the bug report using Claude's Haiku endpoint (currently commented out).

  6. Browser Integration: Uses the openBrowser utility to open the user's default web browser to the GitHub issues page with pre-filled information.

Design Considerations

The bug command exemplifies several design principles of Claude Code's command system:

  1. Rich Terminal UI: Unlike traditional CLI tools that might just accept arguments, the command provides a fully interactive experience with visual feedback.

  2. Progressive Disclosure: Information about what will be collected is clearly shown before submission.

  3. Simple Escape Paths: Users can easily cancel at any point using Escape or Ctrl+C/D.

  4. Clear Status Indicators: The UI clearly shows the current step and available actions at all times.

This command demonstrates how Claude Code effectively leverages React and Ink to create sophisticated terminal user interfaces for commands that require complex interaction.