From f059d9ed7568b0cb79dcb291e7d9ca1568748b23 Mon Sep 17 00:00:00 2001 From: yatharthchopra2424 Date: Thu, 23 Apr 2026 23:44:10 +0530 Subject: [PATCH 1/3] ui: enhance dashboard transparency with predicted labels and tooltips - added "AI-Predicted" labeling to main dashboard and chart headers - implemented informational tooltips for KPI cards explaining data sources (CO2, savings, etc.) - enhanced PremiumCompanyForecastChart tooltips with detailed series descriptions - improved visual clarity for predicted vs actual values across the company dashboard --- gridcast-react/components/GridCastApp.tsx | 93 +++++++++++++++++++---- 1 file changed, 78 insertions(+), 15 deletions(-) diff --git a/gridcast-react/components/GridCastApp.tsx b/gridcast-react/components/GridCastApp.tsx index 5a86885..d9524a3 100644 --- a/gridcast-react/components/GridCastApp.tsx +++ b/gridcast-react/components/GridCastApp.tsx @@ -510,11 +510,30 @@ function PremiumCompanyForecastChart({ const value = series[idx]?.[dataPointIndex]; if (typeof value !== "number") return ""; const color = w.globals.colors?.[idx] ?? "#22d3ee"; - return `
${name}${Math.round(value).toLocaleString('en-IN')} MW
`; + let desc = ""; + if (name === "Actual") desc = "Live SCADA telemetry"; + else if (name.includes("Forecast")) desc = `AI predicted load (${modelLabel})`; + else if (name === "Optimized Target") desc = "Recommended demand shift"; + + return ` +
+
+ ${name} + ${Math.round(value).toLocaleString('en-IN')} MW +
+
${desc}
+
+ `; }) .join(""); - return `
${t}
${rows}
`; + return ` +
+
Time Slot
+
${t}
+ ${rows} +
+ `; }, }, annotations: { @@ -1249,11 +1268,51 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { const modelLabel = model === "xgboost" ? "XGBoost" : "LSTM"; const kpiCards = [ - { label: "CO₂ Avoided (MTD)", value: (co2Saved / 12).toFixed(1), unit: "tCO₂", color: "#10b981", icon: , trend: "+8.2% vs last month" }, - { label: "Energy Optimised (MTD)", value: (savingsMWh / 12).toFixed(0), unit: "MWh", color: "#06b6d4", icon: , trend: "+12.1% vs last month" }, - { label: "Cost Saved (MTD)", value: `₹${((inrSaved / 12) / 100000).toFixed(1)}L`, unit: "", color: "#f59e0b", icon: , trend: "+9.5% vs last month" }, - { label: "Grid Carbon Intensity", value: "0.716", unit: "tCO₂/MWh", color: "#a78bfa", icon: , trend: "CEA FY2022-23 baseline" }, - { label: "Renewable Share", value: "22", unit: "%", color: "#10b981", icon: , trend: "Target: 40% by 2027" }, + { + label: "CO₂ Avoided (MTD)", + value: (co2Saved / 12).toFixed(1), + unit: "tCO₂", + color: "#10b981", + icon: , + trend: "+8.2% vs last month", + desc: "Calculated based on 12.7% predicted energy optimization vs India grid emission factor of 0.716 tCO₂/MWh." + }, + { + label: "Energy Optimised (MTD)", + value: (savingsMWh / 12).toFixed(0), + unit: "MWh", + color: "#06b6d4", + icon: , + trend: "+12.1% vs last month", + desc: "Predicted reduction in grid demand through AI-driven load shifting and peak avoidance strategies." + }, + { + label: "Cost Saved (MTD)", + value: `₹${((inrSaved / 12) / 100000).toFixed(1)}L`, + unit: "", + color: "#f59e0b", + icon: , + trend: "+9.5% vs last month", + desc: "Estimated financial savings based on reduced energy waste and avoidance of peak-time TOD (Time of Day) tariffs." + }, + { + label: "Grid Carbon Intensity", + value: "0.716", + unit: "tCO₂/MWh", + color: "#a78bfa", + icon: , + trend: "CEA FY2022-23 baseline", + desc: "Regional grid emission intensity baseline provided by the Central Electricity Authority (CEA)." + }, + { + label: "Renewable Share", + value: "22", + unit: "%", + color: "#10b981", + icon: , + trend: "Target: 40% by 2027", + desc: "Real-time estimated contribution of solar, wind, and hydro to the regional grid mix." + }, { label: "Forecast Accuracy", value: metrics.mape !== null ? (100 - metrics.mape).toFixed(1) : "N/A", @@ -1264,6 +1323,7 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { metrics.mape !== null ? `MAPE ${metrics.mape.toFixed(2)}% · ${horizon} · ${modelLabel}` : `Awaiting ${modelLabel} ${horizon} metrics`, + desc: "The precision of our AI model. 100% minus Mean Absolute Percentage Error (MAPE) against actual grid telemetry." }, ]; @@ -1362,14 +1422,17 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { {activeTab === "overview" && ( <>
-

Company Energy Dashboard

-

Your real-time electricity intelligence — powered by GridCast AI

+

AI-Predicted Energy Insights

+

Real-time electricity intelligence — powered by GridCast predictive engine

{kpiCards.map(k => ( -
+
- {k.label} +
+ {k.label} +
+
{k.icon}
@@ -1383,8 +1446,8 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) {
-
Today's Load Curve
-
Actual vs Forecast (MW) · 15-min intervals
+
AI-Predicted Load Curve
+
Actual vs AI Forecast (MW) · 15-min intervals
{metrics.mape !== null ? `MAPE ${metrics.mape.toFixed(2)}%` : "MAPE pending"} @@ -1437,13 +1500,13 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { {activeTab === "forecast" && ( <>
-

Load Forecast — {horizon.toUpperCase()} Ahead

+

AI-Predicted Load Forecast — {horizon.toUpperCase()} Ahead

{modelLabel} model · {chartData?.forecast?.length ?? 0} steps · {metrics.mape !== null ? `MAPE ${metrics.mape.toFixed(2)}%` : "MAPE pending"} · North NRLDC grid

-
Company Load vs Grid Forecast
+
Company Load vs AI-Predicted Grid Forecast
Date: Fri, 24 Apr 2026 00:04:29 +0530 Subject: [PATCH 2/3] feat: integrate legacy HTML dashboard into Admin Panel and fix data fetch paths - Replaced React-based AdminDashboard with an iframe embedding `dashboard.html`. - Updated `getDataPath` in `dashboard.html` to correctly resolve JSON endpoints when served via Next.js (`/data/${model}`). - Added a 4th 'Data Ingestion' step to the Company Onboarding flow. - Added a floating 'Exit Admin' button overlay. --- .github/agents/Plan.agent.md | 106 ++ gridcast-react/components/GridCastApp.tsx | 334 +----- gridcast-react/public/admin-legacy.html | 1265 +++++++++++++++++++++ src/Frontend/dashboard.html | 9 +- 4 files changed, 1418 insertions(+), 296 deletions(-) create mode 100644 .github/agents/Plan.agent.md create mode 100644 gridcast-react/public/admin-legacy.html diff --git a/.github/agents/Plan.agent.md b/.github/agents/Plan.agent.md new file mode 100644 index 0000000..bc27372 --- /dev/null +++ b/.github/agents/Plan.agent.md @@ -0,0 +1,106 @@ +--- +name: Plan +description: Researches and outlines multi-step plans +argument-hint: Outline the goal or problem to research +target: vscode +disable-model-invocation: true +tools: ['search', 'read', 'web', 'vscode/memory', 'github/issue_read', 'github.vscode-pull-request-github/issue_fetch', 'github.vscode-pull-request-github/activePullRequest', 'execute/getTerminalOutput', 'execute/testFailure', 'agent', 'vscode/askQuestions'] +agents: ['Explore'] +handoffs: + - label: Start Implementation + agent: agent + prompt: 'Start implementation' + send: true + - label: Open in Editor + agent: agent + prompt: '#createFile the plan as is into an untitled file (`untitled:plan-${camelCaseName}.prompt.md` without frontmatter) for further refinement.' + send: true + showContinueOn: false +--- +You are a PLANNING AGENT, pairing with the user to create a detailed, actionable plan. + +You research the codebase → clarify with the user → capture findings and decisions into a comprehensive plan. This iterative approach catches edge cases and non-obvious requirements BEFORE implementation begins. + +Your SOLE responsibility is planning. NEVER start implementation. + +**Current plan**: `/memories/session/plan.md` - update using #tool:vscode/memory . + + +- STOP if you consider running file editing tools — plans are for others to execute. The only write tool you have is #tool:vscode/memory for persisting plans. +- Use #tool:vscode/askQuestions freely to clarify requirements — don't make large assumptions +- Present a well-researched plan with loose ends tied BEFORE implementation + + + +Cycle through these phases based on user input. This is iterative, not linear. If the user task is highly ambiguous, do only *Discovery* to outline a draft plan, then move on to alignment before fleshing out the full plan. + +## 1. Discovery + +Run the *Explore* subagent to gather context, analogous existing features to use as implementation templates, and potential blockers or ambiguities. When the task spans multiple independent areas (e.g., frontend + backend, different features, separate repos), launch **2-3 *Explore* subagents in parallel** — one per area — to speed up discovery. + +Update the plan with your findings. + +## 2. Alignment + +If research reveals major ambiguities or if you need to validate assumptions: +- Use #tool:vscode/askQuestions to clarify intent with the user. +- Surface discovered technical constraints or alternative approaches +- If answers significantly change the scope, loop back to **Discovery** + +## 3. Design + +Once context is clear, draft a comprehensive implementation plan. + +The plan should reflect: +- Structured concise enough to be scannable and detailed enough for effective execution +- Step-by-step implementation with explicit dependencies — mark which steps can run in parallel vs. which block on prior steps +- For plans with many steps, group into named phases that are each independently verifiable +- Verification steps for validating the implementation, both automated and manual +- Critical architecture to reuse or use as reference — reference specific functions, types, or patterns, not just file names +- Critical files to be modified (with full paths) +- Explicit scope boundaries — what's included and what's deliberately excluded +- Reference decisions from the discussion +- Leave no ambiguity + +Save the comprehensive plan document to `/memories/session/plan.md` via #tool:vscode/memory, then show the scannable plan to the user for review. You MUST show plan to the user, as the plan file is for persistence only, not a substitute for showing it to the user. + +## 4. Refinement + +On user input after showing the plan: +- Changes requested → revise and present updated plan. Update `/memories/session/plan.md` to keep the documented plan in sync +- Questions asked → clarify, or use #tool:vscode/askQuestions for follow-ups +- Alternatives wanted → loop back to **Discovery** with new subagent +- Approval given → acknowledge, the user can now use handoff buttons + +Keep iterating until explicit approval or handoff. + + + +```markdown +## Plan: {Title (2-10 words)} + +{TL;DR - what, why, and how (your recommended approach).} + +**Steps** +1. {Implementation step-by-step — note dependency ("*depends on N*") or parallelism ("*parallel with step N*") when applicable} +2. {For plans with 5+ steps, group steps into named phases with enough detail to be independently actionable} + +**Relevant files** +- `{full/path/to/file}` — {what to modify or reuse, referencing specific functions/patterns} + +**Verification** +1. {Verification steps for validating the implementation (**Specific** tasks, tests, commands, MCP tools, etc; not generic statements)} + +**Decisions** (if applicable) +- {Decision, assumptions, and includes/excluded scope} + +**Further Considerations** (if applicable, 1-3 items) +1. {Clarifying question with recommendation. Option A / Option B / Option C} +2. {…} +``` + +Rules: +- NO code blocks — describe changes, link to files and specific symbols/functions +- NO blocking questions at the end — ask during workflow via #tool:vscode/askQuestions +- The plan MUST be presented to the user, don't just mention the plan file. + \ No newline at end of file diff --git a/gridcast-react/components/GridCastApp.tsx b/gridcast-react/components/GridCastApp.tsx index d9524a3..49d03f5 100644 --- a/gridcast-react/components/GridCastApp.tsx +++ b/gridcast-react/components/GridCastApp.tsx @@ -1086,7 +1086,7 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) { const [formData, setFormData] = useState({ companyName: "", gstin: "", industry: "", region: "north", expectedLoad: "", peakLoad: "", offPeakLoad: "", shift: "24x7", cooling: "air", renewablePercent: 0, facilitySize: "", employees: "", contractDemand: "", sanctionedLoad: "", greenTarget: 0, budgetRange: "" }); const update = (k: string, v: string | number) => setFormData(p => ({ ...p, [k]: v })); const industryDef = INDUSTRY_TYPES.find(i => i.value === formData.industry); - const STEPS = ["Company Profile", "Electricity Setup", "Goals & Sustainability"]; + const STEPS = ["Company Profile", "Electricity Setup", "Goals & Sustainability", "Data Ingestion"]; return ( @@ -1103,7 +1103,7 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) {
{/* Step bar */}
-
+
{STEPS.map((s, i) => (
{i + 1 < step ? "✓" : i + 1}
@@ -1222,10 +1222,41 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) { )} + {step === 4 && ( + <> +

Historical Data Upload

+

Seed the AI model with your facility's energy patterns for higher accuracy.

+ +
e.currentTarget.style.borderColor = "#06b6d4"} onMouseLeave={e => e.currentTarget.style.borderColor = "rgba(6,182,212,0.3)"}> +
+
Drop your SCADA/Utility data here
+
Supports .csv, .parquet, or .xlsx (Max 50MB)
+ +
+ +
+
+
+
+
Auto-ETL Mapping
+
Detected columns automatically
+
+
+
+
+
+
Secure Encryption
+
AES-256 at rest
+
+
+
+ + )} +
-
@@ -1692,297 +1723,14 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { // PAGE: ADMIN DASHBOARD (light theme — original HTML reference) // ───────────────────────────────────────────────────────────────────────────── function AdminDashboard({ onNavigate }: { onNavigate: (p: string) => void }) { - const [activeTab, setActiveTab] = useState('forecast'); - const [activeModel, setActiveModel] = useState('xgboost'); - const [activeHorizon, setActiveHorizon] = useState('24h'); - - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - const [xgboostData, setXgboostData] = useState(null); - const [lstmData, setLstmData] = useState(null); - const [residualData, setResidualData] = useState(null); - - useEffect(() => { - let mounted = true; - async function loadData() { - setLoading(true); - setError(null); - try { - const [xgb, lstm, res] = await Promise.all([ - fetchForecastData('xgboost', activeHorizon), - fetchForecastData('lstm', activeHorizon), - fetchResidualData(activeModel) - ]); - if (mounted) { - setXgboostData(xgb); - setLstmData(lstm); - setResidualData(res); - } - } catch (err) { - console.error('Failed to load admin data:', err); - if (mounted) setError('Failed to sync with predictive engines.'); - } finally { - if (mounted) setLoading(false); - } - } - loadData(); - return () => { mounted = false; }; - }, [activeHorizon, activeModel]); - - const currentData = activeModel === 'xgboost' ? xgboostData : lstmData; - const config = MODEL_CONFIGS[activeModel]; - const modelColor = config.color; - - if (error) { - return ( -
-
-

Connection Error

-

{error}

- -
-
- ); - } - return ( -
- {/* Navbar */} - - -
- {/* Sidebar */} - - - {/* Main Content */} -
- {activeTab === 'forecast' && ( - <> - {/* KPIs */} -
- {[ - { label: 'Accuracy MAPE', value: loading ? '...' : `${currentData?.horizon_metrics[activeHorizon]?.mape?.toFixed(2) ?? '--'}%`, icon: , color: (currentData?.horizon_metrics[activeHorizon]?.mape ?? 10) < 3 ? '#10b981' : '#f59e0b' }, - { label: 'Predicted Peak', value: loading ? '...' : `${Math.max(...(currentData?.forecast.map(p => p.load_mw) ?? [0])).toLocaleString()} MW`, icon: , color: '#06b6d4' }, - { label: 'Engine Latency', value: '1.2s', icon: , color: '#94a3b8' }, - { label: 'Last Sync', value: loading ? '...' : currentData ? new Date(currentData.generated_at).toLocaleString('en-IN', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : '--', icon: , color: '#06b6d4' } - ].map(k => ( -
-
- {k.label} -
{k.icon}
-
-
{k.value}
-
- ))} -
- -
-
- -
- -
- -
-
- -
- -
- - )} - - {activeTab === 'analysis' && ( -
-
-

Load Analysis — North Region

-

Operational analysis summary for current forecast cycle

-
- -
-
-

Error Pattern Insights

-
-
-
- Morning transition slots show higher variance than mid-day due to solar ramp-up. -
-
-
- Weekday peaks remain more stable than weekend peaks for industrial nodes. -
-
-
- Backtest heatmap remains primary source for slot-level reliability analysis. -
-
-
- -
-

Operational Notes

-
-
-
- Monitor high-demand windows around peak ramp-up hours (06:00–09:00). -
-
-
- Cross-check abnormal spikes with regional weather and holiday signals. -
-
-
- Re-run training pipeline after material demand pattern shifts in industrial clusters. -
-
-
-
-
- )} - - {activeTab === 'models' && ( -
-
-

Model Stack

-

Status and readiness of forecasting pipelines

-
- -
-
-

Model Readiness Matrix

-
-
- {[ - { name: 'XGBoost', type: 'Production model · Season-aware features', color: '#4c79b8', status: 'Active', statusColor: 'rgba(16, 185, 129, 0.1)', textColor: '#10b981' }, - { name: 'LSTM', type: 'Sequence model · Direct multi-step output · Bidirectional', color: '#7C3AED', status: 'Active', statusColor: 'rgba(167, 139, 250, 0.1)', textColor: '#a78bfa' }, - { name: 'Linear Regression', type: 'Baseline benchmark for drift checks', color: '#94a3b8', status: 'Baseline', statusColor: 'rgba(148, 163, 184, 0.1)', textColor: '#94a3b8' } - ].map((m, i) => ( -
-
-
-
{m.name}
-
{m.type}
-
-
- {m.status} -
-
- ))} -
-
-
- )} - - {activeTab === 'reports' && ( -
-
-

Reports

-

Generated artifacts and export-ready summaries

-
- -
-
-

Forecast Reporting

-
-
• Daily forecast snapshot with peak/trough summary.
-
• Weekly accuracy digest for stakeholder review.
-
• CSV export available from Forecast tab.
-
- -
- -
-

Model Governance

-
-
• Log model performance against rolling benchmarks.
-
• Maintain retraining notes and data coverage updates.
-
• Use residual heatmap trends for exception reporting.
-
- -
-
-
- )} -
+
+
+
+