[Bug] ApiClient inconsistency causes "response.json is not a function" errors across Knowledge Base components

Bug Description

Multiple Knowledge Base components fail with TypeError: response.json is not a function when calling ApiClient methods. This affects:

• FailedVectorizationsManager: "Error loading failed jobs: TypeError: response.json is not a function"
• DeduplicationManager: "Error scanning: TypeError: dupResponse.json is not a function"

<div class="error-state">
  <i class="fas fa-exclamation-circle"></i> 
  Error loading failed jobs: TypeError: response.json is not a function
</div>

Root Cause

Inconsistent API response handling patterns across the codebase. Components handle ApiClient responses in three different ways:

Pattern 1: ✅ DEFENSIVE (Works)

KnowledgeCategories.vue:471 and KnowledgeCategories.vue:502:

const data = typeof response.json === 'function' ? await response.json() : response

Pattern 2: ✅ HELPER FUNCTION (Works)

KnowledgeBrowser.vue:225-229:

const parseResponse = async (response: any): Promise<any> => {
  if (typeof response.json === 'function') {
    return await response.json()
  }
  return response // Already parsed or direct data
}

Pattern 3: ❌ DIRECT CALL (Fails)

FailedVectorizationsManager.vue:113,139,167,193:

const response = await apiClient.get('/api/knowledge_base/vectorize_jobs/failed')
const data = await response.json() // ❌ FAILS HERE

DeduplicationManager.vue:221,259,287:

const dupResponse = await apiClient.post('/api/knowledge_base/deduplicate?dry_run=true')
const dupData = await dupResponse.json() // ❌ FAILS HERE

Evidence of Known Issue

The existence of defensive patterns in KnowledgeCategories and KnowledgeBrowser proves developers have already encountered this bug and added workarounds. Other components weren't updated.

ApiClient Analysis

Location: autobot-vue/src/utils/ApiClient.ts

Base methods (get, post, put, delete) return Response objects:

async request(...): Promise<ApiResponse> {
  const response = await fetch(url, { ... });
  return response as ApiResponse; // Line 87 - returns Response
}

Higher-level helper methods return parsed JSON:

async createNewChat(): Promise<any> {
  const response = await this.post('/api/chat/sessions', {});
  return response.json(); // Line 159 - returns parsed data
}

This dual behavior creates confusion about what to expect.

Impact

• FailedVectorizationsManager: Cannot view/retry/delete failed vectorization jobs
• DeduplicationManager: Cannot scan for or remove duplicate/orphan documents
• Developer confusion: Unclear API contract leads to repeated errors
• Inconsistent codebase: Three different patterns for same operation

Reproduction Steps

1. Start AutoBot and navigate to Knowledge Base
2. Click "Failed Vectorizations" tab
3. BUG: See "Error loading failed jobs: TypeError: response.json is not a function"
4. Click "Duplicate & Orphan Management" tab
5. Click "Scan for Issues" button
6. BUG: See "Error scanning: TypeError: dupResponse.json is not a function"

Proposed Solutions

Option A: Standardize on Response Objects (Recommended)

1. Ensure all base methods return Response objects consistently
2. Add defensive parsing to all components:

const parseResponse = async (response: any): Promise<any> => {
  if (typeof response.json === 'function') {
    return await response.json()
  }
  return response // Already parsed
}

Option B: Standardize on Parsed JSON

1. Change all base methods to return parsed JSON:

async get(endpoint: string): Promise<any> {
  const response = await this.request(endpoint, { method: 'GET' });
  return response.json();
}

1. Update all call sites accordingly

Option C: Create Helper Methods (Hybrid)

Keep base methods returning Response, add convenience methods:

async getJson(endpoint: string): Promise<any> {
  const response = await this.get(endpoint);
  return response.json();
}

Files Requiring Fixes

Immediate (Direct .json() calls):

• autobot-vue/src/components/knowledge/FailedVectorizationsManager.vue (4 locations)
• autobot-vue/src/components/knowledge/DeduplicationManager.vue (3 locations)

Reference (Already have defensive patterns):

• autobot-vue/src/components/knowledge/KnowledgeCategories.vue (working pattern)
• autobot-vue/src/components/knowledge/KnowledgeBrowser.vue (helper function)

Core:

• autobot-vue/src/utils/ApiClient.ts (if changing base behavior)

Related Issues

• Related to: Knowledge Base mock data issue (#10640)
• Part of broader frontend API integration cleanup

Labels

bug, frontend, api-client, knowledge-base, high-priority, developer-experience