fix(list): 🐛 move cloud icon to model column (#51)

* fix(list): 🐛 move cloud icon to model column

* fix(cloud): 🐛 show task failure reason in list

Author: jorben

src/renderer/pages/List.tsx

@@ -530,29 +530,41 @@ const List: React.FC = () => {
               }
             })()}
           </Tooltip>
-          {record.provider === -1 && (
-             <Tooltip title={t('task_type.cloud')}>
-               <CloudOutlined style={{ color: '#1890ff' }} />
-             </Tooltip>
-          )}
         </Space>
       ),
     },
     {
       title: t('columns.model'),
       dataIndex: "model_name",
       width: 240,
-      render: (text: string) => (
-        <Text
+      render: (text: string, record: Task) => (
+        <div
           style={{
             maxWidth: "240px",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            gap: "4px",
           }}
         >
-          {text}
-        </Text>
+          <Text
+            style={{
+              maxWidth: record.provider === -1 ? "216px" : "240px",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              display: "inline-block",
+            }}
+          >
+            {text}
+          </Text>
+          {record.provider === -1 && (
+            <Tooltip title={t('task_type.cloud')}>
+              <span style={{ display: "inline-flex", alignItems: "center" }}>
+                <CloudOutlined style={{ color: "#1890ff" }} />
+              </span>
+            </Tooltip>
+          )}
+        </div>
       ),
     },
     {
@@ -571,11 +583,15 @@ const List: React.FC = () => {
       title: t('columns.status'),
       dataIndex: "status",
       width: 100,
-      render: (status: number, record: Task) => {
+      render: (status: number, record: Task | CloudTask) => {
         const tag = <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>;
-        // Show error tooltip for failed status
-        if (status === 0 && record.error) {
-          return <Tooltip title={record.error}>{tag}</Tooltip>;
+        const failedReason =
+          record.error ||
+          ('error_message' in record ? record.error_message : undefined) ||
+          ('description' in record ? record.description : undefined);
+        // Show tooltip for failed/partial-failed tasks if backend provides reason
+        if ((status === 0 || status === 8) && failedReason) {
+          return <Tooltip title={failedReason}>{tag}</Tooltip>;
         }
         return tag;
       },

src/renderer/pages/__tests__/List.test.tsx

@@ -38,7 +38,8 @@ vi.mock('react-i18next', () => ({
         'actions.view': 'View',
         'actions.cancel': 'Cancel',
         'actions.retry': 'Retry',
-        'actions.delete': 'Delete'
+        'actions.delete': 'Delete',
+        'task_type.cloud': 'Cloud Task'
       }
       return translations[key] || key
     },
@@ -412,6 +413,46 @@ describe('List', () => {
     })
   })
 
+  describe('Cloud Task Indicator', () => {
+    it('should render cloud icon in model column instead of file column', async () => {
+      vi.mocked(window.api.task.getAll).mockResolvedValue({
+        success: true,
+        data: {
+          list: [
+            {
+              id: 'cloud-task-1',
+              filename: 'very-long-cloud-filename-that-should-not-cover-cloud-icon.pdf',
+              type: 'pdf',
+              pages: 3,
+              model_name: 'Markdown.Fit Pro',
+              progress: 60,
+              status: 3,
+              provider: -1
+            }
+          ],
+          total: 1
+        }
+      })
+
+      render(
+        <Wrapper>
+          <List />
+        </Wrapper>
+      )
+
+      await waitFor(() => {
+        const row = document.querySelector('.ant-table-tbody tr')
+        expect(row).toBeInTheDocument()
+      })
+
+      const row = document.querySelector('.ant-table-tbody tr') as HTMLTableRowElement
+      const cells = row.querySelectorAll('td')
+
+      expect(cells[0].querySelector('[aria-label="cloud"]')).toBeNull()
+      expect(cells[1].querySelector('[aria-label="cloud"]')).toBeInTheDocument()
+    })
+  })
+
   describe('Page Count Display', () => {
     it('should display page count for multi-page files', async () => {
       render(

src/renderer/utils/cloudTaskMapper.ts

@@ -9,6 +9,8 @@ export interface CloudTask extends Task {
   isCloud: boolean;
   /** Unix timestamp in ms for sorting */
   sortTimestamp: number;
+  description?: string;
+  error_message?: string;
 }
 
 /**
@@ -63,6 +65,9 @@ export function mapCloudTaskToTask(ct: CloudTaskResponse): CloudTask {
     status: ct.status,
     completed_count: pagesCompleted,
     failed_count: ct.pages_failed || 0,
+    error: ct.error_message || ct.description || null,
+    description: ct.description,
+    error_message: ct.error_message,
     isCloud: true,
     sortTimestamp,
   };

src/shared/types/cloud-api.ts

@@ -122,6 +122,8 @@ export interface CloudTaskResponse {
   file_name: string;
   status: number;
   status_name: string;
+  description?: string;
+  error_message?: string;
   page_count: number;
   pages_completed: number;
   pages_failed: number;