Show pending summary state

Render a centered generating state for empty enhanced notes before summary text streams.

Author: ComputelessComputer

apps/desktop/src/session/components/note-input/enhanced/index.test.tsx

@@ -0,0 +1,115 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { Enhanced } from "./index";
+
+import type { LLMConnectionStatus } from "~/ai/hooks";
+
+const hoisted = vi.hoisted(() => ({
+  task: {
+    status: "idle",
+    error: undefined as Error | undefined,
+    streamedText: "",
+    currentStep: undefined as unknown,
+    isGenerating: false,
+  },
+  llmStatus: {
+    status: "success",
+    providerId: "hyprnote",
+    isHosted: true,
+  } as LLMConnectionStatus,
+  content: "",
+}));
+
+vi.mock("streamdown", () => ({
+  Streamdown: ({ children }: { children: string }) => <div>{children}</div>,
+}));
+
+vi.mock("@hypr/ui/components/ui/spinner", () => ({
+  Spinner: () => <span data-testid="spinner" />,
+}));
+
+vi.mock("~/ai/hooks", () => ({
+  useAITaskTask: () => ({
+    status: hoisted.task.status,
+    error: hoisted.task.error,
+    streamedText: hoisted.task.streamedText,
+    currentStep: hoisted.task.currentStep,
+    isGenerating: hoisted.task.isGenerating,
+  }),
+  useLLMConnectionStatus: () => hoisted.llmStatus,
+}));
+
+vi.mock("~/store/tinybase/store/main", () => ({
+  STORE_ID: "main",
+  UI: {
+    useCell: () => hoisted.content,
+  },
+}));
+
+vi.mock("./config-error", () => ({
+  ConfigError: () => <div>Config error</div>,
+}));
+
+vi.mock("./editor", () => ({
+  EnhancedEditor: () => <div>Enhanced editor</div>,
+}));
+
+vi.mock("./enhance-error", () => ({
+  EnhanceError: () => <div>Enhance error</div>,
+}));
+
+describe("Enhanced", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    hoisted.task = {
+      status: "idle",
+      error: undefined,
+      streamedText: "",
+      currentStep: undefined,
+      isGenerating: false,
+    };
+    hoisted.llmStatus = {
+      status: "success",
+      providerId: "hyprnote",
+      isHosted: true,
+    };
+    hoisted.content = "";
+  });
+
+  it("shows an interim summary state while an empty note is waiting to stream", () => {
+    render(<Enhanced sessionId="session-1" enhancedNoteId="note-1" />);
+
+    expect(screen.getByRole("status").textContent).toContain(
+      "Preparing summary...",
+    );
+    expect(screen.getByRole("status").textContent).toContain(
+      "Tip: The Anarlog team loves our users!",
+    );
+    expect(screen.queryByText("Enhanced editor")).toBeNull();
+  });
+
+  it("keeps config errors ahead of the empty interim state", () => {
+    hoisted.llmStatus = { status: "pending", reason: "missing_provider" };
+
+    render(<Enhanced sessionId="session-1" enhancedNoteId="note-1" />);
+
+    expect(screen.getByText("Config error")).not.toBeNull();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
+  it("renders the editor when the enhanced note already has content", () => {
+    hoisted.content = JSON.stringify({
+      type: "doc",
+      content: [{ type: "paragraph", content: [{ type: "text", text: "Hi" }] }],
+    });
+
+    render(<Enhanced sessionId="session-1" enhancedNoteId="note-1" />);
+
+    expect(screen.getByText("Enhanced editor")).not.toBeNull();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+});

apps/desktop/src/session/components/note-input/enhanced/index.tsx

@@ -53,8 +53,13 @@ export const Enhanced = forwardRef<
     );
   }
 
-  if (status === "generating") {
-    return <StreamingView enhancedNoteId={enhancedNoteId} />;
+  if (status === "generating" || (!hasContent && status === "idle")) {
+    return (
+      <StreamingView
+        enhancedNoteId={enhancedNoteId}
+        pending={status === "idle"}
+      />
+    );
   }
 
   return (

apps/desktop/src/session/components/note-input/enhanced/streaming.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
 import { Streamdown } from "streamdown";
 
+import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { cn } from "@hypr/utils";
 
 import { streamdownComponents } from "../../streamdown";
@@ -9,34 +9,54 @@ import { useAITaskTask } from "~/ai/hooks";
 import { createTaskId } from "~/store/zustand/ai-task/task-configs";
 import { type TaskStepInfo } from "~/store/zustand/ai-task/tasks";
 
-export function StreamingView({ enhancedNoteId }: { enhancedNoteId: string }) {
+export function StreamingView({
+  enhancedNoteId,
+  pending = false,
+}: {
+  enhancedNoteId: string;
+  pending?: boolean;
+}) {
   const taskId = createTaskId(enhancedNoteId, "enhance");
   const { streamedText, currentStep, isGenerating } = useAITaskTask(
     taskId,
     "enhance",
   );
 
   const step = currentStep as TaskStepInfo<"enhance"> | undefined;
-  const hasContent = streamedText.length > 0;
+  const hasContent = streamedText.trim().length > 0;
   let statusText: string | null = null;
   if (isGenerating && !hasContent) {
     if (step?.type === "analyzing") {
-      statusText = "Analyzing structure...";
+      statusText = "Analyzing transcript...";
     } else if (step?.type === "generating") {
-      statusText = "Generating...";
+      statusText = "Writing summary...";
     } else if (step?.type === "retrying") {
       statusText = `Retrying (attempt ${step.attempt})...`;
     } else {
-      statusText = "Loading...";
+      statusText = "Preparing summary...";
     }
+  } else if (pending && !hasContent) {
+    statusText = "Preparing summary...";
   }
 
   return (
     <div className="pb-2">
       {statusText ? (
-        <div className="flex flex-col gap-1">
-          <p className="text-muted-foreground text-sm">{statusText}</p>
-          <RotatingTip />
+        <div
+          role="status"
+          aria-live="polite"
+          className="flex min-h-[260px] flex-col items-center justify-center gap-2 text-center"
+        >
+          <Spinner size={16} />
+          <div className="flex flex-col gap-1">
+            <p className="text-foreground text-sm font-medium">{statusText}</p>
+            <p className="text-muted-foreground text-xs">
+              The summary will appear here as soon as it starts streaming.
+            </p>
+            <p className="text-muted-foreground text-xs">
+              Tip: The Anarlog team loves our users!
+            </p>
+          </div>
         </div>
       ) : (
         <div className="flex flex-col gap-1">
@@ -53,22 +73,3 @@ export function StreamingView({ enhancedNoteId }: { enhancedNoteId: string }) {
     </div>
   );
 }
-
-const TIPS = ["The Anarlog team loves our users!"];
-
-function RotatingTip() {
-  const [index, setIndex] = useState(() =>
-    Math.floor(Math.random() * TIPS.length),
-  );
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setIndex((i) => (i + 1) % TIPS.length);
-    }, 5_000);
-    return () => clearInterval(id);
-  }, []);
-
-  return (
-    <p className="text-muted-foreground pl-3 text-xs">└ Tip: {TIPS[index]}</p>
-  );
-}