chore: add frontend typecheck quick-check

Author: gildesmarais

Makefile

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-.PHONY: help test lint lint-js lint-ruby lintfix lintfix-js lintfix-ruby setup dev clean frontend-setup ready yard-verify-public-docs openapi openapi-verify openapi-client openapi-client-verify openapi-lint openapi-lint-redocly openapi-lint-spectral openai-lint-spectral
+.PHONY: help test lint lint-js lint-ruby lintfix lintfix-js lintfix-ruby setup dev clean frontend-setup quick-check ready yard-verify-public-docs openapi openapi-verify openapi-client openapi-client-verify openapi-lint openapi-lint-redocly openapi-lint-spectral openai-lint-spectral
 
 # Default target
 help: ## Show this help message
@@ -59,6 +59,8 @@ lint-ruby: ## Run Ruby linter (RuboCop) - errors when issues found
 	@echo "Ruby linting complete!"
 
 lint-js: ## Run JavaScript/Frontend linter (Prettier) - errors when issues found
+	@echo "Running TypeScript typecheck..."
+	@cd frontend && npm run typecheck
 	@echo "Running Prettier format check..."
 	@cd frontend && npm run format:check
 	@echo "JavaScript linting complete!"
@@ -76,10 +78,15 @@ lintfix-js: ## Auto-fix JavaScript/Frontend linting issues
 	@cd frontend && npm run format
 	@echo "JavaScript lintfix complete!"
 
-ready: ## Pre-commit gate (RuboCop + RSpec)
+quick-check: ## Fast local checks (Ruby lint/docs + frontend format/typecheck)
+	@echo "Running quick checks..."
+	$(MAKE) lint-ruby
+	$(MAKE) lint-js
+	@echo "Quick checks complete!"
+
+ready: ## Pre-commit gate (quick checks + RSpec)
 	@echo "Running pre-commit checks..."
-	bundle exec rubocop -F
-	bundle exec rake yard:verify_public_docs
+	$(MAKE) quick-check
 	bundle exec rspec
 	@echo "Pre-commit checks complete!"
 

frontend/.prettierignore

@@ -1,3 +1,8 @@
 # Frontend package files
 package-lock.json
 yarn.lock
+
+# Generated and transient frontend output
+.astro/
+test-results/
+src/api/generated/

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview --port 4001 --host",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
+    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit",
     "openapi:generate": "openapi-ts -i ../docs/api/v1/openapi.yaml -o src/api/generated -c @hey-api/client-fetch",
     "openapi:verify": "npm run openapi:generate && git diff --exit-code -- src/api/generated",
     "test": "vitest",

frontend/src/env.d.ts

@@ -1,6 +1 @@
 /// <reference types="vite/client" />
-
-declare module '*.module.css' {
-  const classes: Record<string, string>;
-  export default classes;
-}

frontend/src/hooks/useFeedConversion.ts

@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks';
 import { createFeed } from '../api/generated';
-import { apiClient, bearerHeaders } from '../api/client';
+import { apiClient } from '../api/client';
 import type { FeedRecord } from '../api/contracts';
 
 interface ConversionState {
@@ -32,22 +32,20 @@ export function useFeedConversion() {
       const response = await createFeed({
         client: apiClient,
         headers: {
-          'Content-Type': 'application/json',
-          ...bearerHeaders(token),
+          Authorization: `Bearer ${token}`,
         },
         body: {
           url: url.trim(),
           strategy: strategy.trim(),
         },
-        responseStyle: 'data',
         throwOnError: true,
       });
 
-      if (!response?.success || !response.data?.feed) {
+      if (!response.data?.success || !response.data.data?.feed) {
         throw new Error('Invalid response format');
       }
 
-      const result = response.data.feed;
+      const result = response.data.data.feed;
       setState((prev) => ({ ...prev, isConverting: false, result, error: null }));
     } catch (error) {
       setState((prev) => ({
@@ -89,7 +87,8 @@ const toErrorMessage = (error: unknown): string => {
 const extractMessage = (error: unknown): string | null => {
   if (!error || typeof error !== 'object') return null;
 
-  const candidate = (error as { error?: { message?: unknown }; message?: unknown }).error?.message ??
+  const candidate =
+    (error as { error?: { message?: unknown }; message?: unknown }).error?.message ??
     (error as { message?: unknown }).message;
 
   return typeof candidate === 'string' && candidate.trim() ? candidate : null;

frontend/src/hooks/useStrategies.ts

@@ -29,20 +29,18 @@ export function useStrategies(token: string | null) {
         client: apiClient,
         headers: {
           ...bearerHeaders(token),
-          'Content-Type': 'application/json',
         },
-        responseStyle: 'data',
       });
 
-      if (response?.success && response.data?.strategies) {
-        setState({
-          strategies: response.data.strategies,
-          isLoading: false,
-          error: null,
-        });
-      } else {
+      if (response.error || !response.data?.success || !response.data.data?.strategies) {
         throw new Error('Invalid response format from strategies API');
       }
+
+      setState({
+        strategies: response.data.data.strategies,
+        isLoading: false,
+        error: null,
+      });
     } catch (error) {
       setState({
         strategies: [],

frontend/tsconfig.typecheck.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "exclude": ["src/__tests__/**/*", "e2e/**/*", "playwright.config.ts", "vitest*.ts", "vitest.config.js"]
+}