From 08dbd5f5a2b8dbc563329ae56e8f721733b335eb Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Thu, 4 Dec 2025 09:25:31 -0600
Subject: [PATCH] Add word count strength indicator for form text fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements a traffic light indicator beneath paragraph fields to guide users
on content adequacy. Shows red (<33%), yellow (33-99%), or green (≥100%) based
on word count progress toward minimum targets.

Fields updated:
- Research Brief: 150 words minimum
- Discussion Topics: 15 words minimum
- Audience Brief: 150 words minimum
- Research Objective: 150 words minimum

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ai-recruiter/AIRecruiterForm.tsx          |  5 ++-
 .../focus-group-session/SetupTab.tsx          |  3 ++
 src/components/ui/InputStrengthIndicator.tsx  | 44 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/InputStrengthIndicator.tsx

diff --git a/src/components/ai-recruiter/AIRecruiterForm.tsx b/src/components/ai-recruiter/AIRecruiterForm.tsx
index 232a0f18..84731201 100644
--- a/src/components/ai-recruiter/AIRecruiterForm.tsx
+++ b/src/components/ai-recruiter/AIRecruiterForm.tsx
@@ -42,6 +42,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { FieldTooltip } from "@/components/ui/field-tooltip";
+import { InputStrengthIndicator } from "@/components/ui/InputStrengthIndicator";
 
 export const formSchema = z.object({
   audienceBrief: z.string().min(10, {
@@ -184,6 +185,7 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
                       {...field}
                     />
                   </FormControl>
+                  <InputStrengthIndicator text={field.value || ""} minWords={150} />
                   <FormMessage />
                 </FormItem>
               )}
@@ -208,11 +210,12 @@ export default function AIRecruiterForm({ onSubmit, isGenerating }: AIRecruiterF
                       {...field}
                     />
                   </FormControl>
+                  <InputStrengthIndicator text={field.value || ""} minWords={150} />
                   <FormMessage />
                 </FormItem>
               )}
             />
-            
+
             {/* Enhance Brief Button */}
             <div className="space-y-3">
               <Button
diff --git a/src/components/focus-group-session/SetupTab.tsx b/src/components/focus-group-session/SetupTab.tsx
index 1dee0b93..8b1d1023 100644
--- a/src/components/focus-group-session/SetupTab.tsx
+++ b/src/components/focus-group-session/SetupTab.tsx
@@ -24,6 +24,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import AssetUploader from '@/components/AssetUploader';
+import { InputStrengthIndicator } from "@/components/ui/InputStrengthIndicator";
 
 interface SetupTabProps {
   form: UseFormReturn<any>;
@@ -81,6 +82,7 @@ export function SetupTab({
                       {...field}
                     />
                   </FormControl>
+                  <InputStrengthIndicator text={field.value || ""} minWords={150} />
                   <FormDescription>
                     Provide context about what you want to learn
                   </FormDescription>
@@ -103,6 +105,7 @@ export function SetupTab({
                         {...field}
                       />
                     </FormControl>
+                    <InputStrengthIndicator text={field.value || ""} minWords={15} />
                     <FormDescription>
                       E.g., User experience, feature preferences, pain points
                     </FormDescription>
diff --git a/src/components/ui/InputStrengthIndicator.tsx b/src/components/ui/InputStrengthIndicator.tsx
new file mode 100644
index 00000000..ca7ef053
--- /dev/null
+++ b/src/components/ui/InputStrengthIndicator.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface InputStrengthIndicatorProps {
+  text: string;
+  minWords: number;
+  className?: string;
+}
+
+export function InputStrengthIndicator({
+  text,
+  minWords,
+  className
+}: InputStrengthIndicatorProps) {
+  const wordCount = text.trim() ? text.trim().split(/\s+/).filter(Boolean).length : 0;
+  const percentage = (wordCount / minWords) * 100;
+
+  const getState = () => {
+    if (percentage >= 100) return { level: 3, label: "Good length", color: "bg-green-500" };
+    if (percentage >= 33) return { level: 2, label: "Getting there", color: "bg-yellow-500" };
+    return { level: 1, label: "Add more detail", color: "bg-red-500" };
+  };
+
+  const state = getState();
+
+  return (
+    <div className={cn("flex items-center gap-2 mt-1.5 text-xs text-muted-foreground", className)}>
+      <div className="flex gap-1">
+        {[1, 2, 3].map((dot) => (
+          <div
+            key={dot}
+            className={cn(
+              "w-2 h-2 rounded-full",
+              dot <= state.level ? state.color : "bg-muted"
+            )}
+          />
+        ))}
+      </div>
+      <span>{wordCount} / {minWords} words</span>
+      <span className="text-muted-foreground/70">·</span>
+      <span>{state.label}</span>
+    </div>
+  );
+}