create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -16,8 +16,13 @@ import {
   Loader2,
   ArrowLeft,
   RefreshCw,
+  Globe,
+  SlidersHorizontal,
+  ArrowRightLeft,
 } from "lucide-react";
 
+const ROOT_PARENT_VALUE = "__root__";
+
 export default function Sidebar() {
   const {
     topics,
@@ -30,12 +35,14 @@ export default function Sidebar() {
     renameTopic,
     addQuestion,
     addChildQuestion,
+    moveQuestion,
     removeQuestion,
     renameQuestion,
     selectQuestion,
     fetchQuestions,
     uploadTopicFiles,
     removeTopicFile,
+    linkFileToTopic,
     workspaces,
     activeWorkspaceId,
     driveRootFolders,
@@ -44,6 +51,10 @@ export default function Sidebar() {
     selectDriveSubfolder,
     clearDriveSubfolder,
     syncWorkspace,
+    workspaceFiles,
+    uploadWorkspaceFiles,
+    removeWorkspaceFile,
+    updateTopicSystemContext,
   } = useStore();
 
   const [newTopicName, setNewTopicName] = useState("");
@@ -58,6 +69,43 @@ export default function Sidebar() {
     null,
   );
   const [editingQuestionTitle, setEditingQuestionTitle] = useState("");
+  const [movingQuestionId, setMovingQuestionId] = useState<string | null>(null);
+  const [moveTargetParentId, setMoveTargetParentId] =
+    useState(ROOT_PARENT_VALUE);
+  const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
+    new Set(),
+  );
+  const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
+    new Set(),
+  );
+  const topicPromptTimers = useRef<
+    Record<string, ReturnType<typeof setTimeout>>
+  >({});
+
+  const toggleTopicPrompt = (topicId: string) => {
+    setOpenTopicPrompts((prev) => {
+      const next = new Set(prev);
+      if (next.has(topicId)) next.delete(topicId);
+      else next.add(topicId);
+      return next;
+    });
+  };
+
+  const handleTopicPromptChange = (topicId: string, value: string) => {
+    clearTimeout(topicPromptTimers.current[topicId]);
+    topicPromptTimers.current[topicId] = setTimeout(() => {
+      updateTopicSystemContext(topicId, value);
+    }, 600);
+  };
+
+  const toggleQuestionCollapse = (questionId: string) => {
+    setCollapsedQuestions((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) next.delete(questionId);
+      else next.add(questionId);
+      return next;
+    });
+  };
   const editInputRef = useRef<HTMLInputElement>(null);
 
   // Drive subfolder navigator
@@ -72,6 +120,7 @@ export default function Sidebar() {
     : null;
   const [navigating, setNavigating] = useState(false);
   const [syncing, setSyncing] = useState(false);
+  const [wsFilesExpanded, setWsFilesExpanded] = useState(true);
 
   // Load root folders whenever a Drive workspace becomes active with no subfolder selected
   useEffect(() => {
@@ -156,103 +205,334 @@ export default function Sidebar() {
     setAddingChildTo(null);
   };
 
+  const getDescendantIds = (questions: Question[], questionId: string) => {
+    const descendants = new Set<string>();
+    const visit = (parentId: string) => {
+      for (const candidate of questions) {
+        if (candidate.parentQuestionId !== parentId) continue;
+        if (descendants.has(candidate.id)) continue;
+        descendants.add(candidate.id);
+        visit(candidate.id);
+      }
+    };
+    visit(questionId);
+    return descendants;
+  };
+
+  const buildMoveParentOptions = (
+    questions: Question[],
+    excludedIds: Set<string>,
+    parentId: string | null,
+    depth: number,
+  ): Array<{ id: string; title: string }> => {
+    const siblings = questions.filter(
+      (q) => (q.parentQuestionId ?? null) === parentId,
+    );
+    return siblings.flatMap((q) => {
+      if (excludedIds.has(q.id)) return [];
+      return [
+        {
+          id: q.id,
+          title: `${"— ".repeat(depth)}${q.title}`,
+        },
+        ...buildMoveParentOptions(questions, excludedIds, q.id, depth + 1),
+      ];
+    });
+  };
+
+  const handleMoveQuestion = async (
+    topicId: string,
+    questionId: string,
+    targetParentId: string | null,
+  ) => {
+    await moveQuestion(questionId, topicId, targetParentId);
+    setMovingQuestionId(null);
+  };
+
+  const renderMoveQuestionPicker = (
+    questions: Question[],
+    q: Question,
+    topicId: string,
+    depth: number,
+  ) => {
+    if (movingQuestionId !== q.id) return null;
+    const excludedIds = getDescendantIds(questions, q.id);
+    excludedIds.add(q.id);
+    const parentOptions = buildMoveParentOptions(
+      questions,
+      excludedIds,
+      null,
+      0,
+    );
+    const targetParentId =
+      moveTargetParentId === ROOT_PARENT_VALUE ? null : moveTargetParentId;
+    const unchanged = (q.parentQuestionId ?? null) === targetParentId;
+
+    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 className="text-[11px] text-slate-500">Move under</div>
+          <select
+            autoFocus
+            value={moveTargetParentId}
+            onChange={(e) => setMoveTargetParentId(e.target.value)}
+            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"
+          >
+            <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={() => setMovingQuestionId(null)}
+              className="px-2 py-1 rounded text-[11px] text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => handleMoveQuestion(topicId, q.id, targetParentId)}
+              disabled={unchanged}
+              className="px-2 py-1 rounded text-[11px] bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors"
+            >
+              Move
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const renderQuestionRow = (
     q: Question,
     topicId: string,
-    isChild: boolean,
-  ) => (
-    <div
-      key={q.id}
-      className={`group flex items-center gap-1.5 ${
-        isChild ? "pl-7" : "pl-3"
-      } pr-2 py-1 cursor-pointer transition-colors ${
-        selectedQuestionId === q.id
-          ? "bg-cyan-500/10 border-l-2 border-l-cyan-500 -ml-px"
-          : "hover:bg-slate-800/30"
-      }`}
-      onClick={() =>
-        editingQuestionId !== q.id && selectQuestion(topicId, q.id)
-      }
-    >
-      {isChild && (
-        <span className="text-slate-600 text-[11px] shrink-0 leading-none select-none mr-0.5">
-          └
-        </span>
-      )}
-      <MessageSquare className="w-3 h-3 text-slate-600 shrink-0" />
-      {editingQuestionId === q.id ? (
-        <input
-          ref={editInputRef}
-          value={editingQuestionTitle}
-          onChange={(e) => setEditingQuestionTitle(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") commitQuestionRename(q.id, topicId);
-            if (e.key === "Escape") setEditingQuestionId(null);
-          }}
-          onBlur={() => commitQuestionRename(q.id, topicId)}
-          onClick={(e) => e.stopPropagation()}
-          className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-xs text-slate-200 focus:outline-none"
-        />
-      ) : (
-        <span
-          className="text-xs text-slate-400 truncate flex-1"
-          onDoubleClick={(e) => {
-            e.stopPropagation();
-            setEditingQuestionId(q.id);
-            setEditingQuestionTitle(q.title);
-          }}
-        >
-          {q.title}
+    depth: number,
+    hasChildren: boolean,
+    isCollapsed: boolean,
+    onToggleCollapse: () => void,
+  ) => {
+    // 12px base left padding + 16px per depth level
+    const paddingLeft = 12 + depth * 16;
+    return (
+      <div
+        key={q.id}
+        className={`group flex items-center gap-1.5 pr-2 py-1 cursor-pointer transition-colors ${
+          selectedQuestionId === q.id
+            ? "bg-cyan-500/10 border-l-2 border-l-cyan-500 -ml-px"
+            : "hover:bg-slate-800/30"
+        }`}
+        style={{ paddingLeft }}
+        onClick={() =>
+          editingQuestionId !== q.id && selectQuestion(topicId, q.id)
+        }
+      >
+        {depth > 0 && (
+          <span className="text-slate-600 text-[11px] shrink-0 leading-none select-none mr-0.5">
+            └
+          </span>
+        )}
+        {hasChildren ? (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapse();
+            }}
+            className="shrink-0 text-slate-500 hover:text-slate-300 p-0.5 -ml-0.5 rounded transition-colors"
+            title={isCollapsed ? "Expand" : "Collapse"}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="w-3 h-3" />
+            ) : (
+              <ChevronDown className="w-3 h-3" />
+            )}
+          </button>
+        ) : (
+          <MessageSquare className="w-3 h-3 text-slate-600 shrink-0" />
+        )}
+        {editingQuestionId === q.id ? (
+          <input
+            ref={editInputRef}
+            value={editingQuestionTitle}
+            onChange={(e) => setEditingQuestionTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitQuestionRename(q.id, topicId);
+              if (e.key === "Escape") setEditingQuestionId(null);
+            }}
+            onBlur={() => commitQuestionRename(q.id, topicId)}
+            onClick={(e) => e.stopPropagation()}
+            className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-xs text-slate-200 focus:outline-none"
+          />
+        ) : (
+          <span
+            className="text-xs text-slate-400 truncate flex-1"
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              setEditingQuestionId(q.id);
+              setEditingQuestionTitle(q.title);
+            }}
+          >
+            {q.title}
+          </span>
+        )}
+        <span className="text-[10px] text-slate-700 shrink-0">
+          {q.messages.length > 0 ? `${q.messages.length}` : ""}
         </span>
-      )}
-      <span className="text-[10px] text-slate-700 shrink-0">
-        {q.messages.length > 0 ? `${q.messages.length}` : ""}
-      </span>
-      {editingQuestionId !== q.id && !isChild && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setAddingChildTo(q.id);
-            setNewChildTitle("");
-          }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-          title="Add child question"
-        >
-          <CornerDownRight className="w-2.5 h-2.5" />
-        </button>
-      )}
-      {editingQuestionId !== q.id && (
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setAddingChildTo(q.id);
+              setNewChildTitle("");
+            }}
+            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+            title="Add child question"
+          >
+            <CornerDownRight className="w-2.5 h-2.5" />
+          </button>
+        )}
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setEditingQuestionId(q.id);
+              setEditingQuestionTitle(q.title);
+            }}
+            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+            title="Rename"
+          >
+            <Pencil className="w-2.5 h-2.5" />
+          </button>
+        )}
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setMovingQuestionId((prev) => (prev === q.id ? null : q.id));
+              setMoveTargetParentId(q.parentQuestionId ?? ROOT_PARENT_VALUE);
+            }}
+            className={`p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all ${
+              movingQuestionId === q.id
+                ? "opacity-100 text-cyan-400"
+                : "text-slate-600 hover:text-cyan-400"
+            }`}
+            title="Move to a different parent"
+          >
+            <ArrowRightLeft className="w-2.5 h-2.5" />
+          </button>
+        )}
         <button
           onClick={(e) => {
             e.stopPropagation();
-            setEditingQuestionId(q.id);
-            setEditingQuestionTitle(q.title);
+            if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
+              removeQuestion(q.id, topicId);
+            }
           }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-          title="Rename"
+          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
         >
-          <Pencil className="w-2.5 h-2.5" />
+          <Trash2 className="w-2.5 h-2.5" />
         </button>
-      )}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
-            removeQuestion(q.id, topicId);
-          }
-        }}
-        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-      >
-        <Trash2 className="w-2.5 h-2.5" />
-      </button>
-    </div>
-  );
+      </div>
+    );
+  };
+
+  // Recursively renders a question and all its descendants.
+  const renderQuestionSubtree = (
+    questions: Question[],
+    topicId: string,
+    parentId: string | null,
+    depth: number,
+  ): React.ReactNode => {
+    const qs = questions.filter(
+      (q) => (q.parentQuestionId ?? null) === parentId,
+    );
+    return qs.map((q) => {
+      const hasChildren = questions.some((c) => c.parentQuestionId === q.id);
+      const isCollapsed = collapsedQuestions.has(q.id);
+      return (
+        <Fragment key={q.id}>
+          {renderQuestionRow(q, topicId, depth, hasChildren, isCollapsed, () =>
+            toggleQuestionCollapse(q.id),
+          )}
+          {/* Add-child input — indented one level deeper than this question */}
+          {addingChildTo === q.id && (
+            <div
+              className="pr-2 py-1 animate-fadeIn"
+              style={{ paddingLeft: 12 + (depth + 1) * 16 }}
+            >
+              <input
+                autoFocus
+                value={newChildTitle}
+                onChange={(e) => setNewChildTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleAddChildQuestion(topicId, q.id);
+                  if (e.key === "Escape") {
+                    setAddingChildTo(null);
+                    setNewChildTitle("");
+                  }
+                }}
+                onBlur={() => {
+                  if (!newChildTitle.trim()) setAddingChildTo(null);
+                }}
+                placeholder="Child question title..."
+                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+              />
+            </div>
+          )}
+          {renderMoveQuestionPicker(questions, q, topicId, depth)}
+          {/* Recurse into children — hidden when collapsed */}
+          {!isCollapsed &&
+            renderQuestionSubtree(questions, topicId, q.id, depth + 1)}
+        </Fragment>
+      );
+    });
+  };
 
   return (
     <aside className="w-72 border-r border-slate-800 flex flex-col bg-slate-900/50 shrink-0">
       {/* Workspace switcher */}
       <WorkspaceSwitcher />
 
+      {/* Workspace-level files — apply to all topics */}
+      <div className="border-b border-slate-800 shrink-0">
+        <button
+          onClick={() => setWsFilesExpanded((v) => !v)}
+          className="w-full flex items-center gap-1.5 px-3 py-1.5 hover:bg-slate-800/40 transition-colors"
+        >
+          {wsFilesExpanded ? (
+            <ChevronDown className="w-3 h-3 text-slate-500 shrink-0" />
+          ) : (
+            <ChevronRight className="w-3 h-3 text-slate-500 shrink-0" />
+          )}
+          <Globe className="w-3 h-3 text-violet-400 shrink-0" />
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-500 flex-1 text-left">
+            Workspace Files
+          </span>
+          {workspaceFiles.length > 0 && (
+            <span className="text-[10px] text-slate-600">
+              {workspaceFiles.length}
+            </span>
+          )}
+        </button>
+        {wsFilesExpanded && (
+          <div className="px-3 pb-2">
+            <FileAttachments
+              files={workspaceFiles}
+              onUpload={(files) => uploadWorkspaceFiles(files)}
+              onRemove={(fileId) => removeWorkspaceFile(fileId)}
+              downloadBase="/api/workspace/context-files"
+              label="workspace"
+            />
+          </div>
+        )}
+      </div>
+
       {/* Header — Drive breadcrumb when inside a subfolder, else normal Topics header */}
       <div className="h-12 border-b border-slate-800 flex items-center justify-between px-3 shrink-0">
         {isDriveWs && currentSubFolder ? (
@@ -482,57 +762,47 @@ export default function Sidebar() {
                           onRemove={(fileId) =>
                             removeTopicFile(topic.id, fileId)
                           }
+                          onLink={(fileId, originalName) =>
+                            linkFileToTopic(topic.id, fileId, originalName)
+                          }
+                          downloadBase={`/api/topics/${topic.id}/context-files`}
                           label="topic"
                           compact
                         />
                       </div>
 
-                      {/* Questions grouped: root → children */}
-                      {(() => {
-                        const rootQs = questions.filter(
-                          (q) => !q.parentQuestionId,
-                        );
-                        return rootQs.map((q) => {
-                          const children = questions.filter(
-                            (c) => c.parentQuestionId === q.id,
-                          );
-                          return (
-                            <Fragment key={q.id}>
-                              {renderQuestionRow(q, topic.id, false)}
-                              {/* Add-child input */}
-                              {addingChildTo === q.id && (
-                                <div className="pl-7 pr-2 py-1 animate-fadeIn">
-                                  <input
-                                    autoFocus
-                                    value={newChildTitle}
-                                    onChange={(e) =>
-                                      setNewChildTitle(e.target.value)
-                                    }
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter")
-                                        handleAddChildQuestion(topic.id, q.id);
-                                      if (e.key === "Escape") {
-                                        setAddingChildTo(null);
-                                        setNewChildTitle("");
-                                      }
-                                    }}
-                                    onBlur={() => {
-                                      if (!newChildTitle.trim())
-                                        setAddingChildTo(null);
-                                    }}
-                                    placeholder="Child question title..."
-                                    className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
-                                  />
-                                </div>
-                              )}
-                              {/* Children */}
-                              {children.map((c) =>
-                                renderQuestionRow(c, topic.id, true),
-                              )}
-                            </Fragment>
-                          );
-                        });
-                      })()}
+                      {/* Topic-wide system prompt */}
+                      <div className="pl-3 pr-2 py-1 border-b border-slate-800/50">
+                        <button
+                          onClick={() => toggleTopicPrompt(topic.id)}
+                          className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-cyan-400 transition-colors w-full"
+                        >
+                          <SlidersHorizontal className="w-3 h-3" />
+                          <span>Topic prompt</span>
+                          <span className="ml-auto flex items-center gap-1">
+                            {topic.systemContext && (
+                              <span className="w-1.5 h-1.5 rounded-full bg-cyan-500" />
+                            )}
+                            <ChevronDown
+                              className={`w-3 h-3 transition-transform ${openTopicPrompts.has(topic.id) ? "" : "-rotate-90"}`}
+                            />
+                          </span>
+                        </button>
+                        {openTopicPrompts.has(topic.id) && (
+                          <textarea
+                            defaultValue={topic.systemContext ?? ""}
+                            onChange={(e) =>
+                              handleTopicPromptChange(topic.id, e.target.value)
+                            }
+                            placeholder="System context added to every question in this topic…"
+                            rows={4}
+                            className="mt-1.5 w-full bg-slate-800/60 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500 resize-y leading-relaxed"
+                          />
+                        )}
+                      </div>
+
+                      {/* Questions — recursive tree (unlimited depth) */}
+                      {renderQuestionSubtree(questions, topic.id, null, 0)}
 
                       {/* Add question input */}
                       {addingQuestionTo === topic.id ? (

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

@@ -12,9 +12,8 @@ interface Props {
   onAnnotationUpdate: (updated: Annotation) => void;
   bookmarkedBlockIndex?: number;
   onBookmarkBlock?: (blockIndex: number) => void;
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
+  onSpecRefined?: (originalSpec: string, newSpec: string) => void;
 }
 
 type Phase = "idle" | "button" | "input" | "loading";
@@ -119,9 +118,8 @@ export default function TextAnnotator({
   onAnnotationUpdate,
   bookmarkedBlockIndex,
   onBookmarkBlock,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  preferenceSuffix,
+  onSpecRefined,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const annotationsRef = useRef(annotations);
@@ -207,9 +205,7 @@ export default function TextAnnotator({
           selectedText,
           prompt: inputValue.trim(),
           messageContent: content,
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();
@@ -248,9 +244,7 @@ export default function TextAnnotator({
           messageContent: content,
           priorResponse: annotation.response,
           followUps: annotation.followUps ?? [],
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();
@@ -288,6 +282,7 @@ export default function TextAnnotator({
         onAnnotationClick={handleAnnotationClick}
         bookmarkedBlockIndex={bookmarkedBlockIndex}
         onBookmarkBlock={onBookmarkBlock}
+        onSpecRefined={onSpecRefined}
       />
 
       {/* Annotation dialog — opened by clicking an underlined annotation link */}
@@ -298,9 +293,7 @@ export default function TextAnnotator({
           onUpdate={onAnnotationUpdate}
           messageContent={content}
           initialPos={dialogPos}
-          responseLength={responseLength}
-          responseStyle={responseStyle}
-          responseAudience={responseAudience}
+          preferenceSuffix={preferenceSuffix}
         />
       )}