{
  "app_name": "Simple Interest Calculator",
  "pages": [
    {
      "page_id": "calculator",
      "page_title": "Simple Interest Calculator",
      "route_path": "/",
      "route_params": [],
      "image_indices": [],
      "description": "Single-page simple interest calculator application. The page is divided into three main sections: (1) Calculator Input Form at the top center with fields for Principal Amount (with $ prefix, placeholder 'e.g. 10,000'), Interest Rate (with % suffix, placeholder 'e.g. 5'), and Time Period (with a dropdown/toggle to select 'Years' or 'Months', placeholder 'e.g. 2'). All fields have clear labels, inline validation with red border and error messages below invalid fields. Two action buttons: a primary 'Calculate' button (disabled when inputs are invalid) and a secondary 'Clear' button. (2) Results Display section immediately below the form, showing calculated Simple Interest amount and Total Amount with currency formatting ($X,XXX.XX), a breakdown showing the formula used (I = P × R × T / 100) with substituted values, and a success visual indicator when calculation completes. Results are visually distinct with a highlighted card/panel. (3) Calculation History section below or beside the calculator, displaying up to 10 most recent calculations in a collapsible/expandable list ordered by most recent first. Each history item shows: Principal, Rate, Time (with unit), Interest, Total Amount, and relative timestamp (e.g. '2 minutes ago'). Items have hover states and are clickable to reload values into the calculator. A 'Clear History' button is positioned above the history list; clicking it opens a confirmation dialog/modal asking 'Are you sure you want to clear all history?' with 'Confirm' and 'Cancel' buttons. Empty state message shown when no history exists. The page is fully responsive with mobile-friendly layout, keyboard navigable, and WCAG AA compliant.",
      "navigates_to": []
    }
  ],
  "shared_state": [
    {
      "key": "sessionId",
      "type": "string",
      "initial_value": "\"\"",
      "description": "Unique browser session identifier used to group calculations for the current session"
    },
    {
      "key": "calculationHistory",
      "type": "Array<{ id: string; principal: number; rate: number; time: number; timeUnit: 'years' | 'months'; interest: number; totalAmount: number; timestamp: string }>",
      "initial_value": "[]",
      "description": "Session-scoped list of up to 10 most recent calculations, persists across interactions within the same session"
    }
  ],
  "default_route": "calculator",
  "design_system": {
    "theme_mode": "light",
    "density": "comfortable",
    "color_primary": "#1677ff",
    "color_success": "#52c41a",
    "color_warning": "#faad14",
    "color_error": "#ff4d4f",
    "color_bg_container": "#ffffff",
    "color_bg_layout": "#f5f5f5",
    "color_text": "#000000e0",
    "color_border": "#d9d9d9",
    "font_family": "Inter, -apple-system, sans-serif",
    "font_size_base": 14,
    "border_radius": 6,
    "component_overrides": {}
  }
}
