Web Interface

This document covers Telescope's web-based user interface, which provides visual access to recorded application events. The interface is implemented as a Vue.js Single-Page Application (SPA) that communicates with backend API routes to display and manage recorded entries.

For detailed information about the Vue.js component structure and routing system, see Frontend Architecture. For asset compilation and versioning, see Asset Management and Build System.

Overview

The Telescope web interface consists of three primary layers:

1. HTML Shell: A Blade template that bootstraps the Vue application
2. Vue.js SPA: Client-side routing and dynamic content rendering
3. Backend API: HTTP routes for data retrieval and management operations

The interface provides access to 18 distinct entry types (requests, commands, queries, jobs, etc.) through a unified navigation structure, along with global controls for managing recording state and entries.

Architecture

Sources: resources/views/layout.blade.php1-237 public/mix-manifest.json1-6

HTML Shell Structure

The base layout is defined in layout.blade.php, which serves as the bootstrapping template for the Vue SPA.

Document Head

The HTML document head includes:

• Meta tags: Character set, viewport, CSRF token, robots directives
• Title: "Telescope - {app.name}"
• Favicon: /vendor/telescope/favicon.ico
• Fonts: Figtree font family from fonts.bunny.net
• Stylesheets: CSS loaded via Laravel Mix's mix() helper with cache-busting

Sources: resources/views/layout.blade.php1-18

Vue Root Element

The main application container uses Vue's v-cloak directive to prevent flash of uncompiled content:

This element serves as the mounting point for the Vue application instance.

Sources: resources/views/layout.blade.php20

Alert System

A global alert component is conditionally rendered when alert.type is set:

This provides system-wide notifications and confirmation dialogs.

Sources: resources/views/layout.blade.php21-26

Header and Global Controls

The header contains the Telescope logo and four primary control buttons:

Sources: resources/views/layout.blade.php29-64

Control Buttons

Control	Method	Icon State	Purpose
Toggle Recording	toggleRecording()	Pause (if recording) / Play (if paused)	Start/stop data collection
Clear Entries	clearEntries()	Trash can	Delete all recorded entries
Auto Load	autoLoadNewEntries()	Refresh (active state toggle)	Enable/disable automatic entry loading
Monitored Tags	Navigation	Eye icon	View monitoring configuration

The recording toggle displays different SVG icons based on the recording state variable:

• Recording (Pause icon): Lines 39-41 - Pause bars SVG path
• Paused (Play icon): Lines 42-44 - Play triangle SVG path

Sources: resources/views/layout.blade.php38-64

Navigation Sidebar

The sidebar provides navigation to 18 distinct entry type views using Vue Router's <router-link> component with the active-class="active" directive.

Navigation Structure

Sources: resources/views/layout.blade.php67-220

Route List

Route	Entry Type	Lines
/requests	HTTP Requests	71-76
/commands	Console Commands	79-84
/schedule	Scheduled Tasks	87-92
/jobs	Queue Jobs	95-100
/batches	Job Batches	105-110
/cache	Cache Operations	113-119
/dumps	Debug Dumps	122-127
/events	Application Events	130-135
/exceptions	Exceptions	138-143
/gates	Authorization Gates	146-151
/client-requests	HTTP Client	154-159
/logs	Log Messages	162-168
/mail	Sent Mail	171-177
/models	Model Operations	180-185
/notifications	Notifications	188-194
/queries	Database Queries	197-202
/redis	Redis Commands	205-210
/views	Rendered Views	213-218

Each navigation item includes an inline SVG icon with a semantic viewBox definition for consistent visual presentation.

Sources: resources/views/layout.blade.php71-219

Content Area

The main content area uses Vue Router's <router-view> component for dynamic content injection:

This component renders the appropriate view based on the current route, with each view component responsible for fetching and displaying its specific entry type data.

Sources: resources/views/layout.blade.php223-225

Configuration Injection

Server-side configuration is injected into the client application via a global window.Telescope object:

This object contains:

• path: The base path for Telescope routes (configured via telescope.path)
• timezone: Server timezone for timestamp display
• recording: Current recording state
• Additional runtime configuration values

The Vue application reads this configuration during initialization to configure its API client and UI behavior.

Sources: resources/views/layout.blade.php231-233

Asset Loading

The compiled JavaScript bundle is loaded using Laravel Mix's cache-busting mechanism:

The mix() helper resolves to the versioned filename from mix-manifest.json:

This ensures browsers load the latest version after deployments by generating unique cache keys based on file content hashes.

Sources: resources/views/layout.blade.php17-235 public/mix-manifest.json1-6

Grid Layout

The interface uses a 12-column Bootstrap-style grid layout:

• Sidebar: 2 columns (16.67% width)
• Content: 10 columns (83.33% width)

This layout provides persistent navigation while maximizing content display area.

Sources: resources/views/layout.blade.php28-227

Responsive Considerations

The layout includes viewport meta configuration for responsive behavior:

However, the fixed column widths (col-2 and col-10) suggest the interface is primarily designed for desktop viewports. Mobile optimization is not explicitly implemented in the base layout.

Sources: resources/views/layout.blade.php6

Data Flow

Sources: resources/views/layout.blade.php1-237

Security Features

The layout includes several security-related features:

1. CSRF Token: Included in meta tags for AJAX requests

2. Search Engine Blocking: Prevents indexing of debug data

3. Authorization: Backend routes protected by authorization middleware (not visible in layout, handled by TelescopeServiceProvider)

Sources: resources/views/layout.blade.php7-10

Styling System

The interface supports both light and dark themes via separate CSS bundles:

• Light theme: app.css
• Dark theme: app-dark.css

The theme selection is determined by the $cssFile variable passed to the view, which is controlled by application configuration or user preference.

Sources: resources/views/layout.blade.php17 public/mix-manifest.json3-4