← back to karthikjanagiraman__WritingCoach

Function bodies 269 total

LessonPage function · typescript · L24-L323 (300 LOC)

src/app/lesson/[id]/page.tsx

export default function LessonPage() {
  const router = useRouter();
  const params = useParams();
  const lessonId = params.id as string;
  const { activeChild } = useActiveChild();

  const [sessionId, setSessionId] = useState<string | null>(null);
  const [currentPhase, setCurrentPhase] = useState<Phase>("instruction");
  const [messages, setMessages] = useState<Message[]>([]);
  const [lessonData, setLessonData] = useState<LessonDetailResponse | null>(null);
  const [assessmentResult, setAssessmentResult] = useState<AssessmentResult | null>(null);
  const [submittedText, setSubmittedText] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [transition, setTransition] = useState<"instruction" | "guided" | null>(null);
  const [newBadges, setNewBadges] = useState<string[]>([]);
  const [isCompletedReview, setIsCompletedReview] = useState(false);
  cons

init function · typescript · L52-L85 (34 LOC)

src/app/lesson/[id]/page.tsx

    async function init() {
      try {
        const [detail, session] = await Promise.all([
          getLessonDetail(lessonId),
          startLesson(activeChild!.id, lessonId),
        ]);

        if (cancelled) return;

        setLessonData(detail);
        setSessionId(session.sessionId);

        // If lesson was already completed, show the feedback summary
        const sessionAny = session as any;
        if (sessionAny.completed && sessionAny.assessment) {
          setAssessmentResult(sessionAny.assessment);
          setSubmittedText(sessionAny.submittedText ?? "");
          setCurrentPhase("feedback");
          setIsCompletedReview(true);
        } else if (session.resumed) {
          setMessages(session.conversationHistory);
          setCurrentPhase(session.phase);
        } else {
          setMessages([session.initialPrompt]);
          setCurrentPhase("instruction");
        }
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error

countWords function · typescript · L24-L26 (3 LOC)

src/app/placement/[childId]/page.tsx

function countWords(text: string): number {
  return text.trim().split(/\s+/).filter(Boolean).length;
}

PlacementAssessmentPage function · typescript · L30-L374 (345 LOC)

src/app/placement/[childId]/page.tsx

export default function PlacementAssessmentPage() {
  const { childId } = useParams<{ childId: string }>();
  const router = useRouter();
  const { status } = useSession();

  // Preserved state from original implementation
  const [child, setChild] = useState<ChildInfo | null>(null);
  const [prompts, setPrompts] = useState<string[]>([]);
  const [responses, setResponses] = useState<string[]>(["", "", ""]);
  const [step, setStep] = useState(0);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");

  // New quest UI state
  const [showIntro, setShowIntro] = useState(true);
  const [completedTrials, setCompletedTrials] = useState<Set<number>>(
    new Set()
  );
  const [showCelebration, setShowCelebration] = useState(false);
  const [showFinale, setShowFinale] = useState(false);
  const [cardTransitioning, setC

handleResponseChange function · typescript · L191-L198 (8 LOC)

src/app/placement/[childId]/page.tsx

  function handleResponseChange(value: string) {
    setResponses((prev) => {
      const updated = [...prev];
      updated[step] = value;
      return updated;
    });
    debouncedSave();
  }

handleSubmitToAPI function · typescript · L200-L228 (29 LOC)

src/app/placement/[childId]/page.tsx

  async function handleSubmitToAPI() {
    // Flush any pending save
    if (saveTimerRef.current) {
      clearTimeout(saveTimerRef.current);
      saveTimerRef.current = null;
    }

    setSubmitting(true);
    setError(null);

    try {
      const res = await fetch("/api/placement/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ childId, prompts, responses }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to submit assessment");
      }

      router.push(`/placement/${childId}/results`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
      setSubmitting(false);
      setShowFinale(false);
    }
  }

handleTrialSubmit function · typescript · L230-L238 (9 LOC)

src/app/placement/[childId]/page.tsx

  function handleTrialSubmit() {
    const currentStep = step;

    // Mark trial as completed
    setCompletedTrials((prev) => new Set(prev).add(currentStep));

    // Show celebration
    setShowCelebration(true);
  }

handleTierOverride function · typescript · L90-L111 (22 LOC)

src/app/placement/[childId]/results/page.tsx

  async function handleTierOverride(tier: number) {
    setOverriding(true);
    setError(null);

    try {
      const res = await fetch(`/api/placement/${childId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ assignedTier: tier }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Failed to update tier");
      }

      router.push(`/curriculum/${childId}/setup`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong");
      setOverriding(false);
    }
  }

handleAccept function · typescript · L113-L115 (3 LOC)

src/app/placement/[childId]/results/page.tsx

  function handleAccept() {
    router.push(`/curriculum/${childId}/setup`);
  }

ScoreBadge function · typescript · L29-L43 (15 LOC)

src/app/portfolio/[childId]/page.tsx

function ScoreBadge({ score }: { score: number }) {
  let colorClass = "bg-orange-100 text-orange-700";
  if (score >= 3.5) {
    colorClass = "bg-green-100 text-green-700";
  } else if (score >= 2.5) {
    colorClass = "bg-amber-100 text-amber-700";
  }
  return (
    <span
      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold ${colorClass}`}
    >
      {score.toFixed(1)}/4.0
    </span>
  );
}

SubmissionCard function · typescript · L45-L174 (130 LOC)

src/app/portfolio/[childId]/page.tsx

function SubmissionCard({ submission }: { submission: PortfolioSubmission }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-[#FF6B6B]/10 overflow-hidden transition-all duration-200">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full text-left p-5 hover:bg-[#FFF9F0]/50 transition-colors"
      >
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-3 flex-1 min-w-0">
            <span className="text-2xl flex-shrink-0">
              {TYPE_ICONS[submission.lessonType] || "\uD83D\uDCC4"}
            </span>
            <div className="min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="text-sm font-bold text-[#2D3436] truncate">
                  {submission.lessonTitle}
                </h3>
                {submission.revisionNumber > 0 && (

PortfolioPage function · typescript · L176-L366 (191 LOC)

src/app/portfolio/[childId]/page.tsx

export default function PortfolioPage() {
  const { childId } = useParams<{ childId: string }>();
  const router = useRouter();

  const [submissions, setSubmissions] = useState<PortfolioSubmission[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [activeFilter, setActiveFilter] = useState("all");
  const [sort, setSort] = useState("newest");

  const limit = 10;

  const fetchPortfolio = useCallback(
    async (pageNum: number, append: boolean) => {
      if (!childId) return;
      try {
        if (append) {
          setLoadingMore(true);
        } else {
          setLoading(true);
        }
        const typeParam =
          activeFilter === "all" ? undefined : activeFilter;
        const data = await getPortfolio(childId, {
          page: pageNum,
          limit,

AssessmentPhase function · typescript · L31-L226 (196 LOC)

src/components/AssessmentPhase.tsx

export default function AssessmentPhase({
  lessonTitle,
  onSubmit,
  submitting = false,
  qualityError,
  rubric,
}: AssessmentPhaseProps) {
  const { coachName } = useTier();
  const [writingText, setWritingText] = useState("");
  const [showConfirm, setShowConfirm] = useState(false);
  const [checkedItems, setCheckedItems] = useState<Record<number, boolean>>({});

  // Use rubric data if available, otherwise fall back to defaults
  const requirements =
    rubric?.criteria.map((c) => c.displayName) || defaultTask.requirements;
  const wordRange = rubric
    ? { min: rubric.wordRange[0], max: rubric.wordRange[1] }
    : defaultTask.wordRange;

  const wordCount = writingText
    .trim()
    .split(/\s+/)
    .filter((w) => w.length > 0).length;

  const canSubmit = wordCount >= wordRange.min;

  const toggleCheck = (index: number) => {
    setCheckedItems((prev) => ({ ...prev, [index]: !prev[index] }));
  };

  // Natural-language word count message
  const wordCountMessage = (() =

CelebrationOverlay function · typescript · L11-L120 (110 LOC)

src/components/CelebrationOverlay.tsx

export default function CelebrationOverlay({
  badges,
  onDismiss,
}: CelebrationOverlayProps) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Fire confetti on mount
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });

    // Second burst for extra celebration
    const timer = setTimeout(() => {
      confetti({
        particleCount: 50,
        spread: 100,
        origin: { y: 0.5 },
      });
    }, 300);

    // Trigger entrance animation
    requestAnimationFrame(() => setVisible(true));

    return () => clearTimeout(timer);
  }, []);

  const handleDismiss = () => {
    setVisible(false);
    setTimeout(onDismiss, 200);
  };

  return (
    <div
      className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${
        visible ? "bg-black/50" : "bg-black/0"
      }`}
      onClick={handleDismiss}
    >
      <div
        className={`bg-white rounded-3xl shadow-2xl max

ActivityHeatmap function · typescript · L16-L202 (187 LOC)

src/components/charts/ActivityHeatmap.tsx

export default function ActivityHeatmap({ data }: ActivityHeatmapProps) {
  const [primaryColor, setPrimaryColor] = useState("#FF6B6B");

  useEffect(() => {
    const color = getComputedStyle(document.documentElement)
      .getPropertyValue("--color-active-primary")
      .trim();
    if (color) setPrimaryColor(color);
  }, []);

  // Build a map of date string -> count
  const countMap = useMemo(() => {
    const map = new Map<string, number>();
    for (const item of data) {
      map.set(item.date, item.count);
    }
    return map;
  }, [data]);

  // Generate grid: last ~90 days aligned to week boundaries
  const { weeks, monthLabels } = useMemo(() => {
    const today = new Date();
    const start = startOfWeek(subDays(today, 89), { weekStartsOn: 0 });
    const allDays = eachDayOfInterval({ start, end: today });

    // Group into weeks (columns)
    const weeksArr: { date: Date; dateStr: string; count: number }[][] = [];
    let currentWeek: { date: Date; dateStr: string; cou

Repobility · MCP-ready · https://repobility.com

getCellColor function · typescript · L78-L83 (6 LOC)

src/components/charts/ActivityHeatmap.tsx

  function getCellColor(count: number): string {
    if (count === 0) return "#f3f4f6"; // gray-100
    if (count === 1) return `${primaryColor}40`; // 25% opacity
    if (count === 2) return `${primaryColor}80`; // 50% opacity
    return `${primaryColor}cc`; // 80% opacity for 3+
  }

capitalize function · typescript · L26-L28 (3 LOC)

src/components/charts/ScoreTrendChart.tsx

function capitalize(s: string): string {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

ScoreTrendChart function · typescript · L30-L114 (85 LOC)

src/components/charts/ScoreTrendChart.tsx

export default function ScoreTrendChart({ data }: ScoreTrendChartProps) {
  const [primaryColor, setPrimaryColor] = useState("#FF6B6B");

  useEffect(() => {
    const color = getComputedStyle(document.documentElement)
      .getPropertyValue("--color-active-primary")
      .trim();
    if (color) setPrimaryColor(color);
  }, []);

  if (!data || data.length === 0) {
    return (
      <div className="bg-white rounded-2xl p-6 shadow-sm border border-active-primary/10 flex flex-col items-center justify-center min-h-[240px]">
        <span className="text-4xl mb-3">{"📊"}</span>
        <p className="text-sm font-semibold text-active-text/60 text-center">
          Complete an assessment to see score trends!
        </p>
      </div>
    );
  }

  const chartData = data.map((d) => ({
    ...d,
    label: capitalize(d.type),
    subtitle: `${d.count} ${d.count === 1 ? "lesson" : "lessons"}`,
  }));

  return (
    <div className="bg-white rounded-2xl p-5 shadow-sm border border-active-prim

stripLeadingMascot function · typescript · L106-L108 (3 LOC)

src/components/CoachMessage.tsx

function stripLeadingMascot(text: string): string {
  return text.replace(/^(?:🦉|🦊|🐺)\s*/, "");
}

CoachMessage function · typescript · L110-L136 (27 LOC)

src/components/CoachMessage.tsx

export default function CoachMessage({ content, isNew, onTypingComplete, completeRef }: CoachMessageProps) {
  const cleaned = stripLeadingMascot(content);
  const { displayedText, isTyping, complete } = useTypingEffect(cleaned, !!isNew);

  // Expose complete() so parent can instant-finish the animation
  useEffect(() => {
    if (completeRef) completeRef.current = complete;
  }, [complete, completeRef]);

  // Notify parent when typing finishes
  useEffect(() => {
    if (!isTyping && displayedText === cleaned && onTypingComplete) {
      onTypingComplete();
    }
  }, [isTyping, displayedText, cleaned, onTypingComplete]);

  return (
    <div className="coach-message text-[0.95rem] leading-relaxed">
      <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
        {displayedText}
      </ReactMarkdown>
      {isTyping && (
        <span className="inline-block w-[2px] h-[1em] bg-active-text/40 animate-pulse align-text-bottom ml-0.5" />
      )}
    </div>
  )

StarRating function · typescript · L21-L69 (49 LOC)

src/components/FeedbackView.tsx

function StarRating({
  score,
  maxScore = 4,
  size = "lg",
  animate = false,
}: {
  score: number;
  maxScore?: number;
  size?: "sm" | "lg";
  animate?: boolean;
}) {
  // Round to nearest 0.5
  const rounded = Math.round(score * 2) / 2;
  const starSize = size === "lg" ? "text-3xl" : "text-base";

  return (
    <span className="inline-flex items-center gap-0.5">
      {Array.from({ length: maxScore }, (_, i) => {
        const isFull = i < Math.floor(rounded);
        const isHalf = !isFull && i < rounded;

        return (
          <span
            key={i}
            className={`${starSize} ${
              animate ? `animate-star-pop stagger-${i + 1}` : ""
            }`}
          >
            {isFull ? (
              "\u2B50"
            ) : isHalf ? (
              <span className="relative inline-block">
                <span className="text-inherit opacity-30">{"\u2B50"}</span>
                <span
                  className="absolute inset-0 overflow-hidden"

FeedbackCard function · typescript · L71-L102 (32 LOC)

src/components/FeedbackView.tsx

function FeedbackCard({
  icon,
  title,
  text,
  variant,
}: {
  icon: string;
  title: string;
  text: string;
  variant: "success" | "growth";
}) {
  const styles = {
    success:
      "from-active-secondary/10 to-active-secondary/5 border-active-secondary/20",
    growth: "from-active-accent/10 to-active-accent/5 border-active-accent/20",
  };
  const titleColors = {
    success: "text-active-secondary",
    growth: "text-active-text",
  };

  return (
    <div className={`bg-gradient-to-br ${styles[variant]} rounded-2xl p-5 border`}>
      <h3
        className={`font-bold ${titleColors[variant]} mb-2 flex items-center gap-2`}
      >
        <span className="text-xl">{icon}</span> {title}
      </h3>
      <p className="text-active-text/80 text-[15px] leading-relaxed">{text}</p>
    </div>
  );
}

ScoreComparison function · typescript · L104-L138 (35 LOC)

src/components/FeedbackView.tsx

function ScoreComparison({
  criterion,
  previous,
  current,
}: {
  criterion: string;
  previous: number;
  current: number;
}) {
  const diff = current - previous;
  const improved = diff > 0;
  const same = diff === 0;

  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-sm font-semibold text-active-text capitalize flex-shrink-0">
        {criterion.replace(/_/g, " ")}
      </span>
      <div className="flex items-center gap-2">
        <StarRating score={previous} size="sm" />
        <span className="text-active-text/40">{"\u2192"}</span>
        <StarRating score={current} size="sm" />
        {!same && (
          <span
            className={`text-xs font-bold ${
              improved ? "text-green-500" : "text-active-primary"
            }`}
          >
            {improved ? `+${diff.toFixed(1)}` : diff.toFixed(1)}
          </span>
        )}
      </div>
    </div>
  );
}

All rows above produced by Repobility · https://repobility.com

parseWritingPrompt function · typescript · L44-L47 (4 LOC)