@sambitcreate/parsely-cli 2.0.0 → 2.2.0

package/README.md

@@ -1,151 +1,152 @@
 # Parsely CLI
 
-A smart, interactive recipe scraper for the terminal. Parsely extracts structured recipe data (ingredients, instructions, cook times) from any recipe URL using headless Chrome with an intelligent AI fallback.
+A smart recipe scraper for the terminal. It turns a recipe URL into a clean cooking brief with ingredients, timings, steps, and source metadata inside a viewport-filling terminal UI.
 
-Built with [Ink](https://github.com/vadimdemedes/ink) (React for CLIs) for a rich, responsive terminal UI.
+## Installation
 
-## Features
-
-- **Interactive TUI** — Full terminal interface built with Ink and React, featuring bordered panels, spinners, and color-coded output.
-- **Browser Scraping** — Headless Chrome via Puppeteer extracts Schema.org JSON-LD data from recipe pages, handling JavaScript-rendered content.
-- **AI Fallback** — Automatically switches to OpenAI `gpt-4o-mini` when browser scraping can't find recipe data.
-- **Structured Output** — Displays prep time, cook time, total time, ingredients, and step-by-step instructions in a clean card layout.
-- **Keyboard-Driven** — Context-aware keybind hints in the footer; press `n` for a new recipe or `q` to quit.
-
-## Preview
-
-![Parsely CLI Screenshot](screenshot.png)
-
-## Project Structure
-
-```
-parsely-cli/
-├── src/
-│   ├── cli.tsx              # Entry point — arg parsing, renders <App>
-│   ├── app.tsx              # Root component — state machine (idle → scraping → display)
-│   ├── theme.ts             # Color palette and symbols
-│   ├── components/
-│   │   ├── Banner.tsx       # ASCII art header
-│   │   ├── URLInput.tsx     # URL text input with validation
-│   │   ├── RecipeCard.tsx   # Recipe display card (times, ingredients, instructions)
-│   │   ├── ScrapingStatus.tsx # Spinner with phase updates
-│   │   ├── Footer.tsx       # Context-aware keybind hints
-│   │   ├── Welcome.tsx      # Welcome message
-│   │   └── ErrorDisplay.tsx # Error panel
-│   ├── services/
-│   │   └── scraper.ts       # Puppeteer + OpenAI scraping logic
-│   └── utils/
-│       └── helpers.ts       # ISO duration parser, config, URL validation
-├── package.json
-├── tsconfig.json
-├── run.sh                   # Quick-start launcher script
-├── .env.local               # Your OpenAI API key (create this)
-├── CLAUDE.md                # AI assistant context
-├── CODE_OF_CONDUCT.md
-└── LICENSE
+### npm
+```bash
+npm install -g @sambitcreate/parsely-cli
 ```
 
-## Setup
-
-### Prerequisites
-
-- **Node.js** v18 or later
-- **npm** v9 or later
-
-### Installation
-
-1. **Clone the repository:**
-
-   ```bash
-   git clone <your-repository-url>
-   cd parsely-cli
-   ```
-
-2. **Install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-   Uses `puppeteer-core` — no Chromium download. The CLI auto-detects system Chrome/Chromium. If none is found, browser scraping is skipped and the AI fallback is used.
-
-3. **Configure AI fallback (optional but recommended):**
-
-   Create a `.env.local` file in the project root:
-
-   ```
-   OPENAI_API_KEY="your_openai_api_key_here"
-   ```
-
-   Without this, the AI fallback will not function — browser scraping will still work for most recipe sites.
+### Homebrew
+```bash
+brew tap sambitcreate/tap
+brew install parsely
+```
 
 ## Usage
 
-### Quick Start
-
 ```bash
-./run.sh
+parsely
+parsely https://www.simplyrecipes.com/recipes/perfect_guacamole/
+parsely --help
+parsely --version
 ```
 
-The launcher script installs dependencies automatically on first run, then starts the TUI.
+## Configuration
 
-### With a URL Argument
+For AI fallback (optional but recommended), set the OpenAI API key:
 
 ```bash
-npm start -- https://www.simplyrecipes.com/recipes/perfect_guacamole/
+export OPENAI_API_KEY="your_key_here"
 ```
 
-Or via the run script:
+Without this, browser scraping still works for most recipe sites.
+
+Optional terminal tuning:
 
 ```bash
-./run.sh https://www.simplyrecipes.com/recipes/perfect_guacamole/
+export PARSELY_SYNC_OUTPUT=1   # force synchronized output on
+export PARSELY_SYNC_OUTPUT=0   # force synchronized output off
+export PARSELY_DISPLAY_PALETTE=1   # force terminal background palette on
+export PARSELY_DISPLAY_PALETTE=0   # force terminal background palette off
+export PARSELY_THEME=dark      # start in dark theme
+export PARSELY_THEME=light     # start in light theme
 ```
 
-### Interactive Mode
+## Terminal UI
+
+- Uses an Ink-based app shell instead of printing one-off output
+- Switches into the terminal alternate screen from the CLI entrypoint and restores the previous screen on exit
+- Restores the terminal's default background color on exit after using the app palette
+- Reserves one terminal row so Ink can update incrementally instead of clearing the whole screen on every spinner tick
+- Adapts the layout to the current terminal size for wide and narrow viewports
+- Collapses non-essential panels on shorter terminals so the URL field stays usable
+- Cancels in-flight browser and AI scraping when you press `Ctrl+C`
+- Shows a live scraping pipeline so browser parsing and AI fallback are visible as separate stages
+- Detects light/dark preference on startup and applies a matching app-wide theme
+- Lets you toggle the full app theme at runtime with `Ctrl+T`
+- Enables synchronized output in Ghostty and WezTerm by default so frame updates paint atomically
+- Applies the terminal background palette by default in Ghostty, Apple Terminal, iTerm2, WezTerm, Warp, Kitty, Alacritty, and foot
+- Avoids advanced palette/sync behavior in `tmux`, `screen`, VS Code's integrated terminal, JetBrains terminals, the Linux console, and `TERM=dumb` unless you explicitly override it
+
+## Keyboard Shortcuts
+
+| Key      | Action            |
+| -------- | ----------------- |
+| `Enter`  | Submit URL        |
+| `Ctrl+T` | Toggle theme      |
+| `n`      | Scrape new recipe |
+| `q`      | Quit              |
+| `Esc`    | Quit from result view |
+| `Ctrl+C` | Exit              |
 
-Run without arguments and enter a URL when prompted:
+## Troubleshooting
 
-```bash
-npm start
-```
+- **`Error: OpenAI API key not found`** — Set `OPENAI_API_KEY` environment variable
+- **Browser scraping skipped** — Install Chrome or Chromium for better results
+- **No recipe found** — AI fallback handles most sites, but results vary by site
+- **Terminal looks cleared while running** — Expected; Parsely uses the alternate screen and restores your previous terminal content when it exits
+- **Background color does not change** — Your terminal may be outside the built-in compatibility list or behind a multiplexer. Use `PARSELY_DISPLAY_PALETTE=1` to force palette updates on, or `PARSELY_DISPLAY_PALETTE=0` to disable them entirely
+- **Theme starts in the wrong mode** — Set `PARSELY_THEME=dark` or `PARSELY_THEME=light` to override automatic detection
+- **Ghostty or WezTerm still flickers** — Parsely enables synchronized output automatically there; set `PARSELY_SYNC_OUTPUT=1` to force it on elsewhere or `PARSELY_SYNC_OUTPUT=0` to disable it
+- **Some sites challenge headless browsers** — Parsely now uses a more browser-like Puppeteer setup, but challenge pages can still force an AI fallback
 
-### Keyboard Shortcuts
+## License
 
-| Key      | Context  | Action            |
-| -------- | -------- | ----------------- |
-| `Enter`  | Input    | Submit URL        |
-| `n`      | Display  | Scrape new recipe |
-| `q`      | Display  | Quit              |
-| `Ctrl+C` | Anywhere | Exit              |
+MIT — see [LICENSE](LICENSE).
 
-## How It Works
+## For Developers
 
-1. **Browser Scraping** — Puppeteer launches headless Chrome, navigates to the URL, and extracts `<script type="application/ld+json">` blocks. The first Schema.org `Recipe` object found is parsed and displayed.
+### Project Structure
+```
+parsely-cli/
+├── src/
+│   ├── cli.tsx              # Entry point
+│   ├── app.tsx              # Root component — app shell + state machine
+│   ├── theme.ts             # Color palette
+│   ├── components/          # UI components
+│   ├── hooks/               # Terminal viewport and screen management
+│   ├── services/scraper.ts  # Puppeteer + OpenAI
+│   └── utils/               # Input, URL, and terminal helpers
+├── test/                    # Unit tests for helpers and scraper parsing
+├── package.json
+├── tsconfig.json
+└── CLAUDE.md                # AI assistant context
+```
 
-2. **AI Fallback** — If the browser fails or no JSON-LD recipe is found, the URL is sent to OpenAI's `gpt-4o-mini` with a structured extraction prompt. The model returns recipe data as JSON.
+### Development Setup
 
-3. **Display** — Recipe data is rendered in a bordered card with color-coded sections for times, ingredients, and instructions.
+```bash
+git clone https://github.com/sambitcreate/parsely-cli.git
+cd parsely-cli
+npm install
+npm run dev
+npm test
+```
 
-## Architecture
+### How It Works
 
-The TUI is built with **Ink** (React for the terminal) following patterns inspired by [OpenCode](https://github.com/anomalyco/opencode):
+1. **Browser Scraping** — Headless Chrome loads the page and extracts Schema.org JSON-LD recipe data
+2. **Parsing Stage** — Parsely scans and normalizes recipe schema before deciding whether the page is usable
+3. **AI Fallback** — OpenAI `gpt-4o-mini` extracts data only when browser parsing cannot recover a recipe
+4. **Display** — The result is plated into a responsive terminal recipe deck with pipeline, prep, and method panels
 
-- **Component-based architecture** — Each UI element is an isolated React component.
-- **State machine** — The app cycles through phases: `idle` → `scraping` → `display` (or `error`).
-- **Theme system** — Centralized color palette in `theme.ts` for consistent styling.
-- **Context-aware footer** — Keybind hints update based on the current phase.
-- **Callback-driven progress** — The scraper reports phase changes to the TUI via callbacks so the spinner updates in real time.
+### UI Structure
 
-## Troubleshooting
+- `LandingScreen` — centered logo and input for the idle state
+- `LoadingScreen` — minimal centered status view during scraping
+- `Banner` — status-aware header with current host and app state
+- `Panel` — shared bordered container used across the error shell
+- `PhaseRail` — pipeline view for browser, parsing, and AI stages
+- `URLInput` — normalizes pasted newlines and exposes shortcut hints under the field
+- `RecipeCard` — split recipe layout with summary, ingredients, timing, and method
+- `Footer` — persistent status line and key hints on non-landing screens
+- `useTerminalViewport` — terminal sizing and resize tracking
+- `utils/terminal.ts` — terminal compatibility detection, synchronized-output, palette control, and render-height helpers
 
-- **`Error: OpenAI API key not found`** — Create a `.env.local` file with your API key. The AI fallback requires this, but browser scraping works without it.
-- **Browser scraping skipped** — The CLI auto-detects system Chrome/Chromium. If none is found, it skips browser scraping and uses the AI fallback. Install Chrome or Chromium to enable browser scraping.
-- **No recipe found** — Some sites use non-standard recipe markup. The AI fallback handles most of these, but results depend on the OpenAI model's ability to extract the recipe.
+### Tests
 
-## License
+```bash
+npm test
+```
 
-MIT — see [LICENSE](LICENSE).
+The test suite covers input normalization, schema extraction, theme-mode helpers, and terminal compatibility detection for common macOS and Linux terminals.
 
-## Code of Conduct
+### Build & Publish
 
-See [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).
+```bash
+npm run build
+npm publish --access public
+```

package/dist/app.js

@@ -1,63 +1,141 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Box, useApp, useInput } from 'ink';
 import { Banner } from './components/Banner.js';
 import { URLInput } from './components/URLInput.js';
 import { RecipeCard } from './components/RecipeCard.js';
-import { ScrapingStatus } from './components/ScrapingStatus.js';
 import { Footer } from './components/Footer.js';
-import { Welcome } from './components/Welcome.js';
 import { ErrorDisplay } from './components/ErrorDisplay.js';
+import { Panel } from './components/Panel.js';
+import { PhaseRail } from './components/PhaseRail.js';
 import { scrapeRecipe } from './services/scraper.js';
-import { theme } from './theme.js';
+import { useTerminalViewport } from './hooks/useTerminalViewport.js';
+import { detectPreferredThemeMode, resolveInitialThemeMode, setActiveTheme, theme, toggleThemeMode } from './theme.js';
+import { useDisplayPalette } from './hooks/useDisplayPalette.js';
+import { sanitizeTerminalText } from './utils/helpers.js';
+import { isThemeToggleShortcut } from './utils/shortcuts.js';
+import { getRenderableHeight } from './utils/terminal.js';
+import { LandingScreen } from './components/LandingScreen.js';
+import { LoadingScreen } from './components/LoadingScreen.js';
 export function App({ initialUrl }) {
     const { exit } = useApp();
+    const { width, height } = useTerminalViewport();
+    const renderHeight = getRenderableHeight(height);
     const [phase, setPhase] = useState(initialUrl ? 'scraping' : 'idle');
+    const [themeMode, setThemeMode] = useState(() => resolveInitialThemeMode());
     const [recipe, setRecipe] = useState(null);
     const [scrapeStatus, setScrapeStatus] = useState(null);
     const [error, setError] = useState('');
+    const [currentUrl, setCurrentUrl] = useState(initialUrl ?? '');
+    const activeScrapeController = useRef(null);
+    const initialScrapeStarted = useRef(false);
+    const hasManualThemeOverride = useRef(false);
+    const wide = width >= 112;
+    const shortViewport = renderHeight < 30;
+    useDisplayPalette(theme.colors.recipePaper);
+    const applyThemeMode = useCallback((mode) => {
+        setActiveTheme(mode);
+        setThemeMode(mode);
+    }, []);
+    const handleToggleTheme = useCallback(() => {
+        hasManualThemeOverride.current = true;
+        applyThemeMode(toggleThemeMode(themeMode));
+    }, [applyThemeMode, themeMode]);
+    const cancelActiveScrape = useCallback(() => {
+        activeScrapeController.current?.abort();
+        activeScrapeController.current = null;
+    }, []);
     const handleScrape = useCallback(async (url) => {
+        cancelActiveScrape();
+        const controller = new AbortController();
+        activeScrapeController.current = controller;
+        setCurrentUrl(url);
         setPhase('scraping');
         setError('');
         setScrapeStatus({ phase: 'browser', message: 'Starting\u2026' });
         try {
             const result = await scrapeRecipe(url, (status) => {
                 setScrapeStatus(status);
-            });
+            }, controller.signal);
+            if (controller.signal.aborted || activeScrapeController.current !== controller) {
+                return;
+            }
             setRecipe(result);
             setPhase('display');
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to scrape recipe');
+            if (controller.signal.aborted || activeScrapeController.current !== controller) {
+                return;
+            }
+            setError(err instanceof Error ? sanitizeTerminalText(err.message) : 'Failed to scrape recipe');
             setPhase('error');
         }
-    }, []);
+        finally {
+            if (activeScrapeController.current === controller) {
+                activeScrapeController.current = null;
+            }
+        }
+    }, [cancelActiveScrape]);
     const handleNewRecipe = useCallback(() => {
         setPhase('idle');
         setRecipe(null);
         setError('');
         setScrapeStatus(null);
+        setCurrentUrl('');
     }, []);
-    // Scrape the initial URL if provided via CLI argument
     useEffect(() => {
-        if (initialUrl) {
-            handleScrape(initialUrl);
+        if (!initialUrl || initialScrapeStarted.current) {
+            return;
         }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    // Global keybinds – only active during the display phase so they
-    // do not interfere with the text input in idle/error phases.
+        initialScrapeStarted.current = true;
+        void handleScrape(initialUrl);
+    }, [handleScrape, initialUrl]);
+    useEffect(() => {
+        return () => {
+            cancelActiveScrape();
+        };
+    }, [cancelActiveScrape]);
+    useEffect(() => {
+        let cancelled = false;
+        void detectPreferredThemeMode().then((mode) => {
+            if (cancelled || hasManualThemeOverride.current || mode === themeMode) {
+                return;
+            }
+            applyThemeMode(mode);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [applyThemeMode, themeMode]);
     useInput((input, key) => {
-        if (phase === 'display') {
-            if (input === 'n')
-                handleNewRecipe();
-            if (input === 'q')
-                exit();
+        if (key.ctrl && input === 'c') {
+            cancelActiveScrape();
+            exit();
+            return;
         }
-        // Ctrl+C is handled by Ink automatically
-        if (key.escape) {
-            if (phase === 'display')
-                exit();
+        if ((phase === 'display' || phase === 'scraping') && isThemeToggleShortcut(input, key)) {
+            handleToggleTheme();
+            return;
         }
-    });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Banner, {}), _jsxs(Box, { flexDirection: "column", paddingX: 1, children: [phase === 'idle' && (_jsxs(_Fragment, { children: [_jsx(Welcome, {}), _jsx(URLInput, { onSubmit: handleScrape })] })), phase === 'scraping' && scrapeStatus && (_jsx(ScrapingStatus, { status: scrapeStatus })), phase === 'display' && recipe && (_jsxs(_Fragment, { children: [_jsx(RecipeCard, { recipe: recipe }), _jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsxs(Text, { bold: true, color: theme.colors.success, children: [theme.symbols.check, " Recipe parsed successfully!"] }) })] })), phase === 'error' && (_jsxs(_Fragment, { children: [_jsx(ErrorDisplay, { message: error }), _jsx(URLInput, { onSubmit: handleScrape })] }))] }), _jsx(Footer, { phase: phase })] }));
+        if (phase === 'display' && input === 'n')
+            handleNewRecipe();
+        if (phase === 'display' && input === 'q')
+            exit();
+        if (phase === 'display' && key.escape)
+            handleNewRecipe();
+    }, { isActive: phase === 'display' || phase === 'scraping' || phase === 'idle' || phase === 'error' });
+    const renderIdle = () => (_jsx(LandingScreen, { width: width, height: renderHeight, onSubmit: handleScrape, onToggleTheme: handleToggleTheme }));
+    const renderScraping = () => (_jsx(LoadingScreen, { status: scrapeStatus }));
+    const renderDisplay = () => (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: recipe && (_jsx(RecipeCard, { recipe: recipe, width: width, height: renderHeight, sourceUrl: currentUrl })) }));
+    const renderError = () => (_jsxs(Box, { flexDirection: wide && !shortViewport ? 'row' : 'column', gap: 1, flexGrow: 1, children: [_jsxs(Box, { flexDirection: "column", width: wide && !shortViewport ? '58%' : undefined, children: [_jsx(ErrorDisplay, { message: error }), _jsx(Panel, { title: "Try another URL", eyebrow: "Retry", accentColor: theme.colors.primary, children: _jsx(URLInput, { onSubmit: handleScrape, onToggleTheme: handleToggleTheme }) })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(Panel, { title: "Pipeline", eyebrow: "What happened", accentColor: theme.colors.secondary, children: _jsx(PhaseRail, { phase: phase, status: scrapeStatus, recipe: recipe }) }) })] }));
+    if (phase === 'display') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderDisplay() }));
+    }
+    if (phase === 'idle') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderIdle() }));
+    }
+    if (phase === 'scraping') {
+        return (_jsx(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: renderScraping() }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: renderHeight, children: [_jsx(Banner, { phase: phase, currentUrl: currentUrl, width: width, height: renderHeight }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: phase === 'error' && renderError() }), _jsx(Footer, { phase: phase, width: width })] }));
 }

package/dist/cli.js

@@ -2,6 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from 'ink';
 import { App } from './app.js';
+import { sanitizeTerminalText } from './utils/helpers.js';
+import { createSynchronizedWriteProxy, resetDefaultTerminalBackground, shouldUseDisplayPalette, shouldUseSynchronizedOutput, } from './utils/terminal.js';
+const ENTER_ALT_SCREEN = '\u001B[?1049h\u001B[2J\u001B[H';
+const EXIT_ALT_SCREEN = '\u001B[?1049l';
 // Simple arg parsing – accept an optional recipe URL as the first positional arg
 const args = process.argv.slice(2);
 const url = args.find((a) => !a.startsWith('-'));
@@ -28,7 +32,37 @@ if (args.includes('--help') || args.includes('-h')) {
 }
 // Handle --version / -v
 if (args.includes('--version') || args.includes('-v')) {
-    console.log('parsely-cli v2.0.0');
+    console.log('parsely-cli v2.2.0');
     process.exit(0);
 }
-render(_jsx(App, { initialUrl: url }));
+async function main() {
+    const useAltScreen = process.stdout.isTTY;
+    const inkStdout = useAltScreen && shouldUseSynchronizedOutput()
+        ? createSynchronizedWriteProxy(process.stdout)
+        : process.stdout;
+    if (useAltScreen) {
+        process.stdout.write(ENTER_ALT_SCREEN);
+    }
+    try {
+        const instance = render(_jsx(App, { initialUrl: url }), {
+            exitOnCtrlC: false,
+            stdout: inkStdout,
+        });
+        await instance.waitUntilExit();
+    }
+    finally {
+        if (useAltScreen && shouldUseDisplayPalette()) {
+            process.stdout.write(resetDefaultTerminalBackground());
+        }
+        if (useAltScreen) {
+            process.stdout.write(EXIT_ALT_SCREEN);
+        }
+        if (useAltScreen && shouldUseDisplayPalette()) {
+            process.stdout.write(resetDefaultTerminalBackground());
+        }
+    }
+}
+main().catch((error) => {
+    console.error(error instanceof Error ? sanitizeTerminalText(error.message) : 'Unexpected error');
+    process.exit(1);
+});

package/dist/components/Banner.d.ts

@@ -1 +1,9 @@
-export declare function Banner(): import("react/jsx-runtime").JSX.Element;
+type AppPhase = 'idle' | 'scraping' | 'display' | 'error';
+interface BannerProps {
+    phase: AppPhase;
+    currentUrl?: string;
+    width: number;
+    height: number;
+}
+export declare function Banner({ phase, currentUrl, width, height }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Banner.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { theme } from '../theme.js';
-const LOGO = `\
- ____   _    ____  ____  _____ _  __   __    ____ _     ___
-|  _ \\ / \\  |  _ \\/ ___|| ____| | \\ \\ / /   / ___| |   |_ _|
-| |_) / _ \\ | |_) \\___ \\|  _| | |  \\ V /   | |   | |    | |
-|  __/ ___ \\|  _ < ___) | |___| |___| |    | |___| |___ | |
-|_| /_/   \\_\\_| \\_\\____/|_____|_____|_|     \\____|_____|___|`;
-export function Banner() {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.colors.banner, bold: true, children: LOGO }), _jsxs(Text, { color: theme.colors.muted, children: ['  ', "Smart recipe scraper ", theme.symbols.dot, " v2.0"] })] }));
+import { getUrlHost } from '../utils/helpers.js';
+function getPhaseMeta(phase) {
+    switch (phase) {
+        case 'scraping':
+            return { label: 'SCRAPING', color: theme.colors.secondary };
+        case 'display':
+            return { label: 'PLATED', color: theme.colors.success };
+        case 'error':
+            return { label: 'RETRY', color: theme.colors.error };
+        default:
+            return { label: 'READY', color: theme.colors.primary };
+    }
+}
+export function Banner({ phase, currentUrl, width, height }) {
+    const compact = width < 88 || height < 26;
+    const phaseMeta = getPhaseMeta(phase);
+    const host = getUrlHost(currentUrl);
+    return (_jsxs(Box, { flexDirection: compact ? 'column' : 'row', justifyContent: "space-between", borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, paddingY: 0, marginBottom: 1, children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: theme.colors.banner, children: "PARSELY" }), _jsx(Text, { color: theme.colors.text, bold: true, children: "Recipe intelligence in the terminal" }), !compact && (_jsx(Text, { color: theme.colors.muted, children: "Browser-first extraction with an AI rescue path when recipe schema is missing." }))] }), _jsxs(Box, { flexDirection: "column", alignItems: compact ? undefined : 'flex-end', marginTop: compact ? 1 : 0, children: [_jsxs(Text, { bold: true, color: phaseMeta.color, children: ["[", phaseMeta.label, "]"] }), _jsx(Text, { color: theme.colors.muted, children: host || 'Paste a recipe URL to begin' })] })] }));
 }

package/dist/components/ErrorDisplay.js

@@ -1,6 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
+import { Panel } from './Panel.js';
 import { theme } from '../theme.js';
 export function ErrorDisplay({ message }) {
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.error, paddingX: 1, paddingY: 1, marginBottom: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.error, children: [theme.symbols.cross, " Scraping Failed"] }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { color: theme.colors.text, wrap: "wrap", children: message }) }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { color: theme.colors.muted, children: "Check the URL and try again, or ensure your .env.local has a valid OPENAI_API_KEY." }) })] }));
+    return (_jsxs(Panel, { title: "Scrape failed", eyebrow: "Recovery", accentColor: theme.colors.error, marginBottom: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.error, children: [theme.symbols.cross, " ", message] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Double-check that the URL points to a specific recipe page."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Install Chrome or Chromium for the browser-first path."] }), _jsxs(Text, { color: theme.colors.text, children: [theme.symbols.bullet, " Add `OPENAI_API_KEY` to `.env.local` if you want AI fallback enabled."] })] })] }));
 }

package/dist/components/Footer.d.ts

@@ -1,6 +1,7 @@
 export type AppPhase = 'idle' | 'scraping' | 'display' | 'error';
 interface FooterProps {
     phase: AppPhase;
+    width: number;
 }
-export declare function Footer({ phase }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ phase, width }: FooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Footer.js

@@ -4,22 +4,46 @@ import { Box, Text } from 'ink';
 import { theme } from '../theme.js';
 const keybinds = {
     idle: [
-        { key: 'enter', label: 'submit' },
+        { key: 'enter', label: 'scrape' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
     scraping: [
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
     display: [
         { key: 'n', label: 'new recipe' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'q', label: 'quit' },
+        { key: 'esc', label: 'back' },
     ],
     error: [
-        { key: 'enter', label: 'submit' },
+        { key: 'enter', label: 'retry' },
+        { key: 'ctrl+t', label: 'theme' },
         { key: 'ctrl+c', label: 'exit' },
     ],
 };
-export function Footer({ phase }) {
+function getStatusCopy(phase) {
+    switch (phase) {
+        case 'scraping':
+            return 'Scanning the page and preparing a clean recipe deck.';
+        case 'display':
+            return 'Recipe plated. Press n to scrape another page.';
+        case 'error':
+            return 'The scrape failed. Adjust the URL or enable the AI fallback.';
+        default:
+            return 'Ready for a recipe URL.';
+    }
+}
+export function Footer({ phase, width }) {
     const hints = keybinds[phase];
-    return (_jsx(Box, { marginTop: 1, paddingX: 1, gap: 1, children: hints.map((hint, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(Text, { color: theme.colors.muted, children: theme.symbols.dot }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: hint.key }), _jsxs(Text, { color: theme.colors.muted, children: [" ", hint.label] })] })] }, hint.key))) }));
+    const compact = width < 92;
+    const statusCopy = compact
+        ? getStatusCopy(phase).replace('Scanning the page and preparing a clean recipe deck.', 'Scanning recipe page.')
+            .replace('Recipe plated. Press n to scrape another page.', 'Recipe plated.')
+            .replace('The scrape failed. Adjust the URL or enable the AI fallback.', 'Scrape failed.')
+            .replace('Ready for a recipe URL.', 'Ready.')
+        : getStatusCopy(phase);
+    return (_jsxs(Box, { flexDirection: compact ? 'column' : 'row', justifyContent: "space-between", borderStyle: "round", borderColor: theme.colors.border, paddingX: 1, paddingY: 0, marginTop: 1, children: [_jsx(Text, { color: theme.colors.muted, children: statusCopy }), _jsx(Box, { marginTop: compact ? 1 : 0, children: hints.map((hint, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsxs(Text, { color: theme.colors.muted, children: [" ", theme.symbols.dot, " "] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.primary, bold: true, children: hint.key }), _jsxs(Text, { color: theme.colors.muted, children: [" ", hint.label] })] })] }, hint.key))) })] }));
 }

package/dist/components/LandingScreen.d.ts

@@ -0,0 +1,8 @@
+interface LandingScreenProps {
+    width: number;
+    height: number;
+    onSubmit: (url: string) => void;
+    onToggleTheme?: () => void;
+}
+export declare function LandingScreen({ width, height, onSubmit, onToggleTheme }: LandingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};