Update src/App_New.tsx

src/App_New.tsx

@@ -3,39 +3,55 @@ import {
   LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, CartesianGrid,
   AreaChart, Area, BarChart, Bar
 } from "recharts";
+import {
+  apiGetLatestDataset,
+  apiUpsertDataset,
+  apiGetAnnotation,
+  apiUpsertAnnotation,
+  DataDict,
+} from "./api";
 
 type SeriesPoint = { date: string; close: number[] };
-type DataDict = Record<string, SeriesPoint[]>;
 
 const MAX_DAYS = 67;
 const maxSteps = 60;
 const START_DAY = 7;
 
-/** 取得当日收盘价：数组最后一个元素 */
+/* --------------------- utils --------------------- */
 function latestClose(p: SeriesPoint): number {
   const arr = p.close;
-  if (!Array.isArray(arr) || arr.length === 0) {
-    throw new Error(`Empty close array at ${p.date}`);
-  }
+  if (!Array.isArray(arr) || arr.length === 0) throw new Error(`Empty close array at ${p.date}`);
   const last = arr[arr.length - 1];
-  if (!Number.isFinite(last)) {
-    throw new Error(`Invalid close value at ${p.date}`);
-  }
+  if (!Number.isFinite(last)) throw new Error(`Invalid close value at ${p.date}`);
   return last;
 }
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0, v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+function getOrCreateUserId() {
+  const k = "annot_user_id";
+  let uid = localStorage.getItem(k);
+  if (!uid) { uid = uuidv4(); localStorage.setItem(k, uid); }
+  return uid;
+}
+function stableHash(str: string): string {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++) h = (h * 33) ^ str.charCodeAt(i);
+  return (h >>> 0).toString(16);
+}
 
-/** 生成示例数据：close 为滚动窗口数组，窗口最大 500 */
+/** 示例数据：新格式（close 为滚动数组，最多500） */
 function generateFakeJSON(maxLen = 500): DataDict {
   const randTicker = () => Math.random().toString(36).substring(2, 6).toUpperCase();
   const tickers = Array.from({ length: 5 }, () => randTicker());
-
   const start = new Date("2024-01-02T00:00:00Z");
   const dates = Array.from({ length: 67 }, (_, i) => {
-    const d = new Date(start);
-    d.setDate(start.getDate() + i);
+    const d = new Date(start); d.setDate(start.getDate() + i);
     return d.toISOString().slice(0, 10);
   });
-
   const out: DataDict = {};
   for (let a = 0; a < 5; a++) {
     const ticker = tickers[a];
@@ -44,7 +60,6 @@ function generateFakeJSON(maxLen = 500): DataDict {
     const sigma = 0.15 + Math.random() * 0.35;
     const window: number[] = [];
     const series: SeriesPoint[] = [];
-
     for (let i = 0; i < dates.length; i++) {
       if (i > 0) {
         const z = (Math.random() - 0.5) * 1.6 + (Math.random() - 0.5) * 1.6;
@@ -60,7 +75,13 @@ function generateFakeJSON(maxLen = 500): DataDict {
   return out;
 }
 
+/* --------------------- component --------------------- */
 export default function App() {
+  const userId = getOrCreateUserId();
+
+  const [datasetId, setDatasetId] = useState<string | null>(null);
+  const [datasetName, setDatasetName] = useState<string>("");
+
   const [rawData, setRawData] = useState<DataDict>({});
   const [assets, setAssets] = useState<string[]>([]);
   const [dates, setDates] = useState<string[]>([]);
@@ -74,39 +95,179 @@ export default function App() {
   const [confirming, setConfirming] = useState(false);
   const [finalSaved, setFinalSaved] = useState(false);
 
-  // 分时视图开关 & 所选日期索引
   const [intradayMode, setIntradayMode] = useState(false);
-  // intradayDayIdx 为“在 dates 数组里的下标”；默认跟随窗口最后一天
   const [intradayDayIdx, setIntradayDayIdx] = useState<number | null>(null);
 
-  // 当窗口推进或数据变更时，若未选择指定日期，则默认使用窗口最后一天
+  /* ---------- localStorage keys ---------- */
+  const LS_DATASET_KEY = "annot_dataset_meta"; // {datasetId, name}
+  const LS_DATA_PREFIX = (id: string) => `annot_dataset_${id}`; // {data, assets, dates, name}
+  const LS_ANN_PREFIX = (id: string, uid: string) => `annot_user_${uid}_ds_${id}`; // {selections, step, window_len}
+
+  /* ---------- boot: local -> cloud latest -> example ---------- */
+  useEffect(() => {
+    const boot = async () => {
+      try {
+        // 1) local dataset meta
+        const metaRaw = localStorage.getItem(LS_DATASET_KEY);
+        if (metaRaw) {
+          const meta = JSON.parse(metaRaw);
+          if (meta?.datasetId) {
+            const dJson = localStorage.getItem(LS_DATA_PREFIX(meta.datasetId));
+            if (dJson) {
+              const payload = JSON.parse(dJson) as { data: DataDict; assets: string[]; dates: string[]; name?: string };
+              loadDatasetIntoState(meta.datasetId, payload.data, payload.assets, payload.dates, payload.name || "");
+              await loadUserAnnotation(meta.datasetId);
+              return;
+            }
+          }
+        }
+        // 2) cloud latest
+        try {
+          const ds = await apiGetLatestDataset();
+          const id = (ds.id ?? ds.dataset_id) as string; // 兼容字���名
+          const name = ds.name || "";
+          const data = ds.data as DataDict;
+          const dsAssets = ds.assets as string[];
+          const dsDates = ds.dates as string[];
+          persistDatasetLocal(id, data, dsAssets, dsDates, name);
+          loadDatasetIntoState(id, data, dsAssets, dsDates, name);
+          await loadUserAnnotation(id);
+          return;
+        } catch (e) {
+          // 无云端数据，走示例
+        }
+        // 3) example
+        const example = generateFakeJSON();
+        const keys = Object.keys(example);
+        const dsDates = example[keys[0]].map(d => d.date);
+        const id = stableHash(JSON.stringify({ assets: keys, dates: dsDates }));
+        persistDatasetLocal(id, example, keys, dsDates, "Example");
+        loadDatasetIntoState(id, example, keys, dsDates, "Example");
+      } catch (e) {
+        console.warn("Boot failed:", e);
+      }
+    };
+    boot();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function persistDatasetLocal(id: string, data: DataDict, a: string[], d: string[], name: string) {
+    localStorage.setItem(LS_DATASET_KEY, JSON.stringify({ datasetId: id, name }));
+    localStorage.setItem(LS_DATA_PREFIX(id), JSON.stringify({ data, assets: a, dates: d, name }));
+  }
+  function loadDatasetIntoState(id: string, data: DataDict, a: string[], d: string[], name: string) {
+    setDatasetId(id);
+    setDatasetName(name || "");
+    setRawData(data);
+    setAssets(a);
+    setDates(d);
+    setStep(1);
+    setWindowLen(START_DAY);
+    setSelections([]);
+    setSelectedAsset(null);
+    setIntradayMode(false);
+    setIntradayDayIdx(null);
+    setMessage(`Loaded dataset ${name || id}: ${a.length} assets, ${d.length} days.`);
+  }
+  async function loadUserAnnotation(id: string) {
+    // local
+    const localRaw = localStorage.getItem(LS_ANN_PREFIX(id, userId));
+    if (localRaw) {
+      try {
+        const ann = JSON.parse(localRaw);
+        setSelections(ann.selections || []);
+        setStep(ann.step || 1);
+        setWindowLen(ann.window_len || START_DAY);
+        setIntradayDayIdx(null);
+      } catch {}
+    }
+    // cloud
+    try {
+      const ann = await apiGetAnnotation(id, userId);
+      setSelections(ann.selections || []);
+      setStep(ann.step || 1);
+      setWindowLen(ann.window_len || START_DAY);
+      setIntradayDayIdx(null);
+      localStorage.setItem(LS_ANN_PREFIX(id, userId), JSON.stringify(ann));
+    } catch {}
+  }
+  function persistAnnotationLocal() {
+    if (!datasetId) return;
+    const ann = { user_id: userId, dataset_id: datasetId, selections, step, window_len: windowLen };
+    localStorage.setItem(LS_ANN_PREFIX(datasetId, userId), JSON.stringify(ann));
+  }
+  async function upsertAnnotationCloud() {
+    if (!datasetId) return;
+    try {
+      await apiUpsertAnnotation({ dataset_id: datasetId, user_id: userId, selections, step, window_len: windowLen });
+    } catch (e) { console.warn("Upsert annotation failed:", e); }
+  }
+  useEffect(() => {
+    persistAnnotationLocal();
+    upsertAnnotationCloud();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selections, step, windowLen]);
+
+  /* ---------- tie intraday selected day to window ---------- */
   useEffect(() => {
     if (!dates.length) return;
     const lastIdx = Math.min(windowLen - 1, dates.length - 1);
-    if (intradayDayIdx === null || intradayDayIdx > lastIdx) {
-      setIntradayDayIdx(lastIdx);
-    }
+    if (intradayDayIdx === null || intradayDayIdx > lastIdx) setIntradayDayIdx(lastIdx);
   }, [dates, windowLen, intradayDayIdx]);
 
-  useEffect(() => {
-    if (Object.keys(rawData).length === 0) {
-      const example = generateFakeJSON();
-      const keys = Object.keys(example);
-      const first = example[keys[0]];
-      setRawData(example);
-      setAssets(keys);
-      setDates(first.map((d) => d.date));
-      setStep(1);
-      setWindowLen(START_DAY);
-      setSelections([]);
-      setSelectedAsset(null);
-      setMessage(`Loaded example: ${keys.length} assets, ${first.length} days.`);
-    }
-  }, []);
+  /* ---------- upload handler (new format only) ---------- */
+  async function onFile(e: any) {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    const reader = new FileReader();
+    reader.onload = async () => {
+      try {
+        const json: DataDict = JSON.parse(String(reader.result));
+        const keys = Object.keys(json);
+        if (keys.length === 0) throw new Error("Empty dataset");
+        const firstArr = json[keys[0]];
+        if (!Array.isArray(firstArr) || !firstArr[0]?.date || !Array.isArray(firstArr[0]?.close)) {
+          throw new Error("Invalid series format. Need [{date, close:number[]}]");
+        }
+        const refDates = firstArr.map(p => p.date);
+        const checkPoint = (p: SeriesPoint) => {
+          if (!p?.date) throw new Error("Missing date");
+          if (!Array.isArray(p.close) || p.close.length === 0) throw new Error(`Empty close array at ${p.date}`);
+          if (p.close.length > 500) throw new Error(`close array exceeds 500 at ${p.date}`);
+          for (const v of p.close) if (typeof v !== "number" || !Number.isFinite(v)) throw new Error(`Non numeric close in array at ${p.date}`);
+        };
+        for (const k of keys) {
+          const arr = json[k];
+          if (!Array.isArray(arr) || arr.length !== firstArr.length) throw new Error("All series must have the same length");
+          for (let i = 0; i < arr.length; i++) {
+            const p = arr[i]; checkPoint(p);
+            if (p.date !== refDates[i]) throw new Error("Date misalignment across assets");
+          }
+        }
+        // persist + cloud
+        const dsDates = firstArr.map(d => d.date);
+        const id = stableHash(JSON.stringify({ assets: keys, dates: dsDates }));
+        const name = f.name.replace(/\.[^.]+$/, "");
+        persistDatasetLocal(id, json, keys, dsDates, name);
+        loadDatasetIntoState(id, json, keys, dsDates, name);
+
+        try {
+          await apiUpsertDataset({ dataset_id: id, name, data: json, assets: keys, dates: dsDates });
+          // 初始化我的标注
+          await apiUpsertAnnotation({ dataset_id: id, user_id: userId, selections: [], step: 1, window_len: START_DAY });
+        } catch (err: any) {
+          console.warn("Upload to backend failed:", err?.message || err);
+        }
+      } catch (err: any) {
+        setMessage("Failed to parse JSON: " + err.message);
+      }
+    };
+    reader.readAsText(f);
+  }
 
+  /* ---------- computed ---------- */
   const isFinal = windowLen >= MAX_DAYS || selections.length >= maxSteps;
 
-  // 日线数据（归一到第0天）
   const windowData = useMemo(() => {
     if (!dates.length || windowLen < 2) return [] as any[];
     const sliceDates = dates.slice(0, windowLen);
@@ -121,40 +282,25 @@ export default function App() {
     });
   }, [assets, dates, windowLen, rawData]);
 
-  // 可见日期列表 & 当前分时查看日期
   const visibleDates = useMemo(() => dates.slice(0, Math.max(0, windowLen)), [dates, windowLen]);
   const activeIntradayIdx = intradayDayIdx ?? Math.min(windowLen - 1, dates.length - 1);
   const activeIntradayDate = visibleDates[activeIntradayIdx] ?? "";
 
-  // 分时数据：展示“所选日期”的分钟级走势（当日内归一）
   const intradayData = useMemo(() => {
     if (!dates.length || activeIntradayIdx == null || activeIntradayIdx < 0) return [] as any[];
-
-    // 当日各资产的分钟序列长度最大值
-    const maxBars = assets.reduce((m, a) => {
-      const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
-      return Math.max(m, arr.length);
-    }, 0);
-
-    // 当日内归一：每个资产以当日首笔为1
+    const maxBars = assets.reduce((m, a) => Math.max(m, rawData[a]?.[activeIntradayIdx]?.close?.length ?? 0), 0);
     const dayFirstPrice: Record<string, number> = {};
     assets.forEach(a => {
       const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
       dayFirstPrice[a] = arr.length ? arr[0] : 1;
     });
-
     const rows: any[] = [];
     for (let i = 0; i < maxBars; i++) {
       const row: Record<string, any> = { idx: i + 1 };
       assets.forEach(a => {
         const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
         const val = arr[i];
-        if (typeof val === "number") {
-          const base = dayFirstPrice[a] || 1;
-          row[a] = base ? val / base : null;
-        } else {
-          row[a] = null; // 该分钟无数据则断线
-        }
+        row[a] = typeof val === "number" ? (dayFirstPrice[a] ? val / dayFirstPrice[a] : null) : null;
       });
       rows.push(row);
     }
@@ -173,17 +319,11 @@ export default function App() {
     const example = generateFakeJSON();
     const keys = Object.keys(example);
     const first = example[keys[0]];
-    setRawData(example);
-    setAssets(keys);
-    setDates(first.map((d) => d.date));
-    setStep(1);
-    setWindowLen(START_DAY);
-    setSelections([]);
-    setSelectedAsset(null);
-    setIntradayMode(false);
-    setIntradayDayIdx(null);
-    setMessage(`Loaded example: ${keys.length} assets, ${first.length} days.`);
-    try { localStorage.removeItem("asset_experiment_selections"); } catch {}
+    const dsDates = first.map((d) => d.date);
+    const id = stableHash(JSON.stringify({ assets: keys, dates: dsDates }));
+    persistDatasetLocal(id, example, keys, dsDates, "Example");
+    loadDatasetIntoState(id, example, keys, dsDates, "Example");
+    // 不强求上传到云端
   }
 
   function resetSession() {
@@ -194,71 +334,7 @@ export default function App() {
     setMessage("Session reset.");
     setIntradayMode(false);
     setIntradayDayIdx(null);
-    try { localStorage.removeItem("asset_experiment_selections"); } catch {}
-  }
-
-  /** 仅接受新格式：close 必须是数组，长度最多 500，元素为数值 */
-  function onFile(e: any) {
-    const f = e.target.files?.[0];
-    if (!f) return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      try {
-        const json: DataDict = JSON.parse(String(reader.result));
-        const keys = Object.keys(json);
-        if (keys.length === 0) throw new Error("Empty dataset");
-
-        const firstArr = json[keys[0]];
-        if (!Array.isArray(firstArr) || !firstArr[0]?.date || !Array.isArray(firstArr[0]?.close)) {
-          throw new Error("Invalid series format. Need [{date, close:number[]}]");
-        }
-
-        const refDates = firstArr.map(p => p.date);
-        const checkPoint = (p: SeriesPoint) => {
-          if (!p?.date) throw new Error("Missing date");
-          if (!Array.isArray(p.close) || p.close.length === 0) {
-            throw new Error(`Empty close array at ${p.date}`);
-          }
-          if (p.close.length > 500) {
-            throw new Error(`close array exceeds 500 at ${p.date}`);
-          }
-          for (const v of p.close) {
-            if (typeof v !== "number" || !Number.isFinite(v)) {
-              throw new Error(`Non numeric close in array at ${p.date}`);
-            }
-          }
-        };
-
-        for (const k of keys) {
-          const arr = json[k];
-          if (!Array.isArray(arr) || arr.length !== firstArr.length) {
-            throw new Error("All series must have the same length");
-          }
-          for (let i = 0; i < arr.length; i++) {
-            const p = arr[i];
-            checkPoint(p);
-            if (p.date !== refDates[i]) {
-              throw new Error("Date misalignment across assets");
-            }
-          }
-        }
-
-        setRawData(json);
-        setAssets(keys);
-        setDates(firstArr.map((d) => d.date));
-        setStep(1);
-        setWindowLen(START_DAY);
-        setSelections([]);
-        setSelectedAsset(null);
-        setIntradayMode(false);
-        setIntradayDayIdx(null);
-        setMessage(`Loaded file: ${keys.length} assets, ${firstArr.length} days.`);
-        try { localStorage.removeItem("asset_experiment_selections"); } catch {}
-      } catch (err: any) {
-        setMessage("Failed to parse JSON: " + err.message);
-      }
-    };
-    reader.readAsText(f);
+    if (datasetId) localStorage.removeItem(LS_ANN_PREFIX(datasetId, userId));
   }
 
   function exportLog() {
@@ -266,28 +342,19 @@ export default function App() {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `selections_${new Date().toISOString().slice(0,10)}.json`;
+    a.download = `selections_${new Date().toISOString().slice(0,10)}_${userId}.json`;
     a.click();
     URL.revokeObjectURL(url);
   }
 
   function confirmSelection() {
     if (confirming) return;
-    if (!selectedAsset) {
-      setMessage("Select a line first.");
-      return;
-    }
+    if (!selectedAsset) { setMessage("Select a line first."); return; }
     setConfirming(true);
-
     const res = realizedNextDayReturn(selectedAsset);
-    if (!res) {
-      setMessage("No more data available.");
-      setConfirming(false);
-      return;
-    }
+    if (!res) { setMessage("No more data available."); setConfirming(false); return; }
     const entry = { step, date: res.date, asset: selectedAsset, ret: res.ret };
     setSelections((prev) => [...prev, entry]);
-
     setWindowLen((w) => Math.min(w + 1, MAX_DAYS));
     setStep((s) => s + 1);
     setSelectedAsset(null);
@@ -297,10 +364,7 @@ export default function App() {
 
   const portfolioSeries = useMemo(() => {
     let value = 1;
-    const pts = selections.map((s) => {
-      value *= 1 + s.ret;
-      return { step: s.step, date: s.date, value };
-    });
+    const pts = selections.map((s) => { value *= 1 + s.ret; return { step: s.step, date: s.date, value }; });
     return [{ step: 0, date: "start", value: 1 }, ...pts];
   }, [selections]);
 
@@ -322,13 +386,12 @@ export default function App() {
     const countsAll = assets.reduce((acc: Record<string, number>, a: string) => { acc[a] = 0; return acc; }, {} as Record<string, number>);
     selections.forEach((s) => { countsAll[s.asset] = (countsAll[s.asset] || 0) + 1; });
     const rankAll = assets.map((a) => ({ asset: a, votes: countsAll[a] || 0 })).sort((x, y) => y.votes - x.votes);
-
     let value = 1;
     const portfolio = selections.map((s) => { value *= 1 + s.ret; return { step: s.step, date: s.date, value }; });
-
-    const lastCols = Array.from({ length: Math.min(30, lastStep ? lastStep - start30 + 1 : 0) }, (_, i) => start30 + i);
+    const lastStep2 = selections.reduce((m, s) => Math.max(m, s.step), 0);
+    const start30_ = Math.max(1, lastStep2 - 30 + 1);
+    const lastCols = Array.from({ length: Math.min(30, lastStep2 ? lastStep2 - start30_ + 1 : 0) }, (_, i) => start30_ + i);
     const heatGrid = assets.map((a) => ({ asset: a, cells: lastCols.map((c) => (selections.some((s) => s.asset === a && s.step === c) ? 1 : 0)) }));
-
     const rets = selections.map((s) => s.ret);
     const N = rets.length;
     const cum = portfolio.at(-1)?.value ?? 1;
@@ -339,7 +402,7 @@ export default function App() {
     const wins = rets.filter((r) => r > 0).length;
 
     return {
-      meta: { saved_at: new Date().toISOString(), start_day: START_DAY, max_days: MAX_DAYS, max_steps: maxSteps },
+      meta: { saved_at: new Date().toISOString(), start_day: START_DAY, max_days: MAX_DAYS, max_steps: maxSteps, dataset_id: datasetId, dataset_name: datasetName },
       assets,
       dates,
       selections,
@@ -351,6 +414,7 @@ export default function App() {
   }
 
   useEffect(() => {
+    const isFinal = windowLen >= MAX_DAYS || selections.length >= maxSteps;
     if (isFinal && !finalSaved) {
       try {
         const payload = buildFinalPayload();
@@ -359,67 +423,50 @@ export default function App() {
         const url = URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.href = url;
-        a.download = `run_summary_${new Date().toISOString().slice(0, 10)}.json`;
+        a.download = `run_summary_${new Date().toISOString().slice(0, 10)}_${userId}.json`;
         a.click();
         URL.revokeObjectURL(url);
         setFinalSaved(true);
-      } catch (e) {
-        console.warn("Failed to save final JSON:", e);
-      }
+      } catch (e) { console.warn("Failed to save final JSON:", e); }
     }
-  }, [isFinal, finalSaved, assets, selections, dates]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowLen, selections.length, finalSaved]);
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       const tag = (e.target && (e.target as HTMLElement).tagName) || "";
       if (tag === "INPUT" || tag === "TEXTAREA") return;
       const idx = parseInt((e as any).key, 10) - 1;
-      if (!Number.isNaN(idx) && idx >= 0 && idx < assets.length) {
-        setSelectedAsset(assets[idx]);
-      }
-      if ((e as any).key === "Enter" && Boolean(selectedAsset) && windowLen < MAX_DAYS) {
-        confirmSelection();
-      }
+      if (!Number.isNaN(idx) && idx >= 0 && idx < assets.length) setSelectedAsset(assets[idx]);
+      if ((e as any).key === "Enter" && Boolean(selectedAsset) && windowLen < MAX_DAYS) confirmSelection();
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [assets, selectedAsset, windowLen]);
 
-  if (isFinal) {
-    return <FinalSummary assets={assets} selections={selections} />;
+  if (!datasetId) {
+    return (
+      <div className="p-6">
+        <h1 className="text-xl font-semibold mb-3">Asset Choice Simulation</h1>
+        <p className="text-sm text-gray-600 mb-2">Upload a dataset (new format) or load example. Data persists locally & on the Space backend.</p>
+        <input type="file" accept="application/json" onChange={onFile} className="text-sm" />
+        <div className="mt-4">
+          <button onClick={loadExample} className="text-sm px-3 py-1.5 rounded-xl bg-blue-100 text-blue-800 hover:bg-blue-200">Load Example</button>
+        </div>
+      </div>
+    );
   }
 
-  // 分时控制条（只在 intradayMode 下显示）
   const IntradayControls = () => (
     <div className="flex items-center gap-2">
       <span className="text-xs px-2 py-1 rounded bg-indigo-50 text-indigo-700">
-        Intraday • {activeIntradayDate || "-"}
+        Intraday • {visibleDates[intradayDayIdx ?? 0] || "-"}
       </span>
-      <button
-        onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.max(0, i - 1)))}
-        className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50"
-        disabled={activeIntradayIdx <= 0}
-        title="Prev day"
-      >
-        ‹
-      </button>
-      <select
-        className="text-xs px-2 py-1 rounded-xl border border-gray-200"
-        value={activeIntradayIdx}
-        onChange={(e) => setIntradayDayIdx(Number(e.target.value))}
-      >
-        {visibleDates.map((d, idx) => (
-          <option key={d} value={idx}>{d}</option>
-        ))}
+      <button onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.max(0, i - 1)))} className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50" disabled={(intradayDayIdx ?? 0) <= 0} title="Prev day">‹</button>
+      <select className="text-xs px-2 py-1 rounded-xl border border-gray-200" value={intradayDayIdx ?? 0} onChange={(e) => setIntradayDayIdx(Number(e.target.value))}>
+        {visibleDates.map((d, idx) => <option key={d} value={idx}>{d}</option>)}
       </select>
-      <button
-        onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.min(visibleDates.length - 1, i + 1)))}
-        className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50"
-        disabled={activeIntradayIdx >= visibleDates.length - 1}
-        title="Next day"
-      >
-        ›
-      </button>
+      <button onClick={() => setIntradayDayIdx(i => (i == null ? 0 : Math.min(visibleDates.length - 1, i + 1)))} className="text-xs px-2 py-1 rounded-xl border border-gray-200 hover:bg-gray-50" disabled={(intradayDayIdx ?? 0) >= visibleDates.length - 1} title="Next day">›</button>
     </div>
   );
 
@@ -428,21 +475,19 @@ export default function App() {
       <div className="flex flex-wrap justify-between items-center gap-3">
         <div className="flex items-center gap-2">
           <h1 className="text-xl font-semibold">Asset Choice Simulation</h1>
+          <span className="text-xs text-gray-500">Dataset: {datasetName || datasetId}</span>
+          <span className="text-xs text-gray-500">User: {userId.slice(0,8)}…</span>
           <span className="text-xs text-gray-500">Day {windowLen} / {MAX_DAYS}</span>
           {intradayMode && <IntradayControls />}
         </div>
         <div className="flex items-center gap-2">
           <input type="file" accept="application/json" onChange={onFile} className="text-sm" />
           <button onClick={loadExample} className="text-sm px-3 py-1.5 rounded-xl bg-blue-100 text-blue-800 hover:bg-blue-200">Load Example</button>
-          <button onClick={resetSession} className="text-sm px-3 py-1.5 rounded-xl bg-gray-200 hover:bg-gray-300">Reset</button>
-          <button
-            onClick={() => setIntradayMode(m => !m)}
-            className="text-sm px-3 py-1.5 rounded-xl bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
-            title="Toggle intraday view"
-          >
+          <button onClick={resetSession} className="text-sm px-3 py-1.5 rounded-xl bg-gray-200 hover:bg-gray-300">Reset (Keep data)</button>
+          <button onClick={() => setIntradayMode(m => !m)} className="text-sm px-3 py-1.5 rounded-xl bg-indigo-100 text-indigo-800 hover:bg-indigo-200" title="Toggle intraday view">
             {intradayMode ? "View Daily" : "View Intraday"}
           </button>
-          <button onClick={exportLog} className="text-sm px-3 py-1.5 rounded-xl bg-gray-900 text-white hover:bg-black">Export Log</button>
+          <button onClick={exportLog} className="text-sm px-3 py-1.5 rounded-xl bg-gray-900 text-white hover:bg-black">Export My Log</button>
         </div>
       </div>
 
@@ -460,12 +505,10 @@ export default function App() {
               {i+1}. {a}
             </button>
           ))}
-          {assets.length>0 && (
-            <span className="text-xs text-gray-500 ml-1">Hotkeys: 1 to {assets.length}, Enter to confirm</span>
-          )}
+          {assets.length>0 && <span className="text-xs text-gray-500 ml-1">Hotkeys: 1..{assets.length}, Enter confirm</span>}
         </div>
 
-        {/* 图表：日线 / 分时切换 */}
+        {/* 图表：日线 / 分时 */}
         <div className="h-80">
           <ResponsiveContainer width="100%" height="100%">
             {intradayMode ? (
@@ -478,7 +521,7 @@ export default function App() {
                 {assets.map((a, i) => (
                   <Line
                     key={a}
-                    type="monotone"
+                    type="linear"
                     dataKey={a}
                     strokeWidth={selectedAsset === a ? 5 : hoverAsset === a ? 4 : 2.5}
                     strokeOpacity={selectedAsset && selectedAsset !== a ? 0.3 : 1}
@@ -502,7 +545,7 @@ export default function App() {
                 {assets.map((a, i) => (
                   <Line
                     key={a}
-                    type="monotone"
+                    type="linear"
                     dataKey={a}
                     strokeWidth={selectedAsset === a ? 5 : hoverAsset === a ? 4 : 2.5}
                     strokeOpacity={selectedAsset && selectedAsset !== a ? 0.3 : 1}
@@ -523,11 +566,7 @@ export default function App() {
           <div className="text-sm text-gray-600">
             Selected: {selectedAsset ?? "(none)"} {message && <span className="ml-2 text-gray-500">{message}</span>}
           </div>
-          <button
-            onClick={confirmSelection}
-            disabled={!selectedAsset || windowLen >= MAX_DAYS}
-            className={`px-4 py-2 rounded-xl ${selectedAsset && windowLen < MAX_DAYS ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500"}`}
-          >
+          <button onClick={confirmSelection} disabled={!selectedAsset || windowLen >= MAX_DAYS} className={`px-4 py-2 rounded-xl ${selectedAsset && windowLen < MAX_DAYS ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500"}`}>
             Confirm & Next Day →
           </button>
         </div>
@@ -583,7 +622,7 @@ export default function App() {
   );
 }
 
-/** 最终总结组件 */
+/** 最终总结组件（保持你原样式） */
 function FinalSummary({ assets, selections }: { assets: string[]; selections: { step: number; date: string; asset: string; ret: number }[] }) {
   const rets = selections.map(s=>s.ret);
   const N = rets.length;
@@ -596,22 +635,16 @@ function FinalSummary({ assets, selections }: { assets: string[]; selections: {
 
   const countsAll: Record<string, number> = assets.reduce((acc: any,a: string)=>{acc[a]=0;return acc;},{} as Record<string, number>);
   selections.forEach(s=>{ countsAll[s.asset] = (countsAll[s.asset]||0)+1; });
-  const rankAll = assets
-    .map(a=>({ asset:a, votes: countsAll[a]||0 }))
-    .sort((x,y)=> y.votes - x.votes);
+  const rankAll = assets.map(a=>({ asset:a, votes: countsAll[a]||0 })).sort((x,y)=> y.votes - x.votes);
 
   const lastStep = selections.reduce((m,s)=>Math.max(m,s.step),0);
   const start30 = Math.max(1, lastStep - 30 + 1);
   const cols = Array.from({length: Math.min(30,lastStep ? lastStep - start30 + 1 : 0)}, (_,i)=> start30 + i);
-  const grid = assets.map(a=>({
-    asset:a,
-    cells: cols.map(c => selections.some(s=> s.asset===a && s.step===c) ? 1 : 0)
-  }));
+  const grid = assets.map(a=>({ asset:a, cells: cols.map(c => selections.some(s=> s.asset===a && s.step===c) ? 1 : 0) }));
 
   return (
     <div className="p-6 bg-gray-50 min-h-screen flex flex-col gap-6">
       <h1 className="text-xl font-semibold">Final Summary</h1>
-
       <div className="bg-white p-4 rounded-2xl shadow">
         <h2 className="font-medium mb-2">Overall Metrics</h2>
         <ul className="text-sm text-gray-700 space-y-1">
@@ -619,7 +652,7 @@ function FinalSummary({ assets, selections }: { assets: string[]; selections: {
           <li>Win Rate: {(N? (wins/N*100):0).toFixed(1)}%</li>
           <li>Cumulative Return: {(cum*100).toFixed(2)}%</li>
           <li>Volatility: {(stdev*100).toFixed(2)}%</li>
-          <li>Sharpe: {sharpe.toFixed(2)}</li>
+          <li>Sharpe (rough): {sharpe.toFixed(2)}</li>
           <li>Top Preference: {rankAll[0]?.asset ?? "-"} ({rankAll[0]?.votes ?? 0})</li>
         </ul>
       </div>
@@ -640,15 +673,13 @@ function FinalSummary({ assets, selections }: { assets: string[]; selections: {
       </div>
 
       <div className="bg-white p-4 rounded-2xl shadow">
-        <h2 className="font-medium mb-2">Selection Heatmap Last 30 Steps</h2>
+        <h2 className="font-medium mb-2">Selection Heatmap (Last 30 Steps)</h2>
         <div className="overflow-auto">
           <table className="text-xs border-collapse">
             <thead>
               <tr>
                 <th className="p-1 pr-2 text-left sticky left-0 bg-white">Asset</th>
-                {cols.map(c=> (
-                  <th key={c} className="px-1 py-1 text-center">{c}</th>
-                ))}
+                {cols.map(c=> (<th key={c} className="px-1 py-1 text-center">{c}</th>))}
               </tr>
             </thead>
             <tbody>
@@ -656,11 +687,7 @@ function FinalSummary({ assets, selections }: { assets: string[]; selections: {
                 <tr key={row.asset}>
                   <td className="p-1 pr-2 font-medium sticky left-0 bg-white">{row.asset}</td>
                   {row.cells.map((v,j)=> (
-                    <td key={j} className="w-6 h-6" style={{
-                      background: v? "#2563eb" : "#e5e7eb",
-                      opacity: v? 0.9 : 1,
-                      border: "1px solid #ffffff"
-                    }} />
+                    <td key={j} className="w-6 h-6" style={{ background: v? "#2563eb" : "#e5e7eb", opacity: v? 0.9 : 1, border: "1px solid #ffffff" }} />
                   ))}
                 </tr>
               ))}