feat: add TypeScript types, API client, and TanStack Query hooks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TaskTracker.Web/src/api/client.ts

@@ -0,0 +1,12 @@
+import axios from 'axios'
+import type { ApiResponse } from '../types'
+
+const api = axios.create({ baseURL: '/api' })
+
+export async function request<T>(config: Parameters<typeof api.request>[0]): Promise<T> {
+  const { data } = await api.request<ApiResponse<T>>(config)
+  if (!data.success) throw new Error(data.error ?? 'API error')
+  return data.data
+}
+
+export default api

TaskTracker.Web/src/api/context.ts

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+import { request } from './client'
+import type { ContextEvent, ContextSummaryItem } from '../types'
+
+export function useRecentContext(minutes = 30) {
+  return useQuery({
+    queryKey: ['context', 'recent', minutes],
+    queryFn: () => request<ContextEvent[]>({ url: '/context/recent', params: { minutes } }),
+    refetchInterval: 60_000,
+  })
+}
+
+export function useContextSummary() {
+  return useQuery({
+    queryKey: ['context', 'summary'],
+    queryFn: () => request<ContextSummaryItem[]>({ url: '/context/summary' }),
+    refetchInterval: 60_000,
+  })
+}

TaskTracker.Web/src/api/mappings.ts

@@ -0,0 +1,36 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { request } from './client'
+import type { AppMapping } from '../types'
+
+export function useMappings() {
+  return useQuery({
+    queryKey: ['mappings'],
+    queryFn: () => request<AppMapping[]>({ url: '/mappings' }),
+  })
+}
+
+export function useCreateMapping() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (body: { pattern: string; matchType: string; category: string; friendlyName?: string }) =>
+      request<AppMapping>({ method: 'POST', url: '/mappings', data: body }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['mappings'] }),
+  })
+}
+
+export function useUpdateMapping() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, ...body }: { id: number; pattern: string; matchType: string; category: string; friendlyName?: string }) =>
+      request<AppMapping>({ method: 'PUT', url: `/mappings/${id}`, data: body }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['mappings'] }),
+  })
+}
+
+export function useDeleteMapping() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (id: number) => request<void>({ method: 'DELETE', url: `/mappings/${id}` }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['mappings'] }),
+  })
+}

TaskTracker.Web/src/api/tasks.ts

@@ -0,0 +1,92 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { request } from './client'
+import type { WorkTask } from '../types'
+
+export function useTasks(includeSubTasks = true) {
+  return useQuery({
+    queryKey: ['tasks', { includeSubTasks }],
+    queryFn: () => request<WorkTask[]>({ url: '/tasks', params: { includeSubTasks } }),
+  })
+}
+
+export function useActiveTask() {
+  return useQuery({
+    queryKey: ['tasks', 'active'],
+    queryFn: () => request<WorkTask | null>({ url: '/tasks/active' }),
+    refetchInterval: 30_000,
+  })
+}
+
+export function useTask(id: number) {
+  return useQuery({
+    queryKey: ['tasks', id],
+    queryFn: () => request<WorkTask>({ url: `/tasks/${id}` }),
+  })
+}
+
+function useInvalidateTasks() {
+  const qc = useQueryClient()
+  return () => {
+    qc.invalidateQueries({ queryKey: ['tasks'] })
+  }
+}
+
+export function useCreateTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: (body: { title: string; description?: string; category?: string; parentTaskId?: number; estimatedMinutes?: number }) =>
+      request<WorkTask>({ method: 'POST', url: '/tasks', data: body }),
+    onSuccess: invalidate,
+  })
+}
+
+export function useUpdateTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: ({ id, ...body }: { id: number; title?: string; description?: string; category?: string; estimatedMinutes?: number }) =>
+      request<WorkTask>({ method: 'PUT', url: `/tasks/${id}`, data: body }),
+    onSuccess: invalidate,
+  })
+}
+
+export function useStartTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: (id: number) => request<WorkTask>({ method: 'PUT', url: `/tasks/${id}/start` }),
+    onSuccess: invalidate,
+  })
+}
+
+export function usePauseTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: ({ id, note }: { id: number; note?: string }) =>
+      request<WorkTask>({ method: 'PUT', url: `/tasks/${id}/pause`, data: { note } }),
+    onSuccess: invalidate,
+  })
+}
+
+export function useResumeTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: ({ id, note }: { id: number; note?: string }) =>
+      request<WorkTask>({ method: 'PUT', url: `/tasks/${id}/resume`, data: { note } }),
+    onSuccess: invalidate,
+  })
+}
+
+export function useCompleteTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: (id: number) => request<WorkTask>({ method: 'PUT', url: `/tasks/${id}/complete` }),
+    onSuccess: invalidate,
+  })
+}
+
+export function useAbandonTask() {
+  const invalidate = useInvalidateTasks()
+  return useMutation({
+    mutationFn: (id: number) => request<void>({ method: 'DELETE', url: `/tasks/${id}` }),
+    onSuccess: invalidate,
+  })
+}