Houtini-lm

Instructions

Implementation Reference

• src/prompts/analyze/find-unused-css.ts:121-146 (handler)

  Main handler entry point: wraps execution in security, detects analysis mode (URL/single-file/multi-file), validates params, sets up LLM model, routes to specific analysis implementations, handles errors.

  async execute(params: any, llmClient: any) {
    return await withSecurity(this, params, llmClient, async (secureParams) => {
      try {
        // 1. Auto-detect analysis mode based on parameters
        const analysisMode = this.detectAnalysisMode(secureParams);
        
        // 2. Validate parameters based on detected mode
        this.validateParameters(secureParams, analysisMode);
        
        // 3. Setup model
        const { model, contextLength } = await ModelSetup.getReadyModel(llmClient);
        
        // 4. Route to appropriate analysis method
        if (analysisMode === 'url') {
          return await this.executeURLAnalysis(secureParams, model, contextLength);
        } else if (analysisMode === 'single-file') {
          return await this.executeSingleFileAnalysis(secureParams, model, contextLength);
        } else {
          return await this.executeMultiFileAnalysis(secureParams, model, contextLength);
        }
        
      } catch (error: any) {
        return ErrorHandler.createExecutionError('find_unused_css', error);
      }
    });
  }

• src/prompts/analyze/find-unused-css.ts:27-112 (schema)

  Comprehensive input schema defining parameters for URL analysis, single/multi-file CSS analysis, and various options like depth, type, media queries.

  // Universal parameter set - supports both URL and local file scenarios
  parameters = {
    // URL analysis
    url: {
      type: 'string' as const,
      description: 'URL to analyze for CSS usage (single page)',
      required: false
    },
    
    // Single-file parameters
    cssPath: {
      type: 'string' as const,
      description: 'Path to CSS file to analyze',
      required: false
    },
    htmlPath: {
      type: 'string' as const,
      description: 'Path to HTML file to check CSS usage against',
      required: false
    },
    code: {
      type: 'string' as const,
      description: 'CSS code to analyze (for single-code analysis)',
      required: false
    },
    
    // Multi-file parameters  
    projectPath: {
      type: 'string' as const,
      description: 'Path to project directory containing HTML/CSS files',
      required: false
    },
    files: {
      type: 'array' as const,
      description: 'Specific HTML/CSS file paths to analyze',
      required: false,
      items: { type: 'string' as const }
    },
    maxDepth: {
      type: 'number' as const,
      description: 'Maximum directory depth for file discovery',
      required: false,
      default: 3
    },
    
    // Analysis options
    analysisDepth: {
      type: 'string' as const,
      description: 'Level of analysis detail',
      enum: ['basic', 'detailed', 'comprehensive'],
      default: 'detailed',
      required: false
    },
    analysisType: {
      type: 'string' as const,
      description: 'Type of CSS analysis to perform',
      enum: ['performance', 'usage', 'comprehensive'],
      default: 'comprehensive',
      required: false
    },
    includeMediaQueries: {
      type: 'boolean' as const,
      description: 'Include media query analysis',
      default: true,
      required: false
    },
    ignorePseudoSelectors: {
      type: 'boolean' as const,
      description: 'Ignore pseudo-selectors like :hover, :focus',
      default: false,
      required: false
    },
    
    // Compatibility
    language: {
      type: 'string' as const,
      description: 'File language (css, html)',
      required: false,
      default: 'css'
    },
    filePath: {
      type: 'string' as const,
      description: 'Path to CSS file to analyze',
      required: false
    }
  };

• src/prompts/analyze/find-unused-css.ts:23-24 (registration)

  Plugin metadata registration: sets the tool name 'find_unused_css' and category 'analyze', used for dynamic loading and MCP tool registration via getToolDefinition().

  name = 'find_unused_css';
  category = 'analyze' as const;

• src/prompts/analyze/find-unused-css.ts:196-238 (helper)

  URL-specific handler: uses Puppeteer to extract live CSS rules and usage from webpage, processes with CSS parser, generates specialized prompts, executes with chunking if needed.

  private async executeURLAnalysis(params: any, model: any, contextLength: number) {
    // Step 1: Extract data from URL using Puppeteer
    const urlData = await this.extractURLDataWithPuppeteer(params.url);
    
    // Step 2: Process CSS with our utility
    const processedCSSData = this.processCSSData(urlData);
    
    // Step 3: Generate prompt stages for Houtini LM
    const promptStages = this.getURLAnalysisPromptStages({
      ...params,
      urlData: processedCSSData
    });
    
    // Step 4: Execute with proper chunking
    const promptManager = new ThreeStagePromptManager();
    const needsChunking = TokenCalculator.needsChunking(promptStages, contextLength);
    
    if (needsChunking) {
      const chunkSize = TokenCalculator.calculateOptimalChunkSize(promptStages, contextLength);
      const dataChunks = promptManager.chunkDataPayload(promptStages.dataPayload, chunkSize);
      const conversation = promptManager.createChunkedConversation(promptStages, dataChunks);
      const messages = [
        conversation.systemMessage,
        ...conversation.dataMessages,
        conversation.analysisMessage
      ];
      
      return await ResponseProcessor.executeChunked(
        messages,
        model,
        contextLength,
        'find_unused_css',
        'single'
      );
    } else {
      return await ResponseProcessor.executeDirect(
        promptStages,
        model,
        contextLength,
        'find_unused_css'
      );
    }
  }

• src/prompts/analyze/find-unused-css.ts:243-295 (helper)

  Single-file handler: reads CSS/HTML files, parses selectors, detects usage against HTML, computes stats, generates prompts, executes LLM analysis.

  private async executeSingleFileAnalysis(params: any, model: any, contextLength: number) {
    // Step 1: Process CSS input
    let cssContent = params.code;
    if (params.cssPath || params.filePath) {
      const filePath = params.cssPath || params.filePath;
      cssContent = await readFileContent(filePath);
    }
  
    // Step 2: Process optional HTML input
    let htmlContent = '';
    if (params.htmlPath) {
      htmlContent = await readFileContent(params.htmlPath);
    }
    
    // Step 3: Process with CSS Parser utility
    const processedData = this.processLocalCSSData(cssContent, htmlContent, params);
    
    // Step 4: Generate prompt stages
    const promptStages = this.getSingleFilePromptStages({
      ...params,
      processedData
    });
    
    // Step 5: Execute with proper chunking
    const promptManager = new ThreeStagePromptManager();
    const needsChunking = TokenCalculator.needsChunking(promptStages, contextLength);
    
    if (needsChunking) {
      const chunkSize = TokenCalculator.calculateOptimalChunkSize(promptStages, contextLength);
      const dataChunks = promptManager.chunkDataPayload(promptStages.dataPayload, chunkSize);
      const conversation = promptManager.createChunkedConversation(promptStages, dataChunks);
      const messages = [
        conversation.systemMessage,
        ...conversation.dataMessages,
        conversation.analysisMessage
      ];
      
      return await ResponseProcessor.executeChunked(
        messages,
        model,
        contextLength,
        'find_unused_css',
        'single'
      );
    } else {
      return await ResponseProcessor.executeDirect(
        promptStages,
        model,
        contextLength,
        'find_unused_css'
      );
    }
  }