feat(api): Add bank logo support and fix banks endpoint type errors.

Backend changes:
- Add logo field to AccountDetails model
- Update accounts API endpoints to include logo data
- Add database migration for logo column in accounts table
- Implement institution details fetching from GoCardless API
- Enrich account data with institution logos during sync
- Fix type errors in banks endpoint with proper response parsing

Frontend changes:
- Add failedImages state to track logo loading failures
- Implement conditional rendering to show bank logos when available
- Add proper error handling with fallback to Building2 icon
- Fix image sizing to w-6 h-6 sm:w-8 sm:h-8 for proper display
- Update Account interface to include optional logo field
- Remove unused useState import from System component

🤖 Generated with [Claude Code](https://claude.ai/code)

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

frontend/src/components/AccountSettings.tsx

@@ -78,6 +78,7 @@ export default function AccountSettings() {
 
   const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
   const [editingName, setEditingName] = useState("");
+  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
 
   const queryClient = useQueryClient();
 
@@ -194,8 +195,20 @@ export default function AccountSettings() {
                     {/* Mobile layout - stack vertically */}
                     <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                       <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                        <div className="flex-shrink-0 p-2 sm:p-3 bg-muted rounded-full">
-                          <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
+                        <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-muted flex items-center justify-center">
+                          {account.logo && !failedImages.has(account.id) ? (
+                            <img
+                              src={account.logo}
+                              alt={`${account.institution_id} logo`}
+                              className="w-full h-full object-contain"
+                              onError={() => {
+                                console.warn(`Failed to load bank logo for ${account.institution_id}: ${account.logo}`);
+                                setFailedImages(prev => new Set([...prev, account.id]));
+                              }}
+                            />
+                          ) : (
+                            <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
+                          )}
                         </div>
                         <div className="flex-1 min-w-0">
                           {editingAccountId === account.id ? (

frontend/src/components/Settings.tsx

@@ -79,6 +79,7 @@ const getStatusIndicator = (status: string) => {
 export default function Settings() {
   const [editingAccountId, setEditingAccountId] = useState<string | null>(null);
   const [editingName, setEditingName] = useState("");
+  const [failedImages, setFailedImages] = useState<Set<string>>(new Set());
 
   const queryClient = useQueryClient();
 
@@ -280,8 +281,20 @@ export default function Settings() {
                         {/* Mobile layout - stack vertically */}
                         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                           <div className="flex items-start sm:items-center space-x-3 sm:space-x-4 min-w-0 flex-1">
-                            <div className="flex-shrink-0 p-2 sm:p-3 bg-muted rounded-full">
-                              <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
+                            <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-muted flex items-center justify-center">
+                              {account.logo && !failedImages.has(account.id) ? (
+                                <img
+                                  src={account.logo}
+                                  alt={`${account.institution_id} logo`}
+                                  className="w-6 h-6 sm:w-8 sm:h-8 object-contain"
+                                  onError={() => {
+                                    console.warn(`Failed to load bank logo for ${account.institution_id}: ${account.logo}`);
+                                    setFailedImages(prev => new Set([...prev, account.id]));
+                                  }}
+                                />
+                              ) : (
+                                <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-muted-foreground" />
+                              )}
                             </div>
                             <div className="flex-1 min-w-0">
                               {editingAccountId === account.id ? (

frontend/src/components/System.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
 import {
   RefreshCw,
   AlertCircle,

frontend/src/types/api.ts

@@ -13,6 +13,7 @@ export interface Account {
   name?: string;
   display_name?: string;
   currency?: string;
+  logo?: string;
   created: string;
   last_accessed?: string;
   balances: AccountBalance[];