Merge pull request #54 from saagpatel/codex/refactor/wave5-7-draft-tab

refactor(components): extract 4 DraftTab hooks (Wave 5.7 Phase A part 1)

Author: saagpatel

src/components/Draft/DraftTab.tsx

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useDraftApproval } from "./useDraftApproval";
+
+function makeOptions(
+  overrides: Partial<Parameters<typeof useDraftApproval>[0]> = {},
+) {
+  return {
+    searchKb: vi.fn().mockResolvedValue([]),
+    generateWithContextParams: vi
+      .fn()
+      .mockResolvedValue({ text: "summary", sources: [] }),
+    modelLoaded: true,
+    onShowError: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("useDraftApproval", () => {
+  it("sets an error when searching with an empty query", async () => {
+    const options = makeOptions();
+    const { result } = renderHook(() => useDraftApproval(options));
+
+    await act(async () => {
+      await result.current.handleApprovalSearch();
+    });
+
+    expect(result.current.approvalError).toMatch(/enter a search term/i);
+    expect(options.searchKb).not.toHaveBeenCalled();
+  });
+
+  it("stores results from a successful approval search", async () => {
+    const searchKb = vi
+      .fn()
+      .mockResolvedValue([
+        { id: "kb-1", title: "Approval Policy", snippet: "..." },
+      ]);
+    const options = makeOptions({ searchKb });
+    const { result } = renderHook(() => useDraftApproval(options));
+
+    act(() => {
+      result.current.setApprovalQuery("password reset");
+    });
+
+    await act(async () => {
+      await result.current.handleApprovalSearch();
+    });
+
+    expect(searchKb).toHaveBeenCalledWith("password reset", 5);
+    expect(result.current.approvalResults).toHaveLength(1);
+    expect(result.current.approvalError).toBeNull();
+  });
+
+  it("blocks summarize when no model is loaded and surfaces a toast error", async () => {
+    const onShowError = vi.fn();
+    const options = makeOptions({ modelLoaded: false, onShowError });
+    const { result } = renderHook(() => useDraftApproval(options));
+
+    act(() => {
+      result.current.setApprovalQuery("vpn access");
+    });
+
+    await act(async () => {
+      await result.current.handleApprovalSummarize();
+    });
+
+    expect(onShowError).toHaveBeenCalledWith(
+      expect.stringContaining("No model loaded"),
+    );
+    expect(options.generateWithContextParams).not.toHaveBeenCalled();
+  });
+});

src/components/Draft/useDraftApproval.test.ts

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from "react";
+import type { ContextSource, SearchResult } from "../../types/knowledge";
+
+interface UseDraftApprovalOptions {
+  searchKb: (query: string, limit: number) => Promise<SearchResult[]>;
+  generateWithContextParams: (params: {
+    user_input: string;
+    kb_limit: number;
+    response_length: "Short" | "Medium" | "Long";
+  }) => Promise<{ text: string; sources: ContextSource[] }>;
+  modelLoaded: boolean;
+  onShowError: (message: string) => void;
+}
+
+export function useDraftApproval({
+  searchKb,
+  generateWithContextParams,
+  modelLoaded,
+  onShowError,
+}: UseDraftApprovalOptions) {
+  const [approvalQuery, setApprovalQuery] = useState("");
+  const [approvalResults, setApprovalResults] = useState<SearchResult[]>([]);
+  const [approvalSearching, setApprovalSearching] = useState(false);
+  const [approvalSummary, setApprovalSummary] = useState("");
+  const [approvalSummarizing, setApprovalSummarizing] = useState(false);
+  const [approvalSources, setApprovalSources] = useState<ContextSource[]>([]);
+  const [approvalError, setApprovalError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!approvalQuery.trim()) {
+      setApprovalResults([]);
+      setApprovalSummary("");
+      setApprovalSources([]);
+      setApprovalError(null);
+    }
+  }, [approvalQuery]);
+
+  const handleApprovalSearch = useCallback(async () => {
+    if (!approvalQuery.trim()) {
+      setApprovalError("Enter a search term to look up approvals.");
+      return;
+    }
+
+    setApprovalSearching(true);
+    setApprovalError(null);
+    try {
+      const results = await searchKb(approvalQuery.trim(), 5);
+      setApprovalResults(results);
+    } catch (e) {
+      console.error("Approval search failed:", e);
+      setApprovalError("Approval search failed.");
+    } finally {
+      setApprovalSearching(false);
+    }
+  }, [approvalQuery, searchKb]);
+
+  const handleApprovalSummarize = useCallback(async () => {
+    if (!approvalQuery.trim()) {
+      setApprovalError("Enter a search term to summarize approvals.");
+      return;
+    }
+
+    if (!modelLoaded) {
+      onShowError("No model loaded. Go to Settings to load a model.");
+      return;
+    }
+
+    setApprovalSummarizing(true);
+    setApprovalError(null);
+    try {
+      const prompt = `Summarize the approval steps and owner(s) for: ${approvalQuery.trim()}. Keep it concise. If sources do not mention it, say so.`;
+      const result = await generateWithContextParams({
+        user_input: prompt,
+        kb_limit: 5,
+        response_length: "Short",
+      });
+
+      setApprovalSummary(result.text);
+      setApprovalSources(result.sources);
+    } catch (e) {
+      console.error("Approval summary failed:", e);
+      setApprovalError("Approval summary failed.");
+    } finally {
+      setApprovalSummarizing(false);
+    }
+  }, [approvalQuery, modelLoaded, generateWithContextParams, onShowError]);
+
+  const resetApproval = useCallback(() => {
+    setApprovalQuery("");
+    setApprovalResults([]);
+    setApprovalSummary("");
+    setApprovalSources([]);
+    setApprovalError(null);
+    setApprovalSearching(false);
+    setApprovalSummarizing(false);
+  }, []);
+
+  return {
+    approvalQuery,
+    setApprovalQuery,
+    approvalResults,
+    setApprovalResults,
+    approvalSearching,
+    approvalSummary,
+    setApprovalSummary,
+    approvalSummarizing,
+    approvalSources,
+    setApprovalSources,
+    approvalError,
+    setApprovalError,
+    handleApprovalSearch,
+    handleApprovalSummarize,
+    resetApproval,
+  };
+}

src/components/Draft/useDraftApproval.ts

@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useDraftChecklist } from "./useDraftChecklist";
+
+function makeOptions(
+  overrides: Partial<Parameters<typeof useDraftChecklist>[0]> = {},
+) {
+  return {
+    input: "user vpn disconnects",
+    ocrText: null,
+    diagnosticNotes: "",
+    treeResult: null,
+    currentTicket: null,
+    modelLoaded: true,
+    generateChecklist: vi
+      .fn()
+      .mockResolvedValue({ items: [{ id: "a", label: "Ping gateway" }] }),
+    updateChecklist: vi
+      .fn()
+      .mockResolvedValue({ items: [{ id: "a", label: "Ping gateway" }] }),
+    onShowError: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("useDraftChecklist", () => {
+  it("generates a checklist and stores items", async () => {
+    const options = makeOptions();
+    const { result } = renderHook(() => useDraftChecklist(options));
+
+    await act(async () => {
+      await result.current.handleChecklistGenerate();
+    });
+
+    expect(options.generateChecklist).toHaveBeenCalledWith(
+      expect.objectContaining({ user_input: "user vpn disconnects" }),
+    );
+    expect(result.current.checklistItems).toHaveLength(1);
+    expect(result.current.checklistError).toBeNull();
+  });
+
+  it("sets a local error when prompt input is empty", async () => {
+    const options = makeOptions({
+      input: "",
+      ocrText: null,
+      currentTicket: null,
+    });
+    const { result } = renderHook(() => useDraftChecklist(options));
+
+    await act(async () => {
+      await result.current.handleChecklistGenerate();
+    });
+
+    expect(result.current.checklistError).toMatch(
+      /add ticket details or notes/i,
+    );
+    expect(options.generateChecklist).not.toHaveBeenCalled();
+  });
+
+  it("toggles completion state per id", () => {
+    const { result } = renderHook(() => useDraftChecklist(makeOptions()));
+
+    act(() => {
+      result.current.handleChecklistToggle("a");
+    });
+    expect(result.current.checklistCompleted).toEqual({ a: true });
+
+    act(() => {
+      result.current.handleChecklistToggle("a");
+    });
+    expect(result.current.checklistCompleted).toEqual({ a: false });
+  });
+});