ghostwriter panel

orchestrator/src/client/pages/JobPage.tsx

@@ -12,6 +12,7 @@ import {
   CalendarClock,
   ClipboardList,
   DollarSign,
+  PanelRightOpen,
   PlusCircle,
 } from "lucide-react";
 import React from "react";
@@ -20,6 +21,14 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { formatTimestamp } from "@/lib/utils";
 import * as api from "../api";
 import { ConfirmDelete } from "../components/ConfirmDelete";
@@ -40,6 +49,7 @@ export const JobPage: React.FC = () => {
   const [isLoading, setIsLoading] = React.useState(true);
   const [isLogModalOpen, setIsLogModalOpen] = React.useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
+  const [isGhostwriterOpen, setIsGhostwriterOpen] = React.useState(false);
   const [eventToDelete, setEventToDelete] = React.useState<string | null>(null);
   const [editingEvent, setEditingEvent] = React.useState<StageEvent | null>(
     null,
@@ -271,6 +281,7 @@ export const JobPage: React.FC = () => {
           </CardContent>
         </Card>
 
+        <Sheet open={isGhostwriterOpen} onOpenChange={setIsGhostwriterOpen}>
           <div className="space-y-4">
             <Card className="border-border/50">
               <CardHeader>
@@ -279,7 +290,17 @@ export const JobPage: React.FC = () => {
                     <CalendarClock className="h-4 w-4" />
                     Application details
                   </CardTitle>
-                <GhostwriterDrawer job={job} />
+                  <SheetTrigger asChild>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-8 gap-1.5 text-xs"
+                      disabled={!job}
+                    >
+                      <PanelRightOpen className="h-3.5 w-3.5" />
+                      Ghostwriter
+                    </Button>
+                  </SheetTrigger>
                 </div>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -353,8 +374,26 @@ export const JobPage: React.FC = () => {
               </Card>
             )}
 
-          {job && <GhostwriterPanel job={job} />}
+            <SheetContent
+              side="right"
+              className="w-full p-0 sm:max-w-none lg:w-[40vw]"
+            >
+              <div className="h-full overflow-y-auto p-4">
+                <SheetHeader>
+                  <SheetTitle>Ghostwriter</SheetTitle>
+                  <SheetDescription>
+                    Chat with context from this job and your writing style.
+                  </SheetDescription>
+                </SheetHeader>
+                {job && (
+                  <div className="mt-4">
+                    <GhostwriterPanel job={job} />
                   </div>
+                )}
+              </div>
+            </SheetContent>
+          </div>
+        </Sheet>
       </div>
 
       <LogEventModal

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

@@ -7,6 +7,7 @@ import {
   FileText,
   Loader2,
   MoreHorizontal,
+  PanelRightOpen,
   RefreshCcw,
   Save,
   XCircle,
@@ -24,6 +25,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -39,6 +48,7 @@ import {
   JobHeader,
   TailoredSummary,
 } from "../../components";
+import { GhostwriterPanel } from "../../components/ghostwriter/GhostwriterPanel";
 import { JobDetailsEditDrawer } from "../../components/JobDetailsEditDrawer";
 import { ReadyPanel } from "../../components/ReadyPanel";
 import { TailoringEditor } from "../../components/TailoringEditor";
@@ -71,6 +81,7 @@ export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({
   const [hasUnsavedTailoring, setHasUnsavedTailoring] = useState(false);
   const [processingJobId, setProcessingJobId] = useState<string | null>(null);
   const [isEditDetailsOpen, setIsEditDetailsOpen] = useState(false);
+  const [isGhostwriterOpen, setIsGhostwriterOpen] = useState(false);
   const saveTailoringRef = useRef<null | (() => Promise<void>)>(null);
   const previousSelectedJobIdRef = useRef<string | null>(null);
 
@@ -310,23 +321,93 @@ export const JobDetailPanel: React.FC<JobDetailPanelProps> = ({
 
   if (activeTab === "discovered") {
     return (
+      <div className="space-y-3">
+        <div className="flex justify-end">
+          <Sheet open={isGhostwriterOpen} onOpenChange={setIsGhostwriterOpen}>
+            <SheetTrigger asChild>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-8 gap-1.5 text-xs"
+                disabled={!selectedJob}
+              >
+                <PanelRightOpen className="h-3.5 w-3.5" />
+                Ghostwriter
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="w-full p-0 sm:max-w-none lg:w-[40vw]"
+            >
+              <div className="h-full overflow-y-auto p-4">
+                <SheetHeader>
+                  <SheetTitle>Ghostwriter</SheetTitle>
+                  <SheetDescription>
+                    Chat with context from this job and your writing style.
+                  </SheetDescription>
+                </SheetHeader>
+                {selectedJob && (
+                  <div className="mt-4">
+                    <GhostwriterPanel job={selectedJob} />
+                  </div>
+                )}
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
         <DiscoveredPanel
           job={selectedJob}
           onJobUpdated={onJobUpdated}
           onJobMoved={handleJobMoved}
           onTailoringDirtyChange={handleTailoringDirtyChange}
         />
+      </div>
     );
   }
 
   if (activeTab === "ready") {
     return (
+      <div className="space-y-3">
+        <div className="flex justify-end">
+          <Sheet open={isGhostwriterOpen} onOpenChange={setIsGhostwriterOpen}>
+            <SheetTrigger asChild>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-8 gap-1.5 text-xs"
+                disabled={!selectedJob}
+              >
+                <PanelRightOpen className="h-3.5 w-3.5" />
+                Ghostwriter
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="w-full p-0 sm:max-w-none lg:w-[40vw]"
+            >
+              <div className="h-full overflow-y-auto p-4">
+                <SheetHeader>
+                  <SheetTitle>Ghostwriter</SheetTitle>
+                  <SheetDescription>
+                    Chat with context from this job and your writing style.
+                  </SheetDescription>
+                </SheetHeader>
+                {selectedJob && (
+                  <div className="mt-4">
+                    <GhostwriterPanel job={selectedJob} />
+                  </div>
+                )}
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
         <ReadyPanel
           job={selectedJob}
           onJobUpdated={onJobUpdated}
           onJobMoved={handleJobMoved}
           onTailoringDirtyChange={handleTailoringDirtyChange}
         />
+      </div>
     );
   }