Skip to main content

Exploring the Dashboard

This tutorial provides a comprehensive tour of the Vimeo Connector dashboard. You'll learn about every UI component, how real-time updates work, and advanced features for managing multiple sync jobs.

By the end of this tutorial, you'll understand:

  • Every section of the dashboard layout
  • How to interpret status indicators and progress bars
  • How to manage multiple concurrent jobs
  • How to use keyboard shortcuts and accessibility features
  • How real-time updates work behind the scenes

This tutorial takes approximately 10-15 minutes to complete.

Prerequisites​

Access to the Dashboard - Navigate to https://vimeo.trustedgpt.io in a modern browser (Chrome, Firefox, Safari, or Edge).

Basic Familiarity - You should have completed Getting Started to understand the basic sync workflow.

Dashboard Overview​

The dashboard follows a split-panel layout optimized for monitoring long-running operations while managing multiple jobs.

Layout Structure:

┌─────────────────────────────────────────────┐
│          Header (Logo, Status)              │
├──────────────────────┬──────────────────────┤
│                      │                      │
│   Left Panel         │   Right Sidebar      │
│   (Main Controls)    │   (Job History)      │
│                      │                      │
│   - URL Input        │   - Recent Jobs      │
│   - Sync Mode        │   - Job Cards        │
│   - Import Button    │   - Status Badges    │
│   - Progress Card    │                      │
│                      │                      │
└──────────────────────┴──────────────────────┘

Responsive Design: On mobile/tablet screens (under 768px width), the right sidebar moves below the left panel, creating a vertical single-column layout. All functionality remains accessible.

Header Components​

Logo and Title​

Location: Top-left corner

Appearance:

  • Vimeo Icon (blue circular logo)
  • "Vimeo Data Connector" title text in gradient (Vimeo blue → CustomGPT purple)
  • "CustomGPT.ai Integration" subtitle in gray

Purpose: Branding and confirmation you're on the correct application.

Interaction: The logo and title are static (non-clickable). They serve as visual anchors so users always know which application they're using.

Connection Status Indicator​

Location: Top-right corner of the header

Appearance When Connected:

  • Green dot (pulsing animation)
  • "Connected" text in green
  • Optional: Timestamp of last successful API ping

Appearance When Disconnected:

  • Red dot (no animation)
  • "Backend not reachable" text in red

How It Works:

  • The dashboard sends a health check API request every 5 seconds: GET /api/v1/health
  • If the response is successful (HTTP 200), status shows "Connected"
  • If the request fails (timeout, 500 error, network error), status shows "Backend not reachable"
  • The health check happens in the background—it doesn't interrupt your work

What to Do When Disconnected:

  • Refresh the page - Network glitches are common; refreshing often resolves the issue
  • Check your internet connection - Ensure you have network access
  • Wait 30 seconds - The backend might be temporarily overloaded and recovering
  • Check backend status - If the issue persists, the backend server might be down for maintenance

Important: If you start a sync job while connected and then lose connection, the job continues running on the server. When you reconnect, the dashboard will fetch the job's current status and display it.

Left Panel: Main Controls​

This is where you initiate and monitor sync jobs.

URL Input Field​

Location: Top of the left panel

Appearance:

  • Large text input with placeholder: "Enter Vimeo URL"
  • Subtle border, neutral colors
  • Expands slightly on focus (modern UX pattern)

Accepted URL Formats:

https://vimeo.com/user{userid}
https://vimeo.com/user{userid}/albums
https://vimeo.com/user{userid}/videos
https://vimeo.com/user{userid}/collections
https://vimeo.com/showcase/{showcaseid}

Validation:

  • Client-side validation happens as you type
  • Valid URLs show no error (neutral border)
  • Invalid URLs show a red border and error message below the input: "Invalid Vimeo URL format"

Validation Details:

  • Uses regex pattern matching to validate format
  • Does not contact Vimeo API during validation (happens entirely in browser)
  • Allows trailing slashes and query parameters (e.g., ?h=abc123)

Keyboard Shortcuts:

  • Cmd/Ctrl + V: Paste URL (standard paste)
  • Enter: Focuses the Import button (does not trigger import—you must click the button)

Accessibility:

  • Labeled with aria-label="Vimeo URL input"
  • Includes role="textbox" for screen readers
  • Error messages are announced via aria-live="polite"

Sync Mode Dropdown​

Location: Below the URL input field

Options:

  1. Auto (Recommended) - Default selection
  2. Full Sync - Always fetch all content
  3. Incremental Sync - Only fetch changes

Appearance:

  • Dropdown with a downward arrow icon
  • Selected option displayed prominently
  • Hover shows tooltip with mode description

How to Change:

  • Click the dropdown to expand options
  • Click an option to select it
  • Dropdown closes automatically after selection

Tooltips on Hover:

  • Auto: "Automatically choose Full or Incremental based on history"
  • Full Sync: "Fetch all videos, even if previously imported"
  • Incremental Sync: "Only fetch new or updated videos (requires previous import)"

Keyboard Navigation:

  • Tab: Focus the dropdown
  • Arrow Up/Down: Navigate options
  • Enter/Space: Select highlighted option

Accessibility:

  • Labeled with aria-label="Sync mode selection"
  • Options have role="option" for screen readers

Import Collection Button​

Location: Below the Sync Mode dropdown

Appearance:

  • Large button in Vimeo blue (#1ab7ea)
  • Upload icon (arrow pointing up into cloud) to the left of text
  • Text: "Import Collection"
  • Subtle shadow and rounded corners (modern button design)

States:

Default State (Enabled):

  • Blue background, white text
  • Hover: Slightly darker blue background, slight scale increase (1.02x)
  • Cursor: pointer

Loading State:

  • Blue background with opacity
  • Spinner animation replaces the upload icon
  • Text changes to "Starting..."
  • Cursor: default (not clickable)
  • Purpose: Prevents double-clicks while request is being sent

Disabled State:

  • Gray background, gray text
  • Cursor: not-allowed
  • When This Happens: URL validation failed, or a sync is already in progress

Click Behavior:

  1. Button enters Loading State immediately
  2. POST request sent to /api/v1/sync with URL and mode
  3. If successful, Progress Card slides down to replace the form
  4. If failed, error message appears above the button (e.g., "Invalid URL" or "Backend error")

Keyboard Shortcut:

  • Enter (when URL input is focused): Triggers the Import button click

Accessibility:

  • Labeled with aria-label="Start import"
  • Loading state announced via aria-live="polite"

Progress Card​

Location: Replaces the form (URL input, mode dropdown, button) when a sync job starts

Appearance:

  • Card with subtle shadow and border
  • White background with rounded corners
  • Smooth slide-down animation (300ms)

Components Within Progress Card:

Job Status Badge​

Location: Top-center of Progress Card

States:

"Starting..." (Blue Badge):

  • Appears immediately when job is created
  • Spinner icon to the left of text
  • Duration: 2-5 seconds (while backend initializes the job)

"Running" (Blue Badge):

  • Appears when job begins processing videos
  • Animated pulse effect on badge border
  • Remains visible until job completes, fails, or is cancelled

"Completed" (Green Badge):

  • Appears when job finishes successfully
  • Checkmark icon to the left of text
  • Badge remains visible until you start a new job

"Failed" (Red Badge):

  • Appears if job encounters an error
  • X icon to the left of text
  • Badge remains visible; error details appear below

"Cancelled" (Gray Badge):

  • Appears if you clicked the Cancel button
  • Stop icon to the left of text
  • Badge remains visible until you start a new job

Progress Bar​

Location: Center of Progress Card, below the status badge

Visibility: Only visible when status is "Running"

Appearance:

  • Horizontal bar with gradient fill (Vimeo blue → CustomGPT purple)
  • Fill percentage displayed on the right: "45%"
  • Video count displayed on the left: "Processing 45 of 100 videos"

Animation:

  • Smooth transition as percentage increases (CSS transition: 0.3s ease)
  • Updates every 1.5 seconds as new progress data arrives from backend

Calculation:

percentage = (processed_videos / total_videos) * 100

Example Progression:

0% → 5% → 12% → 18% → ... → 95% → 100%

Why It's Not Always Linear: Processing speed varies per video. Videos with large transcripts take longer, so the progress bar might jump quickly through videos without transcripts and slow down for videos with long transcripts.

Current Video Display​

Location: Below the progress bar

Appearance:

  • Text: "Current: {video_title}"
  • Truncated if title exceeds 60 characters: "Current: Very Long Video Title That Exceeds..."
  • Hover shows full title in a tooltip

Update Frequency: Changes every 1.5 seconds (same polling interval as progress bar)

Purpose: Provides transparency into what the connector is working on. Useful for debugging if a job seems stuck—you can see which specific video is being processed.

Example:

Current: "Q3 2024 Product Demo - Feature Walkthrough"

Results Summary​

Location: Center of Progress Card, replaces progress bar when job completes

Visibility: Only visible when status is "Completed"

Appearance:

  • Four metrics in a 2x2 grid layout
  • Each metric has an icon, number, and label

Metrics:

Added (Green):

  • Icon: Plus sign in green circle
  • Number: Count of newly imported videos
  • Example: "Added: 5"

Updated (Yellow):

  • Icon: Refresh arrows in yellow circle
  • Number: Count of videos with changed content
  • Example: "Updated: 2"

Deleted (Red):

  • Icon: Minus sign in red circle
  • Number: Count of videos removed from collection
  • Example: "Deleted: 1"

Unchanged (Gray):

  • Icon: Equals sign in gray circle
  • Number: Count of videos with no changes
  • Example: "Unchanged: 92"

Duration Display:

  • Below the metrics grid
  • Text: "Completed in 87 seconds"
  • Format: Seconds for jobs under 120s, minutes for jobs 120s or more

Example Full Display:

┌────────────────────────────────┐
│  Added: 5       Updated: 2     │
│  Deleted: 1     Unchanged: 92  │
│                                │
│  Completed in 87 seconds       │
└────────────────────────────────┘

Cancel Button​

Location: Top-right corner of Progress Card

Appearance:

  • Small button with X icon
  • Red hover state (turns red on hover)
  • Circular shape

Visibility: Only visible when status is "Running"

Click Behavior:

  1. Confirmation dialog appears: "Are you sure you want to cancel this import?"
  2. If confirmed:
    • POST request sent to /api/v1/sync/{job_id}/cancel
    • Status badge immediately changes to "Cancelled"
    • Progress Card remains visible with final processed count
  3. If cancelled:
    • Dialog closes, job continues running

What Happens When You Cancel:

  • Backend stops fetching new videos
  • Videos already processed are saved (not rolled back)
  • Job is marked as "Cancelled" in history
  • You can start a new job immediately

Keyboard Shortcut:

  • Esc key: Triggers cancel confirmation dialog (only when Progress Card is visible)

Accessibility:

  • Labeled with aria-label="Cancel import"

Error Display​

Location: Center of Progress Card, replaces progress bar when job fails

Visibility: Only visible when status is "Failed"

Appearance:

  • Red text with alert icon
  • Error message explaining what went wrong
  • Optional: "Retry" button below the message

Common Error Messages:

"Invalid Vimeo URL: Resource not found"

  • Cause: The URL format is valid but the showcase/user doesn't exist on Vimeo
  • Solution: Verify the URL by opening it in a browser

"Authentication failed: Invalid API token"

  • Cause: Backend Vimeo API token is expired or invalid
  • Solution: Contact your administrator to refresh the API token

"Rate limit exceeded"

  • Cause: Too many API calls to Vimeo in a short time
  • Solution: Wait 10 minutes and retry, or enable Token Pool for higher capacity

"Network error: Could not connect to Vimeo API"

  • Cause: Network issues between the backend and Vimeo
  • Solution: Retry in a few minutes—likely a transient issue

"Unknown error: {error_details}"

  • Cause: Unexpected backend error
  • Solution: Check backend logs for details, or contact support

Retry Button​

Location: Below error message (only appears on certain errors)

Appearance:

  • Blue button with retry icon (circular arrows)
  • Text: "Retry Import"

Visibility: Only appears for retryable errors (network errors, rate limit errors). Does not appear for authentication errors or invalid URL errors.

Click Behavior:

  • Creates a new job with the same URL and sync mode
  • Error display disappears, new Progress Card appears

This sidebar shows a chronological list of recent sync jobs.

Recent Jobs Header​

Location: Top of right sidebar

Appearance:

  • Bold text: "Recent Jobs"
  • Optional: "Clear All" button on the right (appears when there are jobs)

Clear All Button:

  • Removes all completed/failed/cancelled jobs from the list
  • Does not delete stored data—only clears the UI history
  • Running jobs cannot be cleared

Job Card​

Location: Vertically stacked in the sidebar, newest at the top

Appearance:

  • White card with subtle shadow
  • Border on the left side (color matches job status: blue for running, green for completed, red for failed, gray for cancelled)
  • Hover: Slight shadow increase and scale (1.02x)

Components Within Job Card:

Vimeo URL Display​

Location: Top of job card

Appearance:

  • Truncated URL with ellipsis if longer than 40 characters
  • Example: https://vimeo.com/showcase/11708...
  • Hover: Tooltip shows full URL

Click Behavior:

  • Clicking the URL re-opens this job's details in the left panel Progress Card
  • Useful for reviewing completed jobs or checking failed job details

Status Badge (Small Version)​

Location: Below the URL, top-right of job card

Appearance: Smaller version of the Progress Card status badge

States: "Running", "Completed", "Failed", "Cancelled"

Results Summary (Compact Version)​

Location: Below the URL, main body of job card

Appearance:

  • Single line: "5 added, 2 updated, 1 deleted"
  • Omits "unchanged" count for space (full details available when you click to expand)

Visibility: Only shown for completed jobs

Timestamp​

Location: Bottom of job card

Appearance:

  • Relative time: "2 minutes ago", "1 hour ago", "Yesterday"
  • Hover: Tooltip shows absolute timestamp: "Jan 15, 2025 at 3:42 PM"

Format Rules:

  • Under 1 minute: "Just now"
  • Under 60 minutes: "X minutes ago"
  • Under 24 hours: "X hours ago"
  • Under 7 days: "X days ago"
  • 7 days or more: Absolute date ("Jan 15, 2025")

Progress Indicator (for Running Jobs)​

Location: Bottom of job card, replaces timestamp for running jobs

Appearance:

  • Small progress bar matching the main Progress Card
  • Percentage displayed: "45%"
  • Animated gradient fill

Update Frequency: Updates every 1.5 seconds (same polling interval as main progress bar)

Empty State​

Appearance When No Jobs Exist:

  • Gray text in center of sidebar: "No recent jobs"
  • Illustration: Empty folder icon
  • Subtext: "Start an import to see job history here"

Real-Time Updates: How It Works​

The dashboard creates the illusion of real-time progress without using WebSocket connections. Here's the technical approach:

Polling Architecture​

Health Check Polling:

  • Endpoint: GET /api/v1/health
  • Interval: Every 5 seconds
  • Purpose: Update connection status indicator

Job Status Polling (When Job is Running):

  • Endpoint: GET /api/v1/sync/{job_id}
  • Interval: Every 1.5 seconds
  • Purpose: Update progress bar, current video, and status badge

Job History Polling:

  • Endpoint: GET /api/v1/sync?limit=10
  • Interval: Every 10 seconds
  • Purpose: Keep the "Recent Jobs" sidebar up to date

Why Polling Instead of WebSockets?​

Simplicity: Polling requires no persistent connections or server-side push infrastructure. The backend is stateless.

Reliability: Polling automatically recovers from network glitches. If one request fails, the next one succeeds and updates the UI.

Scalability: Polling works through load balancers, proxies, and CDNs without special configuration.

Battery Efficiency: 1.5-second polling is aggressive enough for smooth UX but not so frequent it drains mobile batteries.

Optimizations​

Conditional Requests: The dashboard sends If-Modified-Since headers on job status requests. If the job hasn't changed, the backend responds with HTTP 304 (Not Modified), saving bandwidth.

Stop Polling When Idle: If no jobs are running and the user hasn't interacted with the dashboard for 5 minutes, polling slows to once every 30 seconds. Activity (mouse movement, clicks) resumes normal polling frequency.

Exponential Backoff on Errors: If a polling request fails, the dashboard waits longer before retrying (1.5s → 3s → 6s → 10s max). Once a request succeeds, polling returns to normal 1.5s interval.

Keyboard Shortcuts​

The dashboard supports several keyboard shortcuts for power users:

Global Shortcuts (Work Anywhere):

  • Cmd/Ctrl + K: Focus the URL input field
  • Esc: Clear URL input (if focused), or close cancel confirmation dialog
  • Tab / Shift+Tab: Navigate between interactive elements

When URL Input is Focused:

  • Enter: Focus the Import button (does not trigger import—must click button)
  • Esc: Clear the input field

When Progress Card is Visible:

  • Esc: Open cancel confirmation dialog (if job is running)

When Job History is Focused:

  • Arrow Up/Down: Navigate between job cards
  • Enter: Expand selected job card in the main panel

Accessibility Features​

The dashboard is designed to be accessible to users with disabilities:

Screen Reader Support:

  • All interactive elements have aria-label attributes
  • Status changes are announced via aria-live="polite" regions
  • Progress bar percentage is read aloud as it updates

Keyboard Navigation:

  • All interactive elements are reachable via Tab key
  • Focus indicators (blue outline) show which element is currently focused
  • No mouse-only interactions—everything can be done via keyboard

Color Contrast:

  • All text meets WCAG AA contrast requirements (4.5 to 1 for body text, 3 to 1 for large text)
  • Status badges use both color and icons (not color alone)

Reduced Motion:

  • Users with prefers-reduced-motion enabled see no animations (progress bars update instantly, cards don't slide)

Focus Management:

  • When Progress Card appears, focus moves to the Cancel button (so users can stop the job via keyboard)
  • When job completes, focus returns to the URL input (so users can start a new job immediately)

Managing Multiple Concurrent Jobs​

While the dashboard UI focuses on one job at a time in the main panel, you can run multiple jobs concurrently using these techniques:

Method 1: Multiple Browser Tabs​

  1. Open the dashboard in multiple browser tabs: Cmd/Ctrl + T → Navigate to https://vimeo.trustedgpt.io
  2. Start a job in Tab 1
  3. Switch to Tab 2 and start a different job
  4. Both jobs run concurrently on the backend

Monitoring: Switch between tabs to monitor each job's progress. The "Recent Jobs" sidebar in each tab shows all jobs (including those started in other tabs).

Method 2: Start Job, Then Start Another​

  1. Start a job in the main panel
  2. While the Progress Card is visible, click a job in the "Recent Jobs" sidebar to view its details
  3. The Progress Card now shows the clicked job
  4. Both jobs continue running—the UI just switches which one you're viewing

Limitation: You cannot start a second job from the same dashboard instance while the first is running. The URL input form is hidden while the Progress Card is visible. Use multiple tabs (Method 1) or wait for the first job to complete.

Method 3: API Direct Access​

For advanced users, you can start jobs via the REST API using curl, Postman, or custom scripts:

curl -X POST https://vimeo.trustedgpt.io/api/v1/sync \
  -H "Content-Type: application/json" \
  -d '{"url": "https://vimeo.com/showcase/11708791", "mode": "auto"}'

This returns a job ID, which you can then monitor via:

curl https://vimeo.trustedgpt.io/api/v1/sync/{job_id}

See REST API Reference for full API documentation.

Common UI Interactions​

Expanding a Job from History​

  1. Locate the job card in the "Recent Jobs" sidebar
  2. Click anywhere on the job card
  3. The Progress Card in the main panel updates to show this job's details

Use Case: Review the results of a completed job, check why a job failed, or monitor a long-running job you started earlier.

Copying Results to Clipboard​

  1. Complete a job (status shows "Completed" with results summary)
  2. Hover over the results summary
  3. A small "Copy" icon appears in the top-right of the results
  4. Click the icon to copy results as JSON:
{
  "added": 5,
  "updated": 2,
  "deleted": 1,
  "unchanged": 92,
  "duration_seconds": 87
}

Use Case: Paste results into reports, spreadsheets, or automated scripts.

Refreshing the Dashboard​

Manual Refresh: Press Cmd/Ctrl + R or click the browser's refresh button. The dashboard state reloads from the backend API—running jobs continue uninterrupted.

Auto-Refresh: Not needed—polling keeps the UI up to date automatically. However, if you suspect the UI is stuck, a manual refresh can help.

State Persistence: Job history is stored on the backend, so refreshing the page doesn't lose your history. The "Recent Jobs" sidebar repopulates from the API.

Next Steps​

You now have a complete understanding of every dashboard component and interaction.

Continue Learning:

Sync Different URL Types - Learn specific techniques for each of the five Vimeo URL types. See How to Sync a Showcase.

Monitor Large Syncs - Techniques for tracking progress on imports with hundreds of videos. See How to Monitor Sync Progress.

View Sync Results - Learn how to access the JSON metadata and transcript files generated by syncs. See How to View Sync Results.

Enable Token Pool for 6x Speed - Set up the Token Pool feature to increase capacity from 600 to 3600 API calls per 10 minutes. See How to Set Up Token Pool.

Understand the Architecture - Dive deep into how the connector works under the hood. See How It Works.

You're now a dashboard power user!