feat(embed-studio): clickable chart list to switch files

The sidebar already lists every chart in the doc but only the
current one was highlighted - the others were inert <li>s. Make
non-current entries clickable so the user can jump between charts
without going back to the article and reopening another embed.

- FilesSidebar: optional onSelectChart prop. Non-current items
render as a <button class="es-files__item-main"> (same look as
the clickable data files), the current item stays a plain <li>
with the "editing" badge.
- EmbedStudio: forwards onSelectChart to the sidebar.
- App: rotates embedStudioSession when switching, so the studio
remounts and useEmbedChat's mount-only loadMessages picks up
the chat history persisted for the newly-selected file.
- CSS: existing .es-files__item--data { padding: 0 } pattern
extended via :has() to any .es-files__item that contains a
button child, so the <li> padding doesn't stack with the
button's own padding.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.tsx

@@ -1205,6 +1205,16 @@ export default function App() {
             setEmbedStudioSession(null);
           }}
           onRename={handleEmbedRename}
+          onSelectChart={(name) => {
+            if (name === embedStudioSrc) return;
+            setEmbedStudioSrc(name);
+            // Rotate the session key so the studio remounts with a
+            // fresh chat scope (loadMessages picks up the persisted
+            // history of the newly-selected file).
+            setEmbedStudioSession(
+              `es-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`,
+            );
+          }}
         />
       )}
 

frontend/src/components/EmbedStudio.tsx

@@ -27,6 +27,13 @@ interface EmbedStudioProps {
    * reopen, etc.) reference the renamed file.
    */
   onRename?: (oldSrc: string, newSrc: string) => void;
+  /**
+   * Invoked when the user picks a different chart from the sidebar.
+   * Parent is responsible for updating the studio's `src` and (if it
+   * wants a fresh chat scope) rotating the React key on this
+   * component so persisted messages reload for the new file.
+   */
+  onSelectChart?: (name: string) => void;
 }
 
 const EMBED_TOOL_LABELS: Record<string, [string, string]> = {
@@ -146,6 +153,7 @@ export function EmbedStudio({
   userId,
   onClose,
   onRename,
+  onSelectChart,
 }: EmbedStudioProps) {
   const { isDark, primaryColor } = useTheme();
   const [html, setHtml] = useState("");
@@ -287,6 +295,7 @@ export function EmbedStudio({
           currentSrc={src}
           dataFiles={data.files}
           selectedDataFile={selectedDataFile}
+          onSelectChart={onSelectChart}
           onSelectDataFile={setSelectedDataFile}
           onUploadFiles={data.uploadFiles}
           onRemoveDataFile={data.removeFile}

frontend/src/components/FilesSidebar.tsx

@@ -11,6 +11,12 @@ interface FilesSidebarProps {
   currentSrc: string;
   dataFiles: EmbedDataFileMeta[];
   selectedDataFile: string | null;
+  /**
+   * Switch the embed studio to another chart by filename. Optional -
+   * when omitted, the chart list renders as read-only labels (the
+   * previous behaviour).
+   */
+  onSelectChart?: (name: string) => void;
   onSelectDataFile: (name: string | null) => void;
   onUploadFiles: (files: FileList | File[]) => Promise<UploadResult[]>;
   onRemoveDataFile: (name: string) => void;
@@ -21,6 +27,7 @@ export function FilesSidebar({
   currentSrc,
   dataFiles,
   selectedDataFile,
+  onSelectChart,
   onSelectDataFile,
   onUploadFiles,
   onRemoveDataFile,
@@ -57,19 +64,42 @@ export function FilesSidebar({
           {charts.length === 0 && (
             <li className="es-files__empty">No charts yet</li>
           )}
-          {charts.map((name) => (
-            <li
-              key={name}
-              className={`es-files__item ${name === currentSrc ? "es-files__item--current" : ""}`}
-              title={name === currentSrc ? "Current chart" : name}
-            >
-              <FileText size={12} />
-              <span className="es-files__name">{name}</span>
-              {name === currentSrc && (
-                <span className="es-files__badge">editing</span>
-              )}
-            </li>
-          ))}
+          {charts.map((name) => {
+            const isCurrent = name === currentSrc;
+            const className = `es-files__item ${isCurrent ? "es-files__item--current" : ""}`;
+            const inner = (
+              <>
+                <FileText size={12} />
+                <span className="es-files__name">{name}</span>
+                {isCurrent && (
+                  <span className="es-files__badge">editing</span>
+                )}
+              </>
+            );
+            if (!onSelectChart || isCurrent) {
+              return (
+                <li
+                  key={name}
+                  className={className}
+                  title={isCurrent ? "Current chart" : name}
+                >
+                  {inner}
+                </li>
+              );
+            }
+            return (
+              <li key={name} className={className}>
+                <button
+                  type="button"
+                  className="es-files__item-main"
+                  onClick={() => onSelectChart(name)}
+                  title={`Switch to ${name}`}
+                >
+                  {inner}
+                </button>
+              </li>
+            );
+          })}
         </ul>
       </section>
 

frontend/src/styles/components/_embed-studio.css

@@ -452,7 +452,8 @@
   color: var(--text-color);
 }
 
-.es-files__item--data {
+.es-files__item--data,
+.es-files__item:has(> .es-files__item-main) {
   padding: 0;
   overflow: hidden;
 }