create-interview-cockpit 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

package/template/client/src/App.tsx

@@ -9,6 +9,9 @@ import { Code, Plane, PanelLeftClose, PanelLeft } from "lucide-react";
 export default function App() {
   const {
     fetchTopics,
+    fetchWorkspaces,
+    fetchQuestions,
+    selectQuestion,
     currentQuestion,
     showCodePanel,
     toggleCodePanel,
@@ -19,8 +22,30 @@ export default function App() {
   } = useStore();
 
   useEffect(() => {
-    fetchTopics();
-  }, [fetchTopics]);
+    const init = async () => {
+      await fetchWorkspaces();
+      await fetchTopics();
+      // Restore last-viewed question after page refresh
+      const topicId = sessionStorage.getItem("lastTopicId");
+      const questionId = sessionStorage.getItem("lastQuestionId");
+      if (topicId && questionId) {
+        try {
+          await fetchQuestions(topicId);
+          await selectQuestion(topicId, questionId);
+          // Expand the topic so it's visible in the sidebar
+          const { expandedTopics } = useStore.getState();
+          if (!expandedTopics.includes(topicId)) {
+            useStore.getState().toggleTopic(topicId);
+          }
+        } catch {
+          // Question may no longer exist — ignore
+          sessionStorage.removeItem("lastTopicId");
+          sessionStorage.removeItem("lastQuestionId");
+        }
+      }
+    };
+    init();
+  }, []);
 
   return (
     <div className="flex h-screen bg-slate-950">

package/template/client/src/api.ts

@@ -1,4 +1,4 @@
-import type { Topic, Question, ContextFile } from "./types";
+import type { Topic, Question, ContextFile, WorkspacesRegistry } from "./types";
 
 const BASE = "/api";
 
@@ -130,3 +130,192 @@ export async function fetchCodeContextTree(): Promise<string[]> {
   const res = await fetch(`${BASE}/code-context/tree`);
   return res.json();
 }
+
+// --- Workspaces ---
+
+export async function fetchWorkspaces(): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces`);
+  return res.json();
+}
+
+export async function createWorkspace(
+  name: string,
+  type: "local" | "google_drive",
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name, type }),
+  });
+  return res.json();
+}
+
+export async function renameWorkspace(
+  id: string,
+  name: string,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name }),
+  });
+  return res.json();
+}
+
+export async function patchWorkspace(
+  id: string,
+  data: object,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${id}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+  return res.json();
+}
+
+export async function deleteWorkspaceApi(
+  id: string,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${id}`, { method: "DELETE" });
+  return res.json();
+}
+
+export async function activateWorkspaceApi(
+  id: string,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${id}/activate`, {
+    method: "POST",
+  });
+  return res.json();
+}
+
+export async function syncWorkspaceApi(id: string): Promise<{
+  topicsUpserted: number;
+  filesImported: number;
+  filesSkipped: number;
+  errors: string[];
+}> {
+  const res = await fetch(`${BASE}/workspaces/${id}/sync`, { method: "POST" });
+  return res.json();
+}
+
+export type ExportWorkspaceResult =
+  | { needsAuth: true; authUrl: string }
+  | {
+      needsAuth?: false;
+      topicsExported: number;
+      questionsExported: number;
+      filesExported: number;
+      errors: string[];
+    };
+
+export async function exportWorkspaceToDrive(
+  id: string,
+  targetFolderId?: string,
+): Promise<ExportWorkspaceResult> {
+  const res = await fetch(`${BASE}/workspaces/${id}/export-drive`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ targetFolderId }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error((body as any).error || `Export failed (${res.status})`);
+  }
+  return res.json();
+}
+
+export interface DriveFolder {
+  id: string;
+  name: string;
+  mimeType: string;
+}
+
+export async function fetchDriveSubfolders(
+  workspaceId: string,
+): Promise<DriveFolder[]> {
+  const res = await fetch(`${BASE}/workspaces/${workspaceId}/drive-subfolders`);
+  if (!res.ok) throw new Error(`Failed to load subfolders (${res.status})`);
+  return res.json();
+}
+
+export async function createDriveSubfolder(
+  workspaceId: string,
+  name: string,
+): Promise<DriveFolder> {
+  const res = await fetch(
+    `${BASE}/workspaces/${workspaceId}/drive-subfolders`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    },
+  );
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as any).error || `Failed to create folder (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function linkDriveFolder(
+  workspaceId: string,
+  url: string,
+): Promise<{
+  registry: WorkspacesRegistry;
+  folders: DriveFolder[];
+}> {
+  const res = await fetch(`${BASE}/workspaces/${workspaceId}/link-drive`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ url }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as any).error || `Failed to link Drive folder (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function selectDriveSubfolder(
+  workspaceId: string,
+  subFolderId: string | null,
+  subFolderName: string | null,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${workspaceId}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ driveConfig: { subFolderId, subFolderName } }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as any).error || `Failed to update workspace (${res.status})`,
+    );
+  }
+  return res.json();
+}
+
+export async function attachDriveFolder(
+  workspaceId: string,
+  url: string,
+): Promise<WorkspacesRegistry> {
+  const res = await fetch(`${BASE}/workspaces/${workspaceId}/attach-drive`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ url }),
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(
+      (body as any).error || `Failed to attach Drive folder (${res.status})`,
+    );
+  }
+  const data = await res.json();
+  return data.registry;
+}

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

@@ -61,7 +61,33 @@ const ChatMessage = memo(function ChatMessage({
         </div>
         <div className="text-sm leading-relaxed text-slate-200">
           {isUser ? (
-            <p className="whitespace-pre-wrap text-slate-300">{content}</p>
+            <div>
+              {(message.parts ?? [])
+                .filter(
+                  (
+                    p,
+                  ): p is {
+                    type: "file";
+                    mediaType: string;
+                    url: string;
+                    filename?: string;
+                  } =>
+                    p.type === "file" &&
+                    typeof (p as any).mediaType === "string" &&
+                    (p as any).mediaType.startsWith("image/"),
+                )
+                .map((p, i) => (
+                  <img
+                    key={i}
+                    src={p.url}
+                    alt={p.filename ?? "Attached image"}
+                    className="max-w-xs rounded-lg mb-2 border border-slate-700"
+                  />
+                ))}
+              {content && (
+                <p className="whitespace-pre-wrap text-slate-300">{content}</p>
+              )}
+            </div>
           ) : (
             <TextAnnotator
               content={content}

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

@@ -1,11 +1,19 @@
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
+import type { FileUIPart } from "ai";
 import { useEffect, useRef, useState, useMemo, useCallback } from "react";
 import type { Question, Annotation, ReadingBookmark } from "../types";
 import { useStore } from "../store";
 import ChatMessage from "./ChatMessage";
 import FileAttachments from "./FileAttachments";
-import { Send, Loader2, Settings2, RotateCcw } from "lucide-react";
+import {
+  Send,
+  Loader2,
+  Settings2,
+  RotateCcw,
+  ImagePlus,
+  X,
+} from "lucide-react";
 
 interface Props {
   question: Question;
@@ -170,10 +178,53 @@ export default function ChatView({ question }: Props) {
   const bookmarkRef = useRef<HTMLDivElement | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
   const systemContextSaveTimeoutRef = useRef<number | null>(null);
   const responsePreferenceCacheRef = useRef<ResponsePreferenceCache>({});
   const pendingResponsePreferenceCacheRef =
     useRef<ResponsePreferenceCache | null>(null);
+
+  // ── Inline image attachments (per-message, ephemeral) ──────────────────────
+  const [attachedImages, setAttachedImages] = useState<
+    Array<FileUIPart & { _id: string }>
+  >([]);
+
+  const addImageFiles = useCallback(async (files: File[]) => {
+    const imageFiles = files.filter((f) => f.type.startsWith("image/"));
+    if (!imageFiles.length) return;
+    const parts = await Promise.all(
+      imageFiles.map(
+        (file) =>
+          new Promise<FileUIPart & { _id: string }>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () =>
+              resolve({
+                _id: crypto.randomUUID(),
+                type: "file",
+                mediaType: file.type,
+                filename: file.name,
+                url: reader.result as string,
+              });
+            reader.readAsDataURL(file);
+          }),
+      ),
+    );
+    setAttachedImages((prev) => [...prev, ...parts]);
+  }, []);
+
+  const handleImagePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+      const imageItems = Array.from(e.clipboardData.items).filter((item) =>
+        item.type.startsWith("image/"),
+      );
+      if (!imageItems.length) return;
+      e.preventDefault();
+      addImageFiles(imageItems.map((item) => item.getAsFile()!));
+    },
+    [addImageFiles],
+  );
+  // ──────────────────────────────────────────────────────────────────────────
+
   const requestOptionsRef = useRef({
     questionId: question.id,
     topicId: question.topicId,
@@ -391,10 +442,14 @@ export default function ChatView({ question }: Props) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!input.trim() || isLoading) return;
+    const hasText = input.trim().length > 0;
+    const hasImages = attachedImages.length > 0;
+    if ((!hasText && !hasImages) || isLoading) return;
     const text = input;
+    const files = attachedImages.length > 0 ? attachedImages : undefined;
     setInput("");
-    sendMessage({ text });
+    setAttachedImages([]);
+    sendMessage({ text, ...(files ? { files } : {}) });
   };
 
   return (
@@ -568,7 +623,52 @@ export default function ChatView({ question }: Props) {
         </div>
 
         <form onSubmit={handleSubmit}>
+          {/* Attached image thumbnails */}
+          {attachedImages.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-2">
+              {attachedImages.map((img) => (
+                <div key={img._id} className="relative group">
+                  <img
+                    src={img.url}
+                    alt={img.filename ?? "image"}
+                    className="h-16 w-16 object-cover rounded-lg border border-slate-700"
+                  />
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setAttachedImages((prev) =>
+                        prev.filter((i) => i._id !== img._id),
+                      )
+                    }
+                    className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-slate-950 border border-slate-700 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    <X className="w-2.5 h-2.5 text-slate-400" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
           <div className="flex gap-2">
+            {/* Hidden image file input */}
+            <input
+              ref={imageInputRef}
+              type="file"
+              accept="image/*"
+              multiple
+              className="hidden"
+              onChange={(e) => {
+                if (e.target.files) addImageFiles(Array.from(e.target.files));
+                e.target.value = "";
+              }}
+            />
+            <button
+              type="button"
+              onClick={() => imageInputRef.current?.click()}
+              className="self-end pb-2.5 text-slate-500 hover:text-cyan-400 transition-colors shrink-0"
+              title="Attach image"
+            >
+              <ImagePlus className="w-4 h-4" />
+            </button>
             <textarea
               ref={textareaRef}
               value={input}
@@ -576,11 +676,13 @@ export default function ChatView({ question }: Props) {
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey) {
                   e.preventDefault();
-                  if (!input.trim() || isLoading) return;
+                  if ((!input.trim() && !attachedImages.length) || isLoading)
+                    return;
                   handleSubmit(e as any);
                 }
               }}
-              placeholder="Ask about this topic..."
+              onPaste={handleImagePaste}
+              placeholder="Ask about this topic…"
               rows={1}
               className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 transition-colors resize-none overflow-y-auto"
               style={{ minHeight: "2.625rem", maxHeight: "8rem" }}
@@ -588,7 +690,9 @@ export default function ChatView({ question }: Props) {
             />
             <button
               type="submit"
-              disabled={isLoading || !input.trim()}
+              disabled={
+                isLoading || (!input.trim() && attachedImages.length === 0)
+              }
               className="px-4 py-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-700 disabled:text-slate-500 text-white rounded-lg transition-colors flex items-center gap-2"
             >
               {isLoading ? (