ghostwriter copy

orchestrator/src/client/components/ghostwriter/GhostwriterDrawer.tsx

@@ -26,36 +26,37 @@ export const GhostwriterDrawer: React.FC<GhostwriterDrawerProps> = ({
   const [open, setOpen] = useState(false);
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet
+      open={open}
+      onOpenChange={setOpen}
+    >
       <SheetTrigger asChild>
         <Button
-          size="sm"
+          size='sm'
-          variant="outline"
+          variant='outline'
           className={cn("h-8 gap-1.5 text-xs", triggerClassName)}
           disabled={!job}
         >
-          <PanelRightOpen className="h-3.5 w-3.5" />
+          <PanelRightOpen className='h-3.5 w-3.5' />
           Ghostwriter
         </Button>
       </SheetTrigger>
 
       <SheetContent
-        side="right"
+        side='right'
-        className="flex w-full flex-col p-0 sm:max-w-none lg:w-[50vw] xl:w-[40vw] 2xl:w-[30vw]"
+        className='flex w-full flex-col p-0 sm:max-w-none lg:w-[50vw] xl:w-[40vw] 2xl:w-[30vw]'
       >
-        <div className="border-b border-border/50 p-4 ">
+        <div className='border-b border-border/50 p-4'>
-          <SheetHeader className="space-y-2">
+          <SheetHeader>
             <SheetTitle>Ghostwriter</SheetTitle>
             <SheetDescription>
-              The Ghostwriter will use the context of this job and your resume,
+              {job && `${job.title} at ${job.employer}.`}
-              along with your writing style to help you craft the perfect
-              message.
             </SheetDescription>
           </SheetHeader>
         </div>
 
         {job && (
-          <div className="flex min-h-0 flex-1 p-4 pt-0">
+          <div className='flex min-h-0 flex-1 p-4 pt-0'>
             <GhostwriterPanel job={job} />
           </div>
         )}

orchestrator/src/client/components/ghostwriter/GhostwriterPanel.tsx

@@ -236,19 +236,32 @@ export const GhostwriterPanel: React.FC<GhostwriterPanelProps> = ({ job }) => {
   }, [isStreaming, job.id, loadMessages, messages, onStreamEvent]);
 
   return (
-    <div className="flex h-full min-h-0 flex-1 flex-col">
+    <div className='flex h-full min-h-0 flex-1 flex-col'>
       <div
         ref={messageListRef}
-        className="min-h-0 flex-1 overflow-y-auto border-b border-border/50 pb-3 pr-1"
+        className='min-h-0 flex-1 overflow-y-auto border-b border-border/50 pb-3 pr-1'
       >
-        <MessageList
+        {messages.length === 0 && !isLoading ? (
-          messages={messages}
+          <div className='flex h-full min-h-[260px] justify-center px-3 flex-col text-left'>
-          isStreaming={isStreaming}
+            <h4 className='font-medium'>
-          streamingMessageId={streamingMessageId}
+              {job.title} at {job.employer}
-        />
+            </h4>
+            <p className='mt-2 text-sm leading-relaxed text-muted-foreground'>
+              Ghostwriter already has this job description, your resume and your writing style preferences. Ask for
+              tailored response drafts, or concise role-fit
+              talking points.
+            </p>
+          </div>
+        ) : (
+          <MessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            streamingMessageId={streamingMessageId}
+          />
+        )}
       </div>
 
-      <div className="mt-4">
+      <div className='mt-4'>
         <Composer
           disabled={isLoading || isStreaming}
           isStreaming={isStreaming}