recker 1.0.9 → 1.0.10-alpha.bf846c8

package/dist/cli/tui/shell.js

@@ -1,5 +1,7 @@
 import readline from 'node:readline';
 import { promises as dns } from 'node:dns';
+import { promises as fs } from 'node:fs';
+import { join } from 'node:path';
 import { requireOptional } from '../../utils/optional-require.js';
 import { createClient } from '../../core/client.js';
 import { startInteractiveWebSocket } from './websocket.js';
@@ -28,6 +30,8 @@ export class RekShell {
     baseUrl = '';
     lastResponse = null;
     variables = {};
+    envVars = {};
+    envLoaded = false;
     initialized = false;
     currentDoc = null;
     currentDocUrl = '';
@@ -81,8 +85,8 @@ export class RekShell {
             'get', 'post', 'put', 'delete', 'patch', 'head', 'options',
             'ws', 'udp', 'load', 'chat', 'ai',
             'whois', 'tls', 'ssl', 'dns', 'rdap', 'ping',
-            'scrap', '$', '$text', '$attr', '$html', '$links', '$images', '$table',
-            'help', 'clear', 'exit', 'set', 'url', 'vars'
+            'scrap', '$', '$text', '$attr', '$html', '$links', '$images', '$scripts', '$css', '$sourcemaps', '$unmap', '$unmap:view', '$unmap:save', '$beautify', '$beautify:save', '$table',
+            'help', 'clear', 'exit', 'set', 'url', 'vars', 'env'
         ];
         const hits = commands.filter((c) => c.startsWith(line));
         return [hits.length ? hits : commands, line];
@@ -137,7 +141,10 @@ export class RekShell {
                 this.setVariable(parts.slice(1));
                 return;
             case 'vars':
-                console.log(this.variables);
+                this.showVars();
+                return;
+            case 'env':
+                await this.loadEnvFile(parts[1]);
                 return;
             case 'load':
                 await this.runLoadTest(parts.slice(1));
@@ -181,7 +188,31 @@ export class RekShell {
                 await this.runSelectLinks(parts[1]);
                 return;
             case '$images':
-                await this.runSelectImages(parts[1]);
+                await this.runSelectImages(parts.slice(1).join(' ') || undefined);
+                return;
+            case '$scripts':
+                await this.runSelectScripts();
+                return;
+            case '$css':
+                await this.runSelectCSS();
+                return;
+            case '$sourcemaps':
+                await this.runSelectSourcemaps();
+                return;
+            case '$unmap':
+                await this.runUnmap(parts.slice(1).join(' '));
+                return;
+            case '$unmap:view':
+                await this.runUnmapView(parts[1] || '');
+                return;
+            case '$unmap:save':
+                await this.runUnmapSave(parts[1] || '');
+                return;
+            case '$beautify':
+                await this.runBeautify(parts.slice(1).join(' '));
+                return;
+            case '$beautify:save':
+                await this.runBeautifySave(parts[1] || '');
                 return;
             case '$table':
                 await this.runSelectTable(parts.slice(1).join(' '));
@@ -332,6 +363,72 @@ export class RekShell {
         this.variables[key] = val;
         console.log(colors.gray(`Variable $${key} set.`));
     }
+    showVars() {
+        const hasVars = Object.keys(this.variables).length > 0;
+        const hasEnvVars = Object.keys(this.envVars).length > 0;
+        if (!hasVars && !hasEnvVars) {
+            console.log(colors.gray('No variables set.'));
+            console.log(colors.gray('Use "set key=value" to set variables or "env" to load .env file.'));
+            return;
+        }
+        if (hasVars) {
+            console.log(colors.bold(colors.yellow('\nSession Variables:')));
+            for (const [key, value] of Object.entries(this.variables)) {
+                console.log(`  ${colors.cyan('$' + key)} = ${colors.green(String(value))}`);
+            }
+        }
+        if (hasEnvVars) {
+            console.log(colors.bold(colors.yellow('\nEnvironment Variables (.env):')));
+            for (const [key, value] of Object.entries(this.envVars)) {
+                const displayValue = key.toLowerCase().includes('key') ||
+                    key.toLowerCase().includes('secret') ||
+                    key.toLowerCase().includes('password') ||
+                    key.toLowerCase().includes('token')
+                    ? colors.gray('***' + value.slice(-4))
+                    : colors.green(value);
+                console.log(`  ${colors.cyan('$' + key)} = ${displayValue}`);
+            }
+        }
+        console.log('');
+    }
+    async loadEnvFile(filePath) {
+        const envPath = filePath || join(process.cwd(), '.env');
+        try {
+            const content = await fs.readFile(envPath, 'utf-8');
+            const lines = content.split('\n');
+            let count = 0;
+            for (const line of lines) {
+                const trimmed = line.trim();
+                if (!trimmed || trimmed.startsWith('#'))
+                    continue;
+                const match = trimmed.match(/^([^=]+)=(.*)$/);
+                if (match) {
+                    const [, key, value] = match;
+                    const cleanKey = key.trim();
+                    let cleanValue = value.trim();
+                    if ((cleanValue.startsWith('"') && cleanValue.endsWith('"')) ||
+                        (cleanValue.startsWith("'") && cleanValue.endsWith("'"))) {
+                        cleanValue = cleanValue.slice(1, -1);
+                    }
+                    this.envVars[cleanKey] = cleanValue;
+                    process.env[cleanKey] = cleanValue;
+                    count++;
+                }
+            }
+            this.envLoaded = true;
+            console.log(colors.green(`✓ Loaded ${count} variables from ${colors.cyan(envPath)}`));
+            console.log(colors.gray('Use "vars" to list all variables.'));
+        }
+        catch (error) {
+            if (error.code === 'ENOENT') {
+                console.log(colors.yellow(`No .env file found at ${envPath}`));
+                console.log(colors.gray('Create a .env file with KEY=value pairs to use this feature.'));
+            }
+            else {
+                console.log(colors.red(`Error loading .env: ${error.message}`));
+            }
+        }
+    }
     resolveVariables(value) {
         if (value.startsWith('$')) {
             const key = value.slice(1);
@@ -346,7 +443,7 @@ export class RekShell {
                 }
                 return String(current);
             }
-            return this.variables[key] || value;
+            return this.variables[key] || this.envVars[key] || process.env[key] || value;
         }
         return value;
     }
@@ -726,15 +823,43 @@ export class RekShell {
             const response = await this.client.get(url);
             const html = await response.text();
             const duration = Math.round(performance.now() - startTime);
-            this.currentDoc = await ScrapeDocument.create(html);
+            this.currentDoc = await ScrapeDocument.create(html, { baseUrl: url });
             this.currentDocUrl = url;
             const elementCount = this.currentDoc.select('*').length;
             const title = this.currentDoc.selectFirst('title').text() || 'No title';
+            const meta = this.currentDoc.meta();
+            const og = this.currentDoc.openGraph();
             console.log(colors.green(`✔ Loaded`) + colors.gray(` (${duration}ms)`));
             console.log(`  ${colors.cyan('Title')}: ${title}`);
             console.log(`  ${colors.cyan('Elements')}: ${elementCount}`);
             console.log(`  ${colors.cyan('Size')}: ${(html.length / 1024).toFixed(1)}kb`);
-            console.log(colors.gray('\n  Use $ <selector> to query, $text, $attr, $links, $images, $table'));
+            if (meta.description) {
+                const desc = meta.description.length > 100 ? meta.description.slice(0, 100) + '...' : meta.description;
+                console.log(`  ${colors.cyan('Description')}: ${desc}`);
+            }
+            const hasOg = og.title || og.description || og.image || og.siteName;
+            if (hasOg) {
+                console.log(colors.bold('\n  OpenGraph:'));
+                if (og.siteName)
+                    console.log(`    ${colors.magenta('Site')}: ${og.siteName}`);
+                if (og.title && og.title !== title)
+                    console.log(`    ${colors.magenta('Title')}: ${og.title}`);
+                if (og.type)
+                    console.log(`    ${colors.magenta('Type')}: ${og.type}`);
+                if (og.description) {
+                    const ogDesc = og.description.length > 80 ? og.description.slice(0, 80) + '...' : og.description;
+                    console.log(`    ${colors.magenta('Description')}: ${ogDesc}`);
+                }
+                if (og.image) {
+                    const images = Array.isArray(og.image) ? og.image : [og.image];
+                    console.log(`    ${colors.magenta('Image')}: ${images[0]}`);
+                    if (images.length > 1)
+                        console.log(colors.gray(`      (+${images.length - 1} more)`));
+                }
+                if (og.url && og.url !== url)
+                    console.log(`    ${colors.magenta('URL')}: ${og.url}`);
+            }
+            console.log(colors.gray('\n  Use $ <selector> to query, $text, $attr, $links, $images, $scripts, $css, $sourcemaps, $table'));
         }
         catch (error) {
             console.error(colors.red(`Scrape failed: ${error.message}`));
@@ -898,30 +1023,586 @@ export class RekShell {
             return;
         }
         try {
-            const imgSelector = selector || 'img[src]';
-            const elements = this.currentDoc.select(imgSelector);
+            const imageExtensions = /\.(png|jpg|jpeg|gif|webp|svg|ico|bmp|tiff|avif)(\?.*)?$/i;
             const images = [];
-            elements.each((el, i) => {
+            const scope = selector ? `${selector} ` : '';
+            this.currentDoc.select(`${scope}img[src]`).each((el) => {
+                const src = el.attr('src');
+                if (src)
+                    images.push({ type: 'img', src, alt: el.attr('alt') });
+            });
+            this.currentDoc.select(`${scope}source[srcset]`).each((el) => {
+                const srcset = el.attr('srcset');
+                if (srcset) {
+                    const src = srcset.split(',')[0].trim().split(' ')[0];
+                    if (src)
+                        images.push({ type: 'source', src });
+                }
+            });
+            this.currentDoc.select(`${scope}[style*="background"]`).each((el) => {
+                const style = el.attr('style') || '';
+                const matches = style.match(/url\(['"]?([^'"()]+)['"]?\)/gi);
+                if (matches) {
+                    matches.forEach(m => {
+                        const src = m.replace(/url\(['"]?|['"]?\)/gi, '');
+                        if (imageExtensions.test(src))
+                            images.push({ type: 'bg', src });
+                    });
+                }
+            });
+            if (!selector) {
+                this.currentDoc.select('link[href]').each((el) => {
+                    const href = el.attr('href');
+                    if (href && imageExtensions.test(href)) {
+                        images.push({ type: 'link', src: href });
+                    }
+                });
+                this.currentDoc.select('meta[property="og:image"], meta[name="twitter:image"]').each((el) => {
+                    const content = el.attr('content');
+                    if (content)
+                        images.push({ type: 'meta', src: content });
+                });
+            }
+            const uniqueImages = [...new Map(images.map(img => [img.src, img])).values()];
+            uniqueImages.slice(0, 25).forEach((img, i) => {
+                const typeLabel = colors.gray(`[${img.type}]`);
+                const altText = img.alt ? colors.cyan(img.alt.slice(0, 25)) : '';
+                console.log(`${colors.gray(`${i + 1}.`)} ${typeLabel} ${altText} ${img.src.slice(0, 60)}`);
+            });
+            if (uniqueImages.length > 25) {
+                console.log(colors.gray(`  ... and ${uniqueImages.length - 25} more images`));
+            }
+            this.lastResponse = uniqueImages;
+            console.log(colors.gray(`\n  ${uniqueImages.length} image(s) found`));
+        }
+        catch (error) {
+            console.error(colors.red(`Query failed: ${error.message}`));
+        }
+        console.log('');
+    }
+    async runSelectScripts() {
+        if (!this.currentDoc) {
+            console.log(colors.yellow('No document loaded. Use "scrap <url>" first.'));
+            return;
+        }
+        try {
+            const scripts = [];
+            this.currentDoc.select('script[src]').each((el) => {
                 const src = el.attr('src');
-                const alt = el.attr('alt') || '';
                 if (src) {
-                    images.push({ alt, src });
+                    scripts.push({
+                        type: 'external',
+                        src,
+                        async: el.attr('async') !== undefined,
+                        defer: el.attr('defer') !== undefined
+                    });
+                }
+            });
+            this.currentDoc.select('script:not([src])').each((el) => {
+                const content = el.text();
+                if (content.trim()) {
+                    scripts.push({
+                        type: 'inline',
+                        size: content.length
+                    });
+                }
+            });
+            let extCount = 0, inlineCount = 0, totalInlineSize = 0;
+            scripts.forEach((script, i) => {
+                if (script.type === 'external') {
+                    extCount++;
+                    const flags = [
+                        script.async ? colors.cyan('async') : '',
+                        script.defer ? colors.cyan('defer') : ''
+                    ].filter(Boolean).join(' ');
+                    if (i < 20) {
+                        console.log(`${colors.gray(`${i + 1}.`)} ${colors.green('[ext]')} ${script.src?.slice(0, 70)} ${flags}`);
+                    }
+                }
+                else {
+                    inlineCount++;
+                    totalInlineSize += script.size || 0;
+                    if (i < 20) {
+                        console.log(`${colors.gray(`${i + 1}.`)} ${colors.yellow('[inline]')} ${((script.size || 0) / 1024).toFixed(1)}kb`);
+                    }
+                }
+            });
+            if (scripts.length > 20) {
+                console.log(colors.gray(`  ... and ${scripts.length - 20} more scripts`));
+            }
+            this.lastResponse = scripts;
+            console.log(colors.gray(`\n  ${extCount} external, ${inlineCount} inline (${(totalInlineSize / 1024).toFixed(1)}kb total)`));
+        }
+        catch (error) {
+            console.error(colors.red(`Query failed: ${error.message}`));
+        }
+        console.log('');
+    }
+    async runSelectCSS() {
+        if (!this.currentDoc) {
+            console.log(colors.yellow('No document loaded. Use "scrap <url>" first.'));
+            return;
+        }
+        try {
+            const styles = [];
+            this.currentDoc.select('link[rel="stylesheet"]').each((el) => {
+                const href = el.attr('href');
+                if (href) {
+                    styles.push({
+                        type: 'external',
+                        href,
+                        media: el.attr('media')
+                    });
+                }
+            });
+            this.currentDoc.select('style').each((el) => {
+                const content = el.text();
+                if (content.trim()) {
+                    styles.push({
+                        type: 'inline',
+                        size: content.length,
+                        media: el.attr('media')
+                    });
+                }
+            });
+            let extCount = 0, inlineCount = 0, totalInlineSize = 0;
+            styles.forEach((style, i) => {
+                if (style.type === 'external') {
+                    extCount++;
+                    const media = style.media ? colors.cyan(`[${style.media}]`) : '';
                     if (i < 20) {
-                        console.log(`${colors.gray(`${i + 1}.`)} ${colors.cyan(alt.slice(0, 30) || '(no alt)')} ${colors.gray('→')} ${src.slice(0, 60)}`);
+                        console.log(`${colors.gray(`${i + 1}.`)} ${colors.green('[ext]')} ${style.href?.slice(0, 70)} ${media}`);
                     }
                 }
+                else {
+                    inlineCount++;
+                    totalInlineSize += style.size || 0;
+                    const media = style.media ? colors.cyan(`[${style.media}]`) : '';
+                    if (i < 20) {
+                        console.log(`${colors.gray(`${i + 1}.`)} ${colors.yellow('[inline]')} ${((style.size || 0) / 1024).toFixed(1)}kb ${media}`);
+                    }
+                }
+            });
+            if (styles.length > 20) {
+                console.log(colors.gray(`  ... and ${styles.length - 20} more stylesheets`));
+            }
+            this.lastResponse = styles;
+            console.log(colors.gray(`\n  ${extCount} external, ${inlineCount} inline (${(totalInlineSize / 1024).toFixed(1)}kb total)`));
+        }
+        catch (error) {
+            console.error(colors.red(`Query failed: ${error.message}`));
+        }
+        console.log('');
+    }
+    async runSelectSourcemaps() {
+        if (!this.currentDoc) {
+            console.log(colors.yellow('No document loaded. Use "scrap <url>" first.'));
+            return;
+        }
+        try {
+            const sourcemaps = [];
+            const sourceMappingURLPattern = /\/[/*]#\s*sourceMappingURL=([^\s*]+)/gi;
+            this.currentDoc.select('script:not([src])').each((el) => {
+                const content = el.text();
+                const matches = content.matchAll(sourceMappingURLPattern);
+                for (const match of matches) {
+                    sourcemaps.push({ type: 'inline-js', url: match[1] });
+                }
+            });
+            this.currentDoc.select('style').each((el) => {
+                const content = el.text();
+                const matches = content.matchAll(sourceMappingURLPattern);
+                for (const match of matches) {
+                    sourcemaps.push({ type: 'inline-css', url: match[1] });
+                }
             });
-            if (images.length > 20) {
-                console.log(colors.gray(`  ... and ${images.length - 20} more images`));
+            this.currentDoc.select('script[src]').each((el) => {
+                const src = el.attr('src');
+                if (src && !src.endsWith('.map')) {
+                    sourcemaps.push({ type: 'js-inferred', url: `${src}.map`, source: src });
+                }
+            });
+            this.currentDoc.select('link[rel="stylesheet"]').each((el) => {
+                const href = el.attr('href');
+                if (href && !href.endsWith('.map')) {
+                    sourcemaps.push({ type: 'css-inferred', url: `${href}.map`, source: href });
+                }
+            });
+            this.currentDoc.select('script[src$=".map"], link[href$=".map"]').each((el) => {
+                const url = el.attr('src') || el.attr('href');
+                if (url)
+                    sourcemaps.push({ type: 'direct', url });
+            });
+            const uniqueMaps = [...new Map(sourcemaps.map(m => [m.url, m])).values()];
+            const confirmed = uniqueMaps.filter(m => !m.type.includes('inferred'));
+            const inferred = uniqueMaps.filter(m => m.type.includes('inferred'));
+            if (confirmed.length > 0) {
+                console.log(colors.green('Confirmed sourcemaps:'));
+                confirmed.forEach((m, i) => {
+                    console.log(`${colors.gray(`${i + 1}.`)} ${colors.cyan(`[${m.type}]`)} ${m.url}`);
+                });
+            }
+            if (inferred.length > 0) {
+                console.log(colors.yellow('\nPotential sourcemaps (inferred):'));
+                inferred.slice(0, 15).forEach((m, i) => {
+                    console.log(`${colors.gray(`${i + 1}.`)} ${colors.gray(`[${m.type}]`)} ${m.url.slice(0, 70)}`);
+                });
+                if (inferred.length > 15) {
+                    console.log(colors.gray(`  ... and ${inferred.length - 15} more`));
+                }
             }
-            this.lastResponse = images;
-            console.log(colors.gray(`\n  ${images.length} image(s) found`));
+            this.lastResponse = uniqueMaps;
+            console.log(colors.gray(`\n  ${confirmed.length} confirmed, ${inferred.length} inferred sourcemap(s)`));
+            console.log(colors.gray(`  Use $unmap <url> to extract original sources`));
         }
         catch (error) {
             console.error(colors.red(`Query failed: ${error.message}`));
         }
         console.log('');
     }
+    async runUnmap(urlArg) {
+        let mapUrl = urlArg;
+        if (!mapUrl && Array.isArray(this.lastResponse)) {
+            const maps = this.lastResponse;
+            const confirmed = maps.filter(m => !m.type.includes('inferred'));
+            if (confirmed.length > 0) {
+                mapUrl = confirmed[0].url;
+                console.log(colors.gray(`Using: ${mapUrl}`));
+            }
+            else if (maps.length > 0) {
+                mapUrl = maps[0].url;
+                console.log(colors.gray(`Using (inferred): ${mapUrl}`));
+            }
+        }
+        if (!mapUrl) {
+            console.log(colors.yellow('Usage: $unmap <sourcemap-url>'));
+            console.log(colors.gray('  Or run $sourcemaps first to find sourcemaps'));
+            return;
+        }
+        if (!mapUrl.startsWith('http') && this.baseUrl) {
+            const base = new URL(this.baseUrl);
+            mapUrl = new URL(mapUrl, base).toString();
+        }
+        console.log(colors.cyan(`Fetching sourcemap: ${mapUrl}`));
+        try {
+            const response = await this.client.get(mapUrl);
+            const mapData = await response.json();
+            if (!mapData.sources || !Array.isArray(mapData.sources)) {
+                console.log(colors.red('Invalid sourcemap: missing sources array'));
+                return;
+            }
+            console.log(colors.green(`\nSourcemap v${mapData.version || '?'}`));
+            if (mapData.file)
+                console.log(colors.gray(`  File: ${mapData.file}`));
+            if (mapData.sourceRoot)
+                console.log(colors.gray(`  Root: ${mapData.sourceRoot}`));
+            console.log(colors.gray(`  Sources: ${mapData.sources.length}`));
+            if (mapData.names)
+                console.log(colors.gray(`  Names: ${mapData.names.length}`));
+            console.log(colors.bold('\nOriginal sources:'));
+            mapData.sources.forEach((source, i) => {
+                const hasContent = mapData.sourcesContent && mapData.sourcesContent[i];
+                const sizeInfo = hasContent
+                    ? colors.green(`[${(mapData.sourcesContent[i].length / 1024).toFixed(1)}kb]`)
+                    : colors.yellow('[no content]');
+                console.log(`${colors.gray(`${i + 1}.`)} ${sizeInfo} ${source}`);
+            });
+            this.lastResponse = {
+                url: mapUrl,
+                data: mapData,
+                sources: mapData.sources.map((source, i) => ({
+                    path: source,
+                    content: mapData.sourcesContent?.[i] || null
+                }))
+            };
+            const withContent = mapData.sourcesContent?.filter(c => c).length || 0;
+            console.log(colors.gray(`\n  ${withContent}/${mapData.sources.length} sources have embedded content`));
+            if (withContent > 0) {
+                console.log(colors.gray(`  Use $unmap:view <index> to view source content`));
+                console.log(colors.gray(`  Use $unmap:save <dir> to save all sources to disk`));
+            }
+        }
+        catch (error) {
+            if (error.status === 404) {
+                console.log(colors.yellow(`Sourcemap not found (404): ${mapUrl}`));
+            }
+            else {
+                console.error(colors.red(`Failed to fetch sourcemap: ${error.message}`));
+            }
+        }
+        console.log('');
+    }
+    async runUnmapView(indexStr) {
+        if (!this.lastResponse || !this.lastResponse.sources) {
+            console.log(colors.yellow('No sourcemap loaded. Use $unmap <url> first.'));
+            return;
+        }
+        const index = parseInt(indexStr, 10) - 1;
+        const sources = this.lastResponse.sources;
+        if (isNaN(index) || index < 0 || index >= sources.length) {
+            console.log(colors.yellow(`Invalid index. Use 1-${sources.length}`));
+            return;
+        }
+        const source = sources[index];
+        if (!source.content) {
+            console.log(colors.yellow(`No embedded content for: ${source.path}`));
+            return;
+        }
+        console.log(colors.bold(`\n─── ${source.path} ───\n`));
+        const ext = source.path.split('.').pop()?.toLowerCase();
+        if (['js', 'ts', 'jsx', 'tsx', 'mjs', 'cjs'].includes(ext || '')) {
+            try {
+                console.log(highlight(source.content, { linenos: true }));
+            }
+            catch {
+                console.log(source.content);
+            }
+        }
+        else {
+            console.log(source.content);
+        }
+        console.log(colors.bold(`\n─── end ───\n`));
+    }
+    async runUnmapSave(dir) {
+        if (!this.lastResponse || !this.lastResponse.sources) {
+            console.log(colors.yellow('No sourcemap loaded. Use $unmap <url> first.'));
+            return;
+        }
+        const outputDir = dir || './sourcemap-extracted';
+        const sources = this.lastResponse.sources;
+        const { promises: fs } = await import('node:fs');
+        const path = await import('node:path');
+        let saved = 0, skipped = 0;
+        for (const source of sources) {
+            if (!source.content) {
+                skipped++;
+                continue;
+            }
+            let cleanPath = source.path
+                .replace(/^webpack:\/\/[^/]*\//, '')
+                .replace(/^\.*\//, '')
+                .replace(/^node_modules\//, 'node_modules/');
+            const fullPath = path.join(outputDir, cleanPath);
+            const dirname = path.dirname(fullPath);
+            try {
+                await fs.mkdir(dirname, { recursive: true });
+                await fs.writeFile(fullPath, source.content, 'utf-8');
+                saved++;
+                console.log(colors.green(`  ✓ ${cleanPath}`));
+            }
+            catch (err) {
+                console.log(colors.red(`  ✗ ${cleanPath}: ${err.message}`));
+            }
+        }
+        console.log(colors.gray(`\n  Saved ${saved} files to ${outputDir}`));
+        if (skipped > 0) {
+            console.log(colors.yellow(`  Skipped ${skipped} sources without embedded content`));
+        }
+        console.log('');
+    }
+    async runBeautify(urlArg) {
+        if (!urlArg) {
+            console.log(colors.yellow('Usage: $beautify <url-to-js-or-css>'));
+            console.log(colors.gray('  Downloads and formats minified JS/CSS code'));
+            return;
+        }
+        let url = urlArg;
+        if (!url.startsWith('http') && this.baseUrl) {
+            const base = new URL(this.baseUrl);
+            url = new URL(url, base).toString();
+        }
+        console.log(colors.cyan(`Fetching: ${url}`));
+        try {
+            const response = await this.client.get(url);
+            const code = await response.text();
+            const isCSS = url.endsWith('.css') || response.headers.get('content-type')?.includes('css');
+            console.log(colors.gray(`  Size: ${(code.length / 1024).toFixed(1)}kb`));
+            const formatted = isCSS ? this.beautifyCSS(code) : this.beautifyJS(code);
+            console.log(colors.bold(`\n─── Beautified ${isCSS ? 'CSS' : 'JS'} ───\n`));
+            try {
+                console.log(highlight(formatted, { linenos: true }));
+            }
+            catch {
+                console.log(formatted);
+            }
+            console.log(colors.bold(`\n─── end ───`));
+            this.lastResponse = { url, original: code, formatted, type: isCSS ? 'css' : 'js' };
+            console.log(colors.gray(`\n  Use $beautify:save <file> to save formatted code`));
+        }
+        catch (error) {
+            console.error(colors.red(`Failed to fetch: ${error.message}`));
+        }
+        console.log('');
+    }
+    beautifyJS(code) {
+        let result = '';
+        let indent = 0;
+        let inString = null;
+        let inComment = false;
+        let inLineComment = false;
+        let i = 0;
+        const addNewline = () => {
+            result += '\n' + '  '.repeat(indent);
+        };
+        while (i < code.length) {
+            const char = code[i];
+            const next = code[i + 1];
+            const prev = code[i - 1];
+            if (!inComment && !inLineComment) {
+                if ((char === '"' || char === "'" || char === '`') && prev !== '\\') {
+                    if (inString === char) {
+                        inString = null;
+                    }
+                    else if (!inString) {
+                        inString = char;
+                    }
+                }
+            }
+            if (!inString && !inComment && !inLineComment) {
+                if (char === '/' && next === '*') {
+                    inComment = true;
+                    result += char;
+                    i++;
+                    continue;
+                }
+                if (char === '/' && next === '/') {
+                    inLineComment = true;
+                    result += char;
+                    i++;
+                    continue;
+                }
+            }
+            if (inComment && char === '*' && next === '/') {
+                result += '*/';
+                inComment = false;
+                i += 2;
+                continue;
+            }
+            if (inLineComment && char === '\n') {
+                inLineComment = false;
+            }
+            if (inString || inComment || inLineComment) {
+                result += char;
+                i++;
+                continue;
+            }
+            if (char === '{') {
+                result += ' {';
+                indent++;
+                addNewline();
+                i++;
+                continue;
+            }
+            if (char === '}') {
+                indent = Math.max(0, indent - 1);
+                addNewline();
+                result += '}';
+                if (next && next !== ';' && next !== ',' && next !== ')' && next !== '\n') {
+                    addNewline();
+                }
+                i++;
+                continue;
+            }
+            if (char === ';') {
+                result += ';';
+                if (next && next !== '}' && next !== '\n') {
+                    addNewline();
+                }
+                i++;
+                continue;
+            }
+            if (char === ' ' || char === '\t' || char === '\n' || char === '\r') {
+                if (result.length > 0 && !/\s$/.test(result)) {
+                    result += ' ';
+                }
+                i++;
+                continue;
+            }
+            result += char;
+            i++;
+        }
+        return result.trim();
+    }
+    beautifyCSS(code) {
+        let result = '';
+        let indent = 0;
+        let inString = null;
+        let i = 0;
+        const addNewline = () => {
+            result += '\n' + '  '.repeat(indent);
+        };
+        while (i < code.length) {
+            const char = code[i];
+            const next = code[i + 1];
+            const prev = code[i - 1];
+            if ((char === '"' || char === "'") && prev !== '\\') {
+                if (inString === char) {
+                    inString = null;
+                }
+                else if (!inString) {
+                    inString = char;
+                }
+            }
+            if (inString) {
+                result += char;
+                i++;
+                continue;
+            }
+            if (char === '{') {
+                result += ' {';
+                indent++;
+                addNewline();
+                i++;
+                continue;
+            }
+            if (char === '}') {
+                indent = Math.max(0, indent - 1);
+                addNewline();
+                result += '}';
+                addNewline();
+                i++;
+                continue;
+            }
+            if (char === ';') {
+                result += ';';
+                addNewline();
+                i++;
+                continue;
+            }
+            if (char === ',' && indent === 0) {
+                result += ',';
+                addNewline();
+                i++;
+                continue;
+            }
+            if (char === ' ' || char === '\t' || char === '\n' || char === '\r') {
+                if (result.length > 0 && !/\s$/.test(result)) {
+                    result += ' ';
+                }
+                i++;
+                continue;
+            }
+            result += char;
+            i++;
+        }
+        return result.trim();
+    }
+    async runBeautifySave(filename) {
+        if (!this.lastResponse || !this.lastResponse.formatted) {
+            console.log(colors.yellow('No beautified code. Use $beautify <url> first.'));
+            return;
+        }
+        const outputFile = filename || `beautified.${this.lastResponse.type}`;
+        const { promises: fs } = await import('node:fs');
+        try {
+            await fs.writeFile(outputFile, this.lastResponse.formatted, 'utf-8');
+            console.log(colors.green(`  ✓ Saved to ${outputFile}`));
+        }
+        catch (err) {
+            console.log(colors.red(`  ✗ Failed to save: ${err.message}`));
+        }
+        console.log('');
+    }
     async runSelectTable(selector) {
         if (!this.currentDoc) {
             console.log(colors.yellow('No document loaded. Use "scrap <url>" first.'));
@@ -966,7 +1647,8 @@ export class RekShell {
   ${colors.bold('Core Commands:')}
     ${colors.green('url <url>')}           Set persistent Base URL.
     ${colors.green('set <key>=<val>')}     Set a session variable.
-    ${colors.green('vars')}                List all session variables.
+    ${colors.green('vars')}                List all session and env variables.
+    ${colors.green('env [path]')}          Load .env file (default: ./.env).
     ${colors.green('clear')}               Clear the screen.
     ${colors.green('exit')}                Exit the console.
 
@@ -1005,7 +1687,15 @@ export class RekShell {
     ${colors.green('$attr <name> <sel>')}  Extract attribute values.
     ${colors.green('$html <selector>')}    Get inner HTML.
     ${colors.green('$links [selector]')}   List all links.
-    ${colors.green('$images [selector]')}  List all images.
+    ${colors.green('$images [selector]')}  List all images (img, bg, og:image, favicon).
+    ${colors.green('$scripts')}            List all scripts (external + inline).
+    ${colors.green('$css')}                List all stylesheets (external + inline).
+    ${colors.green('$sourcemaps')}         Find sourcemaps (confirmed + inferred).
+    ${colors.green('$unmap <url>')}        Download and parse sourcemap.
+    ${colors.green('$unmap:view <n>')}     View source file by index.
+    ${colors.green('$unmap:save [dir]')}   Save all sources to disk.
+    ${colors.green('$beautify <url>')}     Format minified JS/CSS code.
+    ${colors.green('$beautify:save [f]')}  Save beautified code to file.
     ${colors.green('$table <selector>')}   Extract table as data.
 
   ${colors.bold('Examples:')}