Add Getting Started guide and Gallery with screenshots

- Add Getting Started page with Docker and native dev setup instructions
- Add Gallery page showcasing Forge UI and Armory components
- Include 10 screenshots demonstrating all UI features
- Update home page with Get Started and Gallery buttons
- Reorganize sidebar with Getting Started section
- Add CSS styling for screenshot presentation
- Change status from "experimental" to "early access"

Author: kashifpk

.vitepress/config.ts

@@ -28,16 +28,25 @@ export default defineConfig({
 
     nav: [
       { text: 'Home', link: '/' },
+      { text: 'Get Started', link: '/docs/getting-started' },
+      { text: 'Gallery', link: '/docs/gallery' },
       { text: 'Docs', link: '/docs/' },
       { text: 'GitHub', link: 'https://github.com/agentic-forge' }
     ],
 
     sidebar: {
       '/docs/': [
         {
-          text: 'Documentation',
+          text: 'Getting Started',
           items: [
-            { text: 'Architecture', link: '/docs/' },
+            { text: 'Quick Start', link: '/docs/getting-started' },
+            { text: 'Gallery', link: '/docs/gallery' },
+          ]
+        },
+        {
+          text: 'Architecture',
+          items: [
+            { text: 'Overview', link: '/docs/' },
             { text: 'Orchestrator', link: '/docs/orchestrator' },
             { text: 'Armory', link: '/docs/armory' },
             { text: 'Anvil', link: '/docs/anvil' },

.vitepress/theme/custom.css

@@ -122,3 +122,29 @@ th {
 .VPNavBarTitle .title {
   font-weight: 700;
 }
+
+/* Screenshot/Gallery image styling */
+.vp-doc img {
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  margin: 16px 0;
+  max-width: 100%;
+  height: auto;
+}
+
+.dark .vp-doc img {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Gallery page specific styles */
+.vp-doc h3 + p + p > img,
+.vp-doc h3 + p > img {
+  margin-top: 8px;
+}
+
+/* Horizontal rule styling for section breaks */
+.vp-doc hr {
+  margin: 48px 0;
+  border-color: var(--vp-c-border);
+}

docs/gallery.md

@@ -0,0 +1,132 @@
+# Gallery
+
+A visual tour of Agentic Forge's components and features.
+
+## Forge UI - Chat Interface
+
+The main user interface for interacting with AI agents. Built with Vue.js and PrimeVue.
+
+### Welcome Screen
+
+Clean landing page with options to start a new conversation or import an existing one.
+
+![Forge UI Welcome](/screens/forge-ui-landing.png)
+
+### Chat with Tool Calls
+
+Watch the AI use tools in real-time. Expandable tool call panels show arguments and results.
+
+![Chat with Tool Call](/screens/forge-ui-tc-detail.png)
+
+### Extended Thinking
+
+Models with reasoning capabilities (like DeepSeek R1) show their thinking process.
+
+![Extended Thinking](/screens/forge-ui.png)
+
+### Multi-Model Support
+
+Switch between 100+ models from OpenRouter. See pricing and capabilities at a glance.
+
+![Model Selection](/screens/forge-ui-model-selection.png)
+
+### Parallel Tool Calls
+
+Advanced queries trigger multiple tool calls simultaneously. The UI tracks each one.
+
+![Multi Tool Call](/screens/forge-ui-multi-tool-call.png)
+
+---
+
+## Forge Armory - MCP Gateway
+
+The protocol gateway that aggregates MCP servers and exposes them through a unified interface.
+
+### Dashboard Overview
+
+At-a-glance metrics: connected backends, available tools, call statistics, and latency.
+
+![Armory Dashboard](/screens/forge-armory-dashboard.png)
+
+### Backend Management
+
+Add, configure, enable/disable MCP server backends. Each backend contributes tools to the unified registry.
+
+![Armory Backends](/screens/forge-armory-backends.png)
+
+### Tool Registry
+
+Browse all available tools across backends. Search by name, filter by backend, view schemas.
+
+![Armory Tools](/screens/forge-armory-tools.png)
+
+### Metrics & Observability
+
+Track tool call history, latency, success rates. Filter by time range, tool, or backend.
+
+![Armory Metrics](/screens/forge-armory-metrics.png)
+
+---
+
+## Development Environment
+
+### tmux-based Development
+
+Native development with hot reload. All services running in organized tmux panes.
+
+![Development Services](/screens/forge-services.png)
+
+The `dev-start.sh` script launches:
+- **forge-ui** - Frontend with Vite hot reload
+- **forge-orchestrator** - Python backend with auto-restart
+- **forge-armory** - Gateway with live config
+- **MCP servers** - Weather and web search
+
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                         FORGE UI                             │
+│                    (localhost:4040)                          │
+│         Vue.js chat interface with model selection           │
+└─────────────────────────────┬───────────────────────────────┘
+                              │ WebSocket/SSE
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                      ORCHESTRATOR                            │
+│                    (localhost:4041)                          │
+│     LLM conversation loop with tool routing                  │
+└─────────────────────────────┬───────────────────────────────┘
+                              │ MCP Protocol
+                              ▼
+┌─────────────────────────────────────────────────────────────┐
+│                        ARMORY                                │
+│                    (localhost:4042)                          │
+│     Protocol gateway aggregating MCP backends                │
+└───────────┬─────────────────┴─────────────────┬─────────────┘
+            │                                   │
+            ▼                                   ▼
+┌───────────────────────┐         ┌───────────────────────────┐
+│    MCP Weather        │         │     MCP Web Search        │
+│  (localhost:4050)     │         │    (localhost:4051)       │
+│   Open-Meteo API      │         │    Brave Search API       │
+└───────────────────────┘         └───────────────────────────┘
+```
+
+## Design System
+
+All Forge UI components use **PrimeVue 4** with the **Aura theme** and violet primary color.
+
+| Element | Usage |
+|---------|-------|
+| **Primary (Violet)** | Interactive elements, buttons, links |
+| **Green** | Connected, enabled, success states |
+| **Red** | Errors, delete actions |
+| **Orange** | Tool calls in progress |
+| **Dark background** | Default theme (`#0f0f14`) |
+
+---
+
+Ready to try it yourself? Head to the [Getting Started](/docs/getting-started) guide!