Method execute

src/tools/frontend/design-tools.ts:215–287

(args: z.infer<typeof FindUiComponentsArgs>, ctx: ToolContext)

  argsSchema = FindUiComponentsArgs;

  async execute(args: z.infer<typeof FindUiComponentsArgs>, ctx: ToolContext): Promise<ToolResult> {
    const root = args.path ? path.join(ctx.cwd, args.path) : ctx.cwd;
    const maxFiles = args.max_files ?? 5000;
    const files = await walkFiles(root, new Set(['.tsx', '.jsx', '.vue', '.svelte', '.astro']), maxFiles);

    interface Comp { name: string; file: string; props: string[]; usage: number }
    const comps = new Map<string, Comp>();

    // Pass 1: extract component declarations from each file
    for (const f of files) {
      const isReact = f.rel.endsWith('.tsx') || f.rel.endsWith('.jsx');
      if (isReact) {
        // export default function X / export function X / const X = () => / const X: FC<...> =
        const re = /(?:export\s+(?:default\s+)?(?:function|const)\s+([A-Z][A-Za-z0-9_]*)|(?:^|\n)const\s+([A-Z][A-Za-z0-9_]*)\s*=)/g;
        const seen = new Set<string>();
        let m;
        while ((m = re.exec(f.content)) !== null) {
          const name = m[1] || m[2]!;
          if (seen.has(name)) continue;
          seen.add(name);
          // Extract props from immediate interface or type alias above the function
          const propsRe = new RegExp(`(?:interface|type)\\s+${name}Props\\s*=?\\s*\\{([\\s\\S]*?)\\n\\}`);
          const pm = propsRe.exec(f.content);
          const props: string[] = [];
          if (pm) {
            const lines = pm[1]!.split('\n').slice(0, 20);
            for (const l of lines) {
              const pl = l.trim();
              if (!pl || pl.startsWith('//') || pl.startsWith('*')) continue;
              const propName = pl.split(/[:?]/)[0]?.trim();
              if (propName && /^[a-zA-Z_$]/.test(propName)) props.push(propName);
            }
          }
          if (!comps.has(name)) comps.set(name, { name, file: f.rel, props, usage: 0 });
        }
      } else if (f.rel.endsWith('.vue') || f.rel.endsWith('.svelte') || f.rel.endsWith('.astro')) {
        const base = path.basename(f.rel).replace(/\.(vue|svelte|astro)$/, '');
        if (/^[A-Z]/.test(base) && !comps.has(base)) {
          comps.set(base, { name: base, file: f.rel, props: [], usage: 0 });
        }
      }
    }

    // Pass 2: count usage — `<ComponentName` in each file
    for (const f of files) {
      for (const [name, c] of comps) {
        if (f.rel === c.file) continue;
        const re = new RegExp(`<${name}[\\s/>]`, 'g');
        const matches = f.content.match(re);
        if (matches) c.usage += matches.length;
      }
    }

    const arr = Array.from(comps.values()).sort((a, b) => b.usage - a.usage);
    const out: string[] = [];
    out.push(`# UI Components (${arr.length})`);
    out.push('');
    out.push(`## Most used (top 30)`);