docs: ui screenshots

Author: williarin

.vitepress/config.mts

@@ -65,6 +65,12 @@ export default defineConfig({
           { text: 'Performance Metrics', link: '/performance-metrics' },
           { text: 'Trade Analysis with Tags', link: '/analyzing-trades' },
         ]
+      },
+      {
+        text: 'Stochastix UI',
+        items: [
+          { text: 'Screenshots', link: '/screenshots' },
+        ]
       }
     ],
 

data-downloading.md

@@ -4,6 +4,10 @@ Reliable backtesting starts with high-quality historical data. Stochastix provid
 
 Under the hood, this downloader uses the powerful CCXT library, giving you access to dozens of exchanges.
 
+::: tip UI Alternative
+While the CLI is powerful for scripting, these tasks can also be performed visually from the [**Data Management UI**](./screenshots#data-management).
+:::
+
 ## The Download Command
 
 The primary tool for fetching data is the `stochastix:data:download` command (alias: `stx:data:dl`).

data-validation.md

@@ -4,6 +4,10 @@ The quality of your backtesting results is directly dependent on the quality of
 
 Stochastix provides a dedicated command-line tool, `stochastix:data:info`, to help you with this process.
 
+::: tip UI Alternative
+Data files can also be inspected and validated from the [**Data Validation modal in the UI**](./screenshots#data-validation).
+:::
+
 ## The `data:info` Command
 
 This command reads a `.stchx` binary data file and displays its metadata and a sample of its content. Its most powerful feature is the ability to perform a full consistency validation on the data.

package.json

@@ -7,4 +7,4 @@
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
   }
-}
+}

public/screenshots/backtest_chart.jpg

@@ -5,7 +5,9 @@ Once you have created a strategy, the next step is to run it against historical
 1.  **Command-Line Interface (CLI):** Ideal for automation, scripting, and precise control over all configuration parameters.
 2.  **User Interface (UI):** A web-based form that provides a user-friendly way to configure and launch backtests.
 
-This guide will focus on the CLI method, as it exposes the full power and flexibility of the backtesting engine.
+::: tip UI Alternative
+This guide will focus on the CLI method... For interactive use, backtests can be configured and launched from the [**New Backtest page in the UI**](./screenshots#new-backtest).
+:::
 
 ::: warning
 We're assuming Stochastix is installed using the Docker setup, which is the recommended way to run it. Therefore, we will use `make sf c="..."` to run commands in the Symfony container. If you're not using Docker, you can run the commands directly in your terminal using `php bin/console ...` instead.

public/screenshots/backtest_results.jpg

@@ -0,0 +1,48 @@
+# A Tour of the User Interface
+
+While Stochastix is fully operable from the command line, it also comes with a rich, modern web interface to help you visualize data and results.
+
+After starting the environment (see the [Getting Started](./installation.md) guide), you can access the UI by navigating to **https://localhost** in your web browser.
+
+This page provides a quick visual tour of the main sections of the application.
+
+## Data Management
+
+The Data Management page is the central hub for downloading and inspecting historical market data. From here you can view all available data, initiate new downloads from an exchange, and inspect the integrity of local files.
+
+[![Data Management Page](/screenshots/data_management.jpg)](/screenshots/data_management.jpg)
+
+## Data Validation
+
+From the Data Management page, you can inspect any downloaded `.stchx` data file. This opens a modal window that displays the file's header metadata and provides a full data integrity report, checking for gaps, duplicates, or out-of-order records.
+
+[![Data Validation Modal](/screenshots/data_validation.jpg)](/screenshots/data_validation.jpg)
+
+## New Backtest
+
+The New Backtest page allows you to visually configure and launch a backtest for any available strategy. It dynamically generates form fields for all the `#[Input]` parameters defined in your strategy class, making it easy to experiment with different settings.
+
+[![New Backtest Page](/screenshots/new_backtest.jpg)](/screenshots/new_backtest.jpg)
+
+## Backtest Results
+
+The Backtest Results page provides a comprehensive and interactive overview of a completed backtest run, broken down into several key sections.
+
+### Summary & Performance Charts
+
+The top of the page displays the most important, high-level performance metrics of the strategy alongside interactive charts for visualizing the portfolio's equity curve, drawdown, and other time-series metrics.
+
+[![Backtest Summary Metrics](/screenshots/backtest_summary.jpg)](/screenshots/backtest_summary.jpg)
+[![Backtest Performance Charts](/screenshots/backtest_chart.jpg)](/screenshots/backtest_chart.jpg)
+
+### Visual Chart Analysis
+
+The main chart allows for deep visual analysis, overlaying your strategy's indicators and plotting the exact entry and exit points of each trade directly on the price candles. You can zoom, pan, and inspect each trade in detail.
+
+[![Backtest Visual Analysis Chart](/screenshots/backtest_visual_analysis.jpg)](/screenshots/backtest_visual_analysis.jpg)
+
+### Trades Log & Analysis
+
+Below the charts, detailed tables provide a log of every closed trade and a performance breakdown by the `enterTags` and `exitTags` assigned in your strategy.
+
+[![Backtest Results Tables](/screenshots/backtest_results.jpg)](/screenshots/backtest_results.jpg)

public/screenshots/backtest_summary.jpg

@@ -2,6 +2,10 @@
 
 When a backtest finishes running on the command line, it prints a comprehensive summary directly to your console. This summary is designed to give you an immediate, high-level overview of your strategy's performance, followed by a detailed log of its activity.
 
+::: tip UI Alternative
+While this guide details the CLI output, all of these results are presented in a rich, interactive format on the [**Backtest Results page in the UI**](./screenshots#backtest-results).
+:::
+
 ## Sample Command-Line Output
 
 Here is a sample output from a completed backtest run, which we will break down in the following sections.