docs: add context gathering rule and update existing rules
- Create comprehensive context_gathering.mdc rule documenting ContextGatherer utility patterns, FuzzyTaskSearch integration, token breakdown display, code block syntax highlighting, and enhanced result display patterns - Update new_features.mdc to include context gathering step - Update commands.mdc with context-aware command pattern - Update ui.mdc with enhanced display patterns and syntax highlighting - Update utilities.mdc to document new context gathering utilities - Update glossary.mdc to include new context_gathering rule - Establishes standardized patterns for building intelligent, context-aware commands that can leverage project knowledge for better AI assistance
This commit is contained in:
@@ -150,4 +150,91 @@ alwaysApply: false
|
||||
));
|
||||
```
|
||||
|
||||
Refer to [`ui.js`](mdc:scripts/modules/ui.js) for implementation examples and [`new_features.mdc`](mdc:.cursor/rules/new_features.mdc) for integration guidelines.
|
||||
## Enhanced Display Patterns
|
||||
|
||||
### **Token Breakdown Display**
|
||||
- Use detailed, granular token breakdowns for AI-powered commands
|
||||
- Display context sources with individual token counts
|
||||
- Show both token count and character count for transparency
|
||||
|
||||
```javascript
|
||||
// ✅ DO: Display detailed token breakdown
|
||||
function displayDetailedTokenBreakdown(tokenBreakdown, systemTokens, userTokens) {
|
||||
const sections = [];
|
||||
|
||||
if (tokenBreakdown.tasks?.length > 0) {
|
||||
const taskDetails = tokenBreakdown.tasks.map(task =>
|
||||
`${task.type === 'subtask' ? ' ' : ''}${task.id}: ${task.tokens.toLocaleString()}`
|
||||
).join('\n');
|
||||
sections.push(`Tasks (${tokenBreakdown.tasks.reduce((sum, t) => sum + t.tokens, 0).toLocaleString()}):\n${taskDetails}`);
|
||||
}
|
||||
|
||||
const content = sections.join('\n\n');
|
||||
console.log(boxen(content, {
|
||||
title: chalk.cyan('Token Usage'),
|
||||
padding: { top: 1, bottom: 1, left: 2, right: 2 },
|
||||
borderStyle: 'round',
|
||||
borderColor: 'cyan'
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
### **Code Block Syntax Highlighting**
|
||||
- Use `cli-highlight` library for syntax highlighting in terminal output
|
||||
- Process code blocks in AI responses for better readability
|
||||
|
||||
```javascript
|
||||
// ✅ DO: Enhance code blocks with syntax highlighting
|
||||
import { highlight } from 'cli-highlight';
|
||||
|
||||
function processCodeBlocks(text) {
|
||||
return text.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, language, code) => {
|
||||
try {
|
||||
const highlighted = highlight(code.trim(), {
|
||||
language: language || 'javascript',
|
||||
theme: 'default'
|
||||
});
|
||||
return `\n${highlighted}\n`;
|
||||
} catch (error) {
|
||||
return `\n${code.trim()}\n`;
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### **Multi-Section Result Display**
|
||||
- Use separate boxes for headers, content, and metadata
|
||||
- Maintain consistent styling across different result types
|
||||
|
||||
```javascript
|
||||
// ✅ DO: Use structured result display
|
||||
function displayResults(result, query, detailLevel) {
|
||||
// Header with query info
|
||||
const header = boxen(
|
||||
chalk.green.bold('Research Results') + '\n\n' +
|
||||
chalk.gray('Query: ') + chalk.white(query) + '\n' +
|
||||
chalk.gray('Detail Level: ') + chalk.cyan(detailLevel),
|
||||
{
|
||||
padding: { top: 1, bottom: 1, left: 2, right: 2 },
|
||||
margin: { top: 1, bottom: 0 },
|
||||
borderStyle: 'round',
|
||||
borderColor: 'green'
|
||||
}
|
||||
);
|
||||
console.log(header);
|
||||
|
||||
// Process and display main content
|
||||
const processedResult = processCodeBlocks(result);
|
||||
const contentBox = boxen(processedResult, {
|
||||
padding: { top: 1, bottom: 1, left: 2, right: 2 },
|
||||
margin: { top: 0, bottom: 1 },
|
||||
borderStyle: 'single',
|
||||
borderColor: 'gray'
|
||||
});
|
||||
console.log(contentBox);
|
||||
|
||||
console.log(chalk.green('✓ Operation complete'));
|
||||
}
|
||||
```
|
||||
|
||||
Refer to [`ui.js`](mdc:scripts/modules/ui.js) for implementation examples, [`context_gathering.mdc`](mdc:.cursor/rules/context_gathering.mdc) for context display patterns, and [`new_features.mdc`](mdc:.cursor/rules/new_features.mdc) for integration guidelines.
|
||||
Reference in New Issue
Block a user