UI Tour

​

1. Dashboard (/dashboard)

• Overview: View all your saved automation tasks in a grid layout.
• Actions:
  • Create Task: Click the New Task button to start a blank automation flow.
  • Import/Export: Use the Import and Export buttons to move tasks between environments (JSON format).
  • Edit: Click any task card to open the editor, or use the Edit Task button at the bottom of the card.
  • Delete: Remove tasks permanently.
• Filter tasks: When you have one or more tasks, a search bar appears in the dashboard header. Type to filter tasks by name or URL in real time. A clear button appears inside the field when text is entered, letting you reset the filter with one click. If no tasks match, a “No matching tasks” message is displayed along with a Clear Filter action.
• Copy URL: Hover over any task card (or tab into it) to reveal a Copy button that copies the target URL to your clipboard — handy for sharing or pasting into other tools without opening the editor.
• Status Indicators: Shows the task mode (Agent, Scraper) and target URL. Hover over a task name to see the full title in a tooltip — useful when names are truncated on smaller screens.
• Keyboard navigation: All dashboard buttons support keyboard navigation with visible focus indicators. Hover over any button to see a tooltip describing its action and keyboard shortcut (e.g., “Create new task (Alt + N)”). Press / from anywhere on the dashboard to focus the search bar instantly.

​

2. Editor (/tasks/:id)

• Infinite Canvas (Configuration):
  • Task Name: Rename your task.
  • Task Description: Add an optional description in the Task Settings panel (always visible above the tab bar). The description renders on the canvas inside the trigger card and is included in API responses, giving AI agents and collaborators context about what the task does without opening the full editor.
  • Mode Selector: Switch between Agent (block-based) and Scraper (simple extraction).
  • View Mode: Toggle between Visual (blocks), JSON (raw code), and API (integration details).
  • Target URL: The starting point for the automation.
  • Spatial Actions: Add, arrange, and connect action blocks (Click, Type, Wait, etc.) directly on the zoomable, pannable canvas.
    • Opening block settings: Double-click any action block to open its settings modal. This lets you configure the block’s parameters (selector, value, timeout, etc.) without accidentally triggering other interactions while dragging or rearranging blocks.
    • Changing block type: Click the type label on a block (e.g., “CLICK”, “TYPE”) to open the Action Palette for that block, letting you switch it to a different action type. If you click the label a second time quickly, the block settings modal opens instead.
  • Sticky Notes: Right-click the canvas and select Add sticky note to place a free-form text note anywhere on the canvas. Use sticky notes to annotate your workflow, leave reminders, or document complex logic for collaborators.
    • Colors: Click a color swatch in the note header to change the note color (default, yellow, pink, green, or purple).
    • Edit: Click the edit button in the note header to modify the text.
    • Copy: Click the copy button to copy the note content to your clipboard.
    • Delete: Click the delete button to remove the note.
    • Keyboard navigation: All sticky note actions are fully keyboard-accessible. Tab into a note to reveal the action buttons, and use visible focus indicators to navigate between controls.
  • Action Palette: A floating overlay to quickly find and add new action blocks anywhere on the canvas. The palette opens with the search field focused so you can start typing immediately. As you type, blocks are filtered in real time.
    • Search: Type to filter available actions (e.g., “click”, “if”, “while”). A clear button appears inside the search field when text is entered, letting you reset the filter with one click.
    • Keyboard navigation: Use the arrow keys to move between actions in the grid — Up/Down move between rows and Left/Right move within a row. Press Enter to insert the highlighted action. Press Escape to clear the current search query; if the search field is already empty, pressing Escape closes the palette. The active item is visually highlighted so you always know which action is selected. All interactive elements have visible focus indicators for keyboard and screen-reader users.
    • Shortcut hints: Buttons throughout the editor display their keyboard shortcut in a tooltip when you hover or focus them (e.g., “Add action (Ctrl + K)” or “Run Task (Ctrl + Enter)”).
  • Variables: Define dynamic parameters (e.g., {$query}) for reuse.
  • Extraction Script: Write JavaScript to parse the page content after execution.
  • Settings: Configure stealth, recording, proxy rotation, and viewports.
• Schedule Tab:
  • Configure automated task execution using visual presets (interval, daily, weekly, monthly) or cron expressions.
  • View next/last run status and duration.
• Keyboard shortcuts:
  • Press Cmd/Ctrl + Enter to run the current task immediately. The results drawer opens automatically so you can watch live output.
  • Press Escape to dismiss the topmost overlay. Figranium evaluates overlays in the following priority order and closes the first one that is open:
    1. Version preview
    2. Action Palette
    3. Cabinet (side panel)
    4. Context menu
    5. Results drawer
  • Press Cmd/Ctrl + K to open the Action Palette.
• Results Drawer:
  • A slide-out panel that contains real-time feedback and results.
  • Live Logs: Real-time feedback from the runner.
  • Screenshot Preview: See the final state of the browser.
  • Extracted Data: View the JSON/CSV output. The table preview displays up to 200 rows for fast rendering. Use Export or Copy Full to access the complete dataset.
  • Activity Log: A scrollable, timestamped log of every action taken during the automation run. Use the Copy button in the log header to copy the full log to your clipboard — useful for debugging or sharing run details. The button shows brief “Copied” confirmation feedback after you click it.
  • Captures: When viewing captures from the results drawer, press Escape to close the captures overlay.
  • History: Access previous versions of the task (if saved).

​

3. Captures (/captures)

• Screenshots: View full-page or viewport captures, indicated by a camera icon.
• Recordings: Watch video playbacks of the entire automation session (if enabled), indicated by a play icon.
• Actions: Each capture card includes an icon-based action bar with the following controls:
  • Copy — copy the capture URL to your clipboard.
  • Download — save the capture file directly to your device.
  • Open — open the capture in a new browser tab.
  • Delete — permanently remove the capture.
• Clear all: Click the trash icon in the page header to delete every screenshot and recording at once. A confirmation prompt appears before anything is removed.
• Empty state: When no captures exist, the screen displays a prompt with a shortcut to the dashboard so you can start a task right away.
• Navigation: Click the Executions button to jump to the executions log. The button displays a shortcut hint in its tooltip (Alt + 3).
• Keyboard navigation: All action buttons support keyboard navigation with visible focus indicators. Hover over any button to see a tooltip describing its action.

​

4. Executions (/executions)

• Source filter: Use the All, Editor, and API tabs at the top to narrow the list by how each run was triggered.
• Execution rows: Each entry shows the task name, mode, timestamp, source, status, and duration. The HTTP status code is displayed as a color-coded badge — green for success (2xx), red for client/server errors (4xx/5xx), and blue for other codes — so you can scan results at a glance. Click a row to open the full execution detail, including the screenshot, activity log, and extracted data. The detail view uses the same color-coded status badges. Click the Back button to return to the executions list — it displays a shortcut hint (Alt + 3) in its tooltip.
• Delete: Remove a single execution by clicking the trash icon on its row.
• Clear all: Click the trash icon in the page header to delete every execution record at once. A confirmation prompt appears before anything is removed.
• Empty state: When no executions exist, the screen displays a prompt with a shortcut to the dashboard so you can start a task right away.
• Keyboard navigation: All action buttons support keyboard navigation with visible focus indicators.

​

5. Settings (/settings)

• System:
  • API Keys: A unified panel for managing all keys and provider connections:
    • Tasks API Key: Your key for remote execution via the REST API. Copy or regenerate it here.
    • AI Providers: Add keys for Gemini, OpenAI, Claude, or connect a local Ollama instance. Each provider supports multiple keys — the first is marked Primary and the rest serve as Backup for automatic failover. For Ollama, you enter a base URL instead of an API key.
    • Database / Output Providers: Add credentials for output destinations like Baserow.
    • Click Add API Key to open the provider selection modal and configure a new entry.
  • AI Models: Set the preferred model for each AI provider. This panel lists Gemini, OpenAI, Anthropic (Claude), and Ollama. Click Edit next to a provider to change its model — you can pick from the suggestions or type a custom model identifier. The selected model is used whenever that provider handles AI-powered actions such as selector generation. Default models are gemini-3-flash-preview, gpt-5-nano, claude-haiku-4-6, and llama3.2.
  • User Agent: Set a global User-Agent string or let figranium rotate them.
  • Selector Finder: Choose your default selector tool. Select between the Highlight Tool (standard browser inspector) or the AI Selector Finder (uses AI to generate selectors). The Highlight Tool is the default.
  • Storage: Clear all captures or cookies.
• Data: Manage persistent cookies and specific capture files.
  • Cookies panel: View all stored cookies grouped by origin. Click any cookie value to expand or collapse it. Each cookie row includes:
    • Copy: Copy the cookie value to your clipboard with a single click.
    • Decode: If the value is URL-encoded or Base64, decode it inline.
    • Delete: Remove an individual cookie.
  • Keyboard navigation: All cookies panel buttons support keyboard navigation with visible focus indicators. Hover over any button to see a tooltip describing its action.
• Proxies:
  • Add Proxy: Input HTTP/SOCKS proxies. The button disables until a server address is provided and shows a loading spinner during submission.
  • Import: Bulk add proxies from a list.
  • Rotation: Configure rotation strategy (Round-Robin vs Random) and whether to include your local IP.
  • Keyboard navigation: All proxy panel buttons support keyboard navigation with visible focus indicators. Hover over any button to see a tooltip describing its action.

​

Global keyboard shortcuts

​

Notifications

• Status icon: A checkmark icon for success or an error icon for failures, so the status is clear without relying on color alone.
• Status label: An explicit “Success” or “Error” heading above the message text.
• Dismiss: Click the close button (×) to dismiss the notification, or wait for it to auto-dismiss. The close button includes an accessible label for keyboard and screen-reader users.