Keep flowchart inside right-column bounds; add 3 tools + chained examples

SVG geometry:
- Shifted the entire right-column flow 50px right (centre x=580 → 630)
so the 'Final answer' box on the NO branch (at x=410 now, was x=350)
stays inside the card boundary at x=380.
- Loop-back arrow now lives at x=860, still well inside the column's
right edge at x=880.

New tools:
- get_distance(city_a, city_b) — real haversine over a built-in lat/lon
table of 17 cities (IITG-relevant + global hubs).
- get_population(city) — metro-area figures in millions for the same
list.
- get_stock_price(ticker) — mock USD prices for ~12 common tickers.

System prompt now lists the new tools and spells out a three-tool chain
(INR → USD exchange → stock price → share-count calc) as an explicit
example.

Examples overhauled: dropped a couple of weak ones, added
compositional multi-tool questions:
- Delhi–Mumbai distance in miles rounded to the nearest 10
- AAPL shares for 5000 INR (currency → stock → divide)
- Tokyo 9 AM meeting: local time in Delhi + distance between cities
- London–NY km at 900 km/h (distance → convert → divide)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -53,20 +53,26 @@ SYSTEM_PROMPT = """You are a helpful assistant with access to tools.
 Rules you must follow:
 1. For ANY arithmetic — even simple multiplication like 5 * 7 — call the
    `calculate` tool. Never compute numbers in your head.
-2. For real-time facts like weather or current time, call the matching
-   tool (`get_weather`, `get_time`). Do not guess or say you don't know.
+2. For real-time facts like weather, current time, or stock prices,
+   call the matching tool (`get_weather`, `get_time`, `get_stock_price`).
+   Do not guess or say you don't know.
 3. For unit conversions, call `convert_units` — don't approximate.
 4. For currency conversion, call `get_exchange_rate`.
-5. For questions about the CS 203 course ("what week did we cover X?"),
+5. For distances between cities, call `get_distance`. For city
+   populations, call `get_population`.
+6. For questions about the CS 203 course ("what week did we cover X?"),
    call `search_notes`.
-6. For definitions of CS / ML terms, call `define_word`.
-7. Multi-step questions need multiple tool calls. Example:
-   "5 km/day for a week in miles" → first `convert_units`, then
-   `calculate` to multiply by 7.
-8. After every tool result, decide: do I need another tool, or can I
+7. For definitions of CS / ML terms, call `define_word`.
+8. Multi-step questions need multiple tool calls in sequence. Examples:
+   - "5 km/day for a week in miles" → `convert_units` then `calculate`.
+   - "Delhi-Mumbai distance in miles" → `get_distance` then
+     `convert_units`.
+   - "Shares of AAPL for 5000 INR" → `get_exchange_rate` →
+     `get_stock_price` → `calculate`.
+9. After every tool result, decide: do I need another tool, or can I
    write the final answer? Only answer once you have ALL the numbers.
-9. If the question genuinely doesn't need any tool (e.g. "capital of
-   France"), answer directly.
+10. If the question genuinely doesn't need any tool (e.g. "capital of
+    France"), answer directly.
 
 CRITICAL: when you ARE calling a tool, use the provider's structured
 tool_calls interface — do NOT write tool calls as Python-style text like
@@ -207,6 +213,61 @@ def get_exchange_rate(from_currency: str, to_currency: str, amount: float = 1.0)
     })
 
 
+def get_distance(city_a: str, city_b: str) -> str:
+    """Great-circle distance between two cities in kilometres (demo data)."""
+    # Stored as city -> (lat, lon) so we can list any pair.
+    coords = {
+        "gandhinagar": (23.22, 72.65), "mumbai": (19.08, 72.88),
+        "delhi":       (28.61, 77.21), "bangalore": (12.97, 77.59),
+        "chennai":     (13.08, 80.27), "kolkata": (22.57, 88.36),
+        "hyderabad":   (17.38, 78.49), "pune": (18.52, 73.86),
+        "tokyo":       (35.68, 139.69), "seoul": (37.57, 126.98),
+        "singapore":   (1.35, 103.82),  "hong kong": (22.32, 114.17),
+        "london":      (51.51, -0.13),  "paris": (48.86, 2.35),
+        "new york":    (40.71, -74.00), "san francisco": (37.77, -122.42),
+        "sydney":      (-33.87, 151.21),
+    }
+    a = coords.get(city_a.lower().strip())
+    b = coords.get(city_b.lower().strip())
+    if a is None or b is None:
+        return json.dumps({"error": f"Unknown city. Supported: {sorted(coords.keys())}"})
+    import math
+    lat1, lon1 = map(math.radians, a)
+    lat2, lon2 = map(math.radians, b)
+    dlat, dlon = lat2 - lat1, lon2 - lon1
+    h = math.sin(dlat / 2) ** 2 + math.cos(lat1) * math.cos(lat2) * math.sin(dlon / 2) ** 2
+    km = 2 * 6371.0 * math.asin(math.sqrt(h))
+    return json.dumps({"from": city_a, "to": city_b, "distance_km": round(km, 1)})
+
+
+def get_population(city: str) -> str:
+    """Approximate metro-area population (demo data, in millions)."""
+    data = {
+        "gandhinagar": 0.36, "mumbai": 20.96, "delhi": 32.07, "bangalore": 13.61,
+        "chennai": 11.56,    "kolkata": 15.33, "hyderabad": 10.53, "pune": 6.81,
+        "tokyo": 37.44,      "seoul": 9.97,    "singapore": 5.94,  "hong kong": 7.49,
+        "london": 9.54,      "paris": 11.21,   "new york": 18.87,  "san francisco": 3.32,
+        "sydney": 5.37,
+    }
+    v = data.get(city.lower().strip())
+    if v is None:
+        return json.dumps({"error": f"No population data for {city}"})
+    return json.dumps({"city": city, "population_millions": v})
+
+
+def get_stock_price(ticker: str) -> str:
+    """Mock share price in USD for a handful of tickers."""
+    prices = {
+        "aapl": 228.45, "msft": 417.12, "googl": 178.32, "amzn": 212.91,
+        "meta": 574.80, "tsla": 249.07, "nvda": 135.60, "amd": 162.33,
+        "ibm": 224.18,  "intc":  21.40, "nflx": 745.20, "orcl": 176.55,
+    }
+    p = prices.get(ticker.lower().strip())
+    if p is None:
+        return json.dumps({"error": f"Unknown ticker '{ticker}'. Try: {sorted(prices.keys())}"})
+    return json.dumps({"ticker": ticker.upper(), "price_usd": p, "note": "demo price, not live market data"})
+
+
 def define_word(word: str) -> str:
     definitions = {
         "overfitting":    "When a model learns training data too well (including noise) and performs poorly on new data.",
@@ -317,6 +378,45 @@ TOOL_SCHEMAS = [
             },
         },
     },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_distance",
+            "description": "Great-circle distance in kilometres between two cities. Supports major Indian and global cities (Gandhinagar, Mumbai, Delhi, Bangalore, Chennai, Kolkata, Hyderabad, Pune, Tokyo, Seoul, Singapore, Hong Kong, London, Paris, New York, San Francisco, Sydney).",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "city_a": {"type": "string", "description": "First city, e.g. 'Delhi'"},
+                    "city_b": {"type": "string", "description": "Second city, e.g. 'Mumbai'"},
+                },
+                "required": ["city_a", "city_b"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_population",
+            "description": "Approximate metro-area population (in millions). Same city list as get_distance.",
+            "parameters": {
+                "type": "object",
+                "properties": {"city": {"type": "string", "description": "City name"}},
+                "required": ["city"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_stock_price",
+            "description": "Current share price in USD for a handful of tickers (AAPL, MSFT, GOOGL, AMZN, META, TSLA, NVDA, AMD, IBM, INTC, NFLX, ORCL).",
+            "parameters": {
+                "type": "object",
+                "properties": {"ticker": {"type": "string", "description": "Ticker symbol, e.g. 'AAPL'"}},
+                "required": ["ticker"],
+            },
+        },
+    },
 ]
 
 TOOL_FUNCTIONS = {
@@ -327,6 +427,9 @@ TOOL_FUNCTIONS = {
     "define_word": define_word,
     "get_time": get_time,
     "get_exchange_rate": get_exchange_rate,
+    "get_distance": get_distance,
+    "get_population": get_population,
+    "get_stock_price": get_stock_price,
 }
 
 
@@ -699,44 +802,44 @@ FLOWCHART_HTML = """
       <text x="180" y="330" text-anchor="middle" font-size="10" fill="#5a6070">(may hallucinate)</text>
     </g>
 
-    <!-- ============ RIGHT COLUMN ============ -->
+    <!-- ============ RIGHT COLUMN (x=380..880) ============ -->
     <g font-size="13" fill="#1a1a2e">
-      <rect x="500" y="90"  width="160" height="40" rx="4" fill="#faf7f2" stroke="#ddd"/>
-      <text x="580" y="115" text-anchor="middle">User question</text>
-      <path d="M580 130 L580 178" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
+      <rect x="550" y="90"  width="160" height="40" rx="4" fill="#faf7f2" stroke="#ddd"/>
+      <text x="630" y="115" text-anchor="middle">User question</text>
+      <path d="M630 130 L630 178" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
 
-      <rect x="485" y="180" width="190" height="42" rx="4" fill="#fff" stroke="#c44536" stroke-width="1.5"/>
-      <text x="580" y="206" text-anchor="middle" fill="#c44536" font-weight="500">LLM + tool menu</text>
-      <path d="M580 222 L580 268" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
+      <rect x="535" y="180" width="190" height="42" rx="4" fill="#fff" stroke="#c44536" stroke-width="1.5"/>
+      <text x="630" y="206" text-anchor="middle" fill="#c44536" font-weight="500">LLM + tool menu</text>
+      <path d="M630 222 L630 268" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
 
       <!-- Diamond decision -->
-      <polygon points="580,270 670,315 580,360 490,315" fill="#fff" stroke="#c44536" stroke-width="1.5"/>
-      <text x="580" y="311" text-anchor="middle" font-size="12" fill="#c44536" font-weight="500">Tool call</text>
-      <text x="580" y="327" text-anchor="middle" font-size="12" fill="#c44536" font-weight="500">needed?</text>
+      <polygon points="630,270 720,315 630,360 540,315" fill="#fff" stroke="#c44536" stroke-width="1.5"/>
+      <text x="630" y="311" text-anchor="middle" font-size="12" fill="#c44536" font-weight="500">Tool call</text>
+      <text x="630" y="327" text-anchor="middle" font-size="12" fill="#c44536" font-weight="500">needed?</text>
 
-      <!-- NO branch: left + down -->
-      <path d="M490 315 L430 315 L430 405" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
-      <text x="445" y="308" font-size="11" fill="#5a6070" font-weight="600">NO</text>
-      <rect x="350" y="407" width="160" height="56" rx="4" fill="#fff" stroke="#c44536"/>
-      <text x="430" y="430" text-anchor="middle">Final answer</text>
-      <text x="430" y="447" text-anchor="middle" font-size="10" fill="#5a6070">(grounded in data)</text>
+      <!-- NO branch: left + down. Final-answer box must stay inside the column (x >= 380). -->
+      <path d="M540 315 L480 315 L480 405" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
+      <text x="495" y="308" font-size="11" fill="#5a6070" font-weight="600">NO</text>
+      <rect x="410" y="407" width="140" height="56" rx="4" fill="#fff" stroke="#c44536"/>
+      <text x="480" y="430" text-anchor="middle">Final answer</text>
+      <text x="480" y="447" text-anchor="middle" font-size="10" fill="#5a6070">(grounded in data)</text>
 
       <!-- YES branch: right + down -->
-      <path d="M670 315 L730 315 L730 397" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
-      <text x="687" y="308" font-size="11" fill="#5a6070" font-weight="600">YES</text>
+      <path d="M720 315 L780 315 L780 397" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
+      <text x="737" y="308" font-size="11" fill="#5a6070" font-weight="600">YES</text>
 
-      <rect x="660" y="400" width="140" height="38" rx="4" fill="#faf7f2" stroke="#ddd"/>
-      <text x="730" y="423" text-anchor="middle">Run tool</text>
-      <path d="M730 438 L730 468" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
+      <rect x="710" y="400" width="140" height="38" rx="4" fill="#faf7f2" stroke="#ddd"/>
+      <text x="780" y="423" text-anchor="middle">Run tool</text>
+      <path d="M780 438 L780 468" stroke="#5a6070" stroke-width="1.5" fill="none" marker-end="url(#arr)"/>
 
-      <rect x="660" y="470" width="140" height="38" rx="4" fill="#faf7f2" stroke="#ddd"/>
-      <text x="730" y="493" text-anchor="middle">Append result</text>
+      <rect x="710" y="470" width="140" height="38" rx="4" fill="#faf7f2" stroke="#ddd"/>
+      <text x="780" y="493" text-anchor="middle">Append result</text>
 
-      <!-- Loop back: dashed red, around the right side -->
-      <path d="M730 508 L730 560 L860 560 L860 155 L580 155 L580 176"
+      <!-- Loop back: dashed red, routed along the right edge (x=860, inside right column x=880). -->
+      <path d="M780 508 L780 560 L860 560 L860 155 L630 155 L630 176"
             stroke="#c44536" stroke-width="1.5" fill="none"
             stroke-dasharray="5 3" marker-end="url(#arrr)"/>
-      <text x="745" y="553" font-size="11" fill="#c44536" font-style="italic">loop back to LLM</text>
+      <text x="790" y="553" font-size="11" fill="#c44536" font-style="italic">loop back to LLM</text>
     </g>
   </svg>
 </div>
@@ -939,21 +1042,28 @@ CUSTOM_CSS = """
 # --- UI ------------------------------------------------------------------
 
 EXAMPLES = [
-    # --- Hard arithmetic — plain LLMs routinely get these wrong ---
+    # --- Hard arithmetic (plain LLMs routinely get these wrong) ---
     "What is 4729 times 8314?",
     "Compute (127 ** 3) + (49 ** 4).",
     "What is 31.5% of 128,400?",
-    "What is the square root of 987654, to 4 decimals?",
     "Evaluate 2847 * 9183 - 17^5.",
-    # --- Single-tool: real-time data ---
+    # --- Single-tool: real-time / local data ---
     "What's the temperature in Gandhinagar in Fahrenheit?",
     "What time is it in Tokyo right now?",
-    # --- Multi-tool chains ---
+    "What's the current price of NVDA?",
+    # --- Two-tool chains ---
     "How much hotter is Delhi than Bangalore right now, in degrees Celsius?",
     "If I run 5 km every day for a week, how many miles is that total?",
     "I have 1000 USD. How much is that in INR, and what time is it in Delhi?",
-    "If Paris is 18 C and New York is 22 C, what's the average in Fahrenheit?",
+    # --- Three-tool chains (real compositional reasoning) ---
+    "What's the distance from Delhi to Mumbai in miles, rounded to the nearest 10?",
+    "If Apple stock is $X, how many whole AAPL shares can I buy with 5000 INR? Convert first, then tell me.",
+    "Mumbai's population density if its metro area is 603 sq km — and how does that compare to Delhi's metro at 1484 sq km?",
     "I earn 2500 EUR/month. After converting to INR, what is my annual salary?",
+    "Convert the distance from London to New York to kilometres, then tell me how long it would take at 900 km/h.",
+    # --- Four-tool / open-ended chain ---
+    "I want to video-call a colleague in Tokyo at 9 AM their time. What time is that in Delhi, and roughly how far apart are the two cities?",
+    "If Paris is 18 C and New York is 22 C, what's the average in Fahrenheit?",
     # --- Course knowledge base ---
     "Which week of CS 203 covered Docker?",
     "What does 'overfitting' mean?",