create-interview-cockpit 0.17.3 → 0.19.0

package/template/client/src/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, Fragment } from "react";
 import { useStore } from "../store";
 import type { Question } from "../types";
+import * as api from "../api";
 import FileAttachments from "./FileAttachments";
 import WorkspaceSwitcher from "./WorkspaceSwitcher";
 
@@ -23,6 +24,8 @@ import {
   MoreHorizontal,
   Download,
   Link,
+  Upload,
+  Copy,
 } from "lucide-react";
 
 const ROOT_PARENT_VALUE = "__root__";
@@ -41,20 +44,46 @@ function downloadJson(data: unknown, filename: string) {
   URL.revokeObjectURL(url);
 }
 
-function buildQuestionExport(q: Question, allQuestions: Question[]): object {
-  const children = allQuestions
-    .filter((c) => c.parentQuestionId === q.id)
-    .map((c) => buildQuestionExport(c, allQuestions));
+async function serializeQuestionContextFiles(q: Question) {
+  return Promise.all(
+    (q.contextFiles || []).map(async (cf) => {
+      try {
+        const res = await fetch(`/api/context-files/${cf.id}/content`, {
+          cache: "no-store",
+        });
+        if (!res.ok) return cf;
+        const body = (await res.json()) as { content?: string };
+        return typeof body.content === "string"
+          ? { ...cf, content: body.content }
+          : cf;
+      } catch {
+        return cf;
+      }
+    }),
+  );
+}
+
+async function buildQuestionExport(
+  q: Question,
+  allQuestions: Question[],
+): Promise<object> {
+  const children = await Promise.all(
+    allQuestions
+      .filter((c) => c.parentQuestionId === q.id)
+      .map((c) => buildQuestionExport(c, allQuestions)),
+  );
   return {
     id: q.id,
     title: q.title,
     topicId: q.topicId,
     parentQuestionId: q.parentQuestionId ?? null,
     systemContext: q.systemContext,
-    contextFiles: q.contextFiles,
+    contextFiles: await serializeQuestionContextFiles(q),
     codeContextFiles: q.codeContextFiles,
     messages: q.messages,
     annotations: q.annotations ?? [],
+    readingBookmark: q.readingBookmark,
+    codeAnnotations: q.codeAnnotations ?? {},
     linkedConversationIds: q.linkedConversationIds ?? [],
     createdAt: q.createdAt,
     ...(children.length > 0 ? { children } : {}),
@@ -74,6 +103,7 @@ export default function Sidebar() {
     addQuestion,
     addChildQuestion,
     moveQuestion,
+    copyQuestion,
     removeQuestion,
     renameQuestion,
     selectQuestion,
@@ -89,6 +119,9 @@ export default function Sidebar() {
     selectDriveSubfolder,
     clearDriveSubfolder,
     syncWorkspace,
+    syncTopic,
+    exportWorkspace,
+    exportTopic,
     workspaceFiles,
     uploadWorkspaceFiles,
     removeWorkspaceFile,
@@ -113,12 +146,25 @@ export default function Sidebar() {
   const [movingQuestionId, setMovingQuestionId] = useState<string | null>(null);
   const [moveTargetParentId, setMoveTargetParentId] =
     useState(ROOT_PARENT_VALUE);
+  const [copyingQuestionId, setCopyingQuestionId] = useState<string | null>(
+    null,
+  );
+  const [copyTargetParentId, setCopyTargetParentId] =
+    useState(ROOT_PARENT_VALUE);
+  const [copyingToTopicQuestionId, setCopyingToTopicQuestionId] = useState<
+    string | null
+  >(null);
+  const [copyTargetTopicId, setCopyTargetTopicId] = useState("");
+  const [copyTargetTopicParentId, setCopyTargetTopicParentId] =
+    useState(ROOT_PARENT_VALUE);
+  const [copyingNowId, setCopyingNowId] = useState<string | null>(null);
   const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
     new Set(),
   );
   const [openMenuQuestionId, setOpenMenuQuestionId] = useState<string | null>(
     null,
   );
+  const [openMenuTopicId, setOpenMenuTopicId] = useState<string | null>(null);
   const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
     new Set(),
   );
@@ -165,9 +211,23 @@ export default function Sidebar() {
         name: activeWs.driveConfig.subFolderName ?? "",
       }
     : null;
+  const isAtDriveFolderRoot = isDriveWs && !currentSubFolder;
+  const canSyncDriveFolder =
+    !!activeWs?.driveConfig?.folderId && !isAtDriveFolderRoot;
+  const driveSyncTargetName =
+    currentSubFolder?.name ?? activeWs?.driveConfig?.folderName ?? "Drive";
   const [navigating, setNavigating] = useState(false);
   const [syncing, setSyncing] = useState(false);
+  const [pushing, setPushing] = useState(false);
+  const [topicSyncingId, setTopicSyncingId] = useState<string | null>(null);
+  const [topicPushingId, setTopicPushingId] = useState<string | null>(null);
+  const [topicDriveStatus, setTopicDriveStatus] = useState<
+    Record<string, string>
+  >({});
   const [wsFilesExpanded, setWsFilesExpanded] = useState(true);
+  const [driveFileSyncStatus, setDriveFileSyncStatus] = useState<string | null>(
+    null,
+  );
 
   // Load root folders whenever a Drive workspace becomes active with no subfolder selected
   useEffect(() => {
@@ -197,13 +257,106 @@ export default function Sidebar() {
 
   const handleResync = async () => {
     setSyncing(true);
+    setDriveFileSyncStatus(null);
     try {
-      await syncWorkspace(activeWorkspaceId!);
+      const result = await syncWorkspace(activeWorkspaceId!);
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      const firstError = result.errors[0];
+      setDriveFileSyncStatus(
+        result.errors.length > 0
+          ? `Pull finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}. ${firstError ? `First: ${firstError}` : ""}`
+          : `Pulled ${result.filesImported} file${result.filesImported === 1 ? "" : "s"} from Drive.`,
+      );
+    } catch (err: any) {
+      setDriveFileSyncStatus(err?.message || "Pull from Drive failed.");
     } finally {
       setSyncing(false);
     }
   };
 
+  const handlePushToDrive = async () => {
+    if (!activeWorkspaceId || !activeWs?.driveConfig?.folderId) return;
+    setPushing(true);
+    setDriveFileSyncStatus(null);
+    try {
+      const result = await exportWorkspace(
+        activeWorkspaceId,
+        activeWs.driveConfig.subFolderId,
+      );
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      setDriveFileSyncStatus(
+        result.errors.length > 0
+          ? `Push finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}.`
+          : `Pushed ${result.filesExported} file${result.filesExported === 1 ? "" : "s"} to Drive.`,
+      );
+    } catch (err: any) {
+      setDriveFileSyncStatus(err?.message || "Push to Drive failed.");
+    } finally {
+      setPushing(false);
+    }
+  };
+
+  const setTopicStatus = (topicId: string, value: string) => {
+    setTopicDriveStatus((prev) => ({ ...prev, [topicId]: value }));
+  };
+
+  const handlePullTopicFromDrive = async (topicId: string) => {
+    if (!activeWorkspaceId || !activeWs?.driveConfig?.folderId) return;
+    setTopicSyncingId(topicId);
+    setTopicStatus(topicId, "Pulling topic from Drive…");
+    try {
+      const result = await syncTopic(activeWorkspaceId, topicId);
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      const firstError = result.errors[0];
+      setTopicStatus(
+        topicId,
+        result.errors.length > 0
+          ? `Topic pull finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}. ${firstError ? `First: ${firstError}` : ""}`
+          : `Pulled ${result.filesImported} file${result.filesImported === 1 ? "" : "s"} into this topic.`,
+      );
+    } catch (err: any) {
+      setTopicStatus(topicId, err?.message || "Topic pull failed.");
+    } finally {
+      setTopicSyncingId(null);
+    }
+  };
+
+  const handlePushTopicToDrive = async (topicId: string) => {
+    if (!activeWorkspaceId || !activeWs?.driveConfig?.folderId) return;
+    setTopicPushingId(topicId);
+    setTopicStatus(topicId, "Pushing topic to Drive…");
+    try {
+      const result = await exportTopic(
+        activeWorkspaceId,
+        topicId,
+        activeWs.driveConfig.subFolderId,
+      );
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      setTopicStatus(
+        topicId,
+        result.errors.length > 0
+          ? `Topic push finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}.`
+          : `Pushed ${result.questionsExported} question${result.questionsExported === 1 ? "" : "s"} and ${result.filesExported} file${result.filesExported === 1 ? "" : "s"} to Drive.`,
+      );
+    } catch (err: any) {
+      setTopicStatus(topicId, err?.message || "Topic push failed.");
+    } finally {
+      setTopicPushingId(null);
+    }
+  };
+
   useEffect(() => {
     if (editingTopicId || editingQuestionId) {
       editInputRef.current?.select();
@@ -296,6 +449,37 @@ export default function Sidebar() {
     setMovingQuestionId(null);
   };
 
+  const handleCopyQuestion = async (
+    topicId: string,
+    questionId: string,
+    targetParentId: string | null,
+    targetTopicId = topicId,
+  ) => {
+    setCopyingNowId(questionId);
+    try {
+      await copyQuestion(questionId, topicId, targetParentId, targetTopicId);
+      setCopyingQuestionId(null);
+      setCopyingToTopicQuestionId(null);
+      setCopyTargetParentId(ROOT_PARENT_VALUE);
+      setCopyTargetTopicParentId(ROOT_PARENT_VALUE);
+    } finally {
+      setCopyingNowId(null);
+    }
+  };
+
+  const openCopyToTopicPicker = (q: Question, topicId: string) => {
+    const defaultTargetTopicId =
+      topics.find((topic) => topic.id !== topicId)?.id ?? "";
+    setMovingQuestionId(null);
+    setCopyingQuestionId(null);
+    setCopyingToTopicQuestionId((prev) => (prev === q.id ? null : q.id));
+    setCopyTargetTopicId(defaultTargetTopicId);
+    setCopyTargetTopicParentId(ROOT_PARENT_VALUE);
+    if (defaultTargetTopicId && !questionsByTopic[defaultTargetTopicId]) {
+      void fetchQuestions(defaultTargetTopicId);
+    }
+  };
+
   const renderMoveQuestionPicker = (
     questions: Question[],
     q: Question,
@@ -357,6 +541,179 @@ export default function Sidebar() {
     );
   };
 
+  const renderCopyQuestionPicker = (
+    questions: Question[],
+    q: Question,
+    topicId: string,
+    depth: number,
+  ) => {
+    if (copyingQuestionId !== q.id) return null;
+    const parentOptions = buildMoveParentOptions(questions, new Set(), null, 0);
+    const targetParentId =
+      copyTargetParentId === ROOT_PARENT_VALUE ? null : copyTargetParentId;
+    const isCopying = copyingNowId === q.id;
+
+    return (
+      <div
+        className="pr-2 py-1.5 animate-fadeIn"
+        style={{ paddingLeft: 12 + (depth + 1) * 16 }}
+      >
+        <div className="rounded border border-slate-700 bg-slate-800/70 p-2 space-y-2">
+          <div>
+            <div className="text-[11px] text-slate-500">Copy under</div>
+            <p className="mt-0.5 text-[10px] leading-snug text-slate-600">
+              Duplicates this question, its children, messages, and attached
+              files.
+            </p>
+          </div>
+          <select
+            autoFocus
+            value={copyTargetParentId}
+            onChange={(e) => setCopyTargetParentId(e.target.value)}
+            disabled={isCopying}
+            className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300 focus:outline-none focus:border-cyan-500 disabled:opacity-60"
+          >
+            <option value={ROOT_PARENT_VALUE}>No parent (top level)</option>
+            {parentOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.title}
+              </option>
+            ))}
+          </select>
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setCopyingQuestionId(null)}
+              disabled={isCopying}
+              className="px-2 py-1 rounded text-[11px] text-slate-400 hover:text-slate-200 hover:bg-slate-700 disabled:opacity-50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => handleCopyQuestion(topicId, q.id, targetParentId)}
+              disabled={isCopying}
+              className="px-2 py-1 rounded text-[11px] bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors inline-flex items-center gap-1.5"
+            >
+              {isCopying && <Loader2 className="w-3 h-3 animate-spin" />}
+              Copy
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderCopyToTopicPicker = (
+    q: Question,
+    sourceTopicId: string,
+    depth: number,
+  ) => {
+    if (copyingToTopicQuestionId !== q.id) return null;
+    const destinationTopics = topics.filter(
+      (topic) => topic.id !== sourceTopicId,
+    );
+    const selectedTopicId = copyTargetTopicId || destinationTopics[0]?.id || "";
+    const targetQuestions = selectedTopicId
+      ? (questionsByTopic[selectedTopicId] ?? [])
+      : [];
+    const parentOptions = buildMoveParentOptions(
+      targetQuestions,
+      new Set(),
+      null,
+      0,
+    );
+    const targetParentId =
+      copyTargetTopicParentId === ROOT_PARENT_VALUE
+        ? null
+        : copyTargetTopicParentId;
+    const isCopying = copyingNowId === q.id;
+
+    return (
+      <div
+        className="pr-2 py-1.5 animate-fadeIn"
+        style={{ paddingLeft: 12 + (depth + 1) * 16 }}
+      >
+        <div className="rounded border border-slate-700 bg-slate-800/70 p-2 space-y-2">
+          <div>
+            <div className="text-[11px] text-slate-500">Copy to topic</div>
+            <p className="mt-0.5 text-[10px] leading-snug text-slate-600">
+              Creates an independent copy in another topic, including children,
+              messages, and attached files.
+            </p>
+          </div>
+          {destinationTopics.length > 0 ? (
+            <>
+              <select
+                autoFocus
+                value={selectedTopicId}
+                onChange={(e) => {
+                  const nextTopicId = e.target.value;
+                  setCopyTargetTopicId(nextTopicId);
+                  setCopyTargetTopicParentId(ROOT_PARENT_VALUE);
+                  if (nextTopicId && !questionsByTopic[nextTopicId]) {
+                    void fetchQuestions(nextTopicId);
+                  }
+                }}
+                disabled={isCopying}
+                className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300 focus:outline-none focus:border-cyan-500 disabled:opacity-60"
+              >
+                {destinationTopics.map((topic) => (
+                  <option key={topic.id} value={topic.id}>
+                    {topic.name}
+                  </option>
+                ))}
+              </select>
+              <select
+                value={copyTargetTopicParentId}
+                onChange={(e) => setCopyTargetTopicParentId(e.target.value)}
+                disabled={isCopying || !selectedTopicId}
+                className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300 focus:outline-none focus:border-cyan-500 disabled:opacity-60"
+              >
+                <option value={ROOT_PARENT_VALUE}>No parent (top level)</option>
+                {parentOptions.map((option) => (
+                  <option key={option.id} value={option.id}>
+                    {option.title}
+                  </option>
+                ))}
+              </select>
+            </>
+          ) : (
+            <p className="rounded border border-slate-700 bg-slate-900/70 px-2 py-1.5 text-[11px] text-slate-500">
+              Create another topic first, then copy this question into it.
+            </p>
+          )}
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setCopyingToTopicQuestionId(null)}
+              disabled={isCopying}
+              className="px-2 py-1 rounded text-[11px] text-slate-400 hover:text-slate-200 hover:bg-slate-700 disabled:opacity-50 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                handleCopyQuestion(
+                  sourceTopicId,
+                  q.id,
+                  targetParentId,
+                  selectedTopicId,
+                )
+              }
+              disabled={isCopying || !selectedTopicId}
+              className="px-2 py-1 rounded text-[11px] bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors inline-flex items-center gap-1.5"
+            >
+              {isCopying && <Loader2 className="w-3 h-3 animate-spin" />}
+              Copy
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const renderQuestionRow = (
     q: Question,
     topicId: string,
@@ -491,6 +848,8 @@ export default function Sidebar() {
                   <button
                     onClick={() => {
                       setOpenMenuQuestionId(null);
+                      setCopyingQuestionId(null);
+                      setCopyingToTopicQuestionId(null);
                       setMovingQuestionId((prev) =>
                         prev === q.id ? null : q.id,
                       );
@@ -502,13 +861,45 @@ export default function Sidebar() {
                   >
                     <ArrowRightLeft className="w-3 h-3" /> Move
                   </button>
-                  <div className="border-t border-slate-700 my-0.5" />
                   <button
                     onClick={() => {
                       setOpenMenuQuestionId(null);
-                      const allQ = questionsByTopic[topicId] ?? [];
+                      setMovingQuestionId(null);
+                      setCopyingToTopicQuestionId(null);
+                      setCopyingQuestionId((prev) =>
+                        prev === q.id ? null : q.id,
+                      );
+                      setCopyTargetParentId(
+                        q.parentQuestionId ?? ROOT_PARENT_VALUE,
+                      );
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <Copy className="w-3 h-3" /> Copy in topic
+                  </button>
+                  <button
+                    onClick={() => {
+                      setOpenMenuQuestionId(null);
+                      openCopyToTopicPicker(q, topicId);
+                    }}
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                  >
+                    <Copy className="w-3 h-3" /> Copy to topic
+                  </button>
+                  <div className="border-t border-slate-700 my-0.5" />
+                  <button
+                    onClick={async () => {
+                      setOpenMenuQuestionId(null);
+                      let allQ = questionsByTopic[topicId] ?? [];
+                      try {
+                        allQ = await api.fetchQuestions(topicId);
+                      } catch {
+                        // Fall back to the already-loaded sidebar snapshot.
+                      }
+                      const latestQuestion =
+                        allQ.find((candidate) => candidate.id === q.id) ?? q;
                       downloadJson(
-                        buildQuestionExport(q, allQ),
+                        await buildQuestionExport(latestQuestion, allQ),
                         `${q.title.replace(/[^a-z0-9]+/gi, "-")}.json`,
                       );
                     }}
@@ -618,6 +1009,8 @@ export default function Sidebar() {
             </div>
           )}
           {renderMoveQuestionPicker(questions, q, topicId, depth)}
+          {renderCopyQuestionPicker(questions, q, topicId, depth)}
+          {renderCopyToTopicPicker(q, topicId, depth)}
           {/* Recurse into children — hidden when collapsed */}
           {!isCollapsed &&
             renderQuestionSubtree(questions, topicId, q.id, depth + 1)}
@@ -661,6 +1054,54 @@ export default function Sidebar() {
               downloadBase="/api/workspace/context-files"
               label="workspace"
             />
+            {activeWs?.driveConfig?.folderId && isAtDriveFolderRoot && (
+              <p className="mt-2 rounded-md border border-slate-800 bg-slate-900/70 px-2 py-1.5 text-[10px] leading-relaxed text-slate-500">
+                Select a Drive folder first. Its workspace-files and questions
+                sync from inside that selected folder.
+              </p>
+            )}
+            {canSyncDriveFolder && (
+              <div className="mt-2 space-y-1.5">
+                <p className="text-[10px] text-slate-600">
+                  Sync selected folder: {driveSyncTargetName}
+                </p>
+                <div className="grid grid-cols-2 gap-1.5">
+                  <button
+                    type="button"
+                    onClick={handlePushToDrive}
+                    disabled={pushing || syncing}
+                    className="flex items-center justify-center gap-1 rounded-md border border-cyan-500/20 bg-cyan-500/10 px-2 py-1 text-[11px] font-medium text-cyan-300 hover:bg-cyan-500/15 disabled:opacity-40 disabled:hover:bg-cyan-500/10 transition-colors"
+                    title="Push topics, questions, and workspace files into the selected Drive folder"
+                  >
+                    {pushing ? (
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                    ) : (
+                      <Upload className="w-3 h-3" />
+                    )}
+                    {pushing ? "Pushing…" : "Push folder"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleResync}
+                    disabled={syncing || pushing}
+                    className="flex items-center justify-center gap-1 rounded-md border border-slate-700 bg-slate-800/60 px-2 py-1 text-[11px] font-medium text-slate-300 hover:border-cyan-500/30 hover:text-cyan-300 disabled:opacity-40 disabled:hover:text-slate-300 transition-colors"
+                    title="Pull topics, questions, and workspace files from the selected Drive folder"
+                  >
+                    {syncing ? (
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                    ) : (
+                      <RefreshCw className="w-3 h-3" />
+                    )}
+                    {syncing ? "Pulling…" : "Pull folder"}
+                  </button>
+                </div>
+                {driveFileSyncStatus && (
+                  <p className="text-[10px] leading-relaxed text-slate-500">
+                    {driveFileSyncStatus}
+                  </p>
+                )}
+              </div>
+            )}
           </div>
         )}
       </div>
@@ -816,6 +1257,9 @@ export default function Sidebar() {
                         sensitivity: "base",
                       }),
               );
+              const isTopicMenuOpen = openMenuTopicId === topic.id;
+              const topicBusy =
+                topicSyncingId === topic.id || topicPushingId === topic.id;
 
               return (
                 <div key={topic.id}>
@@ -860,61 +1304,160 @@ export default function Sidebar() {
                       </span>
                     </button>
                     {editingTopicId !== topic.id && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setEditingTopicId(topic.id);
-                          setEditingTopicName(topic.name);
-                        }}
-                        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-                        title="Rename"
+                      <div
+                        className="relative shrink-0 flex items-center"
+                        onClick={(e) => e.stopPropagation()}
                       >
-                        <Pencil className="w-3 h-3" />
-                      </button>
+                        {topicBusy && !isTopicMenuOpen ? (
+                          <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />
+                        ) : (
+                          <button
+                            onClick={() =>
+                              setOpenMenuTopicId(
+                                isTopicMenuOpen ? null : topic.id,
+                              )
+                            }
+                            className={`p-0.5 rounded transition-all ${
+                              isTopicMenuOpen
+                                ? "text-cyan-400"
+                                : "opacity-0 group-hover:opacity-100 text-slate-600 hover:text-slate-300"
+                            }`}
+                            title="Topic options"
+                          >
+                            <MoreHorizontal className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+
+                        {isTopicMenuOpen && (
+                          <>
+                            <div
+                              className="fixed inset-0 z-40"
+                              onClick={() => setOpenMenuTopicId(null)}
+                            />
+                            <div className="absolute right-0 top-full mt-0.5 z-50 bg-slate-800 border border-slate-700 rounded-md shadow-xl min-w-[170px] py-0.5">
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  setEditingTopicId(topic.id);
+                                  setEditingTopicName(topic.name);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Pencil className="w-3 h-3" /> Rename
+                              </button>
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  setAddingQuestionTo(topic.id);
+                                  setNewQuestionTitle("");
+                                  if (!isExpanded) toggleTopic(topic.id);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Plus className="w-3 h-3" /> Add question
+                              </button>
+                              <button
+                                onClick={async () => {
+                                  setOpenMenuTopicId(null);
+                                  let topicQuestions =
+                                    questionsByTopic[topic.id] ?? [];
+                                  try {
+                                    topicQuestions = await api.fetchQuestions(
+                                      topic.id,
+                                    );
+                                  } catch {
+                                    // Fall back to the already-loaded sidebar snapshot.
+                                  }
+                                  const rootQuestions = topicQuestions.filter(
+                                    (q) => !q.parentQuestionId,
+                                  );
+                                  const exportedQuestions = await Promise.all(
+                                    rootQuestions.map((q) =>
+                                      buildQuestionExport(q, topicQuestions),
+                                    ),
+                                  );
+                                  downloadJson(
+                                    {
+                                      id: topic.id,
+                                      name: topic.name,
+                                      systemContext: topic.systemContext ?? "",
+                                      contextFiles: topic.contextFiles,
+                                      createdAt: topic.createdAt,
+                                      questions: exportedQuestions,
+                                    },
+                                    `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
+                                  );
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Download className="w-3 h-3" /> Download
+                              </button>
+
+                              {canSyncDriveFolder && (
+                                <>
+                                  <div className="border-t border-slate-700 my-0.5" />
+                                  <button
+                                    onClick={() => {
+                                      setOpenMenuTopicId(null);
+                                      void handlePushTopicToDrive(topic.id);
+                                    }}
+                                    disabled={topicBusy || pushing || syncing}
+                                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-cyan-300 hover:bg-slate-700 hover:text-cyan-200 disabled:opacity-50 transition-colors"
+                                  >
+                                    {topicPushingId === topic.id ? (
+                                      <Loader2 className="w-3 h-3 animate-spin" />
+                                    ) : (
+                                      <Upload className="w-3 h-3" />
+                                    )}
+                                    Push topic
+                                  </button>
+                                  <button
+                                    onClick={() => {
+                                      setOpenMenuTopicId(null);
+                                      void handlePullTopicFromDrive(topic.id);
+                                    }}
+                                    disabled={topicBusy || pushing || syncing}
+                                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-cyan-300 disabled:opacity-50 transition-colors"
+                                  >
+                                    {topicSyncingId === topic.id ? (
+                                      <Loader2 className="w-3 h-3 animate-spin" />
+                                    ) : (
+                                      <RefreshCw className="w-3 h-3" />
+                                    )}
+                                    Pull topic
+                                  </button>
+                                </>
+                              )}
+
+                              <div className="border-t border-slate-700 my-0.5" />
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  if (
+                                    confirm(
+                                      `Delete topic "${topic.name}" and all its questions?`,
+                                    )
+                                  ) {
+                                    removeTopic(topic.id);
+                                  }
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-slate-700 hover:text-red-300 transition-colors"
+                              >
+                                <Trash2 className="w-3 h-3" /> Delete
+                              </button>
+                            </div>
+                          </>
+                        )}
+                      </div>
                     )}
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (
-                          confirm(
-                            `Delete topic "${topic.name}" and all its questions?`,
-                          )
-                        ) {
-                          removeTopic(topic.id);
-                        }
-                      }}
-                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-                    >
-                      <Trash2 className="w-3 h-3" />
-                    </button>
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        const topicQuestions = questionsByTopic[topic.id] ?? [];
-                        const rootQuestions = topicQuestions.filter(
-                          (q) => !q.parentQuestionId,
-                        );
-                        downloadJson(
-                          {
-                            id: topic.id,
-                            name: topic.name,
-                            systemContext: topic.systemContext ?? "",
-                            contextFiles: topic.contextFiles,
-                            createdAt: topic.createdAt,
-                            questions: rootQuestions.map((q) =>
-                              buildQuestionExport(q, topicQuestions),
-                            ),
-                          },
-                          `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
-                        );
-                      }}
-                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-                      title="Download topic as JSON"
-                    >
-                      <Download className="w-3 h-3" />
-                    </button>
                   </div>
 
+                  {topicDriveStatus[topic.id] && (
+                    <p className="px-3 pb-1 text-[10px] leading-relaxed text-slate-500">
+                      {topicDriveStatus[topic.id]}
+                    </p>
+                  )}
+
                   {/* Questions list */}
                   {isExpanded && (
                     <div className="ml-3 border-l border-slate-800">