SteppeOS 2.2.4

SteppeOS 2.2.4 is a single-page web application (SPA) that simulates an AI-powered regional management dashboard for Shymkent, Kazakhstan - the country's fastest-growing city with a population of 1,072,000. The platform presents decision-makers with live KPI data, interactive maps, AI-generated scenario simulations, risk detection, development recommendations, and demographic/infrastructure/ecology data layers.
The entire application runs directly in a web browser with no server-side code required. Everything is static HTML, CSS, and JavaScript. The only network calls made at runtime are to the Anthropic Claude API for AI-generated content.

Technologies used:

• HTML (HyperText Markup Language) is the skeleton of every web page. It defines what elements exist and their hierarchy, but has no visual styling of its own. In SteppeOS, the entire page structure - sidebar, topbar, all eight page sections, the chat widget - is written in one file: index.html.
• CSS (Cascading Style Sheets) controls all visual appearance: colors, fonts, sizes, layout, animations, and responsive behavior. All CSS for SteppeOS is in css/style.css.
• JavaScript - all application logic is in js/app.js.
• Chart.js is an open-source JavaScript library that draws interactive charts onto HTML elements. It is loaded from a CDN (Content Delivery Network) URL in index.html and requires no installation.
  The critical Chart.js setting in this project is maintainAspectRatio: false. This is the root cause of the "sliding down" chart bug that was fixed in this version. When this is set to true (the default), Chart.js tries to maintain a fixed width-to-height ratio, which conflicts with CSS flexbox layouts and causes the canvas to expand vertically, pushing content below it downward. Setting it to false lets the canvas fill its parent container exactly.
• Leaflet is an open-source JavaScript library for interactive maps. It handles tile loading, zoom/pan gestures, markers, popups, and circles. It requires both a JavaScript file and a CSS file to be loaded:
• The Claude API provides AI language model capabilities. SteppeOS calls it directly from the browser using the fetch() function. Three distinct calls are made:
  Daily Briefing (loadAIInsight)
  A single message is sent asking Claude to write a 3-sentence briefing about Shymkent for city planners. The response is displayed with a typewriter animation effect — characters are added one at a time every 10ms.
  Simulation Engine (run button)
  When the user configures a scenario and clicks "Run AI Simulation", a prompt is sent describing the scenario type, district, investment scale, and forecast horizon. Claude is instructed to return only JSON (no markdown, no explanation) matching a specific shape with keys for jobsCreated, economicGrowth, energyDemand, populationEffect, yearlyGdpContrib, envScore, narrative, and chartData. The JSON is then parsed and rendered into the simulation results panel.
  AI Chat Widget
  A full multi-turn conversation. The entire chat history is maintained in a JavaScript array (chatHistory) and sent with every message, so Claude has context of everything said previously. The system prompt establishes Claude's role as SteppeOS AI for Shymkent.
  All three API calls use this pattern:
  const res = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
  model: 'claude-sonnet-4-20250514',
  max_tokens: 1000,
  messages: [{ role: 'user', content: 'Your prompt here' }]
  })
  });
  const data = await res.json();
  const text = data.content[0].text;
  All API calls are wrapped in try/catch. If the call fails (no API key, network error), the catch block provides hardcoded fallback content so the application remains functional.

For more information about SteppeOS v2.2.4:
SteppeOS-v2-2-4.docx

Full Changelog: https://github.com/herachxx/SteppeOS/commits/2.2.4