Update web/src/components/LeftSidebar.tsx

web/src/components/LeftSidebar.tsx

@@ -1,5 +1,5 @@
 // web/src/components/LeftSidebar.tsx
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Separator } from "./ui/separator";
@@ -7,13 +7,15 @@ import { Bookmark, Trash2, Edit2, Check, X as XIcon } from "lucide-react";
 
 import type { SavedChat, Workspace } from "../App";
 
-// 你项目里可能有 courseDirectory，也可能直接从 App 传 availableCourses（CourseInfo[]）。
-// 所以这里不强依赖 CourseDirectoryItem 结构，做宽松兼容。
+// 兼容 CourseDirectoryItem / CourseInfo 两种形态（字段可能不完全一致）
 type AnyCourse = {
-  id: string;
-  name: string;
-  instructor?: { name: string; email: string };
-  teachingAssistant?: { name: string; email: string };
+  id?: string;
+  courseId?: string;
+  name?: string;
+  title?: string;
+  instructor?: { name?: string; email?: string };
+  teachingAssistant?: { name?: string; email?: string };
+  ta?: { name?: string; email?: string };
 };
 
 type Props = {
@@ -25,10 +27,7 @@ type Props = {
   currentWorkspaceId: string;
   workspaces: Workspace[];
 
-  // ✅ 当前选中的课程（My Space 用它）
   selectedCourse: string;
-
-  // ✅ 允许两种来源：CourseInfo[] 或 CourseDirectoryItem[]
   availableCourses: AnyCourse[];
 };
 
@@ -49,16 +48,30 @@ function gmailComposeLink(email: string, subject?: string, body?: string) {
   return `https://mail.google.com/mail/?view=cm&fs=1&${to}${su}${bd}`;
 }
 
-export function LeftSidebar({
-  savedChats,
-  onLoadChat,
-  onDeleteSavedChat,
-  onRenameSavedChat,
-  currentWorkspaceId,
-  workspaces,
-  selectedCourse,
-  availableCourses,
-}: Props) {
+function getCourseId(c: AnyCourse) {
+  return String(c.id ?? c.courseId ?? "").trim();
+}
+
+function getCourseName(c: AnyCourse) {
+  return String(c.name ?? c.title ?? "").trim();
+}
+
+function normalize(s: string) {
+  return s.trim().toLowerCase();
+}
+
+export function LeftSidebar(props: Props) {
+  const {
+    savedChats,
+    onLoadChat,
+    onDeleteSavedChat,
+    onRenameSavedChat,
+    currentWorkspaceId,
+    workspaces,
+    selectedCourse,
+    availableCourses,
+  } = props;
+
   const [editingId, setEditingId] = useState<string | null>(null);
   const [draftTitle, setDraftTitle] = useState("");
 
@@ -67,27 +80,56 @@ export function LeftSidebar({
     [workspaces, currentWorkspaceId]
   );
 
+  // Debug：确认这里是否真的在运行（开发态会看到 console）
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log("[LeftSidebar] render", {
+      currentWorkspaceId,
+      selectedCourse,
+      availableCoursesLen: availableCourses?.length ?? 0,
+      workspaceCourseInfo: (currentWorkspace as any)?.courseInfo,
+    });
+  }, [currentWorkspaceId, selectedCourse, availableCourses, currentWorkspace]);
+
   /**
-   * ✅ 最关键：courseInfo 一定要能在 My Space 下拿到
-   * 优先使用 selectedCourse（你 App 里 currentCourseId），这才是 My Space 的 source of truth
-   * group workspace 再用 workspace.courseInfo 兜底
+   * 选课命中策略：
+   * 1) 优先 selectedCourse（My Space 的 source of truth）
+   * 2) 再用 workspace.courseInfo（group workspace 兜底）
+   * 3) 支持 id / courseId，name / title 多字段匹配
    */
   const courseInfo: AnyCourse | null = useMemo(() => {
-    const selId = (selectedCourse || "").trim();
-    if (selId) {
-      const hit = availableCourses.find((c) => String(c.id) === selId);
-      if (hit) return hit;
-    }
+    const sel = String(selectedCourse || "").trim();
 
-    const wsCourse = (currentWorkspace as any)?.courseInfo as AnyCourse | undefined;
-    if (wsCourse?.id) {
-      const hit = availableCourses.find((c) => String(c.id) === String(wsCourse.id));
-      return hit ?? wsCourse;
+    if (sel) {
+      // 先按 id/courseId 精确匹配
+      const byId = availableCourses.find((c) => getCourseId(c) === sel);
+      if (byId) return byId;
+
+      // 再按 name/title 精确匹配（有时 selectedCourse 传的是 name）
+      const byName = availableCourses.find((c) => getCourseName(c) === sel);
+      if (byName) return byName;
+
+      // 最后做一个宽松匹配（小写）
+      const selN = normalize(sel);
+      const loose = availableCourses.find(
+        (c) => normalize(getCourseId(c)) === selN || normalize(getCourseName(c)) === selN
+      );
+      if (loose) return loose;
     }
 
-    if (wsCourse?.name) {
-      const hit = availableCourses.find((c) => c.name === wsCourse.name);
-      return hit ?? wsCourse;
+    const wsCourse = (currentWorkspace as any)?.courseInfo as AnyCourse | undefined;
+    if (wsCourse) {
+      const wsId = getCourseId(wsCourse);
+      if (wsId) {
+        const hit = availableCourses.find((c) => getCourseId(c) === wsId);
+        return hit ?? wsCourse;
+      }
+      const wsName = getCourseName(wsCourse);
+      if (wsName) {
+        const hit = availableCourses.find((c) => getCourseName(c) === wsName);
+        return hit ?? wsCourse;
+      }
+      return wsCourse;
     }
 
     return null;
@@ -116,60 +158,85 @@ export function LeftSidebar({
     cancelRename();
   };
 
-  // ===== Display fields (safe) =====
+  // 兼容 TA 字段不同命名：teachingAssistant / ta
   const instructorName = courseInfo?.instructor?.name ?? "N/A";
   const instructorEmail = courseInfo?.instructor?.email?.trim() || "";
-  const taName = courseInfo?.teachingAssistant?.name ?? "N/A";
-  const taEmail = courseInfo?.teachingAssistant?.email?.trim() || "";
+
+  const taObj = courseInfo?.teachingAssistant ?? courseInfo?.ta;
+  const taName = taObj?.name ?? "N/A";
+  const taEmail = taObj?.email?.trim() || "";
+
+  const courseTitle = getCourseName(courseInfo ?? {}) || "(No course matched)";
 
   return (
     <div className="h-full w-full flex flex-col min-h-0">
+      {/* === 强制可见：用来确认你改的文件生效 === */}
+      <div className="px-4 pt-2 text-xs text-red-600 flex-shrink-0">
+        LEFTSIDEBAR ACTIVE
+      </div>
+
       {/* ================= Course Info（不滚动） ================= */}
-      {courseInfo ? (
-        <div className="px-4 pt-4 pb-3 flex-shrink-0 space-y-2">
-          <div className="font-semibold text-base">{courseInfo.name}</div>
-
-          <div className="text-sm text-muted-foreground">
-            Instructor:&nbsp;
-            {instructorEmail ? (
-              <a
-                href={gmailComposeLink(
-                  instructorEmail,
-                  `[Clare] Question about ${courseInfo.name}`,
-                  `Hi ${instructorName},\n\nI have a question about ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
-                )}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                {instructorName}
-              </a>
-            ) : (
-              <span className="text-muted-foreground/60">{instructorName}</span>
-            )}
-          </div>
+      <div className="px-4 pt-3 pb-3 flex-shrink-0 space-y-2">
+        <div className="font-semibold text-base">{courseTitle}</div>
 
-          <div className="text-sm text-muted-foreground">
-            TA:&nbsp;
-            {taEmail ? (
-              <a
-                href={gmailComposeLink(
-                  taEmail,
-                  `[Clare] Help request for ${courseInfo.name}`,
-                  `Hi ${taName},\n\nI need help with ${courseInfo.name}:\n\n(Write your question here)\n\nThanks,\n`
-                )}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline"
-              >
-                {taName}
-              </a>
-            ) : (
-              <span className="text-muted-foreground/60">{taName}</span>
-            )}
+        {/* 如果没命中 courseInfo，直接把原因展示出来（这才是你现在缺的可观测性） */}
+        {!courseInfo && (
+          <div className="text-xs text-muted-foreground space-y-1">
+            <div>
+              courseInfo not found.
+            </div>
+            <div>
+              selectedCourse: <span className="font-medium">{String(selectedCourse || "")}</span>
+            </div>
+            <div>
+              availableCourses: <span className="font-medium">{availableCourses?.length ?? 0}</span>
+            </div>
+            <div>
+              currentWorkspaceId: <span className="font-medium">{currentWorkspaceId}</span>
+            </div>
           </div>
+        )}
+
+        <div className="text-sm text-muted-foreground">
+          Instructor:&nbsp;
+          {instructorEmail ? (
+            <a
+              href={gmailComposeLink(
+                instructorEmail,
+                `[Clare] Question about ${courseTitle}`,
+                `Hi ${instructorName},\n\nI have a question about ${courseTitle}:\n\n(Write your question here)\n\nThanks,\n`
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              {instructorName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{instructorName}</span>
+          )}
         </div>
-      ) : null}
+
+        <div className="text-sm text-muted-foreground">
+          TA:&nbsp;
+          {taEmail ? (
+            <a
+              href={gmailComposeLink(
+                taEmail,
+                `[Clare] Help request for ${courseTitle}`,
+                `Hi ${taName},\n\nI need help with ${courseTitle}:\n\n(Write your question here)\n\nThanks,\n`
+              )}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              {taName}
+            </a>
+          ) : (
+            <span className="text-muted-foreground/60">{taName}</span>
+          )}
+        </div>
+      </div>
 
       {/* ✅ Info / Saved Chat 分割线：固定 #ECECF1 */}
       <Separator className="flex-shrink-0 bg-[#ECECF1]" />
@@ -183,7 +250,8 @@ export function LeftSidebar({
       <Separator className="flex-shrink-0" />
 
       {/* ================= Saved Chat List（唯一滚动区） ================= */}
-      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3">
+      {/* 用你 CSS 里的 panelScroll，保证滚动隔离生效 */}
+      <div className="flex-1 min-h-0 px-4 py-3 space-y-3 panelScroll">
         {sortedChats.length === 0 ? (
           <div className="text-sm text-muted-foreground text-center py-10">
             No saved chats yet
@@ -198,7 +266,6 @@ export function LeftSidebar({
             return (
               <div key={chat.id} className="rounded-xl border bg-card px-4 py-3">
                 <div className="flex items-start justify-between gap-3">
-                  {/* 左侧 */}
                   <div className="flex-1 min-w-0">
                     {isEditing ? (
                       <div className="space-y-2">
@@ -228,7 +295,6 @@ export function LeftSidebar({
                     )}
                   </div>
 
-                  {/* 右侧按钮 */}
                   {!isEditing && (
                     <div className="flex gap-2 flex-shrink-0">
                       <Button variant="ghost" size="icon" onClick={() => startRename(chat)}>