combined JobHeader

2026-01-20 11:09:50 +00:00 · 2026-01-20 11:09:50 +00:00 · fde32d2c51
commit fde32d2c51
parent d506966d4c
5 changed files with 117 additions and 140 deletions
--- a/orchestrator/src/client/components/JobHeader.tsx
+++ b/orchestrator/src/client/components/JobHeader.tsx
@ -0,0 +1,90 @@
+import React from "react";
+import { Calendar, DollarSign, MapPin } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn, formatDate, sourceLabel } from "@/lib/utils";
+import type { Job, JobStatus } from "../../shared/types";
+import { defaultStatusToken, statusTokens } from "../pages/orchestrator/constants";
+
+interface JobHeaderProps {
+  job: Job;
+  className?: string;
+}
+
+const StatusPill: React.FC<{ status: JobStatus }> = ({ status }) => {
+  const tokens = statusTokens[status] ?? defaultStatusToken;
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/80",
+      )}
+    >
+      <span className={cn("h-1.5 w-1.5 rounded-full opacity-80", tokens.dot)} />
+      {tokens.label}
+    </span>
+  );
+};
+
+const ScoreMeter: React.FC<{ score: number | null }> = ({ score }) => {
+  if (score == null) {
+    return <span className="text-[10px] text-muted-foreground/60">-</span>;
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/70">
+      <div className="h-1 w-12 rounded-full bg-muted/30">
+        <div
+          className="h-1 rounded-full bg-primary/50"
+          style={{ width: `${Math.max(4, Math.min(100, score))}%` }}
+        />
+      </div>
+      <span className="tabular-nums">{score}</span>
+    </div>
+  );
+};
+
+export const JobHeader: React.FC<JobHeaderProps> = ({ job, className }) => {
+  const deadline = formatDate(job.deadline);
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Detail header: lighter weight than list items */}
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="truncate text-base font-semibold text-foreground/90">{job.title}</div>
+          <div className="text-xs text-muted-foreground">{job.employer}</div>
+        </div>
+        <Badge variant="outline" className="text-[10px] uppercase tracking-wide text-muted-foreground border-border/50">
+          {sourceLabel[job.source]}
+        </Badge>
+      </div>
+
+      {/* Tertiary metadata - subdued */}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground/70">
+        {job.location && (
+          <span className="flex items-center gap-1">
+            <MapPin className="h-3 w-3" />
+            {job.location}
+          </span>
+        )}
+        {deadline && (
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3 w-3" />
+            {deadline}
+          </span>
+        )}
+        {job.salary && (
+          <span className="flex items-center gap-1">
+            <DollarSign className="h-3 w-3" />
+            {job.salary}
+          </span>
+        )}
+      </div>
+
+      {/* Status and score: single line, subdued */}
+      <div className="flex items-center justify-between gap-2 py-1 border-y border-border/30">
+        <StatusPill status={job.status} />
+        <ScoreMeter score={job.suitabilityScore} />
+      </div>
+    </div>
+  );
+};
--- a/orchestrator/src/client/components/ReadyPanel.tsx
+++ b/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 } from ".";
+import { FitAssessment, JobHeader } from ".";
 import type { Job, ResumeProjectCatalogItem } from "../../shared/types";

 interface ReadyPanelProps {
@ -217,6 +217,8 @@ export const ReadyPanel: React.FC<ReadyPanelProps> = ({

  return (
    <div className="flex flex-col h-full">
+      <JobHeader job={job} className="pb-4 border-b border-border/40" />
+
      {/* ─────────────────────────────────────────────────────────────────────
          PRIMARY ACTION CLUSTER
          All actions in one line: View, Save, Open, and Mark Applied
--- a/orchestrator/src/client/components/discovered-panel/DecideMode.tsx
+++ b/orchestrator/src/client/components/discovered-panel/DecideMode.tsx
@ -1,12 +1,10 @@
 import React, { useMemo, useState } from "react";
-import { Calendar, DollarSign, ExternalLink, Loader2, MapPin, Sparkles, XCircle } from "lucide-react";
+import { ExternalLink, Loader2, Sparkles, XCircle } from "lucide-react";

-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";

-import { FitAssessment } from "../FitAssessment";
-import { formatDate, sourceLabel } from "@/lib/utils";
+import { FitAssessment, JobHeader } from "..";
 import type { Job } from "../../../shared/types";
 import { CollapsibleSection } from "./CollapsibleSection";
 import { getPlainDescription } from "./helpers";
@ -25,7 +23,6 @@ export const DecideMode: React.FC<DecideModeProps> = ({
  isSkipping,
 }) => {
  const [showDescription, setShowDescription] = useState(false);
-  const deadline = formatDate(job.deadline);
  const jobLink = job.applicationLink || job.jobUrl;

  const description = useMemo(
@ -35,105 +32,66 @@ export const DecideMode: React.FC<DecideModeProps> = ({

  return (
    <div className='flex flex-col h-full'>
-      <div className='space-y-3 pb-4'>
-        <div className='flex items-start justify-between gap-2'>
-          <div className='min-w-0 flex-1'>
-            <h2 className='text-base font-semibold text-foreground/90 leading-tight'>
-              {job.title}
-            </h2>
-            <p className='text-sm text-muted-foreground mt-0.5'>{job.employer}</p>
-          </div>
+      <div className='space-y-4 pb-4'>
+        <JobHeader job={job} />

-          <div className='flex flex-col items-center justify-center'>
-            <Badge
-              variant='outline'
-              className='text-[10px] uppercase tracking-wide text-muted-foreground border-border/50 shrink-0'
-            >
-              {sourceLabel[job.source]}
-            </Badge>
-          </div>
-        </div>
-
-        {(job.location || deadline || job.salary) && (
-          <div className='flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground/80 justify-between'>
-            {job.location && (
-              <span className='flex items-center gap-1'>
-                <MapPin className='h-3 w-3' />
-                {job.location}
-              </span>
-            )}
-            {deadline && (
-              <span className='flex items-center gap-1'>
-                <Calendar className='h-3 w-3' />
-                {deadline}
-              </span>
-            )}
-            {job.salary && (
-              <span className='flex items-center gap-1'>
-                <DollarSign className='h-3 w-3' />
-                {job.salary}
-              </span>
-            )}
-          </div>
-        )}
-
-        <div className='flex flex-col gap-2 pt-2 sm:flex-row'>
+        <div className='flex flex-col gap-2.5 pt-2 sm:flex-row'>
          <Button
            variant='outline'
            size='default'
            onClick={onSkip}
            disabled={isSkipping}
-            className='flex-1 h-11 text-sm text-muted-foreground hover:text-foreground hover:border-rose-500/30 hover:bg-rose-500/5 sm:h-10 sm:text-xs'
+            className='flex-1 h-11 text-sm text-muted-foreground hover:text-rose-500 hover:border-rose-500/30 hover:bg-rose-500/5 sm:h-10 sm:text-xs'
          >
            {isSkipping ? (
              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
            ) : (
              <XCircle className='mr-2 h-4 w-4' />
            )}
-            Skip
+            Skip Job
          </Button>
          <Button
            size='default'
            onClick={onTailor}
-            className='flex-1 h-11 text-sm bg-primary/90 hover:bg-primary sm:h-10 sm:text-xs'
+            className='flex-1 h-11 text-sm bg-primary/90 hover:bg-primary sm:h-10 sm:text-xs shadow-sm'
          >
            <Sparkles className='mr-2 h-4 w-4' />
-            Tailor
+            Start Tailoring
          </Button>
        </div>
      </div>

-      <Separator className='opacity-50' />
+      <Separator className='opacity-40' />

-      <div className='flex-1 py-4 space-y-4 overflow-y-auto'>
+      <div className='flex-1 py-6 space-y-6 overflow-y-auto'>
        <FitAssessment job={job} />

        <CollapsibleSection
          isOpen={showDescription}
          onToggle={() => setShowDescription((prev) => !prev)}
-          label={`${showDescription ? "Hide" : "View"} full job description`}
+          label={`${showDescription ? "Hide" : "View"} Full Job Description`}
        >
-          <div className='rounded-lg border border-border/40 bg-muted/5 p-3 max-h-[300px] overflow-y-auto'>
-            <p className='text-xs text-muted-foreground/80 whitespace-pre-wrap leading-relaxed'>
+          <div className='rounded-xl border border-border/40 bg-muted/5 p-4 mt-2 max-h-[400px] overflow-y-auto shadow-inner'>
+            <p className='text-xs text-muted-foreground/90 whitespace-pre-wrap leading-relaxed'>
              {description}
            </p>
          </div>
        </CollapsibleSection>
      </div>

-      <Separator className='opacity-50' />
+      <Separator className='opacity-40' />

-      <div className='pt-4 pb-2'>
+      <div className='pt-6 pb-2'>
        {jobLink ? (
          <div className='flex justify-center'>
            <a
              href={jobLink}
              target='_blank'
              rel='noopener noreferrer'
-              className='inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors'
+              className='inline-flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors'
            >
-              <ExternalLink className='h-3 w-3' />
-              View original listing
+              <ExternalLink className='h-3.5 w-3.5' />
+              Original Job Listing
            </a>
          </div>
        ) : null}
@ -141,3 +99,4 @@ export const DecideMode: React.FC<DecideModeProps> = ({
    </div>
  );
 };
+
--- a/orchestrator/src/client/components/index.ts
+++ b/orchestrator/src/client/components/index.ts
@ -2,6 +2,7 @@ export { Header } from './Header';
 export { Stats } from './Stats';
 export { StatusBadge } from './StatusBadge';
 export { ScoreIndicator } from './ScoreIndicator';
+export { JobHeader } from './JobHeader';
 export { FitAssessment } from './FitAssessment';
 export { PipelineProgress } from './PipelineProgress';
 export { TailoringEditor } from './TailoringEditor';
--- a/orchestrator/src/client/pages/orchestrator/JobDetailPanel.tsx
+++ b/orchestrator/src/client/pages/orchestrator/JobDetailPanel.tsx
@ -1,14 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-  Calendar,
  CheckCircle2,
  Copy,
-  DollarSign,
  Edit2,
  ExternalLink,
  FileText,
  Loader2,
-  MapPin,
  MoreHorizontal,
  RefreshCcw,
  Save,
@ -29,9 +26,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import { cn, copyTextToClipboard, formatDate, formatJobForWebhook, sourceLabel, safeFilenamePart, stripHtml } from "@/lib/utils";
+import { cn, copyTextToClipboard, formatJobForWebhook, safeFilenamePart, stripHtml } from "@/lib/utils";

-import { DiscoveredPanel } from "../../components";
+import { DiscoveredPanel, JobHeader } from "../../components";
 import { ReadyPanel } from "../../components/ReadyPanel";
 import { TailoringEditor } from "../../components/TailoringEditor";
 import * as api from "../../api";
@ -48,40 +45,6 @@ interface JobDetailPanelProps {
  onSetActiveTab: (tab: FilterTab) => void;
 }

-// Subdued status pill for inspector panel - not competing with list
-const StatusPill: React.FC<{ status: JobStatus }> = ({ status }) => {
-  const tokens = statusTokens[status] ?? defaultStatusToken;
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/80",
-      )}
-    >
-      <span className={cn("h-1.5 w-1.5 rounded-full opacity-80", tokens.dot)} />
-      {tokens.label}
-    </span>
-  );
-};
-
-// Compact score meter for inspector panel
-const ScoreMeter: React.FC<{ score: number | null }> = ({ score }) => {
-  if (score == null) {
-    return <span className="text-[10px] text-muted-foreground/60">-</span>;
-  }
-
-  return (
-    <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/70">
-      <div className="h-1 w-12 rounded-full bg-muted/30">
-        <div
-          className="h-1 rounded-full bg-primary/50"
-          style={{ width: `${Math.max(4, Math.min(100, score))}%` }}
-        />
-      </div>
-      <span className="tabular-nums">{score}</span>
-    </div>
-  );
-};
-
 export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({
  activeTab,
  activeJobs,
@ -258,7 +221,6 @@ export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({
  const selectedPdfHref = selectedJob
    ? `/pdfs/resume_${selectedJob.id}.pdf?v=${encodeURIComponent(selectedJob.updatedAt)}`
    : "#";
-  const selectedDeadline = selectedJob ? formatDate(selectedJob.deadline) : null;
  const canApply = selectedJob?.status === "ready";
  const canProcess = selectedJob ? ["discovered", "ready"].includes(selectedJob.status) : false;
  const canSkip = selectedJob ? ["discovered", "ready"].includes(selectedJob.status) : false;
@ -309,44 +271,7 @@ export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({

  return (
    <div className="space-y-3">
-      {/* Detail header: lighter weight than list items */}
-      <div className="flex flex-wrap items-start justify-between gap-2">
-        <div className="min-w-0">
-          <div className="truncate text-sm font-semibold text-foreground/90">{selectedJob.title}</div>
-          <div className="text-xs text-muted-foreground">{selectedJob.employer}</div>
-        </div>
-        <Badge variant="outline" className="text-[10px] uppercase tracking-wide text-muted-foreground border-border/50">
-          {sourceLabel[selectedJob.source]}
-        </Badge>
-      </div>
-
-      {/* Tertiary metadata - subdued */}
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground/70">
-        {selectedJob.location && (
-          <span className="flex items-center gap-1">
-            <MapPin className="h-3 w-3" />
-            {selectedJob.location}
-          </span>
-        )}
-        {selectedDeadline && (
-          <span className="flex items-center gap-1">
-            <Calendar className="h-3 w-3" />
-            {selectedDeadline}
-          </span>
-        )}
-        {selectedJob.salary && (
-          <span className="flex items-center gap-1">
-            <DollarSign className="h-3 w-3" />
-            {selectedJob.salary}
-          </span>
-        )}
-      </div>
-
-      {/* Status and score: single line, subdued */}
-      <div className="flex items-center justify-between gap-2 py-1 border-y border-border/30">
-        <StatusPill status={selectedJob.status} />
-        <ScoreMeter score={selectedJob.suitabilityScore} />
-      </div>
+      <JobHeader job={selectedJob} />

      <div className="flex flex-wrap items-center gap-1.5">
        <Button asChild size="sm" variant="ghost" className="h-8 gap-1.5 text-xs">