You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Add tools and commands directories with individual documentation files
- Update SUMMARY.md to list all tools and commands alphabetically
- Fix links in tool-system-deep-dive.md and command-system-deep-dive.md
- Update contact information and consulting section in README.md
📤 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
Copy file name to clipboardExpand all lines: src/command-system-deep-dive.md
+35-60Lines changed: 35 additions & 60 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,77 +4,52 @@ The Claude Code command system provides a suite of slash commands that users can
4
4
5
5
Commands are integrated into the CLI through the Commander.js library and follow a consistent structure for both CLI arguments and interactive slash commands. The command system allows Claude Code to extend beyond simple conversational capabilities into a fully-featured developer tool.
6
6
7
-
### approvedTools Command
7
+
### Command Categories
8
8
9
-
The `approvedTools` command manages which tools Claude has permission to use in a given project.
9
+
Claude Code's commands can be broadly categorized into several functional groups:
10
10
11
-
#### Implementation
12
-
13
-
This command is implemented in `commands/approvedTools.ts` and provides functionality to list and remove tools from the approved list. The implementation uses a simple handler pattern with two key functions:
14
-
15
-
1.`handleListApprovedTools`: Lists all tools that are approved for use in the current directory.
16
-
2.`handleRemoveApprovedTool`: Removes a specific tool from the approved list.
17
-
18
-
The command follows a configurable pattern that supports dependency injection:
-`claude approved-tools list` - To list all approved tools
69
-
-`claude approved-tools remove <tool>` - To remove a specific tool from the approved list
41
+
#### Analytics
42
+
-[cost](commands/cost.md): Track API usage and expenses
70
43
71
-
#### Security Implications
44
+
###Command Implementation Structure
72
45
73
-
The `approvedTools`command plays an important security role in Claude Code's permission system. It allows users to revoke permissions for specific tools, providing a mechanism to limit what Claude can do in a project. This is particularly important for tools that have the potential to modify files or execute commands.
46
+
Each command follows a consistent structure and typically falls into one of these implementation types:
74
47
75
-
### bug Command
48
+
1.**Local Commands** (`type: 'local'`): Perform direct actions without rendering a UI
The `approvedTools` command manages which tools Claude has permission to use in a given project.
4
+
5
+
#### Implementation
6
+
7
+
This command is implemented in `commands/approvedTools.ts` and provides functionality to list and remove tools from the approved list. The implementation uses a simple handler pattern with two key functions:
8
+
9
+
1.`handleListApprovedTools`: Lists all tools that are approved for use in the current directory.
10
+
2.`handleRemoveApprovedTool`: Removes a specific tool from the approved list.
11
+
12
+
The command follows a configurable pattern that supports dependency injection:
This design makes the command testable by allowing the injection of mock config handlers.
28
+
29
+
#### CLI Integration
30
+
31
+
In `cli.tsx`, the command is registered as a subcommand under the main `claude` command:
32
+
33
+
```typescript
34
+
const allowedTools =program
35
+
.command("approved-tools")
36
+
.description("Manage approved tools");
37
+
38
+
allowedTools
39
+
.command("list")
40
+
.description("List all approved tools")
41
+
.action(async () => {
42
+
const result =handleListApprovedTools(getCwd());
43
+
console.log(result);
44
+
process.exit(0);
45
+
});
46
+
47
+
allowedTools
48
+
.command("remove <tool>")
49
+
.description("Remove a tool from the list of approved tools")
50
+
.action(async (tool:string) => {
51
+
const result =handleRemoveApprovedTool(tool);
52
+
logEvent("tengu_approved_tool_remove", {
53
+
tool,
54
+
success: String(result.success),
55
+
});
56
+
console.log(result.message);
57
+
process.exit(result.success?0:1);
58
+
});
59
+
```
60
+
61
+
This allows users to use commands like:
62
+
63
+
-`claude approved-tools list` - To list all approved tools
64
+
-`claude approved-tools remove <tool>` - To remove a specific tool from the approved list
65
+
66
+
#### Security Implications
67
+
68
+
The `approvedTools` command plays an important security role in Claude Code's permission system. It allows users to revoke permissions for specific tools, providing a mechanism to limit what Claude can do in a project. This is particularly important for tools that have the potential to modify files or execute commands.
description: `Submit feedback about ${PRODUCT_NAME}`,
19
+
isEnabled: true,
20
+
isHidden: false,
21
+
async call(onDone) {
22
+
return <BugonDone={onDone} />;
23
+
},
24
+
userFacingName() {
25
+
return"bug";
26
+
},
27
+
} satisfiesCommand;
28
+
29
+
exportdefaultbug;
30
+
```
31
+
32
+
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.
33
+
34
+
#### UI Component
35
+
36
+
The core functionality is housed in the `Bug` component in `components/Bug.tsx`. Key aspects of this component include:
37
+
38
+
1.**Multi-Step Form**: The UI guides users through a multi-step process:
39
+
40
+
- User input (description of the bug)
41
+
- Consent for information collection
42
+
- Submission
43
+
- Completion
44
+
45
+
2.**Information Collection**: The component collects:
46
+
47
+
- User-provided bug description
48
+
- Environment information (platform, terminal, version)
49
+
- Git repository metadata (disabled in the current implementation)
50
+
- Model settings (without API keys)
51
+
52
+
3.**GitHub Integration**: After submission, users can create a GitHub issue with pre-filled information including:
53
+
54
+
- Bug description
55
+
- Environment info
56
+
- Model settings
57
+
58
+
4.**Privacy Considerations**: The component has been carefully designed to avoid collecting sensitive information:
59
+
- No API keys are included
60
+
- Personal identifiers have been removed
61
+
- Direct submission to Anthropic's feedback endpoint has been commented out
62
+
63
+
#### Technical Features
64
+
65
+
Several technical aspects of the implementation are worth noting:
66
+
67
+
1.**Stateful Form Management**: Uses React's `useState` to manage the form state through multiple steps.
68
+
69
+
2.**Terminal Adaptation**: Adapts to terminal size using the `useTerminalSize` hook to ensure a good experience regardless of window size.
70
+
71
+
3.**Keyboard Navigation**: Implements customized keyboard handling with `useInput` from Ink to enable intuitive navigation.
72
+
73
+
4.**Error Handling**: Includes robust error handling for submission failures.
74
+
75
+
5.**Title Generation**: Originally included a capability to generate a concise title for the bug report using Claude's Haiku endpoint (currently commented out).
76
+
77
+
6.**Browser Integration**: Uses the `openBrowser` utility to open the user's default web browser to the GitHub issues page with pre-filled information.
78
+
79
+
#### Design Considerations
80
+
81
+
The bug command exemplifies several design principles of Claude Code's command system:
82
+
83
+
1.**Rich Terminal UI**: Unlike traditional CLI tools that might just accept arguments, the command provides a fully interactive experience with visual feedback.
84
+
85
+
2.**Progressive Disclosure**: Information about what will be collected is clearly shown before submission.
86
+
87
+
3.**Simple Escape Paths**: Users can easily cancel at any point using Escape or Ctrl+C/D.
88
+
89
+
4.**Clear Status Indicators**: The UI clearly shows the current step and available actions at all times.
90
+
91
+
This command demonstrates how Claude Code effectively leverages React and Ink to create sophisticated terminal user interfaces for commands that require complex interaction.
0 commit comments