feat(security-questionnaire): implement manual answer linking and update questionnaire components

Author: tofikwest

apps/app/src/actions/safe-action.ts

@@ -83,7 +83,18 @@ export const authActionClient = actionClientWithMeta
     const headersList = await headers();
     let remaining: number | undefined;
 
-    if (ratelimit) {
+    // Exclude answer saving actions from rate limiting
+    // These actions are user-initiated and should not be rate limited
+    const excludedActions = [
+      'save-questionnaire-answer',
+      'update-questionnaire-answer',
+      'save-manual-answer',
+      'save-questionnaire-answers-batch',
+    ];
+
+    const shouldRateLimit = !excludedActions.includes(metadata.name);
+
+    if (ratelimit && shouldRateLimit) {
       const { success, remaining: rateLimitRemaining } = await ratelimit.limit(
         `${headersList.get('x-forwarded-for')}-${metadata.name}`,
       );
@@ -282,7 +293,18 @@ export const authActionClientWithoutOrg = actionClientWithMeta
     const headersList = await headers();
     let remaining: number | undefined;
 
-    if (ratelimit) {
+    // Exclude answer saving actions from rate limiting
+    // These actions are user-initiated and should not be rate limited
+    const excludedActions = [
+      'save-questionnaire-answer',
+      'update-questionnaire-answer',
+      'save-manual-answer',
+      'save-questionnaire-answers-batch',
+    ];
+
+    const shouldRateLimit = !excludedActions.includes(metadata.name);
+
+    if (ratelimit && shouldRateLimit) {
       const { success, remaining: rateLimitRemaining } = await ratelimit.limit(
         `${headersList.get('x-forwarded-for')}-${metadata.name}`,
       );

apps/app/src/app/(app)/[orgId]/security-questionnaire/[questionnaireId]/components/QuestionnaireDetailClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { QuestionnaireResults } from '../../components/QuestionnaireResults';
+import { QuestionnaireView } from '../../components/QuestionnaireView';
 import { useQuestionnaireDetail } from '../../hooks/useQuestionnaireDetail';
 
 interface QuestionnaireDetailClientProps {
@@ -33,6 +33,7 @@ export function QuestionnaireDetailClient({
     expandedSources,
     questionStatuses,
     answeringQuestionIndex,
+    answerQueue,
     hasClickedAutoAnswer,
     isLoading,
     isAutoAnswering,
@@ -57,60 +58,52 @@ export function QuestionnaireDetailClient({
   });
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <h1 className="text-xl lg:text-2xl font-semibold text-foreground">{filename}</h1>
-        <p className="text-xs lg:text-sm text-muted-foreground leading-relaxed max-w-3xl">
-          Review and manage answers for this questionnaire
-        </p>
-      </div>
-      <QuestionnaireResults
-        orgId={organizationId}
-        results={results.map((r, index) => ({
-          question: r.question,
-          answer: r.answer,
-          sources: r.sources,
-          failedToGenerate: (r as any).failedToGenerate ?? false, // Preserve failedToGenerate from result
-          status: (r as any).status ?? 'untouched', // Preserve status field for UI behavior
-          _originalIndex: (r as any).originalIndex ?? index, // Preserve originalIndex for reference, fallback to map index
-        }))}
-        filteredResults={filteredResults?.map((r, index) => ({
-          question: r.question,
-          answer: r.answer,
-          sources: r.sources,
-          failedToGenerate: (r as any).failedToGenerate ?? false, // Preserve failedToGenerate from result
-          status: (r as any).status ?? 'untouched', // Preserve status field for UI behavior
-          _originalIndex: (r as any).originalIndex ?? index, // Preserve originalIndex for reference, fallback to map index
-        }))}
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        editingIndex={editingIndex}
-        editingAnswer={editingAnswer}
-        onEditingAnswerChange={setEditingAnswer}
-        expandedSources={expandedSources}
-        questionStatuses={questionStatuses}
-        answeringQuestionIndex={answeringQuestionIndex}
-        hasClickedAutoAnswer={hasClickedAutoAnswer}
-        isLoading={isLoading}
-        isAutoAnswering={isAutoAnswering}
-        isExporting={isExporting}
-        isSaving={isSaving}
-        savingIndex={savingIndex}
-        showExitDialog={false}
-        onShowExitDialogChange={() => {}}
-        onExit={() => {}}
-        onAutoAnswer={handleAutoAnswer}
-        onAnswerSingleQuestion={handleAnswerSingleQuestion}
-        onEditAnswer={handleEditAnswer}
-        onSaveAnswer={handleSaveAnswer}
-        onCancelEdit={handleCancelEdit}
-        onExport={handleExport}
-        onToggleSource={handleToggleSource}
-        totalCount={totalCount}
-        answeredCount={answeredCount}
-        progressPercentage={progressPercentage}
-      />
-    </div>
+    <QuestionnaireView
+      orgId={organizationId}
+      results={results.map((r, index) => ({
+        question: r.question,
+        answer: r.answer,
+        sources: r.sources,
+        failedToGenerate: (r as any).failedToGenerate ?? false,
+        status: (r as any).status ?? 'untouched',
+        _originalIndex: (r as any).originalIndex ?? index,
+      }))}
+      filteredResults={filteredResults?.map((r, index) => ({
+        question: r.question,
+        answer: r.answer,
+        sources: r.sources,
+        failedToGenerate: (r as any).failedToGenerate ?? false,
+        status: (r as any).status ?? 'untouched',
+        _originalIndex: (r as any).originalIndex ?? index,
+      }))}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      editingIndex={editingIndex}
+      editingAnswer={editingAnswer}
+      setEditingAnswer={setEditingAnswer}
+      expandedSources={expandedSources}
+      questionStatuses={questionStatuses as Map<number, 'pending' | 'processing' | 'completed'>}
+      answeringQuestionIndex={answeringQuestionIndex}
+      answerQueue={answerQueue}
+      hasClickedAutoAnswer={hasClickedAutoAnswer}
+      isLoading={isLoading}
+      isAutoAnswering={isAutoAnswering}
+      isExporting={isExporting}
+      isSaving={isSaving}
+      savingIndex={savingIndex}
+      totalCount={totalCount}
+      answeredCount={answeredCount}
+      progressPercentage={progressPercentage}
+      onAutoAnswer={handleAutoAnswer}
+      onAnswerSingleQuestion={handleAnswerSingleQuestion}
+      onEditAnswer={handleEditAnswer}
+      onSaveAnswer={handleSaveAnswer}
+      onCancelEdit={handleCancelEdit}
+      onExport={handleExport}
+      onToggleSource={handleToggleSource}
+      filename={filename}
+      description="Review and manage answers for this questionnaire"
+    />
   );
 }
 

apps/app/src/app/(app)/[orgId]/security-questionnaire/[questionnaireId]/page.tsx

@@ -2,8 +2,6 @@ import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import { auth } from '@/utils/auth';
 import { headers } from 'next/headers';
 import { notFound } from 'next/navigation';
-import { QuestionnaireResults } from '../components/QuestionnaireResults';
-import { useQuestionnaireDetail } from '../hooks/useQuestionnaireDetail';
 import { getQuestionnaireById } from './data/queries';
 import { QuestionnaireDetailClient } from './components/QuestionnaireDetailClient';
 

apps/app/src/app/(app)/[orgId]/security-questionnaire/actions/save-answer.ts

@@ -90,8 +90,10 @@ export const saveAnswerAction = authActionClient
           },
         });
 
-        // If status is manual and answer exists, also save to SecurityQuestionnaireManualAnswer
-        if (status === 'manual' && answer && answer.trim().length > 0 && existingQuestion.question) {
+        const shouldPersistManualAnswer =
+          status === 'manual' && answer && answer.trim().length > 0 && existingQuestion.question;
+
+        if (shouldPersistManualAnswer) {
           try {
             const manualAnswer = await db.securityQuestionnaireManualAnswer.upsert({
               where: {

apps/app/src/app/(app)/[orgId]/security-questionnaire/actions/update-questionnaire-answer.ts

@@ -12,6 +12,19 @@ const updateAnswerSchema = z.object({
   questionnaireId: z.string(),
   questionAnswerId: z.string(),
   answer: z.string(),
+  status: z.enum(['generated', 'manual']).optional().default('manual'),
+  sources: z
+    .array(
+      z.object({
+        sourceType: z.string(),
+        sourceName: z.string().optional(),
+        sourceId: z.string().optional(),
+        policyName: z.string().optional(),
+        documentName: z.string().optional(),
+        score: z.number(),
+      }),
+    )
+    .optional(),
 });
 
 export const updateQuestionnaireAnswer = authActionClient
@@ -25,7 +38,7 @@ export const updateQuestionnaireAnswer = authActionClient
     },
   })
   .action(async ({ parsedInput, ctx }) => {
-    const { questionnaireId, questionAnswerId, answer } = parsedInput;
+    const { questionnaireId, questionAnswerId, answer, status, sources } = parsedInput;
     const { activeOrganizationId } = ctx.session;
     const userId = ctx.user.id;
 
@@ -67,21 +80,28 @@ export const updateQuestionnaireAnswer = authActionClient
         };
       }
 
+      // Store the previous status to determine if this was written from scratch
+      const previousStatus = questionAnswer.status;
+
       // Update the answer
       await db.questionnaireQuestionAnswer.update({
         where: {
           id: questionAnswerId,
         },
         data: {
           answer: answer.trim() || null,
-          status: 'manual',
-          updatedBy: userId || null,
+          status: status === 'generated' ? 'generated' : 'manual',
+          sources: sources ? (sources as any) : null,
+          generatedAt: status === 'generated' ? new Date() : null,
+          updatedBy: status === 'manual' ? userId || null : null,
           updatedAt: new Date(),
         },
       });
 
-      // Also save to SecurityQuestionnaireManualAnswer if answer exists
-      if (answer && answer.trim().length > 0 && questionAnswer.question) {
+      const shouldPersistManualAnswer =
+        status === 'manual' && answer && answer.trim().length > 0 && questionAnswer.question;
+
+      if (shouldPersistManualAnswer) {
         try {
           const manualAnswer = await db.securityQuestionnaireManualAnswer.upsert({
             where: {

apps/app/src/app/(app)/[orgId]/security-questionnaire/components/ManualAnswerLink.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { LinkIcon } from 'lucide-react';
+import Link from 'next/link';
+
+interface ManualAnswerLinkProps {
+  manualAnswerId: string;
+  sourceName: string;
+  orgId: string;
+  className?: string;
+}
+
+export function ManualAnswerLink({
+  manualAnswerId,
+  sourceName,
+  orgId,
+  className = 'font-medium text-primary hover:underline inline-flex items-center gap-1',
+}: ManualAnswerLinkProps) {
+  // Link to knowledge base page with hash anchor to scroll to specific manual answer
+  const knowledgeBaseUrl = `/${orgId}/security-questionnaire/knowledge-base#manual-answer-${manualAnswerId}`;
+
+  return (
+    <Link
+      href={knowledgeBaseUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+    >
+      {sourceName}
+      <LinkIcon className="h-3 w-3" />
+    </Link>
+  );
+}
+