feat(autorag): add Started column to runs table (opendatahub-io#6563)

* feat(autorag): add Started column to runs table

- Add Started column (created_at) with relative time and date tooltip
- Add utilities/time.ts for formatDateForTooltip and relativeTime
- Place Started column before Status
- Update AutoragRunsTable.md documentation

* chore(autorag): fix documentation and add test for Started column

- Remove duplicate "## Props" header in AutoragRunsTable.md
- Add unit test to verify Started column renders with relative time
- All tests passing (4/4)

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

---------

Co-authored-by: Chris Jones <chrisj@ca.ibm.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 3 people

packages/autorag/frontend/src/__mocks__/mod-arch-shared.tsx

@@ -111,6 +111,10 @@ export const TypeaheadSelect: React.FC<TypeaheadSelectProps> = ({
   );
 };
 
+/** Mock for relative time display in tests. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- mock accepts same signature as real
+export const relativeTime = (current: number, previous: number): string => '1 day ago';
+
 // Re-export everything else that might be needed
 // Note: We can't actually re-export from the real module in a mock
 // so we'll just export a basic set of components

packages/autorag/frontend/src/app/components/AutoragRunsTable/AutoragRunsTable.md

@@ -33,6 +33,10 @@ const pageSize = 20;
 />
 ```
 
+## Columns
+
+Name, Description, **Started** (relative time with tooltip showing full date), Status.
+
 ## Props
 
 | Prop              | Type                         | Required | Description                                     |

packages/autorag/frontend/src/app/components/AutoragRunsTable/AutoragRunsTableRow.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Label, type LabelProps } from '@patternfly/react-core';
+import { Label, Timestamp, TimestampTooltipVariant, type LabelProps } from '@patternfly/react-core';
 import { Td, Tr } from '@patternfly/react-table';
+import { relativeTime } from 'mod-arch-shared';
 import type { PipelineRun } from '~/app/types';
 import { autoragRunsColumns } from './columns';
 
@@ -44,6 +45,20 @@ const AutoragRunsTableRow: React.FC<AutoragRunsTableRowProps> = ({ run }) => (
     </Td>
     <Td dataLabel={autoragRunsColumns[1].label}>{run.description ?? '—'}</Td>
     <Td dataLabel={autoragRunsColumns[2].label}>
+      {run.created_at ? (
+        <Timestamp
+          date={new Date(run.created_at)}
+          tooltip={{
+            variant: TimestampTooltipVariant.default,
+          }}
+        >
+          {relativeTime(Date.now(), new Date(run.created_at).getTime())}
+        </Timestamp>
+      ) : (
+        '—'
+      )}
+    </Td>
+    <Td dataLabel={autoragRunsColumns[3].label}>
       {run.state ? (
         <Label isCompact {...getStatusLabelProps(run.state)}>
           {run.state}

packages/autorag/frontend/src/app/components/AutoragRunsTable/__tests__/AutoragRunsTable.spec.tsx

@@ -113,4 +113,21 @@ describe('AutoragRunsTable', () => {
     expect(screen.getByTestId('empty-view')).toBeInTheDocument();
     expect(screen.getByTestId('empty-view')).toHaveTextContent('Empty');
   });
+
+  it('should render Started column with relative time', () => {
+    render(
+      <AutoragRunsTable
+        runs={mockRuns}
+        totalSize={defaultPaginationProps.totalSize}
+        page={defaultPaginationProps.page}
+        pageSize={defaultPaginationProps.pageSize}
+        onPageChange={defaultPaginationProps.onPageChange}
+        onPerPageChange={defaultPaginationProps.onPerPageChange}
+      />,
+    );
+
+    // The mock relativeTime function returns '1 day ago'
+    const relativeTimeElements = screen.getAllByText('1 day ago');
+    expect(relativeTimeElements.length).toBeGreaterThan(0);
+  });
 });

packages/autorag/frontend/src/app/components/AutoragRunsTable/columns.ts

@@ -18,6 +18,12 @@ export const autoragRunsColumns: SortableData<PipelineRun>[] = [
         .localeCompare((b.description ?? '').toLocaleLowerCase()),
     width: 25,
   },
+  {
+    label: 'Started',
+    field: 'created_at',
+    sortable: (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+    width: 20,
+  },
   {
     label: 'Status',
     field: 'state',