Skip to content

Commit 4752f6f

Browse files
saagpatelsaagpatel
authored
Merge pull request #51 from saagpatel/codex/refactor/wave5-4-queue-command-center
refactor(features): decompose QueueCommandCenterPage into hooks + helpers
2 parents 99871d8 + fb301d2 commit 4752f6f

10 files changed

Lines changed: 1347 additions & 522 deletions

‎src/features/revamp/screens/QueueCommandCenterPage.tsx‎

Lines changed: 104 additions & 522 deletions
Large diffs are not rendered by default.

‎src/features/revamp/screens/queueHelpers.test.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { describe, expect, it } from "vitest";
2+
import { bandLabel, formatTicketLabel, truncate } from "./queueHelpers";
3+
import type { QueueItem } from "../../inbox/queueModel";
4+
import type { SavedDraft } from "../../../types/workspace";
5+
6+
function makeItem(
7+
state: QueueItem["meta"]["state"],
8+
owner: string,
9+
isAtRisk = false,
10+
): QueueItem {
11+
return {
12+
draft: { id: "d", ticket_id: null } as unknown as SavedDraft,
13+
meta: {
14+
owner,
15+
state,
16+
priority: "normal",
17+
updatedAt: "2026-04-01T00:00:00Z",
18+
},
19+
slaDueAt: "2026-04-02T00:00:00Z",
20+
isAtRisk,
21+
} as QueueItem;
22+
}
23+
24+
describe("formatTicketLabel", () => {
25+
it("prefers the ticket id when present", () => {
26+
expect(
27+
formatTicketLabel({
28+
id: "abc12345678",
29+
ticket_id: "INC-42",
30+
} as SavedDraft),
31+
).toBe("INC-42");
32+
});
33+
34+
it("falls back to a truncated draft id when there is no ticket id", () => {
35+
expect(
36+
formatTicketLabel({
37+
id: "abcdef0123456789",
38+
ticket_id: null,
39+
} as SavedDraft),
40+
).toBe("Draft abcdef01");
41+
});
42+
});
43+
44+
describe("truncate", () => {
45+
it("returns the original string when under the limit", () => {
46+
expect(truncate("short", 10)).toBe("short");
47+
});
48+
49+
it("adds an ellipsis when over the limit", () => {
50+
expect(truncate("abcdefghij", 5)).toBe("abcde...");
51+
});
52+
});
53+
54+
describe("bandLabel", () => {
55+
it("resolves the band from meta.state + owner + isAtRisk in priority order", () => {
56+
expect(bandLabel(makeItem("resolved", "alice"))).toBe("Resolved");
57+
expect(bandLabel(makeItem("open", "alice", true))).toBe("At Risk");
58+
expect(bandLabel(makeItem("open", "unassigned"))).toBe("Unassigned");
59+
expect(bandLabel(makeItem("in_progress", "alice"))).toBe("In Progress");
60+
expect(bandLabel(makeItem("open", "alice"))).toBe("Open");
61+
});
62+
});

‎src/features/revamp/screens/queueHelpers.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { QueueItem, QueueView } from "../../inbox/queueModel";
2+
import type { SavedDraft } from "../../../types/workspace";
3+
4+
export const QUEUE_OPERATOR_STORAGE_KEY = "assistsupport.queue.operator";
5+
export const QUEUE_VIEW_STORAGE_KEY = "assistsupport.queue.favorite-view";
6+
7+
export function formatTicketLabel(draft: SavedDraft): string {
8+
return draft.ticket_id?.trim() || `Draft ${draft.id.slice(0, 8)}`;
9+
}
10+
11+
export function truncate(value: string, limit: number): string {
12+
if (value.length <= limit) return value;
13+
return `${value.slice(0, limit)}...`;
14+
}
15+
16+
export function loadOperatorName(): string {
17+
if (typeof window === "undefined") return "current-operator";
18+
try {
19+
return (
20+
localStorage.getItem(QUEUE_OPERATOR_STORAGE_KEY) || "current-operator"
21+
);
22+
} catch {
23+
return "current-operator";
24+
}
25+
}
26+
27+
export function loadPreferredQueueView(): QueueView {
28+
if (typeof window === "undefined") return "all";
29+
try {
30+
const stored = localStorage.getItem(QUEUE_VIEW_STORAGE_KEY);
31+
if (
32+
stored === "all" ||
33+
stored === "unassigned" ||
34+
stored === "at_risk" ||
35+
stored === "in_progress" ||
36+
stored === "resolved"
37+
) {
38+
return stored;
39+
}
40+
} catch {
41+
// Keep queue usable even when storage is unavailable.
42+
}
43+
return "all";
44+
}
45+
46+
export function bandLabel(
47+
item: QueueItem,
48+
): "At Risk" | "Unassigned" | "In Progress" | "Open" | "Resolved" {
49+
if (item.meta.state === "resolved") return "Resolved";
50+
if (item.isAtRisk) return "At Risk";
51+
if (item.meta.owner === "unassigned") return "Unassigned";
52+
if (item.meta.state === "in_progress") return "In Progress";
53+
return "Open";
54+
}

‎src/features/revamp/screens/useBatchTriageManager.test.ts‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// @vitest-environment jsdom
2+
import { act, renderHook, waitFor } from "@testing-library/react";
3+
import { afterEach, describe, expect, it, vi } from "vitest";
4+
import { useBatchTriageManager } from "./useBatchTriageManager";
5+
import type { QueueItem } from "../../inbox/queueModel";
6+
import type { SavedDraft } from "../../../types/workspace";
7+
8+
function makeItem(id: string, summary: string): QueueItem {
9+
return {
10+
draft: {
11+
id,
12+
ticket_id: `INC-${id}`,
13+
summary_text: summary,
14+
input_text: summary,
15+
} as unknown as SavedDraft,
16+
meta: {
17+
owner: "alice",
18+
state: "open",
19+
priority: "normal",
20+
updatedAt: "2026-04-01T00:00:00Z",
21+
},
22+
slaDueAt: "2026-04-02T00:00:00Z",
23+
isAtRisk: false,
24+
} as QueueItem;
25+
}
26+
27+
afterEach(() => {
28+
vi.clearAllMocks();
29+
});
30+
31+
describe("useBatchTriageManager", () => {
32+
it("seeds the input from the first 25 filtered items", () => {
33+
const { result } = renderHook(() =>
34+
useBatchTriageManager({
35+
filteredItems: [
36+
makeItem("1", "VPN down"),
37+
makeItem("2", "Password reset"),
38+
],
39+
operatorName: "alice",
40+
clusterTicketsForTriage: vi.fn(),
41+
listRecentTriageClusters: vi.fn(async () => []),
42+
setTriageHistory: vi.fn(),
43+
logEvent: vi.fn(),
44+
showSuccess: vi.fn(),
45+
showError: vi.fn(),
46+
}),
47+
);
48+
49+
act(() => result.current.handleSeedBatchTriage());
50+
51+
expect(result.current.batchTriageInput).toBe(
52+
"INC-1|VPN down\nINC-2|Password reset",
53+
);
54+
});
55+
56+
it("clusters tickets, refreshes history, and logs success", async () => {
57+
const cluster = vi.fn(async () => [
58+
{
59+
cluster_key: "outage",
60+
summary: "VPN outage",
61+
ticket_count: 1,
62+
ticket_ids: ["INC-1"],
63+
},
64+
]);
65+
const listRecent = vi.fn(async () => [
66+
{
67+
id: "c1",
68+
cluster_key: "outage",
69+
summary: "VPN outage",
70+
ticket_count: 2,
71+
} as unknown as never,
72+
]);
73+
const setTriageHistory = vi.fn();
74+
const showSuccess = vi.fn();
75+
const showError = vi.fn();
76+
77+
const { result } = renderHook(() =>
78+
useBatchTriageManager({
79+
filteredItems: [],
80+
operatorName: "alice",
81+
clusterTicketsForTriage: cluster as never,
82+
listRecentTriageClusters: listRecent as never,
83+
setTriageHistory,
84+
logEvent: vi.fn(),
85+
showSuccess,
86+
showError,
87+
}),
88+
);
89+
90+
act(() => {
91+
result.current.setBatchTriageInput("INC-1|VPN outage");
92+
});
93+
94+
await act(async () => {
95+
await result.current.handleRunBatchTriage();
96+
});
97+
98+
await waitFor(() => {
99+
expect(setTriageHistory).toHaveBeenCalled();
100+
});
101+
expect(cluster).toHaveBeenCalledWith([
102+
expect.objectContaining({ id: "INC-1", summary: "VPN outage" }),
103+
]);
104+
expect(showSuccess).toHaveBeenCalledWith("Batch triage completed");
105+
expect(showError).not.toHaveBeenCalled();
106+
});
107+
108+
it("surfaces an error when the input is empty", async () => {
109+
const showError = vi.fn();
110+
const cluster = vi.fn();
111+
112+
const { result } = renderHook(() =>
113+
useBatchTriageManager({
114+
filteredItems: [],
115+
operatorName: "alice",
116+
clusterTicketsForTriage: cluster as never,
117+
listRecentTriageClusters: vi.fn(async () => []),
118+
setTriageHistory: vi.fn(),
119+
logEvent: vi.fn(),
120+
showSuccess: vi.fn(),
121+
showError,
122+
}),
123+
);
124+
125+
await act(async () => {
126+
await result.current.handleRunBatchTriage();
127+
});
128+
129+
expect(showError).toHaveBeenCalledWith(
130+
"Add at least one ticket before running batch triage",
131+
);
132+
expect(cluster).not.toHaveBeenCalled();
133+
});
134+
});

‎src/features/revamp/screens/useBatchTriageManager.ts‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { useCallback, useState } from "react";
2+
import type { TriageClusterRecord } from "../../../types/queue";
3+
import type {
4+
TriageClusterOutput,
5+
TriageTicketInput,
6+
} from "../../../hooks/useQueueOps";
7+
import type { QueueItem } from "../../inbox/queueModel";
8+
import {
9+
formatBatchTriageOutput,
10+
parseBatchTriageInput,
11+
} from "../../inbox/queueCommandCenterHelpers";
12+
import { formatTicketLabel } from "./queueHelpers";
13+
14+
interface UseBatchTriageManagerArgs {
15+
filteredItems: QueueItem[];
16+
operatorName: string;
17+
clusterTicketsForTriage: (
18+
tickets: TriageTicketInput[],
19+
) => Promise<TriageClusterOutput[]>;
20+
listRecentTriageClusters: (limit?: number) => Promise<TriageClusterRecord[]>;
21+
setTriageHistory: React.Dispatch<React.SetStateAction<TriageClusterRecord[]>>;
22+
logEvent: (
23+
eventName: string,
24+
properties?: Record<string, unknown>,
25+
) => Promise<unknown> | unknown;
26+
showSuccess: (msg: string) => void;
27+
showError: (msg: string) => void;
28+
}
29+
30+
export interface UseBatchTriageManagerResult {
31+
batchTriageInput: string;
32+
setBatchTriageInput: React.Dispatch<React.SetStateAction<string>>;
33+
batchTriageOutput: string;
34+
batchTriageBusy: boolean;
35+
handleSeedBatchTriage: () => void;
36+
handleRunBatchTriage: () => Promise<void>;
37+
}
38+
39+
export function useBatchTriageManager({
40+
filteredItems,
41+
operatorName,
42+
clusterTicketsForTriage,
43+
listRecentTriageClusters,
44+
setTriageHistory,
45+
logEvent,
46+
showSuccess,
47+
showError,
48+
}: UseBatchTriageManagerArgs): UseBatchTriageManagerResult {
49+
const [batchTriageInput, setBatchTriageInput] = useState("");
50+
const [batchTriageOutput, setBatchTriageOutput] = useState("");
51+
const [batchTriageBusy, setBatchTriageBusy] = useState(false);
52+
53+
const handleSeedBatchTriage = useCallback(() => {
54+
const nextInput = filteredItems
55+
.slice(0, 25)
56+
.map(
57+
(item) =>
58+
`${formatTicketLabel(item.draft)}|${item.draft.summary_text || item.draft.input_text}`,
59+
)
60+
.join("\n");
61+
setBatchTriageInput(nextInput);
62+
}, [filteredItems]);
63+
64+
const handleRunBatchTriage = useCallback(async () => {
65+
const tickets = parseBatchTriageInput(batchTriageInput);
66+
if (tickets.length === 0) {
67+
showError("Add at least one ticket before running batch triage");
68+
return;
69+
}
70+
71+
setBatchTriageBusy(true);
72+
try {
73+
const clusters = await clusterTicketsForTriage(tickets);
74+
setBatchTriageOutput(formatBatchTriageOutput(clusters));
75+
const refreshed = await listRecentTriageClusters(20).catch(() => []);
76+
setTriageHistory(refreshed);
77+
void logEvent("queue_batch_triage_ran", {
78+
operator: operatorName,
79+
ticket_count: tickets.length,
80+
cluster_count: clusters.length,
81+
});
82+
showSuccess("Batch triage completed");
83+
} catch (error) {
84+
showError(`Batch triage failed: ${error}`);
85+
} finally {
86+
setBatchTriageBusy(false);
87+
}
88+
}, [
89+
batchTriageInput,
90+
clusterTicketsForTriage,
91+
listRecentTriageClusters,
92+
setTriageHistory,
93+
logEvent,
94+
operatorName,
95+
showSuccess,
96+
showError,
97+
]);
98+
99+
return {
100+
batchTriageInput,
101+
setBatchTriageInput,
102+
batchTriageOutput,
103+
batchTriageBusy,
104+
handleSeedBatchTriage,
105+
handleRunBatchTriage,
106+
};
107+
}

0 commit comments

Comments
 (0)