Traffic Inspection

The traffic view is Ghost’s heart — the screen you spend 90% of your time on. It’s a real-time list of every HTTP/HTTPS request flowing through Ghost, with detailed inspection panels that let you see exactly what was sent and received, down to every header and byte.

Unlike traditional network tools that show raw text or confusing packet dumps, Ghost presents traffic in a clean, visual format designed for QA engineers and security researchers. JSON bodies are syntax-highlighted and collapsible, images are previewed inline, timing is shown as waterfall charts, and everything is searchable.

Layout

Ghost uses a three-panel layout where each panel can be resized by dragging the dividers between them:

┌────────────┬──────────────────────┬─────────────────┐
│            │                      │                 │
│   Scope    │    Flow List         │   Flow Detail   │
│   Panel    │    (virtual scroll)  │   (Inspector)   │
│            │                      │                 │
│  Domains   │  Method Status Host  │  Summary        │
│  Apps      │  Path   Duration     │  Headers        │
│  Devices   │  Size   Timestamp    │  Body           │
│            │  Tags                │  Cookies        │
│            │                      │  Params         │
│            │                      │  Timing         │
│            │                      │  WS Frames      │
│            │                      │  Notes          │
│            │                      │  Interactions   │
├────────────┴──────────────────────┴─────────────────┤
│ Status Bar: Proxy | Sys Proxy | Throttle | Flows    │
│            | Rate | Session | WS | Extension        │
└─────────────────────────────────────────────────────┘

Scope Panel (left) — A sidebar for narrowing down which traffic you see. Lists all captured hostnames, detected applications, and connected devices. Click any host or device to filter the flow list to just that traffic.
Flow List (center) — The main traffic list showing one row per captured request. Each row shows the HTTP method, status code, hostname, URL path, duration, and response size. New flows appear here in real-time as traffic is captured.
Flow Detail / Inspector (right) — When you click a flow in the list, this panel shows everything about that specific request-response pair: headers, body content, cookies, query parameters, timing breakdown, and more.
Status Bar (bottom) — Shows the current state of Ghost: proxy status, system proxy state, network throttle speed, flow count, capture rate, active session, WebSocket connection health, and extension status.

The traffic view is always visible. When you open other panels (like the AI chat, settings, or the Request Composer), they slide in as overlays — you never navigate away from your traffic. This means you can always see new requests arriving in real-time, no matter what else you’re doing.

Flow List

The flow list is the central table showing all captured traffic. It uses virtual scrolling — a technique that only creates visible rows in the browser’s DOM (about 30-40 rows), recycling them as you scroll. This means Ghost can display 10,000+ flows with smooth scrolling and low memory usage, where a traditional table would struggle and lag.

Columns

Each row in the flow list shows:

Column	What It Shows	How to Read It
Timestamp	When the request was captured, in `HH:mm:ss.SS` format (hours:minutes:seconds.centiseconds)	Helps you correlate network activity with actions you took in the app. “I tapped the button at 14:23:05, and there’s a POST at 14:23:05.12 — that’s the API call.”
Method	The HTTP method as a color-coded badge: GET (green — reading data), POST (blue — sending data), PUT (amber — updating data), DELETE (red — removing data), and others	The color coding lets you scan the list quickly. A wall of blue = lots of data submission. A red DELETE = something being removed.
Status	The HTTP response status code, also color-coded: 2xx (green — success), 3xx (blue — redirect), 4xx (amber — client error), 5xx (red — server error)	Amber and red entries are usually what you’re looking for when debugging. A `401` means unauthorized, `404` means not found, `500` means the server crashed.
Host	The hostname from the request URL, with a favicon (website icon) when available	Lets you see at a glance which server the request went to. In a microservices environment like Hepsiburada’s, you might see dozens of different API hosts.
Path	The URL path (everything after the hostname). Long paths are truncated with a tooltip showing the full path on hover.	The most important column for identifying what the request does. `/api/v1/users/123` is fetching user data, `/api/v1/cart/checkout` is processing a purchase.
Duration	How long the request-response cycle took, in milliseconds	Quick scan for performance issues. Anything over 1000ms (1 second) is usually worth investigating.
Size	The response body size in bytes (displayed with human-readable units: KB, MB)	Unexpectedly large responses might indicate the API is returning too much data. Very small responses on error endpoints might be missing error details.
Tags	Tag badges attached to this flow — both user-added tags and system tags	Tags you’ve added for organization (`important`, `regression`), plus system tags like bookmarks and noise detection indicators.

Multi-Select

You can select multiple flows at once for batch operations:

Click — select a single flow (deselects others)
Ctrl+Click (or Cmd+Click on Mac) — toggle individual flows on/off without deselecting others
Shift+Click — select a range of flows (from the last selected to the clicked one)
Arrow Up/Down — move the selection up or down through the list
Ctrl+A — select all visible flows (those matching your current filters)

Multi-selected flows can be batch-tagged, batch-deleted, or sent to comparison.

Right-click any flow to see a context menu with these actions:

Action	What It Does
Copy URL	Copies the full request URL to your clipboard
Copy as cURL	Generates a `curl` command that reproduces this exact request (with all headers and body) and copies it to your clipboard. Useful for sharing with developers or testing from the terminal.
Copy as fetch()	Generates a JavaScript `fetch()` call that reproduces this request. Useful for pasting into a browser console or test script.
Fork to Request Composer	Opens the Request Composer with this flow’s request pre-filled. You can modify and re-send it.
Replay Request	Re-sends the exact same request to the server and captures the new response as a new flow. Useful for checking if a response has changed.
Add/Remove Tags	Opens a tag editor to add or remove string labels on this flow.
Compare with another flow	Starts a Flow Comparison — select another flow to see the differences in headers, body, and timing.
Send to Attacker	(Security mode only) Opens the Request Attacker with this flow’s request, ready for security testing with payload variations.
Pin Host	Pins this flow’s hostname to the top of the domain navigator for quick access.
Delete Flow	Permanently removes this flow from the database. Cannot be undone.

View Modes

Two ways to view the flow list:

Mode	What It Looks Like	When to Use It
List (default)	Standard table with one row per flow. Each row shows method, status, host, path, etc.	Most of the time — for browsing, searching, and selecting individual flows.
Waterfall	Horizontal timing bars on a time axis, similar to the browser’s DevTools Network tab. Each flow is a bar whose length represents its duration, positioned on a timeline.	When you want to understand the timing relationship between requests — which started first, which overlapped, where the bottlenecks are. See Waterfall Timeline.

Group Modes

Flows can be grouped to organize related traffic:

Mode	How Flows Are Organized	When It’s Useful
None (default)	Flat list — all flows in chronological order	General browsing and searching
By Host	Collapsible groups per hostname, with stats (request count, error count, average duration) per group	When you want to focus on traffic to a specific API server. Expand only the host you care about.
By Path	Grouped by URL path prefix	When you want to see all requests to a specific endpoint together (e.g., all `/api/v1/products/` requests)
By Tag	Grouped by flow tags	When you’ve tagged flows during analysis and want to review each tag category

Flow Inspector

Click any flow in the list to open the Flow Inspector in the right panel. The inspector has three layers: a hero section at the top with status/URL info and action buttons, a split pane area with request and response side-by-side, and overlay views that replace the split pane when activated.

Hero Section

The compact header shown for every selected flow:

Status code and URL — the response status (like 200 OK) and the full request URL
Action buttons — toggle buttons to switch between the split pane view and overlay views: Timing (waterfall chart), Notes (annotations), and WebSocket (for WS connections, indicated by a websocket tag)
Close button — deselect the flow and return to the empty state

Split Pane (Default View)

The main view shows request on the left and response on the right, with a draggable divider between them. Each side has its own tabbed interface:

Request pane tabs:

Body — the request body content. For GraphQL requests, an inline GraphQL viewer shows the operation name, query, and variables above the body. If the flow has a correlated browser interaction (click, input, navigation captured by the extension), that’s also shown inline above the body.
Headers — all request headers as a flat key-value table. Click any value to copy.
Params — URL query parameters parsed into a key-value table (only shown when the URL has query params). Example: ?q=shoes&page=2 becomes a table with q → shoes, page → 2.
Cookies — request cookies parsed from the Cookie header (only shown when cookies are present).

Response pane tabs:

Body — the response body content. Auto-detected format rendering (see Body Viewer below).
Headers — all response headers as a flat key-value table.
Cookies — cookies set by the server via Set-Cookie headers (only shown when set-cookies are present). Shows name, value, domain, path, security flags.

Tabs only appear when they have content — if there are no query parameters, the Params tab is hidden. Each tab shows a count badge (e.g., “Headers (12)”).

Body Viewer

The body viewer automatically detects the content type and renders the body in the most useful format:

Content Type	How Ghost Renders It
JSON	Syntax-highlighted, collapsible tree view. Click any key to expand/collapse nested objects. Built-in search to find specific fields in large JSON responses. This is how most API responses are displayed.
HTML	Rendered in a sandboxed iframe so you can see what the page actually looks like, plus the raw HTML source with syntax highlighting
XML	Syntax-highlighted with a collapsible tree view, similar to JSON but for XML structure
Images	Inline preview for PNG, JPEG, WebP, GIF, and SVG images. No need to download the image separately.
Protobuf	Wire format decoder that shows the protobuf message structure without needing the `.proto` definition file. Shows field numbers, types, and values. Useful for gRPC traffic.
Form data	Parsed into a clean key-value table. Both `application/x-www-form-urlencoded` and `multipart/form-data` are supported.
Binary	Hex dump with an ASCII sidebar (the classic hex editor view). Shows the raw bytes alongside their ASCII representation.
Plain text	Raw text with search highlighting

Overlay Views

Click the action buttons in the hero section to replace the split pane with a full-width overlay:

Timing Overlay — A waterfall chart breaking down the request lifecycle into phases:

Phase	What’s Happening	Why It Matters
DNS Lookup	Converting the hostname to an IP address	Slow DNS usually means a DNS server issue. Should be <50ms.
TCP Connect	Establishing the network connection	Slow connects indicate network latency. Should be <100ms.
TLS Handshake	Setting up encryption for HTTPS	Slow TLS can indicate cryptographic overhead. Should be <100ms.
TTFB (Time to First Byte)	Waiting for the server to start responding	This is the server’s “thinking time.” The most important metric.
Body Transfer	Downloading the response body	Slow transfer means a large response or bandwidth issue.

Notes Overlay — An editable text area for annotating this flow. Notes are saved to the database and persist across sessions. Also provides a tag editor. Use cases: “This request fails on the checkout screen,” “Response changed after deploy.”

WebSocket Overlay — For WebSocket connections (flows tagged websocket), shows individual frames sent and received:

Direction — outgoing (client → server) vs. incoming (server → client)
Opcode — text, binary, ping, pong, close
Payload preview — message content
Timestamp — when the frame was sent/received

Scope Panel

The left sidebar helps you narrow down which traffic you’re looking at. It has three navigators you can switch between:

Domain Navigator

Lists every hostname that appeared in captured traffic, with aggregate statistics per host:

Health indicator — a colored dot: green (all responses were successful 2xx), amber (some 4xx client errors), red (has 5xx server errors). At a glance, you can see which APIs are healthy and which have problems.
Request count — how many requests went to this host
Error count — how many responses were 4xx or 5xx
Average duration — mean response time across all requests to this host
Search — type to filter the host list
Sort — by request count (most traffic first), alphabetically, or by error count
Pin/Unpin — pin important hosts to the top of the list so they’re always visible
Multi-select — Ctrl+Click to select multiple hosts. The flow list filters to show only traffic to the selected hosts.

App Navigator

Groups traffic by the detected source application (the app or browser that made the request):

Shows app icons for known mobile apps by mapping bundle identifiers to icons
Same statistics and controls as the domain navigator
Useful when multiple apps are generating traffic simultaneously (e.g., you’re testing the Hepsiburada iOS app while Chrome is also open)

Device Navigator

Groups traffic by the connected mobile device that generated it:

Shows the platform icon (iOS or Android), connection type (simulator, emulator, physical), and device name (like “iPhone 15 Pro Simulator”)
Click a device to filter traffic to just that device
Click the inspector icon to open the Mobile Inspector for that device

Command Bar

The toolbar at the top of the traffic view, providing quick access to search, filtering, and global controls:

Search input — type GQL queries with autocomplete hints that appear as you type
Structured filter dropdowns — visual filters for HTTP method, status code, and content type
Session selector — dropdown showing all sessions, click to switch the active session
Quick action buttons:
- Proxy toggle — start/stop the proxy with one click
- Mode switch — toggle between QA and Security mode (shield icon)
- Theme toggle — switch between dark and light theme
- Scope panel toggle — show/hide the left sidebar
View mode buttons — switch between List and Waterfall view
Sort controls — choose which column to sort by and the direction (ascending/descending)

Command Palette

Press Cmd+K (macOS) or Ctrl+K (Windows) to open a quick-access command palette. Start typing to fuzzy-search across all available commands:

Navigate to panels (Chat, Rules, Addons, Extension, etc.)
Toggle the proxy on/off
Switch between dark and light themes
Create a new session
Open settings
Compare sessions
Open the Request Composer

The command palette is the fastest way to navigate Ghost without taking your hands off the keyboard.

Keyboard Shortcuts

Shortcut	What It Does
`Ctrl+F` / `Cmd+F`	Focus the search bar so you can start typing a GQL query immediately
`Ctrl+K` / `Cmd+K`	Open the command palette for quick navigation
`Ctrl+1`	Focus the traffic view (useful after interacting with a slide-over panel)
`Ctrl+3`	Open the rules panel (map rules and breakpoints)
`Ctrl+4`	Open the AI chat panel
`Ctrl+5`	Open the addons panel
`Ctrl+B`	Toggle the scope panel (left sidebar) on/off
`Ctrl+,`	Open the settings panel
`Ctrl+P`	Toggle the proxy on/off
`Arrow Up/Down`	Navigate through the flow list (move selection up/down)
`Escape`	Close the current panel, modal, or overlay

Status Bar

The bottom bar provides a constant overview of Ghost’s state. Each section is both an indicator and a control — click most sections to toggle or configure them:

Section	What It Shows	Click Action
Proxy toggle	Green dot + “Capturing” when the proxy is running, grey + “Stopped” when it’s off	Click to start/stop the proxy
System proxy	”SYS” badge appears when the system proxy is active (all OS traffic routes through Ghost)	Click to toggle system proxy
Network throttle	The current network speed preset (3G, Slow 3G, LTE, WiFi, Custom, or None)	Click to change the throttle speed — simulates slow networks for testing
Flow count	Total number of flows in the current session	Informational only
Flow rate	Rolling 5-second average of flows per second	Helps you gauge current traffic volume
Active session	The name of the currently active capture session	Click to switch sessions
WebSocket	Green = connected, red = disconnected (the real-time connection between frontend and backend)	Informational — reconnects automatically
Extension	Green when the browser extension is connected, grey when not	Informational
Filter count	Shows how many active filters are applied (if any)	Click to clear all filters