Files
mission-control/src/lib/queries.ts
teernisse f5ce8a9091 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>
2026-02-26 17:28:28 -05:00

277 lines
6.6 KiB
TypeScript

/**
* TanStack Query data fetching layer.
*
* Handles async data fetching, caching, and invalidation for:
* - Lore status (GitLab integration health)
* - Bridge status (mapping counts, sync times)
* - Sync/reconcile mutations
*
* Query keys are centralized here for consistent invalidation.
*/
import { useEffect } from "react";
import {
QueryClient,
useQuery,
useMutation,
useQueryClient,
type UseQueryResult,
type UseMutationResult,
} from "@tanstack/react-query";
import { invoke } from "@tauri-apps/api/core";
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 ---
/**
* Create a configured QueryClient instance.
*
* Default options:
* - retry: 1 (one retry on failure)
* - refetchOnWindowFocus: true (refresh when user returns)
*/
export function createQueryClient(): QueryClient {
return new QueryClient({
defaultOptions: {
queries: {
retry: 1,
refetchOnWindowFocus: true,
},
},
});
}
// --- Event-Based Invalidation Hook ---
/**
* Hook to set up query invalidation on Tauri events.
*
* Listens for:
* - loreDataChanged: Invalidates lore and bridge status
*/
export function useQueryInvalidation(): void {
const queryClient = useQueryClient();
useEffect(() => {
let cancelled = false;
let unlisten: UnlistenFn | undefined;
// 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;
}
});
return () => {
cancelled = true;
if (unlisten) unlisten();
};
}, [queryClient]);
}
// --- Query Hooks ---
/**
* Fetch lore integration status.
*
* Returns health, last sync time, and summary counts.
* Stale time: 30 seconds (fresh data is important but not real-time)
*/
export function useLoreStatus(): UseQueryResult<LoreStatus, 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.loreStatus });
})
.then((fn) => {
if (cancelled) {
fn();
} else {
unlisten = fn;
}
});
return () => {
cancelled = true;
if (unlisten) unlisten();
};
}, [queryClient]);
return useQuery({
queryKey: queryKeys.loreStatus,
queryFn: () => invoke<LoreStatus>("get_lore_status"),
staleTime: 30 * 1000, // 30 seconds
});
}
/**
* Fetch bridge status (mapping counts, sync times).
*
* Stale time: 30 seconds
*/
export function useBridgeStatus(): UseQueryResult<BridgeStatus, 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.bridgeStatus });
})
.then((fn) => {
if (cancelled) {
fn();
} else {
unlisten = fn;
}
});
return () => {
cancelled = true;
if (unlisten) unlisten();
};
}, [queryClient]);
return useQuery({
queryKey: queryKeys.bridgeStatus,
queryFn: () => invoke<BridgeStatus>("get_bridge_status"),
staleTime: 30 * 1000, // 30 seconds
});
}
// --- Mutation Hooks ---
/**
* Trigger an incremental sync (process since_last_check events).
*
* On success, invalidates lore and bridge status queries.
*/
export function useSyncNow(): UseMutationResult<SyncResult, McError, void> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => invoke<SyncResult>("sync_now"),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
},
});
}
/**
* Trigger a full reconciliation pass.
*
* On success, invalidates lore and bridge status queries.
*/
export function useReconcile(): UseMutationResult<SyncResult, McError, void> {
const queryClient = useQueryClient();
return useMutation({
mutationFn: () => invoke<SyncResult>("reconcile"),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: queryKeys.loreStatus });
queryClient.invalidateQueries({ queryKey: queryKeys.bridgeStatus });
},
});
}
// --- 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
});
}