From d4052f5edb220154512ef1f65f74173155feea87 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Jan 2026 13:16:04 +0000
Subject: [PATCH 1/6] feat: Add GitHub Profile Card Decoration

- Rename `public/edge-functions` to `public/functions`.
- Add `public/functions/api/card.js` to serve dynamic SVG profile cards.
- Update `public/functions/api/user/data.js` to store `latest_5` stats in KV.
- Update frontend to pre-calculate simplified route geometries and stats.
- Add "GitHub Decoration" button in StatsView.
---
 .../api/auth/complete_github_register.js      |  92 ---------
 public/edge-functions/api/auth/oauth.js       | 174 -----------------
 public/functions/api/card.js                  | 137 ++++++++++++++
 public/functions/api/user/data.js             |  70 ++++---
 src/RailRound.jsx                             | 175 +++++++++++++++++-
 src/services/api.js                           |   4 +-
 6 files changed, 341 insertions(+), 311 deletions(-)
 delete mode 100644 public/edge-functions/api/auth/complete_github_register.js
 delete mode 100644 public/edge-functions/api/auth/oauth.js
 create mode 100644 public/functions/api/card.js

diff --git a/public/edge-functions/api/auth/complete_github_register.js b/public/edge-functions/api/auth/complete_github_register.js
deleted file mode 100644
index ab59013..0000000
--- a/public/edge-functions/api/auth/complete_github_register.js
+++ /dev/null
@@ -1,92 +0,0 @@
-// SHA-256 Hashing helper
-async function sha256(message) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(message);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
-}
-
-export async function onRequest(event) {
-  const headers = {
-    "Content-Type": "application/json; charset=utf-8",
-    "Access-Control-Allow-Origin": "*",
-    "Access-Control-Allow-Methods": "POST, OPTIONS",
-    "Access-Control-Allow-Headers": "Content-Type"
-  };
-
-  if (event.request.method === "OPTIONS") {
-    return new Response(null, { headers });
-  }
-
-  if (event.request.method !== "POST") {
-    return new Response(JSON.stringify({ error: "Method not allowed" }), { status: 405, headers });
-  }
-
-  const DB = globalThis.RAILROUND_KV;
-  if (!DB) return new Response(JSON.stringify({ error: "KV Missing" }), { status: 500, headers });
-
-  try {
-    const body = await event.request.json();
-    const { username, password, reg_token } = body;
-
-    if (!username || !password || !reg_token) {
-      return new Response(JSON.stringify({ error: "Missing required fields" }), { status: 400, headers });
-    }
-
-    // 1. Verify Registration Token
-    const tempKey = `temp_reg:${reg_token}`;
-    const tempRaw = await DB.get(tempKey);
-
-    if (!tempRaw) {
-      return new Response(JSON.stringify({ error: "Registration session expired or invalid" }), { status: 400, headers });
-    }
-
-    const githubUser = JSON.parse(tempRaw);
-
-    // 2. Check Username Availability
-    const userKey = `user:${username}`;
-    const existing = await DB.get(userKey);
-    if (existing) {
-      return new Response(JSON.stringify({ error: "Username already exists" }), { status: 409, headers });
-    }
-
-    // 3. Create Account
-    const hashedPassword = await sha256(password);
-
-    const userData = {
-      username,
-      password: hashedPassword,
-      created_at: new Date().toISOString(),
-      bindings: {
-        github: githubUser // Bind the GitHub info
-      },
-      trips: [],
-      pins: []
-    };
-
-    // Store User
-    await DB.put(userKey, JSON.stringify(userData));
-
-    // Store Binding
-    const bindingKey = `binding:github:${githubUser.id}`;
-    await DB.put(bindingKey, username);
-
-    // 4. Cleanup Temp Token
-    await DB.delete(tempKey);
-
-    // 5. Create Session (Auto Login)
-    const token = crypto.randomUUID();
-    const sessionKey = `session:${token}`;
-    await DB.put(sessionKey, username, { expirationTtl: 86400 * 30 });
-
-    return new Response(JSON.stringify({
-      success: true,
-      token,
-      username
-    }), { headers });
-
-  } catch (e) {
-    return new Response(JSON.stringify({ error: e.message }), { status: 500, headers });
-  }
-}
diff --git a/public/edge-functions/api/auth/oauth.js b/public/edge-functions/api/auth/oauth.js
deleted file mode 100644
index 525173c..0000000
--- a/public/edge-functions/api/auth/oauth.js
+++ /dev/null
@@ -1,174 +0,0 @@
-export async function onRequest(event) {
-  const headers = {
-    "Access-Control-Allow-Origin": "*",
-    "Access-Control-Allow-Methods": "GET, OPTIONS",
-  };
-
-  if (event.request.method === "OPTIONS") {
-    return new Response(null, { headers });
-  }
-
-  try {
-    const url = new URL(event.request.url);
-    const code = url.searchParams.get("code");
-    const error = url.searchParams.get("error");
-    const provider = url.searchParams.get("provider");
-    const DB = globalThis.RAILROUND_KV;
-
-    // 1. Handle Callback (if 'code' is present)
-    if (code) {
-      if (error) {
-        return new Response(JSON.stringify({ error }), { status: 400, headers: { "Content-Type": "application/json" } });
-      }
-
-      if (!DB) throw new Error("KV Missing");
-
-      const CLIENT_ID = env.CLIENT_ID;
-      const CLIENT_SECRET = env.CLIENT_SECRET;
-
-      if (!CLIENT_ID || !CLIENT_SECRET) {
-        return new Response(JSON.stringify({ error: "Server Configuration Error" }), { status: 500, headers: { "Content-Type": "application/json" } });
-      }
-
-      // Parse State to check for Session Token (Binding Mode)
-      const stateParam = url.searchParams.get("state");
-      let sessionToken = null;
-      if (stateParam) {
-        try {
-          const parsed = JSON.parse(decodeURIComponent(stateParam));
-          if (parsed && parsed.t) sessionToken = parsed.t;
-        } catch (e) {
-          console.warn("Failed to parse state", e);
-        }
-      }
-
-      // Exchange code for access token
-      const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          client_id: CLIENT_ID,
-          client_secret: CLIENT_SECRET,
-          code: code
-        })
-      });
-
-      const tokenData = await tokenResponse.json();
-      if (tokenData.error) throw new Error(tokenData.error_description || "Failed to get token");
-      const accessToken = tokenData.access_token;
-
-      // Fetch User Info
-      const userResponse = await fetch('https://api.github.com/user', {
-        headers: {
-          'Authorization': `Bearer ${accessToken}`,
-          'User-Agent': 'RailRound-EdgeFunction'
-        }
-      });
-
-      if (!userResponse.ok) throw new Error("Failed to fetch GitHub user");
-      const githubUser = await userResponse.json();
-
-      const bindingKey = `binding:github:${githubUser.id}`;
-
-      // --- Scenario A: Binding to Existing Account ---
-      if (sessionToken) {
-        // Verify Session
-        const sessionKey = `session:${sessionToken}`;
-        const currentUsername = await DB.get(sessionKey);
-
-        if (!currentUsername) {
-          return Response.redirect(`${url.origin}/?error=session_expired`, 302);
-        }
-
-        // Check if this GitHub ID is already bound
-        const existingBoundUser = await DB.get(bindingKey);
-        if (existingBoundUser && existingBoundUser !== currentUsername) {
-           return Response.redirect(`${url.origin}/?error=github_bound_to_other`, 302);
-        }
-
-        // Perform Binding
-        const userKey = `user:${currentUsername}`;
-        const userDataRaw = await DB.get(userKey);
-        if (!userDataRaw) throw new Error("User record missing");
-
-        const userData = JSON.parse(userDataRaw);
-        userData.bindings = userData.bindings || {};
-        userData.bindings.github = {
-          id: githubUser.id,
-          login: githubUser.login,
-          avatar_url: githubUser.avatar_url,
-          name: githubUser.name
-        };
-
-        await DB.put(userKey, JSON.stringify(userData));
-        await DB.put(bindingKey, currentUsername);
-
-        // Redirect home with status
-        return Response.redirect(`${url.origin}/?status=bound_success`, 302);
-      }
-
-      // --- Scenario B: Login or Register ---
-      let username = await DB.get(bindingKey);
-
-      if (username) {
-        // Login Flow
-        const token = crypto.randomUUID();
-        const sessionKey = `session:${token}`;
-        await DB.put(sessionKey, username, { expirationTtl: 86400 * 30 });
-        return Response.redirect(`${url.origin}/?token=${token}&username=${username}`, 302);
-      } else {
-        // Register Flow (Pending)
-        // Store GitHub info temporarily
-        const regToken = crypto.randomUUID();
-        const tempKey = `temp_reg:${regToken}`;
-        const tempPayload = {
-           id: githubUser.id,
-           login: githubUser.login,
-           avatar_url: githubUser.avatar_url,
-           name: githubUser.name
-        };
-        // Expires in 1 hour
-        await DB.put(tempKey, JSON.stringify(tempPayload), { expirationTtl: 3600 });
-
-        // Redirect to frontend completion flow
-        return Response.redirect(`${url.origin}/?reg_token=${regToken}`, 302);
-      }
-    }
-
-    // 2. Handle Initiation (if 'provider' is present)
-    if (provider === 'github') {
-      const clientId = env.CLIENT_ID;
-      if (!clientId) {
-          return new Response(JSON.stringify({ error: "Server Configuration Error: Missing CLIENT_ID" }), { status: 500, headers: { "Content-Type": "application/json" } });
-      }
-
-      // Parse session_token if provided (for binding)
-      const sessionToken = url.searchParams.get("session_token");
-      const stateObj = {
-        nonce: crypto.randomUUID(),
-        t: sessionToken || undefined
-      };
-      // Simple JSON encoding for state
-      const state = encodeURIComponent(JSON.stringify(stateObj));
-
-      // Point back to THIS file for the callback
-      const redirectUri = `${url.origin}/api/auth/oauth`;
-      const targetUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=read:user&state=${state}`;
-
-      return Response.redirect(targetUrl, 302);
-    }
-
-    // Google Placeholder
-    if (provider === 'google') {
-      return new Response(JSON.stringify({ error: "Google Auth not implemented yet" }), { status: 501, headers: { "Content-Type": "application/json" } });
-    }
-
-    return new Response(JSON.stringify({ error: "Invalid Request" }), { status: 400, headers: { "Content-Type": "application/json" } });
-
-  } catch (e) {
-    return new Response(JSON.stringify({ error: "Auth Failed", details: e.message }), { status: 500, headers: { "Content-Type": "application/json" } });
-  }
-}
diff --git a/public/functions/api/card.js b/public/functions/api/card.js
new file mode 100644
index 0000000..5c07ae3
--- /dev/null
+++ b/public/functions/api/card.js
@@ -0,0 +1,137 @@
+export async function onRequest(event) {
+    const url = new URL(event.request.url);
+    const username = url.searchParams.get("user");
+
+    // SVG Headers
+    const headers = {
+        "Content-Type": "image/svg+xml",
+        "Cache-Control": "max-age=300, s-maxage=300", // Cache for 5 mins
+        "Access-Control-Allow-Origin": "*"
+    };
+
+    if (!username) {
+        return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="10" y="20">User not found</text></svg>', { headers });
+    }
+
+    try {
+        const DB = globalThis.RAILROUND_KV;
+        if (!DB) return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="10" y="20">KV Error</text></svg>', { headers });
+
+        const userKey = `user:${username}`;
+        const dataRaw = await DB.get(userKey);
+
+        if (!dataRaw) {
+             return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" text-anchor="middle" font-family="sans-serif">User data not found</text></svg>', { headers });
+        }
+
+        const data = JSON.parse(dataRaw);
+        const stats = data.latest_5 || { count: 0, dist: 0, lines: 0, latest: [] };
+
+        // --- SVG Generation ---
+        // Width: 800px (standard github readme width is flexible, but 800 is good for high-dpi)
+        // Height: Variable based on items? Let's fix to a card size.
+        // Layout:
+        // Top: Header + Summary Stats (Trips, Lines, KM)
+        // Body: List of 5 trips with Mini-Map
+
+        const esc = (str) => {
+            if (!str) return "";
+            return String(str)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&apos;');
+        };
+
+        const cardWidth = 500;
+        const headerHeight = 100;
+        const rowHeight = 60;
+        const totalHeight = headerHeight + (stats.latest.length * rowHeight) + 20;
+
+        const styles = `
+            .bg { fill: #0f172a; }
+            .card { fill: #1e293b; rx: 12px; }
+            .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; fill: #e2e8f0; }
+            .label { font-size: 10px; fill: #94a3b8; font-weight: bold; text-transform: uppercase; }
+            .value { font-size: 18px; font-weight: bold; fill: #38bdf8; }
+            .trip-title { font-size: 12px; font-weight: bold; fill: #f8fafc; }
+            .trip-date { font-size: 10px; fill: #64748b; }
+            .trip-dist { font-size: 10px; fill: #cbd5e1; font-family: monospace; }
+            .line-path { fill: none; stroke: #38bdf8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+            .grid-line { stroke: #334155; stroke-width: 1; }
+        `;
+
+        let svgContent = `
+            <svg width="${cardWidth}" height="${totalHeight}" viewBox="0 0 ${cardWidth} ${totalHeight}" xmlns="http://www.w3.org/2000/svg">
+            <style>${styles}</style>
+            <rect width="100%" height="100%" class="bg" rx="16"/>
+
+            <!-- Header Stats -->
+            <g transform="translate(20, 20)">
+                <text x="0" y="15" class="text" style="font-size: 14px; font-weight: bold; fill: #cbd5e1;">${esc(username)}'s RailRound</text>
+
+                <g transform="translate(0, 40)">
+                    <text x="0" y="0" class="label">Trips</text>
+                    <text x="0" y="20" class="value">${stats.count}</text>
+
+                    <text x="80" y="0" class="label">Lines</text>
+                    <text x="80" y="20" class="value" style="fill: #818cf8;">${stats.lines}</text>
+
+                    <text x="160" y="0" class="label">Distance</text>
+                    <text x="160" y="20" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="10" fill="#64748b" dx="2">km</tspan></text>
+                </g>
+            </g>
+
+            <!-- Brand Icon -->
+            <g transform="translate(${cardWidth - 60}, 20)">
+               <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" fill="none" stroke="#2dd4bf" stroke-width="2"/>
+               <circle cx="9" cy="24" r="2" fill="#2dd4bf"/>
+               <circle cx="19" cy="24" r="2" fill="#2dd4bf"/>
+               <path d="M14 4v10" stroke="#2dd4bf" stroke-width="2"/>
+            </g>
+
+            <!-- List -->
+            <g transform="translate(0, ${headerHeight})">
+        `;
+
+        stats.latest.forEach((trip, idx) => {
+            const y = idx * rowHeight;
+            const points = trip.svg_points || "";
+            // Mini Map SVG (100x40 coordinate space in a 80x30 box)
+
+            svgContent += `
+                <g transform="translate(20, ${y})">
+                    <!-- Line & Dots -->
+                    <line x1="10" y1="12" x2="10" y2="48" stroke="#334155" stroke-width="1" stroke-dasharray="2,2"/>
+                    <circle cx="10" cy="30" r="4" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
+
+                    <!-- Content -->
+                    <text x="30" y="25" class="trip-title">${esc(trip.title)}</text>
+                    <text x="30" y="40" class="trip-date">${esc(trip.date)}</text>
+
+                    <!-- Mini Graph -->
+                    <g transform="translate(${cardWidth - 120}, 10)">
+                        <rect width="80" height="40" fill="#0f172a" rx="4" stroke="#1e293b"/>
+                        <svg width="80" height="40" viewBox="0 0 100 50" preserveAspectRatio="none">
+                            <polyline points="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
+                        </svg>
+                    </g>
+
+                    <!-- Dist -->
+                    <text x="${cardWidth - 130}" y="35" text-anchor="end" class="trip-dist">${Math.round(trip.dist)} km</text>
+                </g>
+            `;
+        });
+
+        svgContent += `
+            </g>
+            </svg>
+        `;
+
+        return new Response(svgContent, { headers });
+
+    } catch (e) {
+        return new Response(`<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg"><text x="10" y="30" fill="red">${e.message}</text></svg>`, { headers });
+    }
+}
diff --git a/public/functions/api/user/data.js b/public/functions/api/user/data.js
index d3921e9..84a9ee0 100644
--- a/public/functions/api/user/data.js
+++ b/public/functions/api/user/data.js
@@ -1,66 +1,60 @@
 export async function onRequest(event) {
   const headers = {
-    "Content-Type": "application/json; charset=utf-8",
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
-    "Access-Control-Allow-Headers": "Content-Type, Authorization"
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    "Content-Type": "application/json"
   };
 
   if (event.request.method === "OPTIONS") {
     return new Response(null, { headers });
   }
 
-  const DB = globalThis.RAILROUND_KV;
-  if (!DB) return new Response(JSON.stringify({ error: "KV Missing" }), { status: 500, headers });
-
-  // Auth check
-  const authHeader = event.request.headers.get("Authorization");
-  if (!authHeader || !authHeader.startsWith("Bearer ")) {
-    return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401, headers });
-  }
+  try {
+    const DB = globalThis.RAILROUND_KV;
+    if (!DB) throw new Error("KV Missing");
 
-  const token = authHeader.split(" ")[1];
-  const sessionKey = `session:${token}`;
+    const authHeader = event.request.headers.get("Authorization");
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+       return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401, headers });
+    }
+    const token = authHeader.split(" ")[1];
 
-  try {
-    const username = await DB.get(sessionKey);
+    // Verify Session
+    const username = await DB.get(`session:${token}`);
     if (!username) {
-        return new Response(JSON.stringify({ error: "Invalid or expired token" }), { status: 401, headers });
+        return new Response(JSON.stringify({ error: "Invalid Token" }), { status: 401, headers });
     }
 
     const userKey = `user:${username}`;
-    let rawUserData = await DB.get(userKey);
-
-    if (!rawUserData) {
-        return new Response(JSON.stringify({ error: "User data corrupted" }), { status: 404, headers });
-    }
-
-    let userData = typeof rawUserData === 'string' ? JSON.parse(rawUserData) : rawUserData;
 
     if (event.request.method === "GET") {
-        // Return only data, remove sensitive info like password
-        const { password, ...safeData } = userData;
-        return new Response(JSON.stringify(safeData), { headers });
+        const dataRaw = await DB.get(userKey);
+        const data = dataRaw ? JSON.parse(dataRaw) : { trips: [], pins: [] };
+        // Return only what is needed for the frontend app (latest_5 is for the card api, but no harm returning it)
+        return new Response(JSON.stringify(data), { status: 200, headers });
     }
-    else if (event.request.method === "POST") {
-        const body = await event.request.json();
 
-        // Update trips and pins
-        // We do a merge strategy or overwrite?
-        // Plan said "Merge/Overwrite". Let's assume the client sends the full new state for simplicity and consistency with the current frontend app logic which holds full state.
-
-        if (body.trips) userData.trips = body.trips;
-        if (body.pins) userData.pins = body.pins;
+    if (event.request.method === "POST") {
+        const body = await event.request.json();
+        const { trips, pins, latest_5 } = body;
 
-        // Update timestamp
-        userData.updated_at = new Date().toISOString();
+        // Fetch existing to preserve other fields (like password, bindings)
+        const existingRaw = await DB.get(userKey);
+        const existing = existingRaw ? JSON.parse(existingRaw) : {};
 
-        await DB.put(userKey, JSON.stringify(userData));
+        const newData = {
+            ...existing,
+            trips: trips || existing.trips || [],
+            pins: pins || existing.pins || [],
+            latest_5: latest_5 || existing.latest_5 || null // Store the pre-calculated card data
+        };
 
-        return new Response(JSON.stringify({ success: true }), { headers });
+        await DB.put(userKey, JSON.stringify(newData));
+        return new Response(JSON.stringify({ success: true }), { status: 200, headers });
     }
 
-    return new Response(JSON.stringify({ error: "Method not allowed" }), { status: 405, headers });
+    return new Response(JSON.stringify({ error: "Method Not Allowed" }), { status: 405, headers });
 
   } catch (e) {
     return new Response(JSON.stringify({ error: e.message }), { status: 500, headers });
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index d4860c6..4e14fbc 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -1048,6 +1048,162 @@ const RouteSlice = ({ segments, segmentGeometries }) => {
   );
 };
 
+// --- Refactored: Helper for Stats Calculation (Latest 5 + SVG Points) ---
+const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
+    // 1. Basic Stats
+    const totalTrips = trips.length;
+    const allSegments = trips.flatMap(t => t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }]);
+    const uniqueLines = new Set(allSegments.map(s => s.lineKey)).size;
+    let totalDist = 0;
+
+    // Calc total distance
+    if (turf && segmentGeometries) {
+        allSegments.forEach(seg => {
+            const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
+            const geom = segmentGeometries.get(key);
+            if (geom && geom.coords) {
+                if (geom.isMulti) {
+                    geom.coords.forEach(c => totalDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]]))));
+                } else {
+                    totalDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
+                }
+            } else {
+                 // Fallback
+                const line = railwayData[seg.lineKey];
+                if (line) {
+                    const s1 = line.stations.find(st => st.id === seg.fromId);
+                    const s2 = line.stations.find(st => st.id === seg.toId);
+                    if (s1 && s2) totalDist += calcDist(s1.lat, s1.lng, s2.lat, s2.lng);
+                }
+            }
+        });
+    }
+
+    // 2. Latest 5
+    const latest = trips.slice(0, 5).map(t => {
+        const segs = t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }];
+        const lineNames = segs.map(s => s.lineKey.split(':').pop()).join(' → '); // Simplified Title
+
+        let tripDist = 0;
+        const allCoords = [];
+
+        // Collect Coords for SVG
+        segs.forEach(seg => {
+            const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
+            const geom = segmentGeometries ? segmentGeometries.get(key) : null;
+            if (geom && geom.coords) {
+                if (geom.isMulti) {
+                    geom.coords.forEach(c => {
+                         allCoords.push(c);
+                         if(turf) tripDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]])));
+                    });
+                } else {
+                    allCoords.push(geom.coords);
+                    if(turf) tripDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
+                }
+            }
+        });
+
+        // Generate SVG Points (PCA Logic simplified reuse)
+        let svgPoints = "";
+        if (allCoords.length > 0) {
+            // Flatten all points
+            let flatPoints = [];
+            allCoords.forEach(c => flatPoints.push(...c));
+
+            if (flatPoints.length > 1) {
+                // Centroid
+                let sumLat = 0, sumLng = 0;
+                flatPoints.forEach(p => { sumLat += p[0]; sumLng += p[1]; });
+                const cenLat = sumLat / flatPoints.length;
+                const cenLng = sumLng / flatPoints.length;
+
+                // Covariance
+                let u20 = 0, u02 = 0, u11 = 0;
+                flatPoints.forEach(pt => {
+                    const x = pt[1] - cenLng;
+                    const y = pt[0] - cenLat;
+                    u20 += x * x; u02 += y * y; u11 += x * y;
+                });
+                const theta = 0.5 * Math.atan2(2 * u11, u20 - u02);
+                const cosT = Math.cos(-theta);
+                const sinT = Math.sin(-theta);
+
+                // Rotate & BBox
+                let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+                const rotated = flatPoints.map(pt => {
+                    const x = pt[1] - cenLng;
+                    const y = pt[0] - cenLat;
+                    const rx = x * cosT - y * sinT;
+                    const ry = x * sinT + y * cosT;
+                    if (rx < minX) minX = rx; if (rx > maxX) maxX = rx;
+                    if (ry < minY) minY = ry; if (ry > maxY) maxY = ry;
+                    return [ry, rx];
+                });
+
+                const w = maxX - minX || 0.001;
+                const h = maxY - minY || 0.001;
+
+                // Pad
+                const padX = w * 0.1; const padY = h * 0.1;
+                const vMinX = minX - padX; const vMinY = minY - padY;
+                const vW = w + padX * 2; const vH = h + padY * 2;
+
+                // Project to 0-100, 0-50 space
+                svgPoints = rotated.map(pt => {
+                    const px = ((pt[1] - vMinX) / vW) * 100;
+                    const py = 50 - ((pt[0] - vMinY) / vH) * 50;
+                    return `${px.toFixed(1)},${py.toFixed(1)}`; // Optimize precision
+                }).join(' ');
+            }
+        }
+
+        return {
+            id: t.id,
+            date: t.date,
+            title: lineNames,
+            dist: tripDist,
+            svg_points: svgPoints
+        };
+    });
+
+    return {
+        count: totalTrips,
+        lines: uniqueLines,
+        dist: totalDist,
+        latest: latest
+    };
+};
+
+const GithubCardModal = ({ isOpen, onClose, username }) => {
+    if (!isOpen || !username) return null;
+    const url = `${window.location.origin}/api/card?user=${username}`;
+    const md = `[![RailRound Stats](${url})](${window.location.origin})`;
+
+    return (
+        <div className="fixed inset-0 z-[1000] bg-black/50 flex items-center justify-center p-4 animate-fade-in" onClick={onClose}>
+            <div className="bg-white w-full max-w-lg rounded-2xl shadow-2xl p-6 animate-slide-up" onClick={e => e.stopPropagation()}>
+                <div className="flex justify-between items-center mb-4">
+                    <h3 className="font-bold text-lg flex items-center gap-2"><Github size={20}/> GitHub Profile Decoration</h3>
+                    <button onClick={onClose}><X className="text-gray-400 hover:text-gray-600"/></button>
+                </div>
+                <div className="space-y-4">
+                    <div className="bg-gray-100 p-4 rounded-lg flex justify-center">
+                        <img src={url} alt="Preview" className="max-w-full shadow-sm rounded border border-gray-200" />
+                    </div>
+                    <div>
+                        <label className="block text-xs font-bold text-gray-500 mb-1">Markdown Code (Copy to README)</label>
+                        <div className="relative">
+                            <textarea readOnly className="w-full p-3 border rounded-lg bg-slate-50 font-mono text-xs text-slate-600 h-20 resize-none outline-none focus:ring-2 focus:ring-blue-500" value={md} onClick={e => e.target.select()} />
+                        </div>
+                    </div>
+                    <button onClick={onClose} className="w-full bg-slate-800 text-white py-2 rounded-lg font-bold">Close</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 const RecordsView = ({ trips, railwayData, setTrips, onEdit, onDelete, onAdd, segmentGeometries }) => (
   <div className="flex-1 flex flex-col overflow-y-auto p-4 space-y-3 pb-4">
     {trips.length === 0 ? (
@@ -1088,7 +1244,7 @@ const RecordsView = ({ trips, railwayData, setTrips, onEdit, onDelete, onAdd, se
     <button onClick={onAdd} className="w-full py-4 border-2 border-dashed border-gray-300 text-gray-400 rounded-xl hover:bg-gray-50 font-bold transition">+ 记录新行程</button>
   </div>
 );
-const StatsView = ({ trips, railwayData ,geoData, user, userProfile, segmentGeometries }) => {
+const StatsView = ({ trips, railwayData ,geoData, user, userProfile, segmentGeometries, onOpenCard }) => {
     const totalTrips = trips.length;
     const allSegments = trips.flatMap(t => t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }]);
     const uniqueLines = new Set(allSegments.map(s => s.lineKey)).size;
@@ -1120,7 +1276,7 @@ const StatsView = ({ trips, railwayData ,geoData, user, userProfile, segmentGeom
     return (
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {user && (
-            <div className="bg-white p-4 rounded-xl shadow-sm border">
+            <div className="bg-white p-4 rounded-xl shadow-sm border relative">
                 <div className="flex items-center gap-4">
                     <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl font-bold text-gray-500 overflow-hidden">
                         {userProfile?.bindings?.github?.avatar_url ? (
@@ -1140,6 +1296,11 @@ const StatsView = ({ trips, railwayData ,geoData, user, userProfile, segmentGeom
                         </div>
                     </div>
                 </div>
+                {userProfile?.bindings?.github && (
+                   <button onClick={() => onOpenCard(user.username)} className="absolute right-4 top-4 text-xs font-bold bg-gray-100 hover:bg-gray-200 text-gray-600 px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1">
+                       <Github size={14}/> 装饰代码
+                   </button>
+                )}
             </div>
         )}
 
@@ -1184,6 +1345,7 @@ export default function RailRoundApp() {
   const [isRouteSearching, setIsRouteSearching] = useState(false);
   const [mapZoom, setMapZoom] = useState(10);
   const [isExportingKML, setIsExportingKML] = useState(false);
+  const [cardModalUser, setCardModalUser] = useState(null);
 
   const mapRef = useRef(null);
   const mapInstance = useRef(null);
@@ -2010,7 +2172,8 @@ export default function RailRoundApp() {
 
     // Sync to Cloud
     if (user) {
-       api.saveData(user.token, finalTrips, pins).catch(e => alert('云端保存失败: ' + e.message));
+       const latest5 = calculateLatestStats(finalTrips, segmentGeometries, railwayData);
+       api.saveData(user.token, finalTrips, pins, latest5).catch(e => alert('云端保存失败: ' + e.message));
     }
 
     setIsTripEditing(false); setEditingTripId(null); 
@@ -2027,7 +2190,8 @@ export default function RailRoundApp() {
           const newTrips = trips.filter(t => t.id !== id);
           setTrips(newTrips);
           if (user) {
-             api.saveData(user.token, newTrips, pins).catch(e => alert('云端同步失败'));
+             const latest5 = calculateLatestStats(newTrips, segmentGeometries, railwayData);
+             api.saveData(user.token, newTrips, pins, latest5).catch(e => alert('云端同步失败'));
           }
       }
   };
@@ -2270,7 +2434,7 @@ export default function RailRoundApp() {
 
       <div className="flex-1 relative overflow-hidden flex flex-col">
         {activeTab === 'records' && <RecordsView trips={trips} railwayData={railwayData} setTrips={setTrips} onEdit={handleEditTrip} onDelete={handleDeleteTrip} segmentGeometries={segmentGeometries} onAdd={() => { setTripForm({ date: new Date().toISOString().split('T')[0], memo: '', segments: [{ id: Date.now().toString(), lineKey: '', fromId: '', toId: '' }] }); setIsTripEditing(true); }} />}
-        {activeTab === 'stats' && <StatsView trips={trips} railwayData={railwayData} geoData={geoData} user={user} userProfile={userProfile} segmentGeometries={segmentGeometries} />}
+        {activeTab === 'stats' && <StatsView trips={trips} railwayData={railwayData} geoData={geoData} user={user} userProfile={userProfile} segmentGeometries={segmentGeometries} onOpenCard={setCardModalUser} />}
         <div className={`flex-1 relative ${activeTab === 'map' ? 'block' : 'hidden'}`}>
           <div ref={mapRef} style={{ width: '100%', height: '100%' }} />
           <FabButton activeTab={activeTab} pinMode={pinMode} togglePinMode={togglePinMode} />
@@ -2281,6 +2445,7 @@ export default function RailRoundApp() {
 
       <LoginModal isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} onLoginSuccess={handleLoginSuccess} />
       <GithubRegisterModal isOpen={isGithubRegisterOpen} onClose={() => setIsGithubRegisterOpen(false)} regToken={githubRegToken} onLoginSuccess={handleLoginSuccess} />
+      <GithubCardModal isOpen={!!cardModalUser} username={cardModalUser} onClose={() => setCardModalUser(null)} />
 
       {/* Line Selector */}
       <LineSelector isOpen={false} onClose={() => {}} onSelect={() => {}} railwayData={railwayData} /> 
diff --git a/src/services/api.js b/src/services/api.js
index 509704d..be22ef4 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -36,14 +36,14 @@ export const api = {
     return data;
   },
 
-  async saveData(token, trips, pins) {
+  async saveData(token, trips, pins, latest_5) {
     const res = await fetch(`${API_BASE}/user/data`, {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${token}`,
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ trips, pins })
+      body: JSON.stringify({ trips, pins, latest_5 })
     });
     const data = await res.json();
     if (!res.ok) throw new Error(data.error || 'Failed to save data');

From 72944e638540166568c79cd3debdde076f5130b3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Jan 2026 14:36:27 +0000
Subject: [PATCH 2/6] feat: Redesign GitHub Card with Glassmorphism and Secure
 Key Access

- Redesigned `/api/card` endpoint to output a Glassmorphic SVG (1:2 ratio, translucent slate background).
- Implemented secure access via unique `card_key` (UUID) instead of username.
- Created `public/functions/api/user/key.js` to handle secure key generation and persistence.
- Added reverse index lookup in KV (`card_key:UUID` -> `username`).
- Updated frontend `GithubCardModal` to fetch and use the secure key.
- Sanitized SVG input to prevent injection.
---
 public/functions/api/card.js     | 178 +++++++++++++++++++------------
 public/functions/api/user/key.js |  57 ++++++++++
 src/RailRound.jsx                |  52 ++++++---
 src/services/api.js              |  13 +++
 4 files changed, 219 insertions(+), 81 deletions(-)
 create mode 100644 public/functions/api/user/key.js

diff --git a/public/functions/api/card.js b/public/functions/api/card.js
index 5c07ae3..7365180 100644
--- a/public/functions/api/card.js
+++ b/public/functions/api/card.js
@@ -1,6 +1,7 @@
 export async function onRequest(event) {
     const url = new URL(event.request.url);
-    const username = url.searchParams.get("user");
+    const key = url.searchParams.get("key");
+    const userParam = url.searchParams.get("user"); // Legacy support fallback (optional, can be removed for strict mode)
 
     // SVG Headers
     const headers = {
@@ -9,31 +10,33 @@ export async function onRequest(event) {
         "Access-Control-Allow-Origin": "*"
     };
 
-    if (!username) {
-        return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="10" y="20">User not found</text></svg>', { headers });
+    const errorSvg = (msg) => new Response(`<svg width="600" height="300" xmlns="http://www.w3.org/2000/svg"><text x="300" y="150" text-anchor="middle" fill="#ef4444" font-family="sans-serif">${msg}</text></svg>`, { headers });
+
+    if (!key && !userParam) {
+        return errorSvg("Key missing");
     }
 
     try {
         const DB = globalThis.RAILROUND_KV;
-        if (!DB) return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="10" y="20">KV Error</text></svg>', { headers });
+        if (!DB) return errorSvg("KV Error");
+
+        let username = userParam;
+
+        if (key) {
+            username = await DB.get(`card_key:${key}`);
+            if (!username) return errorSvg("Invalid Key");
+        }
 
         const userKey = `user:${username}`;
         const dataRaw = await DB.get(userKey);
 
         if (!dataRaw) {
-             return new Response('<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" text-anchor="middle" font-family="sans-serif">User data not found</text></svg>', { headers });
+             return errorSvg("User data not found");
         }
 
         const data = JSON.parse(dataRaw);
         const stats = data.latest_5 || { count: 0, dist: 0, lines: 0, latest: [] };
 
-        // --- SVG Generation ---
-        // Width: 800px (standard github readme width is flexible, but 800 is good for high-dpi)
-        // Height: Variable based on items? Let's fix to a card size.
-        // Layout:
-        // Top: Header + Summary Stats (Trips, Lines, KM)
-        // Body: List of 5 trips with Mini-Map
-
         const esc = (str) => {
             if (!str) return "";
             return String(str)
@@ -44,87 +47,130 @@ export async function onRequest(event) {
                 .replace(/'/g, '&apos;');
         };
 
-        const cardWidth = 500;
-        const headerHeight = 100;
-        const rowHeight = 60;
-        const totalHeight = headerHeight + (stats.latest.length * rowHeight) + 20;
+        // --- SVG Generation (Glassmorphism) ---
+        // 1:2 Ratio -> 600x300
+        const cardWidth = 600;
+        const cardHeight = 300;
+
+        // Colors
+        const glassBg = "rgba(15, 23, 42, 0.6)"; // Slate-900 with opacity
+        const glassBorder = "rgba(255, 255, 255, 0.1)";
+        const textColor = "#e2e8f0"; // Slate-200
+        const labelColor = "#94a3b8"; // Slate-400
+        const accentColor = "#2dd4bf"; // Teal-400
 
         const styles = `
-            .bg { fill: #0f172a; }
-            .card { fill: #1e293b; rx: 12px; }
-            .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; fill: #e2e8f0; }
-            .label { font-size: 10px; fill: #94a3b8; font-weight: bold; text-transform: uppercase; }
-            .value { font-size: 18px; font-weight: bold; fill: #38bdf8; }
-            .trip-title { font-size: 12px; font-weight: bold; fill: #f8fafc; }
-            .trip-date { font-size: 10px; fill: #64748b; }
-            .trip-dist { font-size: 10px; fill: #cbd5e1; font-family: monospace; }
-            .line-path { fill: none; stroke: #38bdf8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-            .grid-line { stroke: #334155; stroke-width: 1; }
+            .bg { fill: ${glassBg}; stroke: ${glassBorder}; stroke-width: 1px; }
+            .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; fill: ${textColor}; }
+            .label { font-size: 10px; fill: ${labelColor}; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
+            .value { font-size: 20px; font-weight: 800; fill: #f1f5f9; }
+            .trip-title { font-size: 11px; font-weight: 600; fill: #f8fafc; }
+            .trip-date { font-size: 9px; fill: ${labelColor}; }
+            .trip-dist { font-size: 9px; fill: ${labelColor}; font-family: monospace; }
+            .line-path { fill: none; stroke: ${accentColor}; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+            .separator { stroke: ${glassBorder}; stroke-width: 1; }
+        `;
+
+        // Icon SVG (Lucide Train Standard)
+        const iconSvg = `
+            <g transform="translate(${cardWidth - 40}, 20) scale(1)">
+                <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M4 14h16" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M12 4v10" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="m8 19-2 3" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="m16 19 2 3" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 15h.01" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M15 15h.01" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </g>
         `;
 
         let svgContent = `
-            <svg width="${cardWidth}" height="${totalHeight}" viewBox="0 0 ${cardWidth} ${totalHeight}" xmlns="http://www.w3.org/2000/svg">
+            <svg width="${cardWidth}" height="${cardHeight}" viewBox="0 0 ${cardWidth} ${cardHeight}" xmlns="http://www.w3.org/2000/svg">
             <style>${styles}</style>
-            <rect width="100%" height="100%" class="bg" rx="16"/>
 
-            <!-- Header Stats -->
-            <g transform="translate(20, 20)">
-                <text x="0" y="15" class="text" style="font-size: 14px; font-weight: bold; fill: #cbd5e1;">${esc(username)}'s RailRound</text>
+            <!-- Glass Background -->
+            <rect x="2" y="2" width="${cardWidth-4}" height="${cardHeight-4}" rx="16" class="bg"/>
+
+            <!-- Header Section (Top Left) -->
+            <text x="24" y="36" class="text" style="font-size: 16px; font-weight: bold; letter-spacing: -0.5px;">${esc(username)}'s RailRound</text>
+            ${iconSvg}
 
-                <g transform="translate(0, 40)">
+            <line x1="24" y1="56" x2="${cardWidth-24}" y2="56" class="separator"/>
+
+            <!-- Stats Grid (Middle) -->
+            <g transform="translate(24, 75)">
+                <!-- Count -->
+                <g>
                     <text x="0" y="0" class="label">Trips</text>
-                    <text x="0" y="20" class="value">${stats.count}</text>
+                    <text x="0" y="24" class="value">${stats.count}</text>
+                </g>
+                <line x1="70" y1="0" x2="70" y2="30" class="separator"/>
 
-                    <text x="80" y="0" class="label">Lines</text>
-                    <text x="80" y="20" class="value" style="fill: #818cf8;">${stats.lines}</text>
+                <!-- Lines -->
+                <g transform="translate(100, 0)">
+                    <text x="0" y="0" class="label">Lines</text>
+                    <text x="0" y="24" class="value" style="fill: #818cf8;">${stats.lines}</text>
+                </g>
+                <line x1="170" y1="0" x2="170" y2="30" class="separator"/>
 
-                    <text x="160" y="0" class="label">Distance</text>
-                    <text x="160" y="20" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="10" fill="#64748b" dx="2">km</tspan></text>
+                <!-- Distance -->
+                <g transform="translate(200, 0)">
+                    <text x="0" y="0" class="label">Distance</text>
+                    <text x="0" y="24" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="12" fill="${labelColor}" dx="2">km</tspan></text>
                 </g>
             </g>
 
-            <!-- Brand Icon -->
-            <g transform="translate(${cardWidth - 60}, 20)">
-               <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" fill="none" stroke="#2dd4bf" stroke-width="2"/>
-               <circle cx="9" cy="24" r="2" fill="#2dd4bf"/>
-               <circle cx="19" cy="24" r="2" fill="#2dd4bf"/>
-               <path d="M14 4v10" stroke="#2dd4bf" stroke-width="2"/>
-            </g>
+            <line x1="24" y1="120" x2="${cardWidth-24}" y2="120" class="separator"/>
+
+            <!-- Recent Trips List (Bottom) -->
+            <g transform="translate(24, 140)">
+                <text x="0" y="0" class="label" style="opacity: 0.7">Recent Activity</text>
 
-            <!-- List -->
-            <g transform="translate(0, ${headerHeight})">
+                <g transform="translate(0, 15)">
         `;
 
-        stats.latest.forEach((trip, idx) => {
-            const y = idx * rowHeight;
-            const points = trip.svg_points || "";
-            // Mini Map SVG (100x40 coordinate space in a 80x30 box)
+        // Render up to 3 items to fit 300px height comfortably
+        const displayLimit = 3;
+        const rowH = 45;
+
+        stats.latest.slice(0, displayLimit).forEach((trip, idx) => {
+            const y = idx * rowH;
+            let points = trip.svg_points || "";
+
+            // Simple sanitization: allow only digits, commas, spaces, dots, and minus signs
+            points = points.replace(/[^0-9, .\-]/g, '');
 
             svgContent += `
-                <g transform="translate(20, ${y})">
-                    <!-- Line & Dots -->
-                    <line x1="10" y1="12" x2="10" y2="48" stroke="#334155" stroke-width="1" stroke-dasharray="2,2"/>
-                    <circle cx="10" cy="30" r="4" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
-
-                    <!-- Content -->
-                    <text x="30" y="25" class="trip-title">${esc(trip.title)}</text>
-                    <text x="30" y="40" class="trip-date">${esc(trip.date)}</text>
-
-                    <!-- Mini Graph -->
-                    <g transform="translate(${cardWidth - 120}, 10)">
-                        <rect width="80" height="40" fill="#0f172a" rx="4" stroke="#1e293b"/>
-                        <svg width="80" height="40" viewBox="0 0 100 50" preserveAspectRatio="none">
+                <g transform="translate(0, ${y})">
+                    <!-- Dot -->
+                    <circle cx="4" cy="20" r="3" fill="#1e293b" stroke="${labelColor}" stroke-width="1.5"/>
+
+                    <!-- Text Info -->
+                    <text x="20" y="16" class="trip-title">${esc(trip.title)}</text>
+                    <text x="20" y="30" class="trip-date">${esc(trip.date)}</text>
+
+                    <!-- Mini Graph Container -->
+                    <g transform="translate(${cardWidth - 160}, 5)">
+                         <!-- Graph Box Border (optional) -->
+                         <!-- <rect width="100" height="30" fill="none" stroke="${glassBorder}" rx="4"/> -->
+                         <svg width="100" height="30" viewBox="0 0 100 50" preserveAspectRatio="none">
                             <polyline points="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
-                        </svg>
+                         </svg>
                     </g>
 
                     <!-- Dist -->
-                    <text x="${cardWidth - 130}" y="35" text-anchor="end" class="trip-dist">${Math.round(trip.dist)} km</text>
+                    <text x="${cardWidth - 55}" y="25" text-anchor="end" class="trip-dist">${Math.round(trip.dist)} km</text>
                 </g>
             `;
         });
 
+        // If list is empty
+        if (stats.latest.length === 0) {
+             svgContent += `<text x="0" y="30" class="label">No trips recorded yet.</text>`;
+        }
+
         svgContent += `
+                </g>
             </g>
             </svg>
         `;
@@ -132,6 +178,6 @@ export async function onRequest(event) {
         return new Response(svgContent, { headers });
 
     } catch (e) {
-        return new Response(`<svg width="400" height="50" xmlns="http://www.w3.org/2000/svg"><text x="10" y="30" fill="red">${e.message}</text></svg>`, { headers });
+        return errorSvg(e.message);
     }
 }
diff --git a/public/functions/api/user/key.js b/public/functions/api/user/key.js
new file mode 100644
index 0000000..6685464
--- /dev/null
+++ b/public/functions/api/user/key.js
@@ -0,0 +1,57 @@
+export async function onRequest(event) {
+  const headers = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    "Content-Type": "application/json"
+  };
+
+  if (event.request.method === "OPTIONS") {
+    return new Response(null, { headers });
+  }
+
+  if (event.request.method !== "POST") {
+      return new Response(JSON.stringify({ error: "Method Not Allowed" }), { status: 405, headers });
+  }
+
+  try {
+    const DB = globalThis.RAILROUND_KV;
+    if (!DB) throw new Error("KV Missing");
+
+    const authHeader = event.request.headers.get("Authorization");
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+       return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401, headers });
+    }
+    const token = authHeader.split(" ")[1];
+
+    // Verify Session
+    const username = await DB.get(`session:${token}`);
+    if (!username) {
+        return new Response(JSON.stringify({ error: "Invalid Token" }), { status: 401, headers });
+    }
+
+    const userKey = `user:${username}`;
+    const dataRaw = await DB.get(userKey);
+    const data = dataRaw ? JSON.parse(dataRaw) : {};
+
+    // Check if key exists
+    if (data.card_key) {
+        return new Response(JSON.stringify({ key: data.card_key }), { status: 200, headers });
+    }
+
+    // Generate new key
+    const newKey = crypto.randomUUID();
+
+    // Update User Data
+    data.card_key = newKey;
+    await DB.put(userKey, JSON.stringify(data));
+
+    // Create Reverse Index
+    await DB.put(`card_key:${newKey}`, username);
+
+    return new Response(JSON.stringify({ key: newKey }), { status: 200, headers });
+
+  } catch (e) {
+    return new Response(JSON.stringify({ error: e.message }), { status: 500, headers });
+  }
+}
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index 4e14fbc..4bef05e 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -1175,9 +1175,24 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
     };
 };
 
-const GithubCardModal = ({ isOpen, onClose, username }) => {
-    if (!isOpen || !username) return null;
-    const url = `${window.location.origin}/api/card?user=${username}`;
+const GithubCardModal = ({ isOpen, onClose, user }) => {
+    const [cardKey, setCardKey] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        if (isOpen && user && !cardKey) {
+            setLoading(true);
+            api.getOrCreateCardKey(user.token)
+                .then(setCardKey)
+                .catch(err => setError(err.message))
+                .finally(() => setLoading(false));
+        }
+    }, [isOpen, user]);
+
+    if (!isOpen || !user) return null;
+
+    const url = cardKey ? `${window.location.origin}/api/card?key=${cardKey}` : '';
     const md = `[![RailRound Stats](${url})](${window.location.origin})`;
 
     return (
@@ -1187,18 +1202,25 @@ const GithubCardModal = ({ isOpen, onClose, username }) => {
                     <h3 className="font-bold text-lg flex items-center gap-2"><Github size={20}/> GitHub Profile Decoration</h3>
                     <button onClick={onClose}><X className="text-gray-400 hover:text-gray-600"/></button>
                 </div>
-                <div className="space-y-4">
-                    <div className="bg-gray-100 p-4 rounded-lg flex justify-center">
-                        <img src={url} alt="Preview" className="max-w-full shadow-sm rounded border border-gray-200" />
-                    </div>
-                    <div>
-                        <label className="block text-xs font-bold text-gray-500 mb-1">Markdown Code (Copy to README)</label>
-                        <div className="relative">
-                            <textarea readOnly className="w-full p-3 border rounded-lg bg-slate-50 font-mono text-xs text-slate-600 h-20 resize-none outline-none focus:ring-2 focus:ring-blue-500" value={md} onClick={e => e.target.select()} />
+
+                {loading ? (
+                    <div className="py-10 flex justify-center"><Loader2 className="animate-spin text-blue-500"/></div>
+                ) : error ? (
+                    <div className="p-4 bg-red-50 text-red-500 rounded-lg">{error}</div>
+                ) : (
+                    <div className="space-y-4">
+                        <div className="bg-slate-100 p-4 rounded-lg flex justify-center overflow-hidden">
+                            <img src={url} alt="Preview" className="max-w-full shadow-sm rounded" />
                         </div>
+                        <div>
+                            <label className="block text-xs font-bold text-gray-500 mb-1">Markdown Code (Copy to README)</label>
+                            <div className="relative">
+                                <textarea readOnly className="w-full p-3 border rounded-lg bg-slate-50 font-mono text-xs text-slate-600 h-20 resize-none outline-none focus:ring-2 focus:ring-blue-500" value={md} onClick={e => e.target.select()} />
+                            </div>
+                        </div>
+                        <button onClick={onClose} className="w-full bg-slate-800 text-white py-2 rounded-lg font-bold">Close</button>
                     </div>
-                    <button onClick={onClose} className="w-full bg-slate-800 text-white py-2 rounded-lg font-bold">Close</button>
-                </div>
+                )}
             </div>
         </div>
     );
@@ -1297,7 +1319,7 @@ const StatsView = ({ trips, railwayData ,geoData, user, userProfile, segmentGeom
                     </div>
                 </div>
                 {userProfile?.bindings?.github && (
-                   <button onClick={() => onOpenCard(user.username)} className="absolute right-4 top-4 text-xs font-bold bg-gray-100 hover:bg-gray-200 text-gray-600 px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1">
+                   <button onClick={() => onOpenCard(user)} className="absolute right-4 top-4 text-xs font-bold bg-gray-100 hover:bg-gray-200 text-gray-600 px-3 py-1.5 rounded-lg transition-colors flex items-center gap-1">
                        <Github size={14}/> 装饰代码
                    </button>
                 )}
@@ -2445,7 +2467,7 @@ export default function RailRoundApp() {
 
       <LoginModal isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} onLoginSuccess={handleLoginSuccess} />
       <GithubRegisterModal isOpen={isGithubRegisterOpen} onClose={() => setIsGithubRegisterOpen(false)} regToken={githubRegToken} onLoginSuccess={handleLoginSuccess} />
-      <GithubCardModal isOpen={!!cardModalUser} username={cardModalUser} onClose={() => setCardModalUser(null)} />
+      <GithubCardModal isOpen={!!cardModalUser} user={cardModalUser} onClose={() => setCardModalUser(null)} />
 
       {/* Line Selector */}
       <LineSelector isOpen={false} onClose={() => {}} onSelect={() => {}} railwayData={railwayData} /> 
diff --git a/src/services/api.js b/src/services/api.js
index be22ef4..628bbed 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -67,5 +67,18 @@ export const api = {
         url += `&session_token=${encodeURIComponent(sessionToken)}`;
     }
     window.location.href = url;
+  },
+
+  async getOrCreateCardKey(token) {
+    const res = await fetch(`${API_BASE}/user/key`, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+        }
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Failed to get card key');
+    return data.key;
   }
 };

From daab6fde0b5d06cfb9319f0d82c4537e5e3dbbe8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Jan 2026 14:59:34 +0000
Subject: [PATCH 3/6] fix: Improve GitHub Card Rendering and Security

- Refactor `calculateLatestStats` in frontend to support multiple path segments (M/L commands) preventing incorrect line connections.
- Add fallback geometry calculation using `geoData` to prevent blank SVGs when cache is cold.
- Update `api/card.js` to render `<path>` instead of `<polyline>` and allow M/L commands in sanitization.
- Enhance security in `api/user/data.js` by explicitly filtering sensitive fields (password) from responses.
- Enforce strict key-based access in `api/card.js` (removed legacy user param).
---
 public/functions/api/card.js      | 17 +++----
 public/functions/api/user/data.js |  7 ++-
 src/RailRound.jsx                 | 84 +++++++++++++++++++++++--------
 3 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/public/functions/api/card.js b/public/functions/api/card.js
index 7365180..518f911 100644
--- a/public/functions/api/card.js
+++ b/public/functions/api/card.js
@@ -1,7 +1,6 @@
 export async function onRequest(event) {
     const url = new URL(event.request.url);
     const key = url.searchParams.get("key");
-    const userParam = url.searchParams.get("user"); // Legacy support fallback (optional, can be removed for strict mode)
 
     // SVG Headers
     const headers = {
@@ -12,7 +11,7 @@ export async function onRequest(event) {
 
     const errorSvg = (msg) => new Response(`<svg width="600" height="300" xmlns="http://www.w3.org/2000/svg"><text x="300" y="150" text-anchor="middle" fill="#ef4444" font-family="sans-serif">${msg}</text></svg>`, { headers });
 
-    if (!key && !userParam) {
+    if (!key) {
         return errorSvg("Key missing");
     }
 
@@ -20,12 +19,8 @@ export async function onRequest(event) {
         const DB = globalThis.RAILROUND_KV;
         if (!DB) return errorSvg("KV Error");
 
-        let username = userParam;
-
-        if (key) {
-            username = await DB.get(`card_key:${key}`);
-            if (!username) return errorSvg("Invalid Key");
-        }
+        const username = await DB.get(`card_key:${key}`);
+        if (!username) return errorSvg("Invalid Key");
 
         const userKey = `user:${username}`;
         const dataRaw = await DB.get(userKey);
@@ -137,8 +132,8 @@ export async function onRequest(event) {
             const y = idx * rowH;
             let points = trip.svg_points || "";
 
-            // Simple sanitization: allow only digits, commas, spaces, dots, and minus signs
-            points = points.replace(/[^0-9, .\-]/g, '');
+            // Simple sanitization: allow only digits, commas, spaces, dots, minus signs, M, and L (for paths)
+            points = points.replace(/[^0-9, .\-ML]/g, '');
 
             svgContent += `
                 <g transform="translate(0, ${y})">
@@ -154,7 +149,7 @@ export async function onRequest(event) {
                          <!-- Graph Box Border (optional) -->
                          <!-- <rect width="100" height="30" fill="none" stroke="${glassBorder}" rx="4"/> -->
                          <svg width="100" height="30" viewBox="0 0 100 50" preserveAspectRatio="none">
-                            <polyline points="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
+                            <path d="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
                          </svg>
                     </g>
 
diff --git a/public/functions/api/user/data.js b/public/functions/api/user/data.js
index 84a9ee0..5f64deb 100644
--- a/public/functions/api/user/data.js
+++ b/public/functions/api/user/data.js
@@ -31,8 +31,11 @@ export async function onRequest(event) {
     if (event.request.method === "GET") {
         const dataRaw = await DB.get(userKey);
         const data = dataRaw ? JSON.parse(dataRaw) : { trips: [], pins: [] };
-        // Return only what is needed for the frontend app (latest_5 is for the card api, but no harm returning it)
-        return new Response(JSON.stringify(data), { status: 200, headers });
+
+        // Security: Remove sensitive fields
+        const { password, ...safeData } = data;
+
+        return new Response(JSON.stringify(safeData), { status: 200, headers });
     }
 
     if (event.request.method === "POST") {
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index 4bef05e..8d1bc60 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -1049,18 +1049,50 @@ const RouteSlice = ({ segments, segmentGeometries }) => {
 };
 
 // --- Refactored: Helper for Stats Calculation (Latest 5 + SVG Points) ---
-const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
+const calculateLatestStats = (trips, segmentGeometries, railwayData, geoData) => {
     // 1. Basic Stats
     const totalTrips = trips.length;
     const allSegments = trips.flatMap(t => t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }]);
     const uniqueLines = new Set(allSegments.map(s => s.lineKey)).size;
     let totalDist = 0;
 
+    // Helper to get or calc geometry on-the-fly
+    const getGeometry = (seg) => {
+        const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
+        let geom = segmentGeometries ? segmentGeometries.get(key) : null;
+
+        // Fallback: If not in cache but we have geoData, try to slice it now
+        if ((!geom || !geom.coords) && geoData && railwayData) {
+            const line = railwayData[seg.lineKey];
+            if (line) {
+                const s1 = line.stations.find(st => st.id === seg.fromId);
+                const s2 = line.stations.find(st => st.id === seg.toId);
+                if (s1 && s2) {
+                    const parts = seg.lineKey.split(':');
+                    const company = parts[0];
+                    const lineName = parts.slice(1).join(':');
+                    const feature = geoData.features.find(f =>
+                        f.properties.type === 'line' &&
+                        f.properties.name === lineName &&
+                        f.properties.company === company
+                    );
+                    if (feature) {
+                        const coords = sliceGeoJsonPath(feature, s1.lat, s1.lng, s2.lat, s2.lng);
+                        if (coords) {
+                            const isMulti = Array.isArray(coords[0]) && Array.isArray(coords[0][0]);
+                            geom = { coords, isMulti };
+                        }
+                    }
+                }
+            }
+        }
+        return geom;
+    };
+
     // Calc total distance
-    if (turf && segmentGeometries) {
+    if (turf) {
         allSegments.forEach(seg => {
-            const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
-            const geom = segmentGeometries.get(key);
+            const geom = getGeometry(seg);
             if (geom && geom.coords) {
                 if (geom.isMulti) {
                     geom.coords.forEach(c => totalDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]]))));
@@ -1068,7 +1100,7 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
                     totalDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
                 }
             } else {
-                 // Fallback
+                 // Fallback Approx
                 const line = railwayData[seg.lineKey];
                 if (line) {
                     const s1 = line.stations.find(st => st.id === seg.fromId);
@@ -1089,8 +1121,7 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
 
         // Collect Coords for SVG
         segs.forEach(seg => {
-            const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
-            const geom = segmentGeometries ? segmentGeometries.get(key) : null;
+            const geom = getGeometry(seg);
             if (geom && geom.coords) {
                 if (geom.isMulti) {
                     geom.coords.forEach(c => {
@@ -1104,10 +1135,10 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
             }
         });
 
-        // Generate SVG Points (PCA Logic simplified reuse)
+        // Generate SVG Path (PCA Logic simplified reuse)
         let svgPoints = "";
         if (allCoords.length > 0) {
-            // Flatten all points
+            // Flatten all points ONLY for PCA calculation
             let flatPoints = [];
             allCoords.forEach(c => flatPoints.push(...c));
 
@@ -1131,7 +1162,7 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
 
                 // Rotate & BBox
                 let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-                const rotated = flatPoints.map(pt => {
+                const projectPt = (pt) => {
                     const x = pt[1] - cenLng;
                     const y = pt[0] - cenLat;
                     const rx = x * cosT - y * sinT;
@@ -1139,7 +1170,10 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
                     if (rx < minX) minX = rx; if (rx > maxX) maxX = rx;
                     if (ry < minY) minY = ry; if (ry > maxY) maxY = ry;
                     return [ry, rx];
-                });
+                };
+
+                // First pass: calc BBox
+                allCoords.forEach(line => line.forEach(pt => projectPt(pt)));
 
                 const w = maxX - minX || 0.001;
                 const h = maxY - minY || 0.001;
@@ -1149,12 +1183,22 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
                 const vMinX = minX - padX; const vMinY = minY - padY;
                 const vW = w + padX * 2; const vH = h + padY * 2;
 
-                // Project to 0-100, 0-50 space
-                svgPoints = rotated.map(pt => {
-                    const px = ((pt[1] - vMinX) / vW) * 100;
-                    const py = 50 - ((pt[0] - vMinY) / vH) * 50;
-                    return `${px.toFixed(1)},${py.toFixed(1)}`; // Optimize precision
-                }).join(' ');
+                // Second pass: Generate Path String (Project to 0-100, 0-50 space)
+                const paths = allCoords.map(line => {
+                    const pts = line.map(pt => {
+                        const x = pt[1] - cenLng;
+                        const y = pt[0] - cenLat;
+                        const rx = x * cosT - y * sinT;
+                        const ry = x * sinT + y * cosT;
+
+                        const px = ((rx - vMinX) / vW) * 100;
+                        const py = 50 - ((ry - vMinY) / vH) * 50;
+                        return `${px.toFixed(1)},${py.toFixed(1)}`;
+                    });
+                    return "M" + pts.join(" L");
+                });
+
+                svgPoints = paths.join(" ");
             }
         }
 
@@ -1163,7 +1207,7 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData) => {
             date: t.date,
             title: lineNames,
             dist: tripDist,
-            svg_points: svgPoints
+            svg_points: svgPoints // Now actually an SVG Path 'd' string
         };
     });
 
@@ -2194,7 +2238,7 @@ export default function RailRoundApp() {
 
     // Sync to Cloud
     if (user) {
-       const latest5 = calculateLatestStats(finalTrips, segmentGeometries, railwayData);
+       const latest5 = calculateLatestStats(finalTrips, segmentGeometries, railwayData, geoData);
        api.saveData(user.token, finalTrips, pins, latest5).catch(e => alert('云端保存失败: ' + e.message));
     }
 
@@ -2212,7 +2256,7 @@ export default function RailRoundApp() {
           const newTrips = trips.filter(t => t.id !== id);
           setTrips(newTrips);
           if (user) {
-             const latest5 = calculateLatestStats(newTrips, segmentGeometries, railwayData);
+             const latest5 = calculateLatestStats(newTrips, segmentGeometries, railwayData, geoData);
              api.saveData(user.token, newTrips, pins, latest5).catch(e => alert('云端同步失败'));
           }
       }

From 5b6471ac138c76ce79aaaa0277f1cda757f82bab Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 5 Jan 2026 15:55:07 +0000
Subject: [PATCH 4/6] feat: Unify SVG Generation Logic for Consistent Visuals

- Refactor `RouteSlice` logic into a shared helper `getRouteVisualData` in `src/RailRound.jsx`.
- Update `calculateLatestStats` to use `getRouteVisualData` for generating card SVG data, ensuring consistency with the frontend UI.
- Pass `geoData` to `calculateLatestStats` to enable on-the-fly geometry calculation (fallback for cold cache).
- Update `api/card.js` to support SVG path commands (M/L) and sanitized input.
---
 src/RailRound.jsx | 396 ++++++++++++++++++----------------------------
 1 file changed, 157 insertions(+), 239 deletions(-)

diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index 8d1bc60..7016591 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -917,144 +917,10 @@ const FabButton = ({ activeTab, pinMode, togglePinMode }) => (
   <div className="absolute bottom-4 left-4 z-[400] flex flex-col gap-3">{activeTab === 'map' && (<button onClick={togglePinMode} className={`p-3 rounded-full shadow-lg transition-all transform hover:scale-105 ${pinMode==='idle'?'bg-white text-gray-700':pinMode==='free'?'bg-blue-500 text-white':'bg-indigo-600 text-white ring-4 ring-indigo-200'}`}>{pinMode === 'snap' ? <Magnet size={24} /> : <MapPin size={24} />}</button>)}</div>
 );
 
-const RouteSlice = ({ segments, segmentGeometries }) => {
-  const allCoords = [];
-  if (!segmentGeometries) return null;
-
-  let totalDist = 0;
-
-  segments.forEach(seg => {
-      const key = `${seg.lineKey}_${seg.fromId}_${seg.toId}`;
-      const geom = segmentGeometries.get(key);
-      if (geom && geom.coords) {
-          if (geom.isMulti) {
-              geom.coords.forEach(c => {
-                  allCoords.push({ coords: c, color: geom.color });
-                  if (turf) totalDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]])));
-              });
-          } else {
-              allCoords.push({ coords: geom.coords, color: geom.color });
-              if (turf) totalDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
-          }
-      }
-  });
-
-  if (allCoords.length === 0) return <div className="w-28 shrink-0 flex items-center justify-center text-xs text-gray-200 ml-2 border-l border-gray-50">无预览</div>;
-
-  // Flattening Logic using PCA (Principal Component Analysis) approximation
-  // 1. Calculate Centroid
-  let sumLat = 0, sumLng = 0, count = 0;
-  allCoords.forEach(item => {
-      item.coords.forEach(pt => {
-          sumLat += pt[0];
-          sumLng += pt[1];
-          count++;
-      });
-  });
-  if (count === 0) return null;
-  const cenLat = sumLat / count;
-  const cenLng = sumLng / count;
-
-  // 2. Calculate Covariance Matrix terms
-  let u20 = 0, u02 = 0, u11 = 0;
-  allCoords.forEach(item => {
-      item.coords.forEach(pt => {
-          const x = pt[1] - cenLng; // lng is x
-          const y = pt[0] - cenLat; // lat is y
-          u20 += x * x;
-          u02 += y * y;
-          u11 += x * y;
-      });
-  });
-
-  // 3. Principal Axis Angle
-  // theta is the angle of the main axis relative to X-axis
-  const theta = 0.5 * Math.atan2(2 * u11, u20 - u02);
-
-  // We want to rotate by -theta to align with X axis
-  const cosT = Math.cos(-theta);
-  const sinT = Math.sin(-theta);
-
-  // 4. Rotate and BBox
-  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-  const rotatedCoords = allCoords.map(item => ({
-      ...item,
-      coords: item.coords.map(pt => {
-          const x = pt[1] - cenLng;
-          const y = pt[0] - cenLat;
-          const rx = x * cosT - y * sinT;
-          const ry = x * sinT + y * cosT;
-          if (rx < minX) minX = rx;
-          if (rx > maxX) maxX = rx;
-          if (ry < minY) minY = ry;
-          if (ry > maxY) maxY = ry;
-          return [ry, rx]; // Keep as [y, x] format for consistency if needed, but projected is purely Cartesian
-      })
-  }));
-
-  const w = maxX - minX || 0.001;
-  const h = maxY - minY || 0.001;
-
-  // Padding
-  const padX = w * 0.1;
-  const padY = h * 0.1;
-
-  const vMinX = minX - padX;
-  const vMinY = minY - padY;
-  const vW = w + padX * 2;
-  const vH = h + padY * 2;
-
-  // Determine Aspect Ratio strategy
-  // 1. Normalize data to fill 100x50 (2:1) coordinate space
-  // 2. Calculate target visual ratio = max(2, actualRatio)
-  // 3. Size container to target ratio
-  // 4. Use preserveAspectRatio="none" to stretch the normalized 2:1 coords to the target ratio
-
-  const contentRatio = vW / vH;
-  const visualRatio = Math.min(8, Math.max(2, contentRatio)); // Min 2:1, Max 8:1
-  const heightPx = 40;
-  const widthPx = heightPx * visualRatio;
-
-  const project = (lat, lng) => {
-      const px = ((lng - vMinX) / vW) * 100; // Map to 0-100
-      const py = 50 - ((lat - vMinY) / vH) * 50; // Map to 0-50
-      return `${px},${py}`;
-  };
-
-  return (
-      <div className="shrink-0 ml-2 border-l border-gray-50 flex flex-row items-center justify-end pl-2 gap-2" style={{ minWidth: '100px' }}>
-          <div style={{ width: widthPx, height: heightPx }}>
-            <svg
-                viewBox="0 0 100 50"
-                preserveAspectRatio="none"
-                className="w-full h-full opacity-80"
-            >
-                {rotatedCoords.map((item, idx) => (
-                    <polyline
-                        key={idx}
-                        points={item.coords.map(pt => project(pt[0], pt[1])).join(' ')}
-                        fill="none"
-                        stroke={item.color || '#94a3b8'}
-                        strokeWidth="4"
-                        vectorEffect="non-scaling-stroke"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                    />
-                ))}
-            </svg>
-          </div>
-          <div className="text-[10px] font-bold text-gray-400 shrink-0 text-right">{Math.round(totalDist)}km</div>
-      </div>
-  );
-};
-
-// --- Refactored: Helper for Stats Calculation (Latest 5 + SVG Points) ---
-const calculateLatestStats = (trips, segmentGeometries, railwayData, geoData) => {
-    // 1. Basic Stats
-    const totalTrips = trips.length;
-    const allSegments = trips.flatMap(t => t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }]);
-    const uniqueLines = new Set(allSegments.map(s => s.lineKey)).size;
+// --- Shared Helper: Calculate Visualization Data ---
+const getRouteVisualData = (segments, segmentGeometries, railwayData, geoData) => {
     let totalDist = 0;
+    const allCoords = [];
 
     // Helper to get or calc geometry on-the-fly
     const getGeometry = (seg) => {
@@ -1089,132 +955,184 @@ const calculateLatestStats = (trips, segmentGeometries, railwayData, geoData) =>
         return geom;
     };
 
-    // Calc total distance
-    if (turf) {
-        allSegments.forEach(seg => {
-            const geom = getGeometry(seg);
-            if (geom && geom.coords) {
-                if (geom.isMulti) {
-                    geom.coords.forEach(c => totalDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]]))));
-                } else {
-                    totalDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
-                }
+    segments.forEach(seg => {
+        const geom = getGeometry(seg);
+        if (geom && geom.coords) {
+            if (geom.isMulti) {
+                geom.coords.forEach(c => {
+                    allCoords.push({ coords: c, color: geom.color || '#94a3b8' });
+                    if(turf) totalDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]])));
+                });
             } else {
-                 // Fallback Approx
-                const line = railwayData[seg.lineKey];
-                if (line) {
-                    const s1 = line.stations.find(st => st.id === seg.fromId);
-                    const s2 = line.stations.find(st => st.id === seg.toId);
-                    if (s1 && s2) totalDist += calcDist(s1.lat, s1.lng, s2.lat, s2.lng);
-                }
+                allCoords.push({ coords: geom.coords, color: geom.color || '#94a3b8' });
+                if(turf) totalDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
+            }
+        } else {
+             // Fallback Distance Approx
+            const line = railwayData ? railwayData[seg.lineKey] : null;
+            if (line) {
+                const s1 = line.stations.find(st => st.id === seg.fromId);
+                const s2 = line.stations.find(st => st.id === seg.toId);
+                if (s1 && s2) totalDist += calcDist(s1.lat, s1.lng, s2.lat, s2.lng);
             }
+        }
+    });
+
+    if (allCoords.length === 0) return { totalDist, visualPaths: [] };
+
+    // PCA & Projection Logic
+    let sumLat = 0, sumLng = 0, count = 0;
+    allCoords.forEach(item => {
+        item.coords.forEach(pt => {
+            sumLat += pt[0];
+            sumLng += pt[1];
+            count++;
         });
-    }
+    });
 
-    // 2. Latest 5
-    const latest = trips.slice(0, 5).map(t => {
-        const segs = t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }];
-        const lineNames = segs.map(s => s.lineKey.split(':').pop()).join(' → '); // Simplified Title
+    if (count === 0) return { totalDist, visualPaths: [] };
 
-        let tripDist = 0;
-        const allCoords = [];
-
-        // Collect Coords for SVG
-        segs.forEach(seg => {
-            const geom = getGeometry(seg);
-            if (geom && geom.coords) {
-                if (geom.isMulti) {
-                    geom.coords.forEach(c => {
-                         allCoords.push(c);
-                         if(turf) tripDist += turf.length(turf.lineString(c.map(p => [p[1], p[0]])));
-                    });
-                } else {
-                    allCoords.push(geom.coords);
-                    if(turf) tripDist += turf.length(turf.lineString(geom.coords.map(p => [p[1], p[0]])));
-                }
-            }
+    const cenLat = sumLat / count;
+    const cenLng = sumLng / count;
+
+    let u20 = 0, u02 = 0, u11 = 0;
+    allCoords.forEach(item => {
+        item.coords.forEach(pt => {
+            const x = pt[1] - cenLng;
+            const y = pt[0] - cenLat;
+            u20 += x * x;
+            u02 += y * y;
+            u11 += x * y;
         });
+    });
 
-        // Generate SVG Path (PCA Logic simplified reuse)
-        let svgPoints = "";
-        if (allCoords.length > 0) {
-            // Flatten all points ONLY for PCA calculation
-            let flatPoints = [];
-            allCoords.forEach(c => flatPoints.push(...c));
-
-            if (flatPoints.length > 1) {
-                // Centroid
-                let sumLat = 0, sumLng = 0;
-                flatPoints.forEach(p => { sumLat += p[0]; sumLng += p[1]; });
-                const cenLat = sumLat / flatPoints.length;
-                const cenLng = sumLng / flatPoints.length;
-
-                // Covariance
-                let u20 = 0, u02 = 0, u11 = 0;
-                flatPoints.forEach(pt => {
-                    const x = pt[1] - cenLng;
-                    const y = pt[0] - cenLat;
-                    u20 += x * x; u02 += y * y; u11 += x * y;
-                });
-                const theta = 0.5 * Math.atan2(2 * u11, u20 - u02);
-                const cosT = Math.cos(-theta);
-                const sinT = Math.sin(-theta);
-
-                // Rotate & BBox
-                let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-                const projectPt = (pt) => {
-                    const x = pt[1] - cenLng;
-                    const y = pt[0] - cenLat;
-                    const rx = x * cosT - y * sinT;
-                    const ry = x * sinT + y * cosT;
-                    if (rx < minX) minX = rx; if (rx > maxX) maxX = rx;
-                    if (ry < minY) minY = ry; if (ry > maxY) maxY = ry;
-                    return [ry, rx];
-                };
+    const theta = 0.5 * Math.atan2(2 * u11, u20 - u02);
+    const cosT = Math.cos(-theta);
+    const sinT = Math.sin(-theta);
 
-                // First pass: calc BBox
-                allCoords.forEach(line => line.forEach(pt => projectPt(pt)));
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
 
-                const w = maxX - minX || 0.001;
-                const h = maxY - minY || 0.001;
+    // Helper to rotate a point
+    const rotate = (lat, lng) => {
+        const x = lng - cenLng;
+        const y = lat - cenLat;
+        const rx = x * cosT - y * sinT;
+        const ry = x * sinT + y * cosT;
+        return { rx, ry };
+    };
 
-                // Pad
-                const padX = w * 0.1; const padY = h * 0.1;
-                const vMinX = minX - padX; const vMinY = minY - padY;
-                const vW = w + padX * 2; const vH = h + padY * 2;
+    // 1. Calc BBox
+    allCoords.forEach(item => {
+        item.coords.forEach(pt => {
+            const { rx, ry } = rotate(pt[0], pt[1]);
+            if (rx < minX) minX = rx;
+            if (rx > maxX) maxX = rx;
+            if (ry < minY) minY = ry;
+            if (ry > maxY) maxY = ry;
+        });
+    });
 
-                // Second pass: Generate Path String (Project to 0-100, 0-50 space)
-                const paths = allCoords.map(line => {
-                    const pts = line.map(pt => {
-                        const x = pt[1] - cenLng;
-                        const y = pt[0] - cenLat;
-                        const rx = x * cosT - y * sinT;
-                        const ry = x * sinT + y * cosT;
+    const w = maxX - minX || 0.001;
+    const h = maxY - minY || 0.001;
+    const padX = w * 0.1;
+    const padY = h * 0.1;
+    const vMinX = minX - padX;
+    const vMinY = minY - padY;
+    const vW = w + padX * 2;
+    const vH = h + padY * 2;
+
+    const contentRatio = vW / vH;
+    const visualRatio = Math.min(8, Math.max(2, contentRatio));
+    const heightPx = 40;
+    const widthPx = heightPx * visualRatio;
+
+    // 2. Generate Paths
+    const visualPaths = allCoords.map(item => {
+        const pointsStr = item.coords.map(pt => {
+            const { rx, ry } = rotate(pt[0], pt[1]);
+            const px = ((rx - vMinX) / vW) * 100;
+            const py = 50 - ((ry - vMinY) / vH) * 50;
+            return `${px.toFixed(1)},${py.toFixed(1)}`;
+        }).join(' ');
 
-                        const px = ((rx - vMinX) / vW) * 100;
-                        const py = 50 - ((ry - vMinY) / vH) * 50;
-                        return `${px.toFixed(1)},${py.toFixed(1)}`;
-                    });
-                    return "M" + pts.join(" L");
-                });
+        return {
+            path: `M ${pointsStr.replace(/ /g, ' L ')}`, // SVG Path Command
+            polyline: pointsStr, // Legacy Polyline points
+            color: item.color
+        };
+    });
 
-                svgPoints = paths.join(" ");
-            }
-        }
+    return { totalDist, visualPaths, widthPx, heightPx };
+};
+
+const RouteSlice = ({ segments, segmentGeometries, railwayData, geoData }) => {
+  const { visualPaths, totalDist, widthPx, heightPx } = useMemo(
+      () => getRouteVisualData(segments, segmentGeometries, railwayData, geoData),
+      [segments, segmentGeometries, railwayData, geoData]
+  );
+
+  if (visualPaths.length === 0) return <div className="w-28 shrink-0 flex items-center justify-center text-xs text-gray-200 ml-2 border-l border-gray-50">无预览</div>;
+
+  return (
+      <div className="shrink-0 ml-2 border-l border-gray-50 flex flex-row items-center justify-end pl-2 gap-2" style={{ minWidth: '100px' }}>
+          <div style={{ width: widthPx, height: heightPx }}>
+            <svg
+                viewBox="0 0 100 50"
+                preserveAspectRatio="none"
+                className="w-full h-full opacity-80"
+            >
+                {visualPaths.map((item, idx) => (
+                    <path
+                        key={idx}
+                        d={item.path}
+                        fill="none"
+                        stroke={item.color || '#94a3b8'}
+                        strokeWidth="4"
+                        vectorEffect="non-scaling-stroke"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                ))}
+            </svg>
+          </div>
+          <div className="text-[10px] font-bold text-gray-400 shrink-0 text-right">{Math.round(totalDist)}km</div>
+      </div>
+  );
+};
+
+// --- Updated: Stats Calculation using Shared Helper ---
+const calculateLatestStats = (trips, segmentGeometries, railwayData, geoData) => {
+    // 1. Basic Stats
+    const totalTrips = trips.length;
+    const allSegments = trips.flatMap(t => t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }]);
+    const uniqueLines = new Set(allSegments.map(s => s.lineKey)).size;
+
+    // Calc total distance using helper (aggregating cached or on-the-fly)
+    const { totalDist: grandTotalDist } = getRouteVisualData(allSegments, segmentGeometries, railwayData, geoData);
+
+    // 2. Latest 5
+    const latest = trips.slice(0, 5).map(t => {
+        const segs = t.segments || [{ lineKey: t.lineKey, fromId: t.fromId, toId: t.toId }];
+        const lineNames = segs.map(s => s.lineKey.split(':').pop()).join(' → '); // Simplified Title
+
+        const { totalDist, visualPaths } = getRouteVisualData(segs, segmentGeometries, railwayData, geoData);
+
+        // Combine all paths into one 'd' string for the card
+        const svgPoints = visualPaths.map(vp => vp.path).join(" ");
 
         return {
             id: t.id,
             date: t.date,
             title: lineNames,
-            dist: tripDist,
-            svg_points: svgPoints // Now actually an SVG Path 'd' string
+            dist: totalDist,
+            svg_points: svgPoints
         };
     });
 
     return {
         count: totalTrips,
         lines: uniqueLines,
-        dist: totalDist,
+        dist: grandTotalDist,
         latest: latest
     };
 };

From e620abad87f12996116c16507a5906ed2533da3b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 6 Jan 2026 02:25:15 +0000
Subject: [PATCH 5/6] refactor: Polish GitHub Card Design (Layout, Colors,
 5-Items)

- Updated `api/card.js` to render 5 items (previously 3).
- Changed SVG card dimensions to 600x340px (approx 2:1 ratio).
- Redesigned layout: Moved statistics to the top-right, aligned with the header.
- Improved readability: Switched text colors to solid white/slate (removed opacity).
- Enforced strict usage of standard Lucide 'Train' icon paths.
- Verified frontend logic (`slice(0, 5)`) matches backend rendering capacity.
---
 image.png                    | Bin 0 -> 34097 bytes
 public/functions/api/card.js |  81 +++++++++++++++++++----------------
 2 files changed, 43 insertions(+), 38 deletions(-)
 create mode 100644 image.png

diff --git a/image.png b/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4b09d456df1ffc7c8fb6438f7669aaff38483e3
GIT binary patch
literal 34097
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
Sa~Ofmryz1FPq8wu-v2N4XWgFw

literal 0
HcmV?d00001

diff --git a/public/functions/api/card.js b/public/functions/api/card.js
index 518f911..920644c 100644
--- a/public/functions/api/card.js
+++ b/public/functions/api/card.js
@@ -43,32 +43,32 @@ export async function onRequest(event) {
         };
 
         // --- SVG Generation (Glassmorphism) ---
-        // 1:2 Ratio -> 600x300
+        // Dimensions optimized for 5 items: ~340px height
         const cardWidth = 600;
-        const cardHeight = 300;
+        const cardHeight = 340;
 
-        // Colors
+        // Colors (Solid text for better readability)
         const glassBg = "rgba(15, 23, 42, 0.6)"; // Slate-900 with opacity
         const glassBorder = "rgba(255, 255, 255, 0.1)";
-        const textColor = "#e2e8f0"; // Slate-200
-        const labelColor = "#94a3b8"; // Slate-400
+        const textColor = "#ffffff"; // White for maximum contrast
+        const labelColor = "#94a3b8"; // Slate-400 for labels
         const accentColor = "#2dd4bf"; // Teal-400
 
         const styles = `
             .bg { fill: ${glassBg}; stroke: ${glassBorder}; stroke-width: 1px; }
             .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; fill: ${textColor}; }
             .label { font-size: 10px; fill: ${labelColor}; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
-            .value { font-size: 20px; font-weight: 800; fill: #f1f5f9; }
-            .trip-title { font-size: 11px; font-weight: 600; fill: #f8fafc; }
+            .value { font-size: 20px; font-weight: 800; fill: ${textColor}; }
+            .trip-title { font-size: 11px; font-weight: 600; fill: ${textColor}; }
             .trip-date { font-size: 9px; fill: ${labelColor}; }
             .trip-dist { font-size: 9px; fill: ${labelColor}; font-family: monospace; }
             .line-path { fill: none; stroke: ${accentColor}; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
             .separator { stroke: ${glassBorder}; stroke-width: 1; }
         `;
 
-        // Icon SVG (Lucide Train Standard)
+        // Icon SVG (Lucide Train Standard) placed at top right
         const iconSvg = `
-            <g transform="translate(${cardWidth - 40}, 20) scale(1)">
+            <g transform="translate(${cardWidth - 40}, 24) scale(1)">
                 <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M4 14h16" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M12 4v10" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -86,46 +86,53 @@ export async function onRequest(event) {
             <!-- Glass Background -->
             <rect x="2" y="2" width="${cardWidth-4}" height="${cardHeight-4}" rx="16" class="bg"/>
 
-            <!-- Header Section (Top Left) -->
-            <text x="24" y="36" class="text" style="font-size: 16px; font-weight: bold; letter-spacing: -0.5px;">${esc(username)}'s RailRound</text>
+            <!-- Header Section -->
+            <text x="24" y="44" class="text" style="font-size: 18px; font-weight: 800; letter-spacing: -0.5px;">${esc(username)}'s RailRound</text>
             ${iconSvg}
 
-            <line x1="24" y1="56" x2="${cardWidth-24}" y2="56" class="separator"/>
-
-            <!-- Stats Grid (Middle) -->
+            <!-- Stats Grid (Top Right, shifted left of icon) -->
             <g transform="translate(24, 75)">
-                <!-- Count -->
-                <g>
-                    <text x="0" y="0" class="label">Trips</text>
-                    <text x="0" y="24" class="value">${stats.count}</text>
-                </g>
-                <line x1="70" y1="0" x2="70" y2="30" class="separator"/>
-
-                <!-- Lines -->
-                <g transform="translate(100, 0)">
-                    <text x="0" y="0" class="label">Lines</text>
-                    <text x="0" y="24" class="value" style="fill: #818cf8;">${stats.lines}</text>
-                </g>
-                <line x1="170" y1="0" x2="170" y2="30" class="separator"/>
+                <!-- Stats moved to header line to save vertical space? Or kept below?
+                     User said "placing the stats split on the right".
+                     Let's move them up to y=20 relative to header or keep in separate row but compressed.
+                     Let's try putting them on the same visual "block" but aligned.
+                -->
+            </g>
 
-                <!-- Distance -->
-                <g transform="translate(200, 0)">
-                    <text x="0" y="0" class="label">Distance</text>
-                    <text x="0" y="24" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="12" fill="${labelColor}" dx="2">km</tspan></text>
-                </g>
+            <!-- Redesigned Stats (Aligned Right) -->
+            <g transform="translate(240, 24)">
+               <!-- Trips -->
+               <g transform="translate(0, 0)">
+                  <text x="0" y="0" class="label">Trips</text>
+                  <text x="0" y="20" class="value">${stats.count}</text>
+                  <line x1="50" y1="2" x2="50" y2="22" class="separator"/>
+               </g>
+
+               <!-- Lines -->
+               <g transform="translate(70, 0)">
+                  <text x="0" y="0" class="label">Lines</text>
+                  <text x="0" y="20" class="value" style="fill: #818cf8;">${stats.lines}</text>
+                  <line x1="50" y1="2" x2="50" y2="22" class="separator"/>
+               </g>
+
+               <!-- Distance -->
+               <g transform="translate(140, 0)">
+                  <text x="0" y="0" class="label">Distance</text>
+                  <text x="0" y="20" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="12" fill="${labelColor}" dx="2">km</tspan></text>
+               </g>
             </g>
 
-            <line x1="24" y1="120" x2="${cardWidth-24}" y2="120" class="separator"/>
+            <line x1="24" y1="70" x2="${cardWidth-24}" y2="70" class="separator"/>
 
             <!-- Recent Trips List (Bottom) -->
-            <g transform="translate(24, 140)">
+            <g transform="translate(24, 90)">
                 <text x="0" y="0" class="label" style="opacity: 0.7">Recent Activity</text>
 
                 <g transform="translate(0, 15)">
         `;
 
-        // Render up to 3 items to fit 300px height comfortably
-        const displayLimit = 3;
+        // Render up to 5 items
+        const displayLimit = 5;
         const rowH = 45;
 
         stats.latest.slice(0, displayLimit).forEach((trip, idx) => {
@@ -146,8 +153,6 @@ export async function onRequest(event) {
 
                     <!-- Mini Graph Container -->
                     <g transform="translate(${cardWidth - 160}, 5)">
-                         <!-- Graph Box Border (optional) -->
-                         <!-- <rect width="100" height="30" fill="none" stroke="${glassBorder}" rx="4"/> -->
                          <svg width="100" height="30" viewBox="0 0 100 50" preserveAspectRatio="none">
                             <path d="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
                          </svg>

From 6e97add5b24bff3dd4180a54c3cbc823af01af14 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 6 Jan 2026 03:07:18 +0000
Subject: [PATCH 6/6] Redesign GitHub profile card to use a split layout with
 simplified visuals

---
 public/functions/api/card.js | 149 +++++++++++++++++------------------
 1 file changed, 72 insertions(+), 77 deletions(-)

diff --git a/public/functions/api/card.js b/public/functions/api/card.js
index 920644c..96d9922 100644
--- a/public/functions/api/card.js
+++ b/public/functions/api/card.js
@@ -9,7 +9,7 @@ export async function onRequest(event) {
         "Access-Control-Allow-Origin": "*"
     };
 
-    const errorSvg = (msg) => new Response(`<svg width="600" height="300" xmlns="http://www.w3.org/2000/svg"><text x="300" y="150" text-anchor="middle" fill="#ef4444" font-family="sans-serif">${msg}</text></svg>`, { headers });
+    const errorSvg = (msg) => new Response(`<svg width="600" height="340" xmlns="http://www.w3.org/2000/svg"><text x="300" y="170" text-anchor="middle" fill="#ef4444" font-family="sans-serif">${msg}</text></svg>`, { headers });
 
     if (!key) {
         return errorSvg("Key missing");
@@ -42,40 +42,45 @@ export async function onRequest(event) {
                 .replace(/'/g, '&apos;');
         };
 
-        // --- SVG Generation (Glassmorphism) ---
-        // Dimensions optimized for 5 items: ~340px height
+        // --- SVG Generation (New Split Layout) ---
         const cardWidth = 600;
         const cardHeight = 340;
 
-        // Colors (Solid text for better readability)
-        const glassBg = "rgba(15, 23, 42, 0.6)"; // Slate-900 with opacity
+        // Colors
+        const glassBg = "rgba(15, 23, 42, 0.95)"; // Darker background
         const glassBorder = "rgba(255, 255, 255, 0.1)";
-        const textColor = "#ffffff"; // White for maximum contrast
-        const labelColor = "#94a3b8"; // Slate-400 for labels
+        const textColor = "#ffffff";
+        const labelColor = "#94a3b8";
         const accentColor = "#2dd4bf"; // Teal-400
+        const secondaryColor = "#818cf8"; // Indigo-400
 
         const styles = `
             .bg { fill: ${glassBg}; stroke: ${glassBorder}; stroke-width: 1px; }
             .text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; fill: ${textColor}; }
             .label { font-size: 10px; fill: ${labelColor}; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
-            .value { font-size: 20px; font-weight: 800; fill: ${textColor}; }
+            .value { font-size: 18px; font-weight: 800; fill: ${textColor}; }
             .trip-title { font-size: 11px; font-weight: 600; fill: ${textColor}; }
             .trip-date { font-size: 9px; fill: ${labelColor}; }
             .trip-dist { font-size: 9px; fill: ${labelColor}; font-family: monospace; }
             .line-path { fill: none; stroke: ${accentColor}; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
             .separator { stroke: ${glassBorder}; stroke-width: 1; }
+            .icon-lg { stroke: ${accentColor}; stroke-width: 1.5; fill: none; opacity: 0.8; }
         `;
 
-        // Icon SVG (Lucide Train Standard) placed at top right
-        const iconSvg = `
-            <g transform="translate(${cardWidth - 40}, 24) scale(1)">
-                <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" fill="none" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M4 14h16" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M12 4v10" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="m8 19-2 3" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="m16 19 2 3" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M9 15h.01" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M15 15h.01" stroke="${accentColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        // Left Panel (Visual) - Large Train Icon centered
+        // Panel Width: 200px
+        // Icon center: x=100, y=170
+        // Scale: 4x (approx 96px size)
+        const leftPanelVisual = `
+            <g transform="translate(45, 115) scale(5)">
+                 <!-- Lucide Train Icon Path -->
+                 <path d="M4 14c0-5.5 4.5-10 10-10s10 4.5 10 10v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6z" class="icon-lg"/>
+                 <path d="M4 14h16" class="icon-lg"/>
+                 <path d="M12 4v10" class="icon-lg"/>
+                 <path d="m8 19-2 3" class="icon-lg"/>
+                 <path d="m16 19 2 3" class="icon-lg"/>
+                 <path d="M9 15h.01" class="icon-lg"/>
+                 <path d="M15 15h.01" class="icon-lg"/>
             </g>
         `;
 
@@ -83,93 +88,83 @@ export async function onRequest(event) {
             <svg width="${cardWidth}" height="${cardHeight}" viewBox="0 0 ${cardWidth} ${cardHeight}" xmlns="http://www.w3.org/2000/svg">
             <style>${styles}</style>
 
-            <!-- Glass Background -->
-            <rect x="2" y="2" width="${cardWidth-4}" height="${cardHeight-4}" rx="16" class="bg"/>
-
-            <!-- Header Section -->
-            <text x="24" y="44" class="text" style="font-size: 18px; font-weight: 800; letter-spacing: -0.5px;">${esc(username)}'s RailRound</text>
-            ${iconSvg}
-
-            <!-- Stats Grid (Top Right, shifted left of icon) -->
-            <g transform="translate(24, 75)">
-                <!-- Stats moved to header line to save vertical space? Or kept below?
-                     User said "placing the stats split on the right".
-                     Let's move them up to y=20 relative to header or keep in separate row but compressed.
-                     Let's try putting them on the same visual "block" but aligned.
-                -->
-            </g>
-
-            <!-- Redesigned Stats (Aligned Right) -->
-            <g transform="translate(240, 24)">
-               <!-- Trips -->
-               <g transform="translate(0, 0)">
-                  <text x="0" y="0" class="label">Trips</text>
-                  <text x="0" y="20" class="value">${stats.count}</text>
-                  <line x1="50" y1="2" x2="50" y2="22" class="separator"/>
-               </g>
-
-               <!-- Lines -->
-               <g transform="translate(70, 0)">
-                  <text x="0" y="0" class="label">Lines</text>
-                  <text x="0" y="20" class="value" style="fill: #818cf8;">${stats.lines}</text>
-                  <line x1="50" y1="2" x2="50" y2="22" class="separator"/>
-               </g>
-
-               <!-- Distance -->
-               <g transform="translate(140, 0)">
-                  <text x="0" y="0" class="label">Distance</text>
-                  <text x="0" y="20" class="value" style="fill: #34d399;">${Math.round(stats.dist)}<tspan font-size="12" fill="${labelColor}" dx="2">km</tspan></text>
-               </g>
-            </g>
+            <!-- Main Background -->
+            <rect x="2" y="2" width="${cardWidth-4}" height="${cardHeight-4}" rx="12" class="bg"/>
+
+            <!-- Split Divider -->
+            <line x1="200" y1="2" x2="200" y2="${cardHeight-2}" class="separator"/>
+
+            <!-- Left Panel (Visual) -->
+            ${leftPanelVisual}
+
+            <!-- Right Panel (Data) -->
+            <g transform="translate(220, 0)">
+
+                <!-- Stats Row (Top) -->
+                <g transform="translate(0, 30)">
+                   <!-- Trips -->
+                   <g transform="translate(0, 0)">
+                      <text x="0" y="0" class="label">Trips</text>
+                      <text x="0" y="20" class="value">${stats.count}</text>
+                   </g>
+                   <!-- Lines -->
+                   <g transform="translate(100, 0)">
+                      <text x="0" y="0" class="label">Lines</text>
+                      <text x="0" y="20" class="value" style="fill: ${secondaryColor};">${stats.lines}</text>
+                   </g>
+                   <!-- Distance -->
+                   <g transform="translate(200, 0)">
+                      <text x="0" y="0" class="label">Total Distance</text>
+                      <text x="0" y="20" class="value" style="fill: ${accentColor};">${Math.round(stats.dist)}<tspan font-size="12" fill="${labelColor}" dx="2">km</tspan></text>
+                   </g>
+                </g>
 
-            <line x1="24" y1="70" x2="${cardWidth-24}" y2="70" class="separator"/>
+                <line x1="0" y1="70" x2="360" y2="70" class="separator"/>
 
-            <!-- Recent Trips List (Bottom) -->
-            <g transform="translate(24, 90)">
-                <text x="0" y="0" class="label" style="opacity: 0.7">Recent Activity</text>
+                <!-- Recent Activity List -->
+                <g transform="translate(0, 85)">
+                    <text x="0" y="0" class="label" style="opacity: 0.6; margin-bottom: 10px;">Latest Activity</text>
 
-                <g transform="translate(0, 15)">
+                    <g transform="translate(0, 15)">
         `;
 
-        // Render up to 5 items
+        // Render List
         const displayLimit = 5;
-        const rowH = 45;
+        const rowH = 45; // Height per row
 
         stats.latest.slice(0, displayLimit).forEach((trip, idx) => {
             const y = idx * rowH;
             let points = trip.svg_points || "";
-
-            // Simple sanitization: allow only digits, commas, spaces, dots, minus signs, M, and L (for paths)
             points = points.replace(/[^0-9, .\-ML]/g, '');
 
             svgContent += `
                 <g transform="translate(0, ${y})">
-                    <!-- Dot -->
-                    <circle cx="4" cy="20" r="3" fill="#1e293b" stroke="${labelColor}" stroke-width="1.5"/>
+                    <!-- Dot Indicator -->
+                    <circle cx="4" cy="20" r="3" fill="#1e293b" stroke="${idx === 0 ? accentColor : labelColor}" stroke-width="1.5"/>
 
-                    <!-- Text Info -->
-                    <text x="20" y="16" class="trip-title">${esc(trip.title)}</text>
+                    <!-- Trip Name & Date -->
+                    <text x="20" y="16" class="trip-title" style="fill: ${idx === 0 ? textColor : '#cbd5e1'}">${esc(trip.title)}</text>
                     <text x="20" y="30" class="trip-date">${esc(trip.date)}</text>
 
-                    <!-- Mini Graph Container -->
-                    <g transform="translate(${cardWidth - 160}, 5)">
-                         <svg width="100" height="30" viewBox="0 0 100 50" preserveAspectRatio="none">
-                            <path d="${points}" class="line-path" vector-effect="non-scaling-stroke"/>
+                    <!-- Mini Graph (Right Aligned in list) -->
+                    <g transform="translate(260, 5)">
+                         <svg width="80" height="30" viewBox="0 0 100 50" preserveAspectRatio="none">
+                            <path d="${points}" class="line-path" vector-effect="non-scaling-stroke" style="stroke: ${idx === 0 ? accentColor : '#475569'}; stroke-width: ${idx === 0 ? 2 : 1.5}"/>
                          </svg>
                     </g>
 
-                    <!-- Dist -->
-                    <text x="${cardWidth - 55}" y="25" text-anchor="end" class="trip-dist">${Math.round(trip.dist)} km</text>
+                    <!-- Distance Label -->
+                    <text x="360" y="25" text-anchor="end" class="trip-dist" style="opacity: 0.8">${Math.round(trip.dist)} km</text>
                 </g>
             `;
         });
 
-        // If list is empty
         if (stats.latest.length === 0) {
-             svgContent += `<text x="0" y="30" class="label">No trips recorded yet.</text>`;
+             svgContent += `<text x="0" y="40" class="label" style="font-style:italic">No trips recorded yet.</text>`;
         }
 
         svgContent += `
+                    </g>
                 </g>
             </g>
             </svg>