TailoredSummary component

orchestrator/src/client/components/ReadyPanel.tsx

@@ -41,7 +41,7 @@ import {
 } from "@/components/ui/accordion";
 import { cn, copyTextToClipboard, formatJobForWebhook } from "@/lib/utils";
 import * as api from "../api";
-import { FitAssessment, JobHeader } from ".";
+import { FitAssessment, JobHeader, TailoredSummary } from ".";
 import type { Job, ResumeProjectCatalogItem } from "../../shared/types";
 
 interface ReadyPanelProps {
@@ -95,8 +95,6 @@ export const ReadyPanel: React.FC<ReadyPanelProps> = ({
       .filter(Boolean) as string[];
   }, [catalog, selectedProjectIds]);
 
-  const tailoredSummary = job?.tailoredSummary || null;
-
   // Handle mark as applied with undo capability
   const handleMarkApplied = useCallback(async () => {
     if (!job) return;
@@ -277,18 +275,7 @@ export const ReadyPanel: React.FC<ReadyPanelProps> = ({
         {/* Job identity - confirm this is the right role */}
         <div className="space-y-3">
           <FitAssessment job={job} />
-
-          {/* Tailored summary snippet - shows what's in the PDF */}
-          {tailoredSummary && (
-            <div className="rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5">
-              <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground mb-1.5">
-                Tailored Summary
-              </div>
-              <p className="text-xs text-foreground/80 leading-relaxed italic whitespace-pre-wrap">
-                "{tailoredSummary}"
-              </p>
-            </div>
-          )}
+          <TailoredSummary job={job} />
 
           {/* Project selection - expandable accordion */}
           <Accordion type="single" collapsible className="w-full">

orchestrator/src/client/components/TailoredSummary.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { Job } from "../../shared/types";
+
+interface TailoredSummaryProps {
+  job: Job;
+  className?: string;
+}
+
+export const TailoredSummary: React.FC<TailoredSummaryProps> = ({ job, className }) => {
+  if (!job.tailoredSummary) return null;
+
+  return (
+    <div className={cn("rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5", className)}>
+      <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground mb-1.5">
+        Tailored Summary
+      </div>
+      <p className="text-xs text-foreground/80 leading-relaxed italic whitespace-pre-wrap">
+        "{job.tailoredSummary}"
+      </p>
+    </div>
+  );
+};

orchestrator/src/client/components/discovered-panel/DecideMode.tsx

@@ -4,7 +4,7 @@ import { ExternalLink, Loader2, Sparkles, XCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 
-import { FitAssessment, JobHeader } from "..";
+import { FitAssessment, JobHeader, TailoredSummary } from "..";
 import type { Job } from "../../../shared/types";
 import { CollapsibleSection } from "./CollapsibleSection";
 import { getPlainDescription } from "./helpers";
@@ -65,6 +65,7 @@ export const DecideMode: React.FC<DecideModeProps> = ({
 
       <div className='flex-1 py-6 space-y-6 overflow-y-auto'>
         <FitAssessment job={job} />
+        <TailoredSummary job={job} />
 
         <CollapsibleSection
           isOpen={showDescription}

orchestrator/src/client/components/index.ts

@@ -3,6 +3,7 @@ export { Stats } from './Stats';
 export { StatusBadge } from './StatusBadge';
 export { ScoreIndicator } from './ScoreIndicator';
 export { JobHeader } from './JobHeader';
+export { TailoredSummary } from './TailoredSummary';
 export { FitAssessment } from './FitAssessment';
 export { PipelineProgress } from './PipelineProgress';
 export { TailoringEditor } from './TailoringEditor';

orchestrator/src/client/pages/orchestrator/JobDetailPanel.tsx

@@ -28,7 +28,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { cn, copyTextToClipboard, formatJobForWebhook, safeFilenamePart, stripHtml } from "@/lib/utils";
 
-import { DiscoveredPanel, JobHeader } from "../../components";
+import { DiscoveredPanel, FitAssessment, JobHeader, TailoredSummary } from "../../components";
 import { ReadyPanel } from "../../components/ReadyPanel";
 import { TailoringEditor } from "../../components/TailoringEditor";
 import * as api from "../../api";
@@ -401,11 +401,8 @@ export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({
         </TabsList>
 
         <TabsContent value="overview" className="space-y-3 pt-2">
-          {selectedJob.suitabilityReason && (
-            <div className="rounded border border-border/30 bg-muted/10 px-3 py-2 text-xs text-muted-foreground italic">
-              "{selectedJob.suitabilityReason}"
-            </div>
-          )}
+          <FitAssessment job={selectedJob} />
+          <TailoredSummary job={selectedJob} />
 
           <div className="grid gap-2 text-xs sm:grid-cols-2">
             <div>