fix(desktop): improve transcript copy and chat placement

Add a transcript copy action to the expanded transcript panel and anchor the floating chat panel to the right side of the note surface.

Author: ComputelessComputer

apps/desktop/src/chat/components/persistent-chat.test.tsx

@@ -66,7 +66,7 @@ describe("PersistentChatPanel", () => {
     } as typeof ResizeObserver;
   });
 
-  it("anchors the floating panel to the bottom FAB line", async () => {
+  it("anchors the floating panel to the bottom-right of the note surface", async () => {
     render(<TestHost />);
 
     await screen.findByTestId("chat-view");
@@ -76,8 +76,8 @@ describe("PersistentChatPanel", () => {
 
     await waitFor(() => {
       expect(resizeFrame?.className).toContain("items-end");
-      expect(resizeFrame?.className).toContain("justify-center");
-      expect(panel?.style.transformOrigin).toBe("bottom center");
+      expect(resizeFrame?.className).toContain("justify-end");
+      expect(panel?.style.transformOrigin).toBe("bottom right");
     });
   });
 

apps/desktop/src/chat/components/persistent-chat.tsx

@@ -228,7 +228,7 @@ export function PersistentChatPanel({
           minHeight: "min(320px, calc(100% - 1rem))",
           maxWidth: "calc(100% - 2rem)",
           maxHeight: "calc(100% - 1rem)",
-          transformOrigin: "bottom center",
+          transformOrigin: "bottom right",
         };
 
   const handleResizeStart = (
@@ -326,7 +326,7 @@ export function PersistentChatPanel({
               "pointer-events-auto relative flex h-full min-h-0",
               isExpanded
                 ? "items-stretch justify-center p-0"
-                : "items-end justify-center p-4",
+                : "items-end justify-end p-4",
             ])}
             onClick={(event) => {
               if (!isExpanded && event.target === event.currentTarget) {
@@ -430,7 +430,7 @@ function getFloatingPanelStyle(
   return {
     width: `${clampedSize.width}px`,
     height: `${clampedSize.height}px`,
-    transformOrigin: "bottom center",
+    transformOrigin: "bottom right",
   };
 }
 

apps/desktop/src/session/components/bottom-accessory/post-session.test.tsx

@@ -14,15 +14,23 @@ const {
   useTranscriptScreenMock,
   useRunBatchMock,
   useListenerMock,
+  useTranscriptExportSegmentsMock,
   runBatchMock,
   handleBatchFailedMock,
+  writeTextMock,
+  toastSuccessMock,
+  toastErrorMock,
 } = vi.hoisted(() => ({
   audioPathMock: vi.fn(),
   useTranscriptScreenMock: vi.fn(),
   useRunBatchMock: vi.fn(),
   useListenerMock: vi.fn(),
+  useTranscriptExportSegmentsMock: vi.fn(),
   runBatchMock: vi.fn(),
   handleBatchFailedMock: vi.fn(),
+  writeTextMock: vi.fn(),
+  toastSuccessMock: vi.fn(),
+  toastErrorMock: vi.fn(),
 }));
 
 vi.mock("@hypr/plugin-fs-sync", () => ({
@@ -44,6 +52,13 @@ vi.mock("@hypr/ui/components/ui/spinner", () => ({
   Spinner: () => <div data-testid="spinner" />,
 }));
 
+vi.mock("@hypr/ui/components/ui/toast", () => ({
+  sonnerToast: {
+    success: toastSuccessMock,
+    error: toastErrorMock,
+  },
+}));
+
 vi.mock("@hypr/ui/components/ui/tooltip", () => ({
   Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
   TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
@@ -73,6 +88,16 @@ vi.mock("~/session/components/note-input/transcript", () => ({
   Transcript: () => <div data-testid="transcript" />,
 }));
 
+vi.mock("~/session/components/note-input/transcript/export-data", () => ({
+  useTranscriptExportSegments: useTranscriptExportSegmentsMock,
+  formatTranscriptExportSegments: (
+    segments: Array<{ speaker: string | null; text: string }>,
+  ) =>
+    segments
+      .map((segment) => `${segment.speaker ?? "Speaker"}: ${segment.text}`)
+      .join("\n\n"),
+}));
+
 vi.mock("~/session/components/note-input/transcript/state", () => ({
   useTranscriptScreen: useTranscriptScreenMock,
 }));
@@ -97,6 +122,12 @@ describe("PostSessionAccessory", () => {
   beforeEach(() => {
     cleanup();
     vi.clearAllMocks();
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: {
+        writeText: writeTextMock,
+      },
+    });
 
     audioPathMock.mockResolvedValue({
       status: "ok",
@@ -109,7 +140,15 @@ describe("PostSessionAccessory", () => {
       liveSegments: [],
       currentActive: false,
     });
+    useTranscriptExportSegmentsMock.mockReturnValue({
+      data: [
+        { speaker: "Alex", text: "We should ship this." },
+        { speaker: null, text: "Agreed." },
+      ],
+      isLoading: false,
+    });
 
+    writeTextMock.mockResolvedValue(undefined);
     runBatchMock.mockResolvedValue(undefined);
     useRunBatchMock.mockReturnValue(runBatchMock);
 
@@ -141,6 +180,28 @@ describe("PostSessionAccessory", () => {
     expect(handleBatchFailedMock).not.toHaveBeenCalled();
   });
 
+  it("copies transcript text from the expanded transcript panel", async () => {
+    render(
+      <PostSessionAccessory
+        sessionId="session-1"
+        hasAudio
+        hasTranscript
+        isTranscriptExpanded
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Copy transcript" }));
+
+    await waitFor(() => {
+      expect(writeTextMock).toHaveBeenCalledWith(
+        "Alex: We should ship this.\n\nSpeaker: Agreed.",
+      );
+    });
+    expect(toastSuccessMock).toHaveBeenCalledWith(
+      "Transcript copied to clipboard",
+    );
+  });
+
   it("shows Regenerate button without upload or reserved height in empty panel", async () => {
     useTranscriptScreenMock.mockReturnValue({
       kind: "ready",

apps/desktop/src/session/components/bottom-accessory/post-session.tsx

@@ -1,4 +1,5 @@
 import {
+  CopyIcon,
   Loader2Icon,
   Pencil,
   RefreshCw,
@@ -10,6 +11,7 @@ import { type ReactNode, useCallback, useRef } from "react";
 import { commands as fsSyncCommands } from "@hypr/plugin-fs-sync";
 import { Button } from "@hypr/ui/components/ui/button";
 import { Spinner } from "@hypr/ui/components/ui/spinner";
+import { sonnerToast } from "@hypr/ui/components/ui/toast";
 import {
   Tooltip,
   TooltipContent,
@@ -20,6 +22,10 @@ import { cn } from "@hypr/utils";
 import * as AudioPlayer from "~/audio-player";
 import { getEnhancerService } from "~/services/enhancer";
 import { Transcript } from "~/session/components/note-input/transcript";
+import {
+  formatTranscriptExportSegments,
+  useTranscriptExportSegments,
+} from "~/session/components/note-input/transcript/export-data";
 import { useTranscriptScreen } from "~/session/components/note-input/transcript/state";
 import { useListener } from "~/stt/contexts";
 import { isStoppedTranscriptionError, useRunBatch } from "~/stt/useRunBatch";
@@ -395,8 +401,19 @@ function TranscriptReadyPanel({
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const regenerate = useRegenerateTranscript(sessionId);
+  const { data: transcriptSegments, isLoading: isTranscriptLoading } =
+    useTranscriptExportSegments(sessionId);
   const { audioExists, deleteRecording, isDeletingRecording } =
     AudioPlayer.useAudioPlayer();
+  const transcriptText = formatTranscriptExportSegments(transcriptSegments);
+  const canCopyTranscript = transcriptText.length > 0 && !isTranscriptLoading;
+  const handleCopyTranscript = useCallback(() => {
+    if (!canCopyTranscript) {
+      return;
+    }
+
+    void copyTranscriptToClipboard(transcriptText);
+  }, [canCopyTranscript, transcriptText]);
 
   if (!isExpanded) {
     return null;
@@ -425,6 +442,22 @@ function TranscriptReadyPanel({
               <p>Coming soon</p>
             </TooltipContent>
           </Tooltip>
+          <button
+            type="button"
+            onClick={handleCopyTranscript}
+            disabled={!canCopyTranscript}
+            aria-label="Copy transcript"
+            className={cn([
+              "flex items-center gap-1 rounded-full px-1.5 py-0.5",
+              "text-[11px] font-medium text-neutral-500",
+              "transition-colors hover:bg-neutral-200/60 hover:text-neutral-700",
+              "disabled:cursor-not-allowed disabled:text-neutral-300",
+              "disabled:hover:bg-transparent disabled:hover:text-neutral-300",
+            ])}
+          >
+            <CopyIcon size={10} />
+            {isTranscriptLoading ? "Loading..." : "Copy"}
+          </button>
           <button
             type="button"
             onClick={regenerate}
@@ -467,6 +500,16 @@ function TranscriptReadyPanel({
   );
 }
 
+async function copyTranscriptToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    sonnerToast.success("Transcript copied to clipboard");
+  } catch (error) {
+    console.error("Failed to copy transcript", error);
+    sonnerToast.error("Failed to copy transcript");
+  }
+}
+
 function TranscriptEmptyPanel({
   sessionId,
   hasAudio,