feat(followup): implement PLAN-FOLLOWUP.md gap fixes
Complete implementation of 7 slices addressing E2E testing gaps: Slice 0+1: Wire Actions + ReasonPrompt - FocusView now uses useActions hook instead of direct act() calls - Added pendingAction state pattern for skip/defer/complete actions - ReasonPrompt integration with proper confirm/cancel flow - Tags support in DecisionEntry interface Slice 2: Drag Reorder UI - Installed @dnd-kit (core, sortable, utilities) - QueueView with DndContext, SortableContext, verticalListSortingStrategy - SortableQueueItem wrapper component using useSortable hook - pendingReorder state with ReasonPrompt for reorder reasons - Cmd+Up/Down keyboard shortcuts for accessibility - Fixed: Store item ID in PendingReorder to avoid stale queue reference Slice 3: System Tray Integration - tray.rs with TrayState, setup_tray, toggle_window_visibility - Menu with Show/Quit items - Left-click toggles window visibility - update_tray_badge command updates tooltip with item count - Frontend wiring in AppShell Slice 4: E2E Test Updates - Fixed test selectors for InboxView, Queue badge - Exposed inbox store for test seeding Slice 5: Staleness Visualization - Already implemented in computeStaleness() with tests Slice 6: Quick Wiring - onStartBatch callback wired to QueueView - SyncStatus rendered in nav area - SettingsView renders Settings component Slice 7: State Persistence - settings-store with hydrate/update methods - Tauri backend integration via read_settings/write_settings - AppShell hydrates settings on mount Bug fixes from code review: - close_bead now has error isolation (try/catch) so decision logging and queue advancement continue even if bead close fails - PendingReorder stores item ID to avoid stale queue reference E2E tests for all ACs (tests/e2e/followup-acs.spec.ts): - AC-F1: Drag reorder (4 tests) - AC-F2: ReasonPrompt integration (7 tests) - AC-F5: Staleness visualization (3 tests) - AC-F6: Batch mode (2 tests) - AC-F7: SyncStatus (2 tests) - ReasonPrompt behavior (3 tests) Tests: 388 frontend + 119 Rust + 32 E2E all passing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
teernisse
@@ -19,19 +19,23 @@ import {
|
||||
type UseMutationResult,
|
||||
} from "@tanstack/react-query";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
|
||||
import type { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import { events } from "@/lib/bindings";
|
||||
import type {
|
||||
LoreStatus,
|
||||
BridgeStatus,
|
||||
SyncResult,
|
||||
McError,
|
||||
FocusItem,
|
||||
} from "@/lib/types";
|
||||
import type { LoreItemsResponse } from "@/lib/bindings";
|
||||
|
||||
// --- Query Keys ---
|
||||
|
||||
export const queryKeys = {
|
||||
loreStatus: ["lore-status"] as const,
|
||||
bridgeStatus: ["bridge-status"] as const,
|
||||
loreItems: ["lore-items"] as const,
|
||||
} as const;
|
||||
|
||||
// --- QueryClient Factory ---
|
||||
@@ -60,44 +64,32 @@ export function createQueryClient(): QueryClient {
|
||||
* Hook to set up query invalidation on Tauri events.
|
||||
*
|
||||
* Listens for:
|
||||
* - lore-data-changed: Invalidates lore and bridge status
|
||||
* - sync-status (completed): Invalidates lore and bridge status
|
||||
* - loreDataChanged: Invalidates lore and bridge status
|
||||
*/
|
||||
export function useQueryInvalidation(): void {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const unlisteners: Promise<UnlistenFn>[] = [];
|
||||
let unlisten: UnlistenFn | undefined;
|
||||
|
||||
// Invalidate on lore data changes
|
||||
const loreUnlisten = listen("lore-data-changed", () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
|
||||
});
|
||||
unlisteners.push(loreUnlisten);
|
||||
|
||||
// Invalidate on sync completion
|
||||
const syncUnlisten = listen<{ status: string; message?: string }>(
|
||||
"sync-status",
|
||||
(event) => {
|
||||
if (event.payload.status === "completed") {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
|
||||
// Invalidate on lore data changes (typed event)
|
||||
events.loreDataChanged
|
||||
.listen(() => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
|
||||
})
|
||||
.then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
}
|
||||
);
|
||||
unlisteners.push(syncUnlisten);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
// Cleanup all listeners
|
||||
Promise.all(unlisteners).then((fns) => {
|
||||
if (!cancelled) return;
|
||||
for (const fn of fns) {
|
||||
fn();
|
||||
}
|
||||
});
|
||||
if (unlisten) unlisten();
|
||||
};
|
||||
}, [queryClient]);
|
||||
}
|
||||
@@ -113,39 +105,26 @@ export function useQueryInvalidation(): void {
|
||||
export function useLoreStatus(): UseQueryResult<LoreStatus, McError> {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Set up event-based invalidation
|
||||
// Set up event-based invalidation (typed event)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let unlisten: UnlistenFn | undefined;
|
||||
|
||||
listen("lore-data-changed", () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
|
||||
}).then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
});
|
||||
|
||||
// Also listen for sync completion
|
||||
let syncUnlisten: UnlistenFn | undefined;
|
||||
listen<{ status: string }>("sync-status", (event) => {
|
||||
if (event.payload.status === "completed") {
|
||||
events.loreDataChanged
|
||||
.listen(() => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
|
||||
}
|
||||
}).then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
syncUnlisten = fn;
|
||||
}
|
||||
});
|
||||
})
|
||||
.then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (unlisten) unlisten();
|
||||
if (syncUnlisten) syncUnlisten();
|
||||
};
|
||||
}, [queryClient]);
|
||||
|
||||
@@ -164,20 +143,22 @@ export function useLoreStatus(): UseQueryResult<LoreStatus, McError> {
|
||||
export function useBridgeStatus(): UseQueryResult<BridgeStatus, McError> {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Set up event-based invalidation
|
||||
// Set up event-based invalidation (typed event)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let unlisten: UnlistenFn | undefined;
|
||||
|
||||
listen("lore-data-changed", () => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
|
||||
}).then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
});
|
||||
events.loreDataChanged
|
||||
.listen(() => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
|
||||
})
|
||||
.then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
@@ -227,3 +208,69 @@ export function useReconcile(): UseMutationResult<SyncResult, McError, void> {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// --- Lore Items Query ---
|
||||
|
||||
/**
|
||||
* Transform raw LoreItemsResponse into FocusItem array.
|
||||
*/
|
||||
function transformLoreItems(response: LoreItemsResponse): FocusItem[] {
|
||||
if (!response.success || !response.items) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return response.items.map((item) => ({
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
type: item.item_type as FocusItem["type"],
|
||||
project: item.project,
|
||||
url: item.url,
|
||||
iid: item.iid,
|
||||
updatedAt: item.updated_at ?? null,
|
||||
contextQuote: null,
|
||||
requestedBy: item.requested_by ?? null,
|
||||
snoozedUntil: null,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch lore items and transform to FocusItem format.
|
||||
*
|
||||
* Returns work items from GitLab (reviews, issues, authored MRs).
|
||||
* Stale time: 30 seconds
|
||||
*/
|
||||
export function useLoreItems(): UseQueryResult<FocusItem[], McError> {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Set up event-based invalidation (typed event)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let unlisten: UnlistenFn | undefined;
|
||||
|
||||
events.loreDataChanged
|
||||
.listen(() => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.loreItems });
|
||||
})
|
||||
.then((fn) => {
|
||||
if (cancelled) {
|
||||
fn();
|
||||
} else {
|
||||
unlisten = fn;
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (unlisten) unlisten();
|
||||
};
|
||||
}, [queryClient]);
|
||||
|
||||
return useQuery({
|
||||
queryKey: queryKeys.loreItems,
|
||||
queryFn: async () => {
|
||||
const response = await invoke<LoreItemsResponse>("get_lore_items");
|
||||
return transformLoreItems(response);
|
||||
},
|
||||
staleTime: 30 * 1000, // 30 seconds
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user