SILVIA Core ApiDashboard Reference

Version: 3.1

Namespace: CognitiveCode.Silvia.Api

---

Interactive Reporting, Analytics & Custom Interfaces

SILVIA's Dashboard API transforms how AI systems present information and interact with users. Traditional reporting requires rigid templates and manual HTML generation. SILVIA inverts this: a fluent, programmatic API for building rich, interactive HTML5 dashboards that can function as reports, CRMs, data explorers, or custom query interfaces—all with natural language integration built-in.

This is not just a reporting library. It's an intelligent presentation layer that bridges AI cognition with human understanding, enabling everything from automated analytics reports to conversational data exploration interfaces in minutes instead of days.

Architectural Philosophy: Flexible Yet Powerful

Traditional Approach (Rigid):

Data → Fixed Template → Static HTML → Manual Distribution

[Hard-coded layouts, no interactivity, manual updates]

SILVIA Approach (Dynamic):

Data → Fluent API → Interactive Dashboard → Live Server OR Static Export

[Programmatic layouts, chat integration, auto-refresh, custom styling]

Dual-Output Architecture

SILVIA provides two complete output modes serving different deployment contexts:

1. Static File Export - Archive/Distribution/Offline Mode

   • Self-contained HTML5 files (no external dependencies)
   • Timestamped or fixed filenames for auto-refresh
   • Auto-open in browser on save
   • Embedded images and SVG graphics
   • Perfect for: Reports, archives, email distribution, offline viewing

2. Live HTTP Server - Real-Time/Interactive Mode

   • Built-in HTTP server (port 5000 default)
   • Live updates without page refresh
   • Integrated chat interface for natural language queries
   • Image caching for large media (prevents context overflow)
   • API endpoints for programmatic access
   • Perfect for: Dashboards, monitoring, live analytics, CRM interfaces

Both modes share identical API for content building, differing only in output delivery.

---

Modern Use Cases

1. Automated AdTech Analytics Dashboard (Live Server)

Generate comprehensive campaign performance reports with graphs, tables, and natural language insights, served via HTTP with live updates.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("AdTech Campaign Performance");
dashboard.SetDarkMode(true);

// Start live server on port 5000
dashboard.StartServer(5000);

// Add sections with data
dashboard.AddSection("Campaign Overview", "Performance metrics for Q1 2026");

// Add metrics table
var metrics = new Dictionary<string, string> {
    { "Total Campaigns", "142" },
    { "Active Campaigns", "89" },
    { "Total Revenue", "$2,847,293" },
    { "Conversion Rate", "3.42%" }
};
dashboard.AddMetricsTable(metrics);

// Add performance graph (PNG from graphing engine)
dashboard.AddImage("campaign_performance.png", "Campaign Performance", "100%", "400px");

// Add detailed data table
var tableData = new DashboardTableData(5, 100);
tableData.DefineColumn(0, "Campaign", DashboardFieldType.String);
tableData.DefineColumn(1, "Impressions", DashboardFieldType.Integer);
tableData.DefineColumn(2, "Revenue", DashboardFieldType.Decimal, "$", false);
tableData.DefineColumn(3, "CPA", DashboardFieldType.Decimal, "$", false);
tableData.DefineColumn(4, "ROI", DashboardFieldType.Decimal, "%", true);

// Populate rows
tableData.AddRow("Spring Sale 2026", 1250000, 85420.50m, 12.34m, 285.5m);
tableData.AddRow("Product Launch", 890000, 124590.00m, 8.92m, 412.8m);
// ... more rows ...

dashboard.AddTable(tableData);

// Update server with new content
dashboard.UpdateServer();

// Dashboard now live at http://localhost:5000/
// Users can view and interact via browser
// Chat interface enabled for natural language queries

2. Static Report Export with Auto-Refresh (Archive Mode)

Generate timestamped reports for distribution or auto-refreshing monitoring dashboards.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Daily Sales Report");

// Enable auto-refresh mode (fixed filename)
dashboard.SetAutoRefresh(true);

// Enable auto-open in browser
dashboard.SetAutoOpen(true);

// Build report
dashboard.AddSection("Sales Summary", "Performance for " + DateTime.Now.ToShortDateString());

var metrics = new Dictionary<string, string> {
    { "Total Sales", "$45,892" },
    { "Orders", "234" },
    { "Avg Order Value", "$196" }
};
dashboard.AddMetricsTable(metrics);

// Add trend graph
dashboard.AddImage("sales_trend.png", "7-Day Sales Trend", "100%", "300px");

// Save to file (opens in browser automatically)
dashboard.SaveToFile("Dashboard_Live.html");

// File saved with fixed name for auto-refresh
// Page can be reloaded to see updates

3. Custom CRM Interface with Natural Language Queries

Build a conversational CRM dashboard where users can explore data through chat.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Customer Relationship Manager");
dashboard.SetShowChatInterface(true); // Chat enabled by default

dashboard.StartServer(5050);

dashboard.AddSection("Active Customers", "High-value accounts requiring attention");

// Add customer table
var customers = new DashboardTableData(5, 50);
customers.DefineColumn(0, "Customer", DashboardFieldType.String);
customers.DefineColumn(1, "Last Contact", DashboardFieldType.String);
customers.DefineColumn(2, "Lifetime Value", DashboardFieldType.Decimal, "$", false);
customers.DefineColumn(3, "Status", DashboardFieldType.String);
customers.DefineColumn(4, "Next Action", DashboardFieldType.String);

customers.AddRow("Acme Corp", "2026-01-15", 284500m, "Active", "Renewal Call");
customers.AddRow("TechStart Inc", "2026-01-20", 125000m, "At Risk", "Urgent Follow-up");
// ... more rows ...

dashboard.AddTable(customers);

dashboard.UpdateServer();

// Users can now:
// 1. View customer data in browser at http://localhost:5050/
// 2. Use chat interface: "@me show me high-risk customers"
// 3. SILVIA processes query and responds with relevant insights
// 4. Natural language exploration of CRM data

4. Scientific Data Visualization with SVG and Graphs

Combine raster graphs, vector SVG, and tabular data for comprehensive scientific reports.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Experiment Results: Neural Network Training");

dashboard.AddSection("Training Progress", "Model performance over 1000 epochs");

// Add PNG graph from graphing engine
dashboard.AddImage("training_loss.png", "Training Loss", "100%", "400px");

// Add SVG for scalable architecture diagram
dashboard.AddSvgFromFile("network_architecture.svg");

// Add metrics
dashboard.AddText("Final Validation Accuracy: 94.3%", "highlight-text");

// Add detailed results table
var results = new DashboardTableData(4, 20);
results.DefineColumn(0, "Epoch", DashboardFieldType.Integer);
results.DefineColumn(1, "Train Loss", DashboardFieldType.Double);
results.DefineColumn(2, "Val Loss", DashboardFieldType.Double);
results.DefineColumn(3, "Val Accuracy", DashboardFieldType.Decimal, "%", true);

for (int i = 0; i < 1000; i += 50) {
    results.AddRow(i, 0.245 - (i * 0.0002), 0.312 - (i * 0.00015), 75.2 + (i * 0.019));
}

dashboard.AddTable(results);

// Save static report
dashboard.SaveToFile("experiment_results.html");

5. Live Monitoring Dashboard with MJPEG Streams

Real-time monitoring dashboard combining live video feeds with sensor data.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Facility Monitoring System");
dashboard.SetDarkMode(true);

dashboard.StartServer(8080);

dashboard.AddSection("Live Camera Feeds", "Real-time surveillance");

// Add MJPEG video streams
dashboard.AddMjpegStream("http://camera1.local:8081/stream", "640px", "480px", "Entrance Camera");
dashboard.AddMjpegStream("http://camera2.local:8082/stream", "640px", "480px", "Warehouse Camera");

dashboard.AddSection("Sensor Data", "Environmental conditions");

// Add sensor metrics (updated frequently via UpdateServer())
var sensors = new Dictionary<string, string> {
    { "Temperature", "72°F" },
    { "Humidity", "45%" },
    { "Motion Detected", "Zone 3, 5 minutes ago" },
    { "Air Quality", "Good (AQI: 42)" }
};
dashboard.AddMetricsTable(sensors);

dashboard.UpdateServer();

// Update sensor data every 5 seconds
while (monitoring) {
    await Task.Delay(5000);
    
    // Rebuild dashboard with updated sensor data
    dashboard.Clear();
    dashboard.AddSection("Live Camera Feeds", "Real-time surveillance");
    dashboard.AddMjpegStream("http://camera1.local:8081/stream", "640px", "480px", "Entrance Camera");
    dashboard.AddMjpegStream("http://camera2.local:8082/stream", "640px", "480px", "Warehouse Camera");
    
    dashboard.AddSection("Sensor Data", "Environmental conditions (Updated: " + DateTime.Now.ToString("HH:mm:ss") + ")");
    
    // Get fresh sensor readings
    var freshSensors = GetCurrentSensorData();
    dashboard.AddMetricsTable(freshSensors);
    
    dashboard.UpdateServer(); // Live refresh without page reload
}

6. Custom Query Interface with Natural Language

Build a data exploration interface where users query databases through conversational AI.

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Sales Data Explorer");
dashboard.SetShowChatInterface(true);

dashboard.StartServer(5000);

dashboard.AddSection("Query Results", "Ask questions in natural language using the chat interface below");

dashboard.AddText("Try asking: 'Show me top 10 customers by revenue' or 'What were sales in California last month?'", "help-text");

// Initial empty state
dashboard.AddText("Use the chat interface to query the database.", "placeholder-text");

dashboard.UpdateServer();

// Server endpoints can be extended to handle custom queries
// Chat interface connects to SILVIA brain for NLP processing
// Brain interprets query → generates SQL → returns formatted results
// Dashboard updates with query results via UpdateServer()

---

Core Concepts

1. Fluent Content Building API

The dashboard uses a builder pattern where you progressively add content elements through method calls:

dashboard.Clear();                                    // Reset content
dashboard.AddSection("Title", "Description");         // Add section
dashboard.AddText("Plain text content");              // Add text
dashboard.AddMetricsTable(metricsDict);              // Add key-value table
dashboard.AddTable(tableData);                       // Add data table
dashboard.AddImage("path.png", "Alt", "800px");      // Add image
dashboard.AddSvg(svgContent, "600", "400");          // Add SVG
dashboard.AddMjpegStream("http://url", "640", "480"); // Add live video
dashboard.EndSection();                              // Close section

Each method appends HTML to an internal buffer. Call GenerateHTML() to get final HTML or SaveToFile() / UpdateServer() to output.

2. Table Data Structures

SILVIA provides type-safe table structures for building complex data tables:

DashboardTableData - Modern table builder with column definitions:

var table = new DashboardTableData(columnCount: 4, estimatedRows: 100);

// Define columns with types and units
table.DefineColumn(0, "Product", DashboardFieldType.String);
table.DefineColumn(1, "Price", DashboardFieldType.Decimal, "$", false);  // Prefix: $50
table.DefineColumn(2, "Weight", DashboardFieldType.Double, "kg", true);  // Suffix: 50kg
table.DefineColumn(3, "In Stock", DashboardFieldType.Boolean);

// Add rows with type-safe data
table.AddRow("Widget A", 29.99m, 1.25, true);
table.AddRow("Widget B", 45.00m, 2.50, false);

// Style individual cells
table.SetCellStyle(0, 1, DashboardCellStyle.Positive); // Highlight price in green
table.SetCellStyle(1, 3, DashboardCellStyle.Negative); // Highlight out-of-stock in red

// Sort rows
int[] sortedIndices = { 1, 0 }; // Custom sort order
table.ReorderRows(sortedIndices);

dashboard.AddTable(table);

Legacy Structures (for backward compatibility):

• RowData - Individual row with type-safe getters
• ColumnDefinition - Column metadata
• ReportSchema - Schema validation
• ReportData - Schema + rows collection

3. Static vs. Live Server Modes

Static File Mode:

dashboard.SetAutoRefresh(true);  // Use fixed filename
dashboard.SetAutoOpen(true);     // Open in browser on save

dashboard.SaveToFile("Dashboard_Live.html");
// Creates: Dashboard_Live.html (or timestamped if auto-refresh disabled)
// Opens automatically in default browser

Live Server Mode:

dashboard.StartServer(5000);     // Start HTTP server on port 5000

// ... build dashboard content ...

dashboard.UpdateServer();        // Push content to live server

// Dashboard accessible at:
// http://localhost:5000/          - Main dashboard
// http://localhost:5000/chat      - Chat interface page
// http://localhost:5000/image/*   - Cached images
// http://localhost:5000/api/*     - API endpoints

4. Image Handling: Smart Caching

SILVIA automatically detects large images and caches them to prevent base64 bloat:

Small Images (< 50KB):

• Embedded as base64 data URIs
• Self-contained in HTML
• Fast for small logos/icons

Large Images (≥ 50KB):

• Cached on HTTP server
• Served via /image/filename endpoint
• Prevents context window overflow
• Requires live server to be running

// Small logo - embedded as base64
dashboard.AddImage("logo_small.png", "Logo", "100px");

// Large graph - cached on server (if server running)
dashboard.AddImage("large_chart.png", "Performance Chart", "100%", "600px");
// → Served as http://localhost:5000/image/large_chart.png

// URL images - passed through directly
dashboard.AddImage("https://example.com/banner.jpg", "Banner");

Manual Cache Management:

// Clear image cache (useful before rebuilding dashboard)
if (dashboard.IsServerRunning()) {
    dashboard.UpdateServer(); // Updates and can optionally clear cache
}

5. Chat Interface Integration

The chat interface is enabled by default and provides conversational access to SILVIA's brain:

dashboard.SetShowChatInterface(true);  // Enable (default)
dashboard.SetShowChatInterface(false); // Disable

// When enabled, dashboard includes:
// 1. Floating chat button (bottom-right)
// 2. Full chat page at /chat endpoint
// 3. WebSocket connection to SILVIA brain
// 4. Natural language query processing
// 5. Context awareness of dashboard content

Chat Interface Features:

• Real-time conversation with SILVIA
• Context-aware responses (knows dashboard content)
• Query database/generate reports via natural language
• Trigger dashboard updates through conversation
• Persistent chat history

6. Styling and Customization

Dark Mode:

dashboard.SetDarkMode(true);  // Dark theme
dashboard.SetDarkMode(false); // Light theme (default)

Custom CSS:

string customCss = @"
    .dashboard-section { 
        border-radius: 12px; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    }
    .section-heading { 
        color: #2563eb; 
        font-size: 1.8em; 
    }
";

dashboard.SetStyleSheet(customCss);
// Overrides default styles completely

CSS Classes Available:

• .dashboard-section - Section container
• .section-heading - Section heading (H2)
• .section-description - Section description (P)
• .dashboard-table - Table element
• .table-header - Table header row
• .table-row - Table body row
• .positive-cell - Positive value (green)
• .negative-cell - Negative value (red)
• .highlight-text - Highlighted text
• .help-text - Help/instruction text
• .placeholder-text - Placeholder text

7. Plain Text Export

Extract dashboard content as plain text for logging, NLP processing, or search indexing:

string plainText = dashboard.GetPlainText();

// Returns:
// ===== SILVIA Dashboard =====
// 
// ### Campaign Overview
// Performance metrics for Q1 2026
// 
// Total Campaigns: 142
// Active Campaigns: 89
// Total Revenue: $2,847,293
// Conversion Rate: 3.42%
// ...

Useful for:

• Feeding dashboard content back into SILVIA brain for analysis
• Search indexing
• Text-based archives
• Terminal display
• NLP processing

---

API Reference

Dashboard Management

SilviaApiDashboard(core)

Create a new dashboard with default settings (light mode, default title).

Parameters:

• core (SilviaCore) - SILVIA Core instance for integration

Example:

var dashboard = core.ApiDashboard();

---

SilviaApiDashboard(core, title, darkMode, customStylesheet)

Create a new dashboard with custom configuration.

Parameters:

• core (SilviaCore) - SILVIA Core instance for integration
• title (string) - Dashboard title
• darkMode (bool, optional) - Enable dark mode theme (default: false)
• customStylesheet (string, optional) - Custom CSS stylesheet (null = use default)

Example:

var dashboard = new SilviaApiDashboard(core, "Sales Analytics", true, customCss);

---

SetTitle(title)

Set the dashboard title displayed in browser tab and header.

Parameters:

• title (string) - Dashboard title text

Example:

dashboard.SetTitle("Q1 2026 Revenue Report");

---

SetDarkMode(enabled)

Enable or disable dark mode theme.

Parameters:

• enabled (bool) - True for dark mode, false for light mode

Example:

dashboard.SetDarkMode(true);

---

SetStyleSheet(css)

Set custom CSS stylesheet (completely overrides default styles).

Parameters:

• css (string) - CSS stylesheet content (null to use default)

Example:

string customCss = @"
    body { font-family: 'Courier New', monospace; }
    .dashboard-section { background: #f0f0f0; }
";
dashboard.SetStyleSheet(customCss);

---

Clear()

Clear all content and reset dashboard to empty state.

Example:

dashboard.Clear();
// Dashboard now empty, ready for new content

---

File Export Configuration

SetAutoRefresh(enabled)

Enable auto-refresh mode (saves to fixed filename instead of timestamped).

Parameters:

• enabled (bool) - True for fixed filename (Dashboard_Live.html), false for timestamped

Behavior:

• Enabled: Saves to Dashboard_Live.html (overwrites on each save)
• Disabled: Saves to Dashboard_YYYYMMDD_HHMMSS.html (unique per save)

Example:

dashboard.SetAutoRefresh(true);
dashboard.SaveToFile("Dashboard_Live.html");
// Subsequent saves overwrite same file for auto-refresh

---

GetAutoRefresh()

Get current auto-refresh mode status.

Returns: bool - True if auto-refresh enabled, false otherwise

Example:

bool autoRefresh = dashboard.GetAutoRefresh();

---

SetAutoOpen(enabled)

Enable auto-open in browser after save.

Parameters:

• enabled (bool) - True to open dashboard in browser automatically after save

Example:

dashboard.SetAutoOpen(true);
dashboard.SaveToFile("report.html");
// Opens in default browser automatically

---

GetAutoOpen()

Get current auto-open in browser status.

Returns: bool - True if auto-open enabled, false otherwise

Example:

bool autoOpen = dashboard.GetAutoOpen();

---

SaveToFile(filePath)

Save dashboard to HTML file.

Parameters:

• filePath (string) - File path to save dashboard HTML

Returns: bool - True if save successful, false on error

Behavior:

• Generates complete self-contained HTML5 document
• Embeds small images as base64
• References large images (requires server for viewing)
• Opens in browser if auto-open enabled

Example:

bool success = dashboard.SaveToFile("C:\\Reports\\dashboard.html");
if (!success) {
    Console.WriteLine("Failed to save dashboard");
}

---

Server Management

StartServer(port)

Start the HTTP dashboard server (static, shared across all dashboard instances).

Parameters:

• port (int, optional) - Port number to listen on (default: 5000)

Returns: bool - True if server started successfully, false if already running or failed

Behavior:

• Starts non-blocking HTTP server
• Server is shared across all dashboard instances (singleton)
• Serves dashboard at http://localhost:{port}/
• Provides /chat, /image/*, /api/* endpoints

Example:

if (dashboard.StartServer(5000)) {
    Console.WriteLine("Dashboard server running at http://localhost:5000/");
} else {
    Console.WriteLine("Server already running or failed to start");
}

---

StopServer()

Stop the HTTP dashboard server.

Example:

dashboard.StopServer();

---

ShutdownServer() (Static)

Cleanup method - ensures server is stopped on app shutdown.

Example:

SilviaApiDashboard.ShutdownServer();

---

IsServerRunning()

Check if HTTP server is currently running.

Returns: bool - True if server is running, false otherwise

Example:

if (dashboard.IsServerRunning()) {
    dashboard.UpdateServer();
}

---

UpdateServer()

Update the live server with current dashboard HTML (pushes changes to browser).

Behavior:

• Generates HTML from current content
• Updates live server display
• No page refresh needed in browser
• Clears stale data

Example:

dashboard.Clear();
dashboard.AddSection("Live Data", "Updated: " + DateTime.Now);
dashboard.AddText("New content here...");
dashboard.UpdateServer(); // Browser shows updated content immediately

---

Chat Interface Configuration

SetShowChatInterface(enabled)

Enable or disable chat interface in dashboards.

Parameters:

• enabled (bool) - True to show chat interface, false to hide

Default: Enabled (true)

Example:

dashboard.SetShowChatInterface(true);  // Enable chat (default)
dashboard.SetShowChatInterface(false); // Disable for static reports

---

GetShowChatInterface()

Get current chat interface status.

Returns: bool - True if chat interface enabled, false otherwise

Example:

bool chatEnabled = dashboard.GetShowChatInterface();

---

Content Building: Sections

AddSection(heading, description)

Add a section heading with optional description.

Parameters:

• heading (string) - Section heading text
• description (string, optional) - Optional section description (null = no description)

Behavior:

• Creates new content section
• Sections visually separate content groups
• Can be styled via .dashboard-section CSS class

Example:

dashboard.AddSection("Sales Overview", "Q1 2026 performance metrics");

// Section with no description
dashboard.AddSection("Detailed Breakdown");

---

EndSection()

Close the current section.

Behavior:

• Closes <div> container for current section
• Not required (sections auto-close), but improves HTML structure

Example:

dashboard.AddSection("Overview");
dashboard.AddText("Some content");
dashboard.EndSection();

dashboard.AddSection("Details");
dashboard.AddText("More content");
dashboard.EndSection();

---

Content Building: Text and Metrics

AddText(text, cssClass)

Add plain text content.

Parameters:

• text (string) - Text content to add
• cssClass (string, optional) - Optional CSS class name for styling (null = default)

Example:

dashboard.AddText("This is plain text.");
dashboard.AddText("Important: Check metrics below", "highlight-text");
dashboard.AddText("Instructions: Use chat to query data", "help-text");

---

AddMetricsTable(metrics)

Add a simple key-value table (for summary metrics).

Parameters:

• metrics (Dictionary<string, string>) - Dictionary of metric name → value

Behavior:

• Creates two-column table (Key | Value)
• Styled automatically for metrics display
• Perfect for summary KPIs

Example:

var metrics = new Dictionary<string, string> {
    { "Total Revenue", "$1,245,678" },
    { "Total Orders", "3,492" },
    { "Avg Order Value", "$356" },
    { "Conversion Rate", "2.8%" }
};

dashboard.AddMetricsTable(metrics);

---

Content Building: Tables

AddTable(tableData)

Add a data table with full formatting and styling support.

Parameters:

• tableData (DashboardTableData) - Table data structure

Example:

var table = new DashboardTableData(3, 50);

table.DefineColumn(0, "Product", DashboardFieldType.String);
table.DefineColumn(1, "Sales", DashboardFieldType.Decimal, "$", false);
table.DefineColumn(2, "Growth", DashboardFieldType.Decimal, "%", true);

table.AddRow("Widget A", 45000m, 12.5m);
table.AddRow("Widget B", 38000m, -3.2m);

// Style negative growth in red
table.SetCellStyle(1, 2, DashboardCellStyle.Negative);

dashboard.AddTable(table);

---

Content Building: Images

AddImage(imagePath, altText, width, height)

Add an image (file path, URL, or embedded).

Parameters:

• imagePath (string) - Image file path, URL, or embedded data URI
• altText (string, optional) - Alternative text for accessibility
• width (string, optional) - CSS width (e.g., "800px", "100%", null = auto)
• height (string, optional) - CSS height (e.g., "600px", "auto", null = auto)

Behavior:

• URL (http/https): Linked directly (no embedding)
• Small file (< 50KB): Embedded as base64 data URI
• Large file (≥ 50KB): Cached on server, served via /image/ endpoint
• Non-existent file: Error message displayed

Example:

// URL image (linked directly)
dashboard.AddImage("https://example.com/logo.png", "Company Logo");

// Local small image (embedded)
dashboard.AddImage("small_icon.png", "Icon", "50px", "50px");

// Local large image (cached on server)
dashboard.AddImage("performance_chart.png", "Performance", "100%", "400px");

---

AddAppLogoImage(maxWidth, maxHeight)

Add application logo image from standard locations (Resources/logo.png or Assets/logo.png).

Parameters:

• maxWidth (string, optional) - Maximum width (default: "150px")
• maxHeight (string, optional) - Maximum height (default: "50px")

Returns: bool - True if logo found and added, false otherwise

Example:

if (dashboard.AddAppLogoImage("200px", "60px")) {
    Console.WriteLine("Logo added successfully");
}

---

Content Building: SVG Graphics

AddSvg(svgContent, width, height, viewBox)

Add inline SVG content.

Parameters:

• svgContent (string) - SVG markup (without <svg> wrapper tags)
• width (string, optional) - SVG width (default: "800")
• height (string, optional) - SVG height (default: "600")
• viewBox (string, optional) - SVG viewBox attribute (e.g., "0 0 800 600", null = auto-calculated)

Example:

string svgContent = @"
    <circle cx='50' cy='50' r='40' fill='blue' />
    <text x='50' y='55' text-anchor='middle' fill='white'>42</text>
";

dashboard.AddSvg(svgContent, "100", "100", "0 0 100 100");

---

AddSvgFromFile(svgFilePath)

Add SVG content from file.

Parameters:

• svgFilePath (string) - Path to .svg file

Behavior:

• Reads SVG file
• Embeds content inline
• Preserves viewBox and dimensions from file

Example:

dashboard.AddSvgFromFile("architecture_diagram.svg");

---

Content Building: Video Streams

AddMjpegStream(streamUrl, width, height, altText)

Add MJPEG video stream (multipart/x-mixed-replace).

Parameters:

• streamUrl (string) - URL to MJPEG stream
• width (string, optional) - CSS width (default: "800px")
• height (string, optional) - CSS height (default: "600px")
• altText (string, optional) - Alternative text (default: "Live Stream")

Use Case: Security cameras, live monitoring, real-time video feeds

Example:

dashboard.AddMjpegStream(
    "http://camera1.local:8081/stream", 
    "640px", "480px", 
    "Front Entrance Camera"
);

---

HTML Generation

GenerateHTML()

Generate complete HTML5 document from current content.

Returns: string - Complete HTML document

Behavior:

• Generates self-contained HTML5 document
• Includes embedded styles (default or custom)
• Embeds small images as base64
• References large images via server URLs
• Includes chat interface (if enabled)

Example:

string html = dashboard.GenerateHTML();

// Save manually
File.WriteAllText("custom_output.html", html);

---

GetPlainText()

Convert dashboard content to plain text (strips HTML).

Returns: string - Dashboard content as plain text

Use Cases:

• Feeding content back to SILVIA brain for analysis
• Search indexing
• Text archives
• Terminal display

Example:

string plainText = dashboard.GetPlainText();

Console.WriteLine(plainText);
// Output:
// ===== Sales Dashboard =====
// 
// ### Overview
// Q1 2026 performance
// 
// Total Revenue: $1,245,678
// ...

---

Table Data Structures

DashboardTableData (Recommended)

Modern table builder with column definitions and type safety.

Constructor

var table = new DashboardTableData(columnCount, estimatedRows);

Parameters:

• columnCount (int) - Number of columns
• estimatedRows (int, optional) - Estimated row count for pre-allocation (default: 100)

---

DefineColumn(colIndex, name, type, unit, suffixedUnit)

Register a column definition with type and unit formatting.

Parameters:

• colIndex (int) - Column index (0-based)
• name (string) - Column name (displayed in header)
• type (DashboardFieldType) - Data type (String, Integer, Decimal, Double, Boolean, DateTime)
• unit (string, optional) - Unit symbol (e.g., "$", "kg", "%", default: "")
• suffixedUnit (bool, optional) - True = suffix (50kg), false = prefix ($50), default: false

Example:

table.DefineColumn(0, "Product", DashboardFieldType.String);
table.DefineColumn(1, "Price", DashboardFieldType.Decimal, "$", false);  // $50.00
table.DefineColumn(2, "Weight", DashboardFieldType.Double, "kg", true);  // 1.25kg
table.DefineColumn(3, "In Stock", DashboardFieldType.Boolean);

---

AddRow(values)

Add a row of data (primitives only - validated against column types).

Parameters:

• values (params object[]) - Row values matching column order

Example:

table.AddRow("Widget A", 29.99m, 1.25, true);
table.AddRow("Widget B", 45.00m, 2.50, false);

---

SetCellStyle(row, col, style)

Set cell styling (for highlighting positive/negative values).

Parameters:

• row (int) - Row index (0-based)
• col (int) - Column index (0-based)
• style (DashboardCellStyle) - Style (None, Positive, Negative)

Example:

// Highlight positive growth in green
table.SetCellStyle(0, 2, DashboardCellStyle.Positive);

// Highlight negative change in red
table.SetCellStyle(1, 3, DashboardCellStyle.Negative);

---

GetCellFormatted(row, col)

Get formatted cell value as string (with unit formatting applied).

Parameters:

• row (int) - Row index (0-based)
• col (int) - Column index (0-based)

Returns: string - Formatted cell value

Example:

string price = table.GetCellFormatted(0, 1); // "$29.99"
string weight = table.GetCellFormatted(0, 2); // "1.25kg"

---

ReorderRows(sortedIndices)

Reorder rows based on sorted indices (for custom sorting).

Parameters:

• sortedIndices (int[]) - Array of row indices in desired order

Example:

// Sort by price descending (assume you calculated indices)
int[] sortedIndices = { 2, 0, 1 }; // Row 2 first, then 0, then 1
table.ReorderRows(sortedIndices);

---

DashboardFieldType Enum

public enum DashboardFieldType {
    String,      // Text data
    Integer,     // Whole numbers
    Decimal,     // Decimal numbers (currency, precise values)
    Double,      // Floating-point numbers
    Boolean,     // True/False
    DateTime     // Date/time values
}

---

DashboardCellStyle Enum

public enum DashboardCellStyle {
    None,        // No special styling
    Positive,    // Green highlight (good/up/profit)
    Negative     // Red highlight (bad/down/loss)
}

---

Best Practices

1. Choose Static vs. Live Server Appropriately

Use Static Files When:

• Generating reports for distribution (email, archive)
• One-time analytics snapshots
• Offline viewing required
• No interactivity needed

Use Live Server When:

• Real-time monitoring dashboards
• Interactive data exploration
• Natural language queries needed
• Large images/media (prevents base64 bloat)
• Multiple users viewing simultaneously

---

2. Leverage Chat Interface for Conversational Analytics

Enable chat for user-facing dashboards:

dashboard.SetShowChatInterface(true);
dashboard.StartServer(5000);

// Users can now query data through natural language:
// "@me show me top 5 customers"
// "@me what was revenue in January?"
// "@me compare Q1 vs Q2 performance"

Disable chat for static reports:

dashboard.SetShowChatInterface(false);
dashboard.SaveToFile("quarterly_report.html");

---

3. Use Tables for Structured Data, Metrics for KPIs

Metrics table for high-level KPIs:

var kpis = new Dictionary<string, string> {
    { "Revenue", "$1.2M" },
    { "Growth", "+15%" },
    { "Customers", "3,492" }
};
dashboard.AddMetricsTable(kpis);

Data table for detailed breakdowns:

var details = new DashboardTableData(5, 100);
details.DefineColumn(0, "Product", DashboardFieldType.String);
details.DefineColumn(1, "Units Sold", DashboardFieldType.Integer);
details.DefineColumn(2, "Revenue", DashboardFieldType.Decimal, "$", false);
// ... add rows ...
dashboard.AddTable(details);

---

4. Optimize Image Handling

For small logos/icons:

// These will be embedded (< 50KB)
dashboard.AddImage("logo.png", "Logo", "100px");

For large graphs/charts:

// Ensure server is running for large images
if (!dashboard.IsServerRunning()) {
    dashboard.StartServer(5000);
}

// Large images cached automatically
dashboard.AddImage("performance_chart.png", "Chart", "100%", "600px");

Clear cache when rebuilding frequently:

dashboard.Clear();
// Build new content...
dashboard.UpdateServer(); // Auto-clears old cached images

---

5. Structure Content with Sections

Organize dashboards logically:

dashboard.Clear();

dashboard.AddSection("Executive Summary", "High-level overview");
dashboard.AddMetricsTable(kpis);

dashboard.AddSection("Performance Trends", "Historical analysis");
dashboard.AddImage("trends.png", "Trends", "100%", "400px");

dashboard.AddSection("Detailed Breakdown", "Itemized data");
dashboard.AddTable(detailedTable);

dashboard.AddSection("Forecast", "Projections for next quarter");
dashboard.AddText("Based on current trajectory...");

---

6. Use Auto-Refresh for Live Monitoring

Setup auto-refreshing dashboard:

dashboard.SetAutoRefresh(true);

while (monitoring) {
    dashboard.Clear();
    dashboard.AddSection("Live Metrics", "Updated: " + DateTime.Now);
    
    var freshMetrics = GetCurrentMetrics();
    dashboard.AddMetricsTable(freshMetrics);
    
    dashboard.SaveToFile("Dashboard_Live.html");
    // Browser can auto-reload this file (via meta refresh or F5)
    
    await Task.Delay(5000);
}

Or use live server for true real-time (no F5 needed):

dashboard.StartServer(5000);

while (monitoring) {
    dashboard.Clear();
    dashboard.AddSection("Live Metrics", "Updated: " + DateTime.Now);
    
    var freshMetrics = GetCurrentMetrics();
    dashboard.AddMetricsTable(freshMetrics);
    
    dashboard.UpdateServer(); // Browser updates immediately, no refresh
    
    await Task.Delay(5000);
}

---

7. Combine with SILVIA Brain for Smart Dashboards

Feed dashboard data to brain for insights:

// Build dashboard
dashboard.AddTable(salesTable);

// Extract plain text for brain analysis
string dashboardText = dashboard.GetPlainText();

// Get AI insights
string insights = core.ApiBrain().GetResponse(
    "Analyze this sales data and provide key insights: " + dashboardText
);

// Add insights to dashboard
dashboard.AddSection("AI Insights", "Generated by SILVIA");
dashboard.AddText(insights);

dashboard.UpdateServer();

Enable conversational queries:

// Users can ask dashboard questions through chat:
// "@me what product has highest revenue?"
// "@me show me growth trends"
// Brain processes query → accesses dashboard data → responds

---

Advanced Patterns

Pattern 1: Real-Time CRM Dashboard

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Customer Relationship Manager");
dashboard.SetShowChatInterface(true);

dashboard.StartServer(5050);

void UpdateCrmDashboard() {
    dashboard.Clear();
    
    // High-level metrics
    dashboard.AddSection("Overview", "Current customer status");
    var metrics = new Dictionary<string, string> {
        { "Total Customers", "1,247" },
        { "Active This Month", "892" },
        { "At Risk", "34" },
        { "Lifetime Value", "$18.2M" }
    };
    dashboard.AddMetricsTable(metrics);
    
    // Customer table
    dashboard.AddSection("Customer List", "Click names for details");
    var customers = GetCustomerTable(); // DashboardTableData
    dashboard.AddTable(customers);
    
    // Chat instructions
    dashboard.AddSection("Query Assistant", "Ask questions about your customers");
    dashboard.AddText("Try: '@me show high-risk customers' or '@me who needs follow-up?'", "help-text");
    
    dashboard.UpdateServer();
}

// Update every 30 seconds
while (running) {
    UpdateCrmDashboard();
    await Task.Delay(30000);
}

---

Pattern 2: Scientific Experiment Dashboard

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Experiment Monitor: Neural Network Training");
dashboard.SetDarkMode(true);

dashboard.StartServer(8080);

void UpdateExperimentDashboard(int epoch, double loss, double accuracy) {
    dashboard.Clear();
    
    dashboard.AddSection("Training Progress", $"Epoch {epoch}/1000");
    
    // Live metrics
    var metrics = new Dictionary<string, string> {
        { "Current Epoch", epoch.ToString() },
        { "Training Loss", loss.ToString("F4") },
        { "Validation Accuracy", (accuracy * 100).ToString("F2") + "%" },
        { "ETA", EstimateTimeRemaining(epoch).ToString() }
    };
    dashboard.AddMetricsTable(metrics);
    
    // Loss graph (updated each epoch)
    dashboard.AddImage("training_loss.png", "Loss Over Time", "100%", "400px");
    
    // Accuracy graph
    dashboard.AddImage("validation_accuracy.png", "Accuracy Over Time", "100%", "400px");
    
    // Architecture diagram (static)
    dashboard.AddSection("Network Architecture");
    dashboard.AddSvgFromFile("model_architecture.svg");
    
    dashboard.UpdateServer();
}

// Training loop
for (int epoch = 0; epoch < 1000; epoch++) {
    (double loss, double accuracy) = TrainEpoch(model, trainData);
    
    if (epoch % 10 == 0) {
        SaveGraphs(lossHistory, accuracyHistory);
        UpdateExperimentDashboard(epoch, loss, accuracy);
    }
}

---

Pattern 3: Multi-Camera Monitoring Station

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Security Monitoring Station");
dashboard.SetDarkMode(true);

dashboard.StartServer(7000);

dashboard.AddSection("Live Camera Feeds");

// Grid of camera streams
dashboard.AddMjpegStream("http://cam1.local:8081/stream", "640px", "480px", "Entrance");
dashboard.AddMjpegStream("http://cam2.local:8082/stream", "640px", "480px", "Warehouse");
dashboard.AddMjpegStream("http://cam3.local:8083/stream", "640px", "480px", "Parking Lot");
dashboard.AddMjpegStream("http://cam4.local:8084/stream", "640px", "480px", "Office Area");

dashboard.AddSection("Sensor Data");

// Update sensor data every 5 seconds
while (monitoring) {
    var sensors = new Dictionary<string, string> {
        { "Temperature", GetTemperature() + "°F" },
        { "Motion Detected", GetMotionStatus() },
        { "Door Status", GetDoorStatus() },
        { "Last Event", GetLastEvent() }
    };
    
    // Rebuild sensor section only (keep video streams)
    dashboard.Clear();
    dashboard.AddSection("Live Camera Feeds");
    dashboard.AddMjpegStream("http://cam1.local:8081/stream", "640px", "480px", "Entrance");
    dashboard.AddMjpegStream("http://cam2.local:8082/stream", "640px", "480px", "Warehouse");
    dashboard.AddMjpegStream("http://cam3.local:8083/stream", "640px", "480px", "Parking Lot");
    dashboard.AddMjpegStream("http://cam4.local:8084/stream", "640px", "480px", "Office Area");
    
    dashboard.AddSection("Sensor Data", "Updated: " + DateTime.Now.ToString("HH:mm:ss"));
    dashboard.AddMetricsTable(sensors);
    
    dashboard.UpdateServer();
    
    await Task.Delay(5000);
}

---

Pattern 4: Conversational Data Explorer

var dashboard = core.ApiDashboard();
dashboard.SetTitle("Sales Data Explorer");
dashboard.SetShowChatInterface(true);

dashboard.StartServer(5000);

// Initial state
dashboard.AddSection("Query Results", "Ask questions using the chat interface");
dashboard.AddText("Try: 'Show me top 10 customers by revenue'", "help-text");
dashboard.AddText("Or: 'What were sales in California last month?'", "help-text");
dashboard.UpdateServer();

// Hook into SILVIA brain for query processing
core.ApiBrain().OnResponse += (sender, response) => {
    // When user asks question via chat:
    // 1. Brain processes query
    // 2. Generates SQL or filters data
    // 3. Calls this handler with results
    
    if (response.Contains("[QUERY_RESULTS]")) {
        // Extract structured data from brain response
        var results = ParseQueryResults(response);
        
        // Update dashboard with results
        dashboard.Clear();
        dashboard.AddSection("Query Results", "Updated: " + DateTime.Now.ToShortTimeString());
        dashboard.AddTable(results);
        dashboard.UpdateServer();
    }
};

---

Remarks

SILVIA's Dashboard API represents a fundamental shift from static reporting to dynamic, conversational interfaces. By combining fluent programmatic control with natural language integration, SILVIA enables dashboards that are not just viewed but queried, explored, and understood through conversation.

Key Innovations:

1. Dual-Output Architecture - Static files OR live server, same API
2. Chat Integration - Natural language queries built-in
3. Smart Image Caching - Prevents base64 bloat for large media
4. Type-Safe Tables - Structured data with automatic formatting
5. Real-Time Updates - Live server updates without page refresh
6. Plain Text Export - Feed dashboard content back to AI brain
7. Video Stream Support - MJPEG monitoring integration
8. Fluent API - Progressive content building

The Result: What once required days of HTML template engineering is now minutes of fluent API calls. Dashboards become living interfaces that combine structured data presentation with conversational exploration, enabling users to not just see data but understand it through dialogue.

---

© Copyright Cognitive Code Corp. 2007-2026

SILVIA is a registered Trademark of Cognitive Code Corp.