Documentation

User Flow & Interaction Patterns

Understanding how users interact with the Cinder Frontend to accomplish their goals.

Scrape Flow

The typical user journey when scraping a single URL.

1

Enter URL

User enters a URL in the input field.

2

Optional: Configure Options

Click the Options button to open Sheet with headers, cookies, exclude tags, and rendering mode.

3

Click Scrape Button

Submits the form to the backend via remote function.

4

View Results

Results appear in tabbed interface: Markdown, HTML, JSON.

5

Copy or Download

User can copy to clipboard or download as file.

Key Interactions
Real-time URL validation
Form progressive enhancement
Instant result tabs
Copy feedback (toast notification)

Crawl Flow

The user journey for deep domain crawling with job management.

1

Enter Base URL

User enters the domain to crawl (e.g., https://example.com).

2

Configure Crawl Depth

Optional: Set depth limit, URL patterns to include/exclude, and max pages.

3

Click Start Crawl

Initiates the crawl job. Backend returns a job ID.

4

Monitor Progress

Live progress bar and scrollable log of discovered links. Auto-polls every 2 seconds.

5

Pause or Stop

User can pause the crawl to examine partial results or stop completely.

6

Download Results

Once complete, download the full crawl report as CSV or JSON.

Key Interactions
Async job management with polling
Real-time progress visualization
Live log with auto-scroll
Status badges for each link

Search Flow

The user journey for web search followed by content extraction.

1

Enter Search Query

User enters natural language search query or advanced search operators.

2

Configure Search Options

Optional: Set result limit, language, region, time range.

3

Click Search

Submits search query to backend web search API.

4

Browse Results

Search results appear as cards with title, URL, snippet, and metadata.

5

Scrape Individual Result

Click "Scrape" button on any result to extract full content.

6

View Extracted Content

Content appears in modal/drawer for review and export.

Key Interactions
Search suggestions and autocomplete
Skeleton loaders while fetching
Inline scrape without navigation
Multiple result export formats

History & Quick Access

Users can store and replay previous requests for efficiency.

History Sidebar
Quick-access list of last 10-20 requests with one-click re-run capability.
Persistent State
Forms remember last input values for faster repeated queries.

Error Handling & Recovery

The UI gracefully handles errors and provides users with actionable recovery steps.

Network Errors

User sees error message with retry button. Form state is preserved.

Validation Errors

Client-side validation shows errors below the input field. User can fix and resubmit.

Backend Errors

Specific error messages with HTTP status codes help debugging.

Timeout Recovery

For long-running operations, timeout errors suggest increasing limits or retrying.

Accessibility & Navigation

Keyboard Navigation

✓ Tab to navigate through all controls

✓ Enter to submit forms

✓ Escape to close modals

✓ Arrow keys for menus

Screen Reader Support

✓ ARIA labels on all inputs

✓ Semantic HTML structure

✓ Alt text for icons

✓ Form error announcements