create-interview-cockpit 0.17.3 → 0.18.0

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

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { useStore } from "../store";
-import { parseInfraLabWorkspace } from "../infraLab";
+import { DOCKER_DEEP_DIVE_LAB, parseInfraLabWorkspace } from "../infraLab";
+import { DEFAULT_GHA_LAB, parseGhaLabWorkspace } from "../githubActionsLab";
+import { ENTERPRISE_LOCAL_AUTH_LAB } from "../enterpriseLocalLab";
 import {
   parseFrontendLabWorkspace,
   ISOLATED_MODULE_FEDERATION_LAB,
@@ -8,6 +10,7 @@ import {
   NEXTJS_MF_RUNTIME_LAB,
   NEXTJS_MULTI_ZONES_LAB,
   NEXTJS_MF_RUNTIME_API_LAB,
+  NEXTJS_BFF_AUTH_CLIENT_LAB,
   RSPACK_SHELL_LAB,
 } from "../reactLab";
 import { BROWSER_SECURITY_TEMPLATES } from "../browserSecurityTemplates";
@@ -29,6 +32,7 @@ import {
   Network,
   Shield,
   PenLine,
+  GitBranch,
 } from "lucide-react";
 
 // ─── Helpers ─────────────────────────────────────────────
@@ -41,6 +45,7 @@ const LAB_ORIGINS = new Set([
   "nextjs",
   "module-federation",
   "canvas",
+  "github-actions",
 ]);
 
 function isLabFile(cf: ContextFile) {
@@ -196,6 +201,7 @@ export default function LabsPanel() {
     currentQuestion,
     openSandbox,
     openInfraLab,
+    openGhaLab,
     openReactLab,
     openNextLab,
     openModuleFederationLab,
@@ -302,6 +308,18 @@ export default function LabsPanel() {
     if (parsed) openInfraLab(parsed, cf.id);
   };
 
+  const openGhaFile = async (cf: ContextFile) => {
+    try {
+      const raw = await fetch(`/api/context-files/${cf.id}/content`)
+        .then((r) => r.json())
+        .then((d) => d.content as string);
+      const parsed = parseGhaLabWorkspace(raw);
+      if (parsed) openGhaLab(parsed, cf.id);
+    } catch {
+      /* ignore */
+    }
+  };
+
   const openReactFile = async (cf: ContextFile) => {
     try {
       const raw = await fetch(`/api/context-files/${cf.id}/content`)
@@ -606,13 +624,50 @@ export default function LabsPanel() {
             iconColor="text-cyan-400/70"
             origin="infra"
             emptyText="Save an infra lab to reopen it here"
-            onNewLab={() => openInfraLab()}
-            newLabTitle="Open Infrastructure Lab"
+            newLabMenu={[
+              {
+                label: "AWS LocalStack S3",
+                description:
+                  "Terraform AWS provider pointed at local emulation",
+                onClick: () => openInfraLab(),
+              },
+              {
+                label: "Docker Deep Dive",
+                description:
+                  "Dockerfile + Compose + Node API + Redis, with command-line practice",
+                onClick: () => openInfraLab(DOCKER_DEEP_DIVE_LAB),
+              },
+              {
+                label: "Enterprise BFF Docker Stack",
+                description:
+                  "Terraform deploys NestJS BFF, OIDC mock, Redis & claims API",
+                onClick: () => openInfraLab(ENTERPRISE_LOCAL_AUTH_LAB),
+              },
+            ]}
             onOpen={openInfraFile}
             openTitle="Open in Infrastructure Lab"
             accentClass="text-cyan-200"
             bgClass="bg-cyan-500/10 border border-cyan-500/20"
           />
+          <Section
+            title="GitHub Actions"
+            icon={GitBranch}
+            iconColor="text-amber-400/70"
+            origin="github-actions"
+            emptyText="Save a GitHub Actions lab to reopen it here"
+            newLabMenu={[
+              {
+                label: "Workflows + Composite Action",
+                description:
+                  "Multi-job CI workflow with a local composite action and a matrix build",
+                onClick: () => openGhaLab(DEFAULT_GHA_LAB),
+              },
+            ]}
+            onOpen={openGhaFile}
+            openTitle="Open in GitHub Actions Lab"
+            accentClass="text-amber-200"
+            bgClass="bg-amber-500/10 border border-amber-500/20"
+          />
           <Section
             title="React Labs"
             icon={Atom}
@@ -632,8 +687,19 @@ export default function LabsPanel() {
             iconColor="text-violet-400/70"
             origin="nextjs"
             emptyText="Save a Next.js lab to reopen it here"
-            onNewLab={() => openNextLab()}
-            newLabTitle="Open Next.js Lab"
+            newLabMenu={[
+              {
+                label: "Blank App Router",
+                description: "Standard Next.js App Router practice lab",
+                onClick: () => openNextLab(),
+              },
+              {
+                label: "BFF Auth Client",
+                description:
+                  "Next.js shell that signs in through the local Terraform-deployed BFF",
+                onClick: () => openNextLab(NEXTJS_BFF_AUTH_CLIENT_LAB),
+              },
+            ]}
             onOpen={openNextFile}
             openTitle="Open in Next.js Lab"
             accentClass="text-violet-200"

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,7 @@ export default function Sidebar() {
     selectDriveSubfolder,
     clearDriveSubfolder,
     syncWorkspace,
+    exportWorkspace,
     workspaceFiles,
     uploadWorkspaceFiles,
     removeWorkspaceFile,
@@ -113,6 +144,18 @@ 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(),
   );
@@ -165,9 +208,18 @@ 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 [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 +249,51 @@ 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);
+    }
+  };
+
   useEffect(() => {
     if (editingTopicId || editingQuestionId) {
       editInputRef.current?.select();
@@ -296,6 +386,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 +478,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 +785,8 @@ export default function Sidebar() {
                   <button
                     onClick={() => {
                       setOpenMenuQuestionId(null);
+                      setCopyingQuestionId(null);
+                      setCopyingToTopicQuestionId(null);
                       setMovingQuestionId((prev) =>
                         prev === q.id ? null : q.id,
                       );
@@ -502,13 +798,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 +946,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 +991,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>
@@ -888,12 +1266,22 @@ export default function Sidebar() {
                       <Trash2 className="w-3 h-3" />
                     </button>
                     <button
-                      onClick={(e) => {
+                      onClick={async (e) => {
                         e.stopPropagation();
-                        const topicQuestions = questionsByTopic[topic.id] ?? [];
+                        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,
@@ -901,9 +1289,7 @@ export default function Sidebar() {
                             systemContext: topic.systemContext ?? "",
                             contextFiles: topic.contextFiles,
                             createdAt: topic.createdAt,
-                            questions: rootQuestions.map((q) =>
-                              buildQuestionExport(q, topicQuestions),
-                            ),
+                            questions: exportedQuestions,
                           },
                           `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
                         );

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

@@ -152,6 +152,10 @@ export default function WorkspaceSwitcher() {
     setSyncResult(null);
     try {
       const result = await syncWorkspace(ws.id);
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
       setSyncResult(result);
     } catch (err: any) {
       setSyncResult({