From fcd3f63ffc9b5530f971afd1da45a90a02d7cb70 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Tue, 10 Mar 2026 20:10:11 +0100
Subject: [PATCH 1/8] feat(platform): documents table UI polish and filters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add RAG status, source, and teams filter popover to documents table
- Fix delete dialog to match Pencil design (bold filename, simplified copy)
- Use abbreviated month format (ll LT) in date columns with timezone
- Add customFormat prop to CopyableTimestamp component
- Show source column as text labels instead of icons
- Left-align size column
- Fix filter button to show icon + "Filter" text label
- Fix i18n interpolation bug ({{count}} → {count}) in nSelected translation
- Remove uppercase from filter section titles
- Update selected count badge to neutral gray style
- Clean up design comments files
---
 design/comments.md                            |  15 ---
 .../comments/knowledge-import-button.png      | Bin 14779 -> 0 bytes
 .../ui/data-display/copyable-timestamp.tsx    |  10 +-
 .../ui/data-table/data-table-filters.tsx      |   2 +-
 .../ui/dialog/view-dialog.stories.tsx         |   2 +-
 .../components/ui/filters/filter-button.tsx   |   8 +-
 .../ui/filters/filter-section.test.tsx        |   7 +-
 .../components/ui/filters/filter-section.tsx  |   4 +-
 .../components/document-delete-dialog.tsx     |  11 +-
 .../documents/components/documents-table.tsx  | 127 +++++++++++++++++-
 .../onedrive-import/onedrive-file-table.tsx   |   6 +-
 .../hooks/use-documents-table-config.tsx      |  48 ++-----
 services/platform/messages/en.json            |  31 +++--
 13 files changed, 191 insertions(+), 80 deletions(-)
 delete mode 100644 design/comments.md
 delete mode 100644 design/images/comments/knowledge-import-button.png

diff --git a/design/comments.md b/design/comments.md
deleted file mode 100644
index 8d33f3264..000000000
--- a/design/comments.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Design comments
-
-## Knowledge / Documents page
-
-- [ ] "Import documents" dropdown button is missing — should show a button with "+ Import documents" text and a chevron-down, with a dropdown menu containing "From your device" and "New folder" options
-- [ ] "Upload document" button context — the current button exists but lacks the dropdown menu state shown in the reference
-  ![reference](images/comments/knowledge-import-button.png)
-
-## Documents page — Upload progress (#726)
-
-- [ ] Need a design for the upload progress state inside the document upload dialog. Currently implemented with a basic progress bar and byte counter text, but needs a proper design pass.
-  - Progress bar showing upload percentage (byte-level, not just per-file)
-  - Text showing uploaded / total bytes (e.g. "12.4 MB / 54.2 MB")
-  - For multi-file uploads: file completion count (e.g. "2 / 5 files completed")
-  - States to cover: uploading single file, uploading multiple files, upload complete
diff --git a/design/images/comments/knowledge-import-button.png b/design/images/comments/knowledge-import-button.png
deleted file mode 100644
index d95b4bb5a23af9e941e2ca3c91e440b09954956e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14779
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

diff --git a/services/platform/app/components/ui/data-display/copyable-timestamp.tsx b/services/platform/app/components/ui/data-display/copyable-timestamp.tsx
index df55bd362..831f07710 100644
--- a/services/platform/app/components/ui/data-display/copyable-timestamp.tsx
+++ b/services/platform/app/components/ui/data-display/copyable-timestamp.tsx
@@ -14,6 +14,8 @@ interface CopyableTimestampProps {
   date: number | Date | string | null | undefined;
   /** Format preset for display */
   preset?: DatePreset;
+  /** Custom dayjs format string (overrides preset for display) */
+  customFormat?: string;
   /** Additional className */
   className?: string;
   /** Text to show when date is null/undefined */
@@ -35,6 +37,7 @@ interface CopyableTimestampProps {
 export const CopyableTimestamp = React.memo(function CopyableTimestamp({
   date,
   preset = 'short',
+  customFormat,
   className,
   emptyText = '—',
   alignRight = false,
@@ -63,9 +66,12 @@ export const CopyableTimestamp = React.memo(function CopyableTimestamp({
 
   const timestampMs = String(dateObj.valueOf());
   const showTimezone = preset === 'long' || preset === 'time';
-  const formatted = showTimezone
-    ? `${formatDate(dateObj, preset)} ${timezoneShort}`
+  const baseFormatted = customFormat
+    ? formatDate(dateObj, preset, { customFormat })
     : formatDate(dateObj, preset);
+  const formatted = showTimezone
+    ? `${baseFormatted} ${timezoneShort}`
+    : baseFormatted;
   const titleText = `${formatDate(dateObj, 'long')} (${timezone})`;
 
   return (
diff --git a/services/platform/app/components/ui/data-table/data-table-filters.tsx b/services/platform/app/components/ui/data-table/data-table-filters.tsx
index deb1d0413..539dd4d4f 100644
--- a/services/platform/app/components/ui/data-table/data-table-filters.tsx
+++ b/services/platform/app/components/ui/data-table/data-table-filters.tsx
@@ -188,7 +188,7 @@ export function DataTableFilters({
               }
             >
               <div className="border-border flex items-center justify-between p-3">
-                <Text as="span" variant="label" className="text-base">
+                <Text as="span" variant="label" className="text-sm">
                   {t('labels.filters')}
                 </Text>
                 {totalActiveFilters > 0 && (
diff --git a/services/platform/app/components/ui/dialog/view-dialog.stories.tsx b/services/platform/app/components/ui/dialog/view-dialog.stories.tsx
index 47598c188..1bee7513f 100644
--- a/services/platform/app/components/ui/dialog/view-dialog.stories.tsx
+++ b/services/platform/app/components/ui/dialog/view-dialog.stories.tsx
@@ -111,7 +111,7 @@ export const WithHeaderActions: Story = {
             <Field label="File name">project-proposal.pdf</Field>
             <Field label="Size">2.4 MB</Field>
             <Field label="Created">January 10, 2024</Field>
-            <Field label="Modified">January 20, 2024</Field>
+            <Field label="Updated">January 20, 2024</Field>
           </FieldGroup>
         </ViewDialog>
       </>
diff --git a/services/platform/app/components/ui/filters/filter-button.tsx b/services/platform/app/components/ui/filters/filter-button.tsx
index 67e3ffa73..191c8559d 100644
--- a/services/platform/app/components/ui/filters/filter-button.tsx
+++ b/services/platform/app/components/ui/filters/filter-button.tsx
@@ -1,4 +1,4 @@
-import { Filter } from 'lucide-react';
+import { ListFilter } from 'lucide-react';
 import { Loader2Icon } from 'lucide-react';
 import { ComponentProps } from 'react';
 
@@ -22,10 +22,9 @@ export function FilterButton({
   return (
     <Button
       variant="secondary"
-      size="icon"
       aria-label={t('labels.filters')}
       className={cn(
-        'hover:bg-muted relative p-2.5',
+        'hover:bg-muted relative gap-2',
         hasActiveFilters && 'border-primary',
         isLoading && 'opacity-75',
         className,
@@ -35,8 +34,9 @@ export function FilterButton({
       {isLoading ? (
         <Loader2Icon className="text-muted-foreground size-4 animate-spin" />
       ) : (
-        <Filter className="text-muted-foreground size-4" />
+        <ListFilter className="text-muted-foreground size-4" />
       )}
+      {t('labels.filter')}
       {hasActiveFilters && !isLoading && (
         <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-blue-500" />
       )}
diff --git a/services/platform/app/components/ui/filters/filter-section.test.tsx b/services/platform/app/components/ui/filters/filter-section.test.tsx
index 260378c2c..eb53337b2 100644
--- a/services/platform/app/components/ui/filters/filter-section.test.tsx
+++ b/services/platform/app/components/ui/filters/filter-section.test.tsx
@@ -9,12 +9,12 @@ vi.mock('@/lib/i18n/client', () => ({
   useT: () => ({
     t: (key: string, options?: Record<string, string | number>) => {
       const translations: Record<string, string> = {
-        'labels.nSelected': '{{count}} selected',
+        'labels.nSelected': '{count} selected',
       };
       let value = translations[key] ?? key;
       if (options) {
         for (const [k, v] of Object.entries(options)) {
-          value = value.replace(`{{${k}}}`, String(v));
+          value = value.replace(`{${k}}`, String(v));
         }
       }
       return value;
@@ -30,14 +30,13 @@ describe('FilterSection', () => {
   };
 
   describe('rendering', () => {
-    it('renders the title in uppercase', () => {
+    it('renders the title', () => {
       render(
         <FilterSection {...defaultProps}>
           <span>Content</span>
         </FilterSection>,
       );
       expect(screen.getByText('Status')).toBeInTheDocument();
-      expect(screen.getByText('Status')).toHaveClass('uppercase');
     });
 
     it('does not render children when collapsed', () => {
diff --git a/services/platform/app/components/ui/filters/filter-section.tsx b/services/platform/app/components/ui/filters/filter-section.tsx
index a43102e3e..40be55d7d 100644
--- a/services/platform/app/components/ui/filters/filter-section.tsx
+++ b/services/platform/app/components/ui/filters/filter-section.tsx
@@ -34,12 +34,12 @@ export function FilterSection({
         <Text
           as="span"
           variant="label-sm"
-          className="text-muted-foreground/80 flex-1 text-left uppercase"
+          className="text-muted-foreground/80 flex-1 text-left"
         >
           {title}
         </Text>
         {selectedCount > 0 && (
-          <span className="rounded-xl bg-blue-100/20 px-1.5 py-0.5 text-[10px] leading-3 font-medium text-blue-600">
+          <span className="bg-muted text-muted-foreground rounded-xl px-2 py-0.5 text-[10px] leading-3 font-medium">
             {t('labels.nSelected', { count: selectedCount })}
           </span>
         )}
diff --git a/services/platform/app/features/documents/components/document-delete-dialog.tsx b/services/platform/app/features/documents/components/document-delete-dialog.tsx
index c726b5df3..36055f9d3 100644
--- a/services/platform/app/features/documents/components/document-delete-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-delete-dialog.tsx
@@ -25,13 +25,16 @@ export function DocumentDeleteDialog({
       open={open}
       onOpenChange={onOpenChange}
       title={tDocuments('deleteFile.title')}
-      description={tDocuments('deleteFile.confirmation', {
-        name: fileName ?? tDocuments('deleteFile.thisFile'),
-      })}
+      description={
+        <>
+          {tDocuments('deleteFile.confirmationPrefix')}{' '}
+          <strong>{fileName ?? tDocuments('deleteFile.thisDocument')}</strong>
+          {tDocuments('deleteFile.confirmationSuffix')}
+        </>
+      }
       deleteText={tDocuments('deleteFile.deleteButton')}
       isDeleting={isLoading}
       onDelete={onConfirmDelete}
-      warning={tDocuments('deleteFile.warning')}
     />
   );
 }
diff --git a/services/platform/app/features/documents/components/documents-table.tsx b/services/platform/app/features/documents/components/documents-table.tsx
index 856dac331..144f8152e 100644
--- a/services/platform/app/features/documents/components/documents-table.tsx
+++ b/services/platform/app/features/documents/components/documents-table.tsx
@@ -5,7 +5,8 @@ import { type Row } from '@tanstack/react-table';
 import { ClipboardList } from 'lucide-react';
 import { useMemo, useState, useCallback } from 'react';
 
-import type { DocumentItem } from '@/types/documents';
+import type { FilterConfig } from '@/app/components/ui/data-table/data-table-filters';
+import type { DocumentItem, RagStatus } from '@/types/documents';
 
 import { DataTable } from '@/app/components/ui/data-table/data-table';
 import { useTeams } from '@/app/features/settings/teams/hooks/queries';
@@ -57,6 +58,11 @@ export function DocumentsTable({
   }, [teams]);
 
   const { selectedTeamId } = useTeamFilter();
+  const { t: tTables } = useT('tables');
+
+  const [selectedRagStatuses, setSelectedRagStatuses] = useState<string[]>([]);
+  const [selectedSources, setSelectedSources] = useState<string[]>([]);
+  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
 
   const paginatedResult = useListDocumentsPaginated({
     organizationId,
@@ -77,6 +83,89 @@ export function DocumentsTable({
     }));
   }, [folders]);
 
+  const ragStatusFilterMap: Record<string, RagStatus[]> = useMemo(
+    () => ({
+      indexed: ['completed'],
+      not_indexed: ['not_indexed'],
+      indexing: ['queued', 'running'],
+      failed: ['failed'],
+      stale: ['stale'],
+    }),
+    [],
+  );
+
+  const filterConfigs = useMemo<FilterConfig[]>(() => {
+    const configs: FilterConfig[] = [
+      {
+        key: 'ragStatus',
+        title: tTables('headers.ragStatus'),
+        options: [
+          { value: 'indexed', label: tDocuments('filter.ragStatus.indexed') },
+          {
+            value: 'not_indexed',
+            label: tDocuments('filter.ragStatus.notIndexed'),
+          },
+          {
+            value: 'indexing',
+            label: tDocuments('filter.ragStatus.indexing'),
+          },
+          { value: 'failed', label: tDocuments('filter.ragStatus.failed') },
+          {
+            value: 'stale',
+            label: tDocuments('filter.ragStatus.needsReindex'),
+          },
+        ],
+        selectedValues: selectedRagStatuses,
+        onChange: setSelectedRagStatuses,
+        multiSelect: true,
+      },
+      {
+        key: 'source',
+        title: tTables('headers.source'),
+        options: [
+          { value: 'upload', label: tDocuments('filter.source.upload') },
+          { value: 'onedrive', label: tDocuments('filter.source.oneDrive') },
+          {
+            value: 'sharepoint',
+            label: tDocuments('filter.source.sharePoint'),
+          },
+        ],
+        selectedValues: selectedSources,
+        onChange: setSelectedSources,
+        multiSelect: true,
+      },
+    ];
+
+    if (teams && teams.length > 0) {
+      configs.push({
+        key: 'teams',
+        title: tTables('headers.teams'),
+        options: teams.map((team) => ({
+          value: team.id,
+          label: team.name,
+        })),
+        selectedValues: selectedTeamIds,
+        onChange: setSelectedTeamIds,
+        multiSelect: true,
+      });
+    }
+
+    return configs;
+  }, [
+    tTables,
+    tDocuments,
+    selectedRagStatuses,
+    selectedSources,
+    selectedTeamIds,
+    teams,
+  ]);
+
+  const handleClearFilters = useCallback(() => {
+    setSelectedRagStatuses([]);
+    setSelectedSources([]);
+    setSelectedTeamIds([]);
+  }, []);
+
   const filteredResults = useMemo(() => {
     // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Convex paginated query results match DocumentItem shape
     let filtered = paginatedResult.results as DocumentItem[];
@@ -85,6 +174,27 @@ export function DocumentsTable({
         (doc) => !doc.teamId || doc.teamId === selectedTeamId,
       );
     }
+    if (selectedRagStatuses.length > 0) {
+      const allowedStatuses = new Set(
+        selectedRagStatuses.flatMap((key) => ragStatusFilterMap[key] ?? []),
+      );
+      filtered = filtered.filter((doc) => {
+        const status = doc.ragStatus ?? 'not_indexed';
+        return allowedStatuses.has(status);
+      });
+    }
+    if (selectedSources.length > 0) {
+      const sourceSet = new Set(selectedSources);
+      filtered = filtered.filter(
+        (doc) => doc.sourceProvider && sourceSet.has(doc.sourceProvider),
+      );
+    }
+    if (selectedTeamIds.length > 0) {
+      const teamIdSet = new Set(selectedTeamIds);
+      filtered = filtered.filter(
+        (doc) => doc.teamId && teamIdSet.has(doc.teamId),
+      );
+    }
     if (debouncedQuery) {
       const filteredFolders = filterByTextSearch(folderRows, debouncedQuery, [
         'name',
@@ -93,7 +203,16 @@ export function DocumentsTable({
       return [...filteredFolders, ...filtered];
     }
     return [...folderRows, ...filtered];
-  }, [paginatedResult.results, selectedTeamId, debouncedQuery, folderRows]);
+  }, [
+    paginatedResult.results,
+    selectedTeamId,
+    selectedRagStatuses,
+    selectedSources,
+    selectedTeamIds,
+    ragStatusFilterMap,
+    debouncedQuery,
+    folderRows,
+  ]);
 
   const previewDocument = useMemo(() => {
     if (!docId || !filteredResults.length) return null;
@@ -210,6 +329,10 @@ export function DocumentsTable({
       },
       placeholder: searchPlaceholder,
     },
+    filters: {
+      configs: filterConfigs,
+      onClear: handleClearFilters,
+    },
     getRowId: (row) => row.id,
     approxRowCount: docCount,
   });
diff --git a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
index 73a5351b9..741500984 100644
--- a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
+++ b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
@@ -113,7 +113,7 @@ export function OneDriveFileTable({
       {
         id: 'modified',
         header: () => (
-          <div className="text-right">{tTables('headers.modified')}</div>
+          <div className="text-right">{tTables('headers.updated')}</div>
         ),
         cell: ({ row }) => (
           <Text
@@ -122,7 +122,9 @@ export function OneDriveFileTable({
             className="text-right whitespace-nowrap"
           >
             {row.original.lastModified
-              ? formatDate(new Date(row.original.lastModified), 'short')
+              ? formatDate(new Date(row.original.lastModified), 'long', {
+                  customFormat: 'll LT',
+                })
               : ''}
           </Text>
         ),
diff --git a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
index 46475ae2b..2931eb632 100644
--- a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
+++ b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
@@ -2,13 +2,10 @@
 
 import type { ColumnDef } from '@tanstack/react-table';
 
-import { Monitor, RefreshCw } from 'lucide-react';
 import { useMemo } from 'react';
 
 import type { DocumentItem } from '@/types/documents';
 
-import { OneDriveIcon } from '@/app/components/icons/onedrive-icon';
-import { SharePointIcon } from '@/app/components/icons/sharepoint-icon';
 import { CopyableTimestamp } from '@/app/components/ui/data-display/copyable-timestamp';
 import { DocumentIcon } from '@/app/components/ui/data-display/document-icon';
 import { Badge } from '@/app/components/ui/feedback/badge';
@@ -24,9 +21,7 @@ import { RagStatusBadge } from '../components/rag-status-badge';
 type DocumentsT = ReturnType<typeof useT<'documents'>>['t'];
 
 interface SourceInfo {
-  icon: React.ReactElement;
   title: string;
-  synced: boolean;
 }
 
 function getSourceInfo(
@@ -36,29 +31,23 @@ function getSourceInfo(
 ): SourceInfo | null {
   if (sourceProvider === 'onedrive') {
     return {
-      icon: <OneDriveIcon className="size-6" />,
       title:
         sourceMode === 'auto'
           ? t('sourceType.oneDriveSynced')
           : t('sourceType.oneDrive'),
-      synced: sourceMode === 'auto',
     };
   }
   if (sourceProvider === 'sharepoint') {
     return {
-      icon: <SharePointIcon className="size-6" />,
       title:
         sourceMode === 'auto'
           ? t('sourceType.sharePointSynced')
           : t('sourceType.sharePoint'),
-      synced: sourceMode === 'auto',
     };
   }
   if (sourceProvider === 'upload') {
     return {
-      icon: <Monitor className="size-6" />,
       title: t('sourceType.uploaded'),
-      synced: false,
     };
   }
   return null;
@@ -128,15 +117,11 @@ export function useDocumentsTableConfig({
       },
       {
         accessorKey: 'size',
-        header: () => (
-          <Text as="span" align="right" className="block w-full">
-            {tTables('headers.size')}
-          </Text>
-        ),
+        header: tTables('headers.size'),
         size: 128,
-        meta: { headerLabel: tTables('headers.size'), align: 'right' as const },
+        meta: { headerLabel: tTables('headers.size') },
         cell: ({ row }) => (
-          <Text as="span" align="right" className="block whitespace-nowrap">
+          <Text as="span" className="block whitespace-nowrap">
             {row.original.type === 'folder' || !row.original.size
               ? '—'
               : formatBytes(row.original.size)}
@@ -146,9 +131,9 @@ export function useDocumentsTableConfig({
       {
         id: 'source',
         header: () => (
-          <Text as="span" align="center" className="block w-full">
+          <span className="block w-full text-center">
             {tTables('headers.source')}
-          </Text>
+          </span>
         ),
         size: 96,
         meta: {
@@ -163,17 +148,9 @@ export function useDocumentsTableConfig({
           );
           if (!source) return null;
           return (
-            <HStack gap={2} justify="center">
-              <div
-                className={source.synced ? 'relative' : undefined}
-                title={source.title}
-              >
-                {source.icon}
-                {source.synced && (
-                  <RefreshCw className="text-background bg-foreground absolute right-0.5 bottom-0 size-4 rounded-full p-0.5" />
-                )}
-              </div>
-            </HStack>
+            <Text as="span" variant="muted" className="block text-center">
+              {source.title}
+            </Text>
           );
         },
       },
@@ -257,19 +234,20 @@ export function useDocumentsTableConfig({
       {
         accessorKey: 'lastModified',
         header: () => (
-          <Text as="span" align="right" className="block w-full">
-            {tTables('headers.modified')}
-          </Text>
+          <span className="block w-full text-right">
+            {tTables('headers.updated')}
+          </span>
         ),
         size: 192,
         meta: {
-          headerLabel: tTables('headers.modified'),
+          headerLabel: tTables('headers.updated'),
           align: 'right' as const,
         },
         cell: ({ row }) => (
           <CopyableTimestamp
             date={row.original.lastModified}
             preset="long"
+            customFormat="ll LT"
             alignRight
           />
         ),
diff --git a/services/platform/messages/en.json b/services/platform/messages/en.json
index 9b770d1ae..89d178a94 100644
--- a/services/platform/messages/en.json
+++ b/services/platform/messages/en.json
@@ -89,9 +89,10 @@
       "tags": "Tags",
       "notes": "Notes",
       "created": "Created",
+      "filter": "Filter",
       "filters": "Filters",
       "notAvailable": "N/A",
-      "nSelected": "{{count}} selected"
+      "nSelected": "{count} selected"
     },
     "status": {
       "active": "Active",
@@ -309,7 +310,7 @@
       "source": "Source",
       "created": "Created",
       "updated": "Updated",
-      "modified": "Modified",
+      "modified": "Updated",
       "actions": "Actions",
       "member": "Member",
       "role": "Role",
@@ -2349,11 +2350,11 @@
       "orgWide": "Organization-wide"
     },
     "deleteFile": {
-      "title": "Delete file",
-      "confirmation": "Are you sure you want to delete",
-      "thisFile": "this file",
-      "warning": "This action cannot be undone.",
-      "deleteButton": "Delete file"
+      "title": "Delete document",
+      "confirmationPrefix": "Are you sure you want to delete",
+      "confirmationSuffix": "? This action cannot be undone.",
+      "thisDocument": "this document",
+      "deleteButton": "Delete"
     },
     "breadcrumb": {
       "navigation": "Breadcrumb",
@@ -2372,7 +2373,21 @@
       "oneDrive": "OneDrive",
       "sharePointSynced": "SharePoint (synced)",
       "sharePoint": "SharePoint",
-      "uploaded": "Uploaded"
+      "uploaded": "Upload"
+    },
+    "filter": {
+      "ragStatus": {
+        "indexed": "Indexed",
+        "notIndexed": "Not indexed",
+        "indexing": "Indexing",
+        "failed": "Failed",
+        "needsReindex": "Needs reindex"
+      },
+      "source": {
+        "upload": "Upload",
+        "oneDrive": "OneDrive",
+        "sharePoint": "SharePoint"
+      }
     },
     "preview": {
       "loading": "Loading…",

From 5b7d4f7ab3eccfceeda5376aeb08031327fa408e Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Tue, 10 Mar 2026 20:27:20 +0100
Subject: [PATCH 2/8] fix(platform): address CodeRabbit review feedback

- Fix filter button aria-label to match visible "Filter" text
- Use single i18n key with {name} placeholder for delete confirmation
- Append timezone abbreviation to OneDrive file table date column
- Add clarifying comment for preset="long" in CopyableTimestamp usage
---
 .../components/ui/filters/filter-button.tsx   |  2 +-
 .../components/document-delete-dialog.tsx     | 28 ++++++++++++++-----
 .../onedrive-import/onedrive-file-table.tsx   |  6 ++--
 .../hooks/use-documents-table-config.tsx      |  2 +-
 services/platform/messages/en.json            |  3 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/services/platform/app/components/ui/filters/filter-button.tsx b/services/platform/app/components/ui/filters/filter-button.tsx
index 191c8559d..c981fb764 100644
--- a/services/platform/app/components/ui/filters/filter-button.tsx
+++ b/services/platform/app/components/ui/filters/filter-button.tsx
@@ -22,7 +22,7 @@ export function FilterButton({
   return (
     <Button
       variant="secondary"
-      aria-label={t('labels.filters')}
+      aria-label={t('labels.filter')}
       className={cn(
         'hover:bg-muted relative gap-2',
         hasActiveFilters && 'border-primary',
diff --git a/services/platform/app/features/documents/components/document-delete-dialog.tsx b/services/platform/app/features/documents/components/document-delete-dialog.tsx
index 36055f9d3..df9f77ea2 100644
--- a/services/platform/app/features/documents/components/document-delete-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-delete-dialog.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Fragment, useMemo } from 'react';
+
 import { DeleteDialog } from '@/app/components/ui/dialog/delete-dialog';
 import { useT } from '@/lib/i18n/client';
 
@@ -20,18 +22,30 @@ export function DocumentDeleteDialog({
 }: DocumentDeleteDialogProps) {
   const { t: tDocuments } = useT('documents');
 
+  const displayName = fileName ?? tDocuments('deleteFile.thisDocument');
+
+  const description = useMemo(() => {
+    const raw = tDocuments('deleteFile.confirmation', { name: '{name}' });
+    const parts = raw.split('{name}');
+    if (parts.length <= 1) return raw;
+    return (
+      <>
+        {parts.map((part, index) => (
+          <Fragment key={index}>
+            {part}
+            {index < parts.length - 1 && <strong>{displayName}</strong>}
+          </Fragment>
+        ))}
+      </>
+    );
+  }, [tDocuments, displayName]);
+
   return (
     <DeleteDialog
       open={open}
       onOpenChange={onOpenChange}
       title={tDocuments('deleteFile.title')}
-      description={
-        <>
-          {tDocuments('deleteFile.confirmationPrefix')}{' '}
-          <strong>{fileName ?? tDocuments('deleteFile.thisDocument')}</strong>
-          {tDocuments('deleteFile.confirmationSuffix')}
-        </>
-      }
+      description={description}
       deleteText={tDocuments('deleteFile.deleteButton')}
       isDeleting={isLoading}
       onDelete={onConfirmDelete}
diff --git a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
index 741500984..a43c216c5 100644
--- a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
+++ b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
@@ -44,7 +44,7 @@ export function OneDriveFileTable({
   handleFolderClick,
   buildItemPath,
 }: OneDriveFileTableProps) {
-  const { formatDate } = useFormatDate();
+  const { formatDate, timezoneShort } = useFormatDate();
   const { t } = useT('documents');
   const { t: tTables } = useT('tables');
 
@@ -122,9 +122,9 @@ export function OneDriveFileTable({
             className="text-right whitespace-nowrap"
           >
             {row.original.lastModified
-              ? formatDate(new Date(row.original.lastModified), 'long', {
+              ? `${formatDate(new Date(row.original.lastModified), 'long', {
                   customFormat: 'll LT',
-                })
+                })} ${timezoneShort}`
               : ''}
           </Text>
         ),
diff --git a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
index 2931eb632..14079d8e3 100644
--- a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
+++ b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
@@ -246,7 +246,7 @@ export function useDocumentsTableConfig({
         cell: ({ row }) => (
           <CopyableTimestamp
             date={row.original.lastModified}
-            preset="long"
+            preset="long" // preset="long" triggers timezone abbreviation appending
             customFormat="ll LT"
             alignRight
           />
diff --git a/services/platform/messages/en.json b/services/platform/messages/en.json
index 89d178a94..b58dcea01 100644
--- a/services/platform/messages/en.json
+++ b/services/platform/messages/en.json
@@ -2351,8 +2351,7 @@
     },
     "deleteFile": {
       "title": "Delete document",
-      "confirmationPrefix": "Are you sure you want to delete",
-      "confirmationSuffix": "? This action cannot be undone.",
+      "confirmation": "Are you sure you want to delete {name}? This action cannot be undone.",
       "thisDocument": "this document",
       "deleteButton": "Delete"
     },

From 29da261abb22cf778c9317427707ae8531e9e836 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Tue, 10 Mar 2026 20:31:50 +0100
Subject: [PATCH 3/8] fix(platform): fix lint and test failures

- Add timezoneShort to useMemo dependency array in OneDrive file table
- Update filter button test to match new singular aria-label
---
 .../app/components/ui/data-table/data-table-filters.test.tsx    | 2 +-
 .../components/onedrive-import/onedrive-file-table.tsx          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/services/platform/app/components/ui/data-table/data-table-filters.test.tsx b/services/platform/app/components/ui/data-table/data-table-filters.test.tsx
index d9d72b6f6..022890afb 100644
--- a/services/platform/app/components/ui/data-table/data-table-filters.test.tsx
+++ b/services/platform/app/components/ui/data-table/data-table-filters.test.tsx
@@ -25,7 +25,7 @@ function createFilter(overrides?: Partial<FilterConfig>): FilterConfig {
 async function openFilterPanel(
   user: ReturnType<typeof import('@testing-library/user-event').default.setup>,
 ) {
-  const filterButton = screen.getByRole('button', { name: /filters/i });
+  const filterButton = screen.getByRole('button', { name: /filter/i });
   await user.click(filterButton);
 }
 
diff --git a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
index a43c216c5..119dd007c 100644
--- a/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
+++ b/services/platform/app/features/documents/components/onedrive-import/onedrive-file-table.tsx
@@ -155,6 +155,7 @@ export function OneDriveFileTable({
       handleFolderClick,
       tTables,
       formatDate,
+      timezoneShort,
     ],
   );
 

From ee63efab1959d8fc086f9d6b2633bdc2857b25e4 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Wed, 11 Mar 2026 12:44:45 +0100
Subject: [PATCH 4/8] feat(platform): multi-team support, document preview
 sidebar, and team tags dialog

Add multi-team assignment for documents replacing single-team model.
Refactor team tags dialog with checkbox-based selection and empty state.
Add details sidebar to document preview dialog with metadata display.
Update backend to support teamIds array and multi-team access queries.
---
 .../__tests__/document-preview-image.test.tsx | 102 ++++++
 .../document-preview-routing.test.tsx         | 131 +++++++
 .../document-team-tags-dialog.test.tsx        | 329 ++++++++++++++++++
 .../components/document-preview-dialog.tsx    | 146 ++++++--
 .../components/document-preview-docx.tsx      |   5 +-
 .../components/document-preview-image.tsx     |  63 ++++
 .../components/document-preview-pdf.tsx       |   6 +-
 .../components/document-preview-text.tsx      |   5 +-
 .../components/document-preview-xlsx.tsx      |   5 +-
 .../documents/components/document-preview.tsx |  25 ++
 .../components/document-row-actions.tsx       |   6 +-
 .../components/document-team-tags-dialog.tsx  | 228 ++++++++----
 .../documents/components/preview-pane.tsx     |  19 +
 .../hooks/use-documents-table-config.tsx      |  34 +-
 .../documents/get_accessible_document_ids.ts  |  23 +-
 .../platform/convex/documents/mutations.ts    |   4 +-
 .../platform/convex/documents/team_fields.ts  |  31 +-
 .../documents/transform_to_document_item.ts   |   1 +
 .../convex/documents/update_document.ts       |  27 +-
 .../platform/convex/documents/validators.ts   |   1 +
 services/platform/convex/lib/team_access.ts   |  16 +-
 services/platform/messages/en.json            |  25 +-
 services/platform/types/documents.ts          |   1 +
 23 files changed, 1056 insertions(+), 177 deletions(-)
 create mode 100644 services/platform/app/features/documents/components/__tests__/document-preview-image.test.tsx
 create mode 100644 services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
 create mode 100644 services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
 create mode 100644 services/platform/app/features/documents/components/document-preview-image.tsx
 create mode 100644 services/platform/app/features/documents/components/preview-pane.tsx

diff --git a/services/platform/app/features/documents/components/__tests__/document-preview-image.test.tsx b/services/platform/app/features/documents/components/__tests__/document-preview-image.test.tsx
new file mode 100644
index 000000000..3214cdc21
--- /dev/null
+++ b/services/platform/app/features/documents/components/__tests__/document-preview-image.test.tsx
@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+
+import { DocumentPreviewImage } from '../document-preview-image';
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: (ns: string) => ({
+    t: (key: string) => {
+      const translations: Record<string, Record<string, string>> = {
+        documents: {
+          'preview.failedToLoad': 'Failed to load document',
+          'preview.document': 'Document',
+        },
+        common: {
+          'imagePreview.zoomIn': 'Zoom in',
+          'imagePreview.zoomOut': 'Zoom out',
+          'imagePreview.resetZoom': 'Reset zoom',
+        },
+      };
+      return translations[ns]?.[key] ?? key;
+    },
+  }),
+}));
+
+afterEach(cleanup);
+
+describe('DocumentPreviewImage', () => {
+  it('renders an img element with the provided url', () => {
+    render(
+      <DocumentPreviewImage
+        url="https://example.com/photo.jpg"
+        fileName="photo.jpg"
+      />,
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.jpg');
+    expect(img).toHaveAttribute('alt', 'photo.jpg');
+  });
+
+  it('uses fallback alt text when no fileName is provided', () => {
+    render(<DocumentPreviewImage url="https://example.com/photo.jpg" />);
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('alt', 'Document');
+  });
+
+  it('shows loading skeleton initially', () => {
+    const { container } = render(
+      <DocumentPreviewImage url="https://example.com/photo.jpg" />,
+    );
+
+    expect(container.querySelector('[class*="animate-pulse"]')).toBeTruthy();
+  });
+
+  it('hides loading skeleton after image loads', () => {
+    const { container } = render(
+      <DocumentPreviewImage url="https://example.com/photo.jpg" />,
+    );
+
+    const img = screen.getByRole('img');
+    fireEvent.load(img);
+
+    expect(container.querySelector('[class*="animate-pulse"]')).toBeFalsy();
+  });
+
+  it('shows error message when image fails to load', () => {
+    render(<DocumentPreviewImage url="https://example.com/broken.jpg" />);
+
+    const img = screen.getByRole('img');
+    fireEvent.error(img);
+
+    expect(screen.getByText('Failed to load document')).toBeInTheDocument();
+  });
+
+  it('applies object-contain styling for proper scaling', () => {
+    render(<DocumentPreviewImage url="https://example.com/photo.jpg" />);
+
+    const img = screen.getByRole('img');
+    expect(img.className).toContain('object-contain');
+  });
+
+  it('renders zoom controls', () => {
+    render(<DocumentPreviewImage url="https://example.com/photo.jpg" />);
+
+    expect(screen.getByRole('button', { name: 'Zoom in' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Zoom out' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Reset zoom' }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows zoom percentage', () => {
+    render(<DocumentPreviewImage url="https://example.com/photo.jpg" />);
+
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+});
diff --git a/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
new file mode 100644
index 000000000..3f25a083f
--- /dev/null
+++ b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('@/app/hooks/use-toast', () => ({
+  useToast: () => ({ toast: vi.fn() }),
+}));
+
+vi.mock('../document-preview-image', () => ({
+  DocumentPreviewImage: ({
+    url,
+    fileName,
+  }: {
+    url: string;
+    fileName?: string;
+  }) => (
+    <div data-testid="image-preview" data-url={url} data-filename={fileName} />
+  ),
+}));
+
+vi.mock('../document-preview-pdf', () => ({
+  DocumentPreviewPDF: ({ url }: { url: string }) => (
+    <div data-testid="pdf-preview" data-url={url} />
+  ),
+}));
+
+vi.mock('../document-preview-docx', () => ({
+  DocumentPreviewDocx: ({ url }: { url: string }) => (
+    <div data-testid="docx-preview" data-url={url} />
+  ),
+}));
+
+vi.mock('../document-preview-xlsx', () => ({
+  DocumentPreviewXlsx: ({ url }: { url: string }) => (
+    <div data-testid="xlsx-preview" data-url={url} />
+  ),
+}));
+
+vi.mock('../document-preview-text', () => ({
+  DocumentPreviewText: ({
+    url,
+    fileName,
+  }: {
+    url: string;
+    fileName?: string;
+  }) => (
+    <div data-testid="text-preview" data-url={url} data-filename={fileName} />
+  ),
+}));
+
+vi.mock('@/lib/utils/lazy-component', () => ({
+  lazyComponent: (factory: () => Promise<{ default: unknown }>) => {
+    let Component: React.ComponentType<Record<string, unknown>> | null = null;
+    void factory().then((m) => {
+      Component = m.default as React.ComponentType<Record<string, unknown>>;
+    });
+    return (props: Record<string, unknown>) => {
+      if (!Component) return null;
+      return <Component {...props} />;
+    };
+  },
+}));
+
+// Flush microtasks so lazy components resolve
+async function flushMicrotasks() {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+import { DocumentPreview } from '../document-preview';
+
+afterEach(cleanup);
+
+describe('DocumentPreview routing', () => {
+  it.each(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'avif'])(
+    'routes .%s files to image preview',
+    async (ext) => {
+      render(
+        <DocumentPreview
+          url={`https://example.com/file.${ext}`}
+          fileName={`photo.${ext}`}
+        />,
+      );
+      await flushMicrotasks();
+
+      expect(screen.getByTestId('image-preview')).toBeInTheDocument();
+    },
+  );
+
+  it('routes .pdf files to PDF preview', async () => {
+    render(
+      <DocumentPreview
+        url="https://example.com/doc.pdf"
+        fileName="report.pdf"
+      />,
+    );
+    await flushMicrotasks();
+
+    expect(screen.getByTestId('pdf-preview')).toBeInTheDocument();
+  });
+
+  it('routes .docx files to DOCX preview', async () => {
+    render(
+      <DocumentPreview
+        url="https://example.com/doc.docx"
+        fileName="report.docx"
+      />,
+    );
+    await flushMicrotasks();
+
+    expect(screen.getByTestId('docx-preview')).toBeInTheDocument();
+  });
+
+  it('routes uppercase image extensions correctly', async () => {
+    render(
+      <DocumentPreview
+        url="https://example.com/PHOTO.PNG"
+        fileName="PHOTO.PNG"
+      />,
+    );
+    await flushMicrotasks();
+
+    expect(screen.getByTestId('image-preview')).toBeInTheDocument();
+  });
+});
diff --git a/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx b/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
new file mode 100644
index 000000000..7da02a33e
--- /dev/null
+++ b/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
@@ -0,0 +1,329 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockMutateAsync = vi.fn();
+const mockToast = vi.fn();
+const mockNavigate = vi.fn();
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: (ns: string) => ({
+    t: (key: string, params?: Record<string, string>) => {
+      if (params) {
+        return Object.entries(params).reduce(
+          (acc, [k, v]) => acc.replace(`{${k}}`, v),
+          `${ns}.${key}`,
+        );
+      }
+      return `${ns}.${key}`;
+    },
+  }),
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+vi.mock('@/app/hooks/use-organization-id', () => ({
+  useOrganizationId: () => 'org-1',
+}));
+
+vi.mock('@/app/hooks/use-toast', () => ({
+  toast: (...args: unknown[]) => mockToast(...args),
+}));
+
+vi.mock('../../hooks/mutations', () => ({
+  useUpdateDocument: () => ({ mutateAsync: mockMutateAsync }),
+}));
+
+const mockTeams = [
+  { id: 'team-1', name: 'Sales' },
+  { id: 'team-2', name: 'Support' },
+  { id: 'team-3', name: 'Operations' },
+];
+
+let mockTeamsData: { teams: typeof mockTeams | undefined; isLoading: boolean } =
+  { teams: mockTeams, isLoading: false };
+
+vi.mock('@/app/features/settings/teams/hooks/queries', () => ({
+  useTeams: () => mockTeamsData,
+}));
+
+vi.mock('@/convex/lib/type_cast_helpers', () => ({
+  toId: (id: string) => id,
+}));
+
+import { DocumentTeamTagsDialog } from '../document-team-tags-dialog';
+
+describe('DocumentTeamTagsDialog', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: vi.fn(),
+    documentId: 'doc-1',
+    documentName: 'Return policy v2.docx',
+    currentTeamIds: [] as string[],
+  };
+
+  beforeEach(() => {
+    mockTeamsData = { teams: mockTeams, isLoading: false };
+    mockMutateAsync.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when not open', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} open={false} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('renders the dialog title', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(screen.getByText('documents.teamTags.title')).toBeInTheDocument();
+  });
+
+  it('shows the document name as description', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(screen.getByText('Return policy v2.docx')).toBeInTheDocument();
+  });
+
+  it('extracts filename from path for description', () => {
+    render(
+      <DocumentTeamTagsDialog
+        {...defaultProps}
+        documentName="folder/subfolder/Report.pdf"
+      />,
+    );
+    expect(screen.getByText('Report.pdf')).toBeInTheDocument();
+  });
+
+  it('renders organization-wide option and all team checkboxes', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(screen.getByText('documents.teamTags.orgWide')).toBeInTheDocument();
+    expect(screen.getByText('Sales')).toBeInTheDocument();
+    expect(screen.getByText('Support')).toBeInTheDocument();
+    expect(screen.getByText('Operations')).toBeInTheDocument();
+  });
+
+  it('shows org-wide checkbox as checked by default (no teams selected)', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0]).toBeChecked();
+    expect(checkboxes[1]).not.toBeChecked();
+    expect(checkboxes[2]).not.toBeChecked();
+    expect(checkboxes[3]).not.toBeChecked();
+  });
+
+  it('shows loading state', () => {
+    mockTeamsData = { teams: undefined, isLoading: true };
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(screen.getByText('common.actions.loading')).toBeInTheDocument();
+  });
+
+  it('shows empty state with title, description and settings link', () => {
+    mockTeamsData = { teams: [], isLoading: false };
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(
+      screen.getByText('documents.teamTags.noTeamsTitle'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('documents.teamTags.noTeamsDescription'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('documents.teamTags.goToSettings'),
+    ).toBeInTheDocument();
+  });
+
+  it('hides footer when no teams', () => {
+    mockTeamsData = { teams: [], isLoading: false };
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    expect(screen.queryByText('common.actions.cancel')).not.toBeInTheDocument();
+    expect(screen.queryByText('common.actions.save')).not.toBeInTheDocument();
+  });
+
+  it('navigates to settings on go to settings click', async () => {
+    mockTeamsData = { teams: [], isLoading: false };
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <DocumentTeamTagsDialog {...defaultProps} onOpenChange={onOpenChange} />,
+    );
+
+    await user.click(screen.getByText('documents.teamTags.goToSettings'));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/dashboard/$id/settings/teams',
+      params: { id: 'org-1' },
+    });
+  });
+
+  it('pre-selects current teams and unchecks org-wide', () => {
+    render(
+      <DocumentTeamTagsDialog
+        {...defaultProps}
+        currentTeamIds={['team-1', 'team-2']}
+      />,
+    );
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
+    expect(checkboxes[3]).not.toBeChecked();
+  });
+
+  it('toggles team selection on click', async () => {
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+  });
+
+  it('deselects team when clicking an already-selected team', async () => {
+    const user = userEvent.setup();
+    render(
+      <DocumentTeamTagsDialog {...defaultProps} currentTeamIds={['team-1']} />,
+    );
+
+    await user.click(screen.getByText('Sales'));
+    expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+  });
+
+  it('allows selecting multiple teams', async () => {
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    await user.click(screen.getByText('Support'));
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
+    expect(checkboxes[3]).not.toBeChecked();
+  });
+
+  it('disables save when no changes', () => {
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+    const saveButton = screen.getByText('common.actions.save');
+    expect(saveButton).toBeDisabled();
+  });
+
+  it('enables save when team changes', async () => {
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    const saveButton = screen.getByText('common.actions.save');
+    expect(saveButton).toBeEnabled();
+  });
+
+  it('submits with the selected team ids', async () => {
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    await user.click(screen.getByText('Support'));
+    await user.click(screen.getByText('common.actions.save'));
+
+    expect(mockMutateAsync).toHaveBeenCalledWith({
+      documentId: 'doc-1',
+      teamIds: expect.arrayContaining(['team-1', 'team-2']),
+    });
+  });
+
+  it('clears all teams when clicking organization-wide', async () => {
+    const user = userEvent.setup();
+    render(
+      <DocumentTeamTagsDialog
+        {...defaultProps}
+        currentTeamIds={['team-1', 'team-2']}
+      />,
+    );
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+    expect(checkboxes[2]).toBeChecked();
+
+    await user.click(screen.getByText('documents.teamTags.orgWide'));
+
+    const updatedCheckboxes = screen.getAllByRole('checkbox');
+    expect(updatedCheckboxes[0]).toBeChecked();
+    expect(updatedCheckboxes[1]).not.toBeChecked();
+    expect(updatedCheckboxes[2]).not.toBeChecked();
+    expect(updatedCheckboxes[3]).not.toBeChecked();
+  });
+
+  it('submits empty array when org-wide is selected', async () => {
+    const user = userEvent.setup();
+    render(
+      <DocumentTeamTagsDialog {...defaultProps} currentTeamIds={['team-1']} />,
+    );
+
+    await user.click(screen.getByText('documents.teamTags.orgWide'));
+    await user.click(screen.getByText('common.actions.save'));
+
+    expect(mockMutateAsync).toHaveBeenCalledWith({
+      documentId: 'doc-1',
+      teamIds: [],
+    });
+  });
+
+  it('shows success toast after save', async () => {
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    await user.click(screen.getByText('common.actions.save'));
+
+    expect(mockToast).toHaveBeenCalledWith({
+      title: 'documents.teamTags.updated',
+      variant: 'success',
+    });
+  });
+
+  it('shows error toast on save failure', async () => {
+    mockMutateAsync.mockRejectedValue(new Error('fail'));
+    const user = userEvent.setup();
+    render(<DocumentTeamTagsDialog {...defaultProps} />);
+
+    await user.click(screen.getByText('Sales'));
+    await user.click(screen.getByText('common.actions.save'));
+
+    expect(mockToast).toHaveBeenCalledWith({
+      title: 'documents.teamTags.updateFailed',
+      variant: 'destructive',
+    });
+  });
+
+  it('closes dialog on cancel', async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <DocumentTeamTagsDialog {...defaultProps} onOpenChange={onOpenChange} />,
+    );
+
+    await user.click(screen.getByText('common.actions.cancel'));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('closes dialog after successful save', async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    render(
+      <DocumentTeamTagsDialog {...defaultProps} onOpenChange={onOpenChange} />,
+    );
+
+    await user.click(screen.getByText('Sales'));
+    await user.click(screen.getByText('common.actions.save'));
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
diff --git a/services/platform/app/features/documents/components/document-preview-dialog.tsx b/services/platform/app/features/documents/components/document-preview-dialog.tsx
index 8399a607d..2ca1cc938 100644
--- a/services/platform/app/features/documents/components/document-preview-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-preview-dialog.tsx
@@ -12,11 +12,18 @@ import { Button } from '@/app/components/ui/primitives/button';
 import { IconButton } from '@/app/components/ui/primitives/icon-button';
 import { Heading } from '@/app/components/ui/typography/heading';
 import { Text } from '@/app/components/ui/typography/text';
+import { useTeams } from '@/app/features/settings/teams/hooks/queries';
+import { useFormatDate } from '@/app/hooks/use-format-date';
+import { useLocale } from '@/app/hooks/use-locale';
 import { useToast } from '@/app/hooks/use-toast';
 import { useT } from '@/lib/i18n/client';
+import { formatBytes } from '@/lib/utils/format/number';
+
+import type { Document } from '../hooks/queries';
 
 import { useDocuments } from '../hooks/queries';
 import { DocumentPreview } from './document-preview';
+import { RagStatusBadge } from './rag-status-badge';
 
 interface DocumentPreviewDialogProps {
   open: boolean;
@@ -26,6 +33,106 @@ interface DocumentPreviewDialogProps {
   fileName?: string;
 }
 
+function SidebarRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <Text variant="muted" size="xs" weight="medium">
+        {label}
+      </Text>
+      <div className="text-foreground text-[13px] leading-snug">{children}</div>
+    </div>
+  );
+}
+
+function DetailsSidebar({ doc }: { doc: Document }) {
+  const { t } = useT('documents');
+  const { formatDate } = useFormatDate();
+  const { locale } = useLocale();
+  const { teams } = useTeams();
+
+  const teamName = useMemo(() => {
+    if (!doc.teamId || !teams) return undefined;
+    const team = teams.find(
+      (entry: { id: string; name: string }) => entry.id === doc.teamId,
+    );
+    return team?.name;
+  }, [doc.teamId, teams]);
+
+  const sourceLabel = useMemo(() => {
+    const labels: Record<string, string> = {
+      upload: t('preview.sidebar.sourceUpload'),
+      onedrive: t('preview.sidebar.sourceOnedrive'),
+      sharepoint: t('preview.sidebar.sourceSharepoint'),
+    };
+    return labels[doc.sourceProvider ?? 'upload'] ?? doc.sourceProvider;
+  }, [doc.sourceProvider, t]);
+
+  const modifiedDate = useMemo(() => {
+    if (!doc.lastModified) return undefined;
+    return formatDate(new Date(doc.lastModified), 'short');
+  }, [doc.lastModified, formatDate]);
+
+  return (
+    <aside
+      className="flex w-[220px] shrink-0 flex-col gap-3 overflow-y-auto"
+      aria-label={t('preview.sidebar.document')}
+    >
+      <SidebarRow label={t('preview.sidebar.document')}>
+        <HStack gap={1.5} className="items-center">
+          <DocumentIcon fileName={doc.name ?? ''} className="w-4" />
+          <span className="truncate">{doc.name}</span>
+        </HStack>
+      </SidebarRow>
+
+      {doc.size != null && (
+        <SidebarRow label={t('preview.sidebar.size')}>
+          {formatBytes(doc.size, locale)}
+        </SidebarRow>
+      )}
+
+      <SidebarRow label={t('preview.sidebar.source')}>{sourceLabel}</SidebarRow>
+
+      <Separator />
+
+      <SidebarRow label={t('preview.sidebar.ragStatus')}>
+        <RagStatusBadge
+          status={doc.ragStatus}
+          indexedAt={doc.ragIndexedAt}
+          error={doc.ragError}
+          documentId={doc.id}
+        />
+      </SidebarRow>
+
+      <Separator />
+
+      {teamName && (
+        <SidebarRow label={t('preview.sidebar.teams')}>{teamName}</SidebarRow>
+      )}
+
+      {doc.createdByName && (
+        <SidebarRow label={t('preview.sidebar.uploadedBy')}>
+          {doc.createdByName}
+        </SidebarRow>
+      )}
+
+      {modifiedDate && (
+        <>
+          <Separator />
+          <SidebarRow label={t('preview.sidebar.modified')}>
+            {modifiedDate}
+          </SidebarRow>
+        </>
+      )}
+    </aside>
+  );
+}
+
 export function DocumentPreviewDialog({
   open,
   onOpenChange,
@@ -89,45 +196,33 @@ export function DocumentPreviewDialog({
     <Dialog
       open={open}
       onOpenChange={onOpenChange}
-      title={displayName}
+      title={t('preview.title')}
       size="wide"
       hideClose
       className="flex h-[85vh] flex-col overflow-hidden p-0 sm:p-0"
       customHeader={
-        <div className="flex max-h-[4.5rem] flex-row items-center justify-between border-b p-5">
-          <HStack gap={3} className="min-w-0">
-            <div className="shrink-0">
-              <DocumentIcon fileName={displayName} />
-            </div>
-            <div className="min-w-0">
-              <Heading
-                level={2}
-                tracking="tight"
-                truncate
-                className="leading-none"
-              >
-                {displayName}
-              </Heading>
-            </div>
-          </HStack>
+        <div className="flex max-h-[4.5rem] flex-row items-center justify-between p-5">
+          <Heading level={2} tracking="tight" className="leading-none">
+            {t('preview.title')}
+          </Heading>
 
           <ActionRow gap={2}>
             {doc?.url && (
               <Button
-                variant="ghost"
-                size="icon"
+                variant="outline"
+                size="sm"
                 onClick={handleDownload}
                 disabled={isDownloading}
                 aria-label={t('preview.downloadFile')}
               >
                 {isDownloading ? (
-                  <Loader2 className="size-4 animate-spin" />
+                  <Loader2 className="mr-1.5 size-3.5 animate-spin" />
                 ) : (
-                  <Download className="size-4" />
+                  <Download className="mr-1.5 size-3.5" />
                 )}
+                {t('preview.download')}
               </Button>
             )}
-            <Separator className="h-6" orientation="vertical" />
             <IconButton
               icon={X}
               aria-label={t('preview.closePreview')}
@@ -152,7 +247,12 @@ export function DocumentPreviewDialog({
         </div>
       )}
       {!isLoading && doc?.url && (
-        <DocumentPreview url={doc.url} fileName={displayName} />
+        <div className="flex min-h-0 flex-1 gap-5 px-5 pb-5">
+          <div className="flex min-w-0 flex-1 flex-col">
+            <DocumentPreview url={doc.url} fileName={displayName} />
+          </div>
+          <DetailsSidebar doc={doc} />
+        </div>
       )}
     </Dialog>
   );
diff --git a/services/platform/app/features/documents/components/document-preview-docx.tsx b/services/platform/app/features/documents/components/document-preview-docx.tsx
index 90285acc6..3419b5a88 100644
--- a/services/platform/app/features/documents/components/document-preview-docx.tsx
+++ b/services/platform/app/features/documents/components/document-preview-docx.tsx
@@ -5,6 +5,7 @@ import { useCallback } from 'react';
 import { useT } from '@/lib/i18n/client';
 
 import { useDocxPreview } from '../hooks/use-document-preview';
+import { PreviewPane } from './preview-pane';
 
 interface DocumentPreviewDocxProps {
   url: string;
@@ -22,7 +23,7 @@ export function DocumentPreviewDocx({ url }: DocumentPreviewDocxProps) {
   );
 
   return (
-    <div className="relative mx-auto w-full flex-1 overflow-x-auto overflow-y-auto p-6">
+    <PreviewPane>
       {isLoading && (
         <div className="mt-4 text-center text-gray-500">
           {t('preview.loading')}
@@ -39,6 +40,6 @@ export function DocumentPreviewDocx({ url }: DocumentPreviewDocxProps) {
           className="prose mx-auto aspect-[1/1.4] w-full max-w-2xl"
         />
       )}
-    </div>
+    </PreviewPane>
   );
 }
diff --git a/services/platform/app/features/documents/components/document-preview-image.tsx b/services/platform/app/features/documents/components/document-preview-image.tsx
new file mode 100644
index 000000000..37a9cca18
--- /dev/null
+++ b/services/platform/app/features/documents/components/document-preview-image.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+
+import { ZoomPanViewer } from '@/app/components/ui/data-display/zoom-pan-viewer';
+import { Skeleton } from '@/app/components/ui/feedback/skeleton';
+import { Center } from '@/app/components/ui/layout/layout';
+import { Text } from '@/app/components/ui/typography/text';
+import { useT } from '@/lib/i18n/client';
+
+import { PreviewPane } from './preview-pane';
+
+interface DocumentPreviewImageProps {
+  url: string;
+  fileName?: string;
+}
+
+export function DocumentPreviewImage({
+  url,
+  fileName,
+}: DocumentPreviewImageProps) {
+  const { t } = useT('documents');
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setIsLoading(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setIsLoading(false);
+    setHasError(true);
+  }, []);
+
+  if (hasError) {
+    return (
+      <PreviewPane className="flex items-center justify-center">
+        <Text as="div" variant="error" align="center">
+          {t('preview.failedToLoad')}
+        </Text>
+      </PreviewPane>
+    );
+  }
+
+  return (
+    <PreviewPane>
+      {isLoading && (
+        <Center className="absolute inset-0 z-10">
+          <Skeleton className="size-64 rounded-xl" />
+        </Center>
+      )}
+      <ZoomPanViewer
+        src={url}
+        alt={fileName || t('preview.document')}
+        toolbarPosition="bottom"
+        imageClassName="rounded-xl border"
+        onLoad={handleLoad}
+        onError={handleError}
+        className={isLoading ? 'invisible' : undefined}
+      />
+    </PreviewPane>
+  );
+}
diff --git a/services/platform/app/features/documents/components/document-preview-pdf.tsx b/services/platform/app/features/documents/components/document-preview-pdf.tsx
index 665ad2714..7a8b8980f 100644
--- a/services/platform/app/features/documents/components/document-preview-pdf.tsx
+++ b/services/platform/app/features/documents/components/document-preview-pdf.tsx
@@ -6,6 +6,8 @@ import React, { useReducer, useEffect, useRef, useCallback } from 'react';
 import { HStack } from '@/app/components/ui/layout/layout';
 import { useT } from '@/lib/i18n/client';
 
+import { PreviewPane } from './preview-pane';
+
 interface PageViewport {
   width: number;
   height: number;
@@ -285,7 +287,7 @@ export const DocumentPreviewPDF = ({ url }: { url: string }) => {
 
   return (
     <>
-      <div className="relative mx-auto w-full flex-1 overflow-x-visible overflow-y-auto p-6">
+      <PreviewPane className="overflow-x-visible">
         {/* Canvas */}
         <canvas
           ref={canvasRef}
@@ -351,7 +353,7 @@ export const DocumentPreviewPDF = ({ url }: { url: string }) => {
             {t('preview.loading')}
           </div>
         )}
-      </div>
+      </PreviewPane>
     </>
   );
 };
diff --git a/services/platform/app/features/documents/components/document-preview-text.tsx b/services/platform/app/features/documents/components/document-preview-text.tsx
index 0311f8d28..31c6eb89d 100644
--- a/services/platform/app/features/documents/components/document-preview-text.tsx
+++ b/services/platform/app/features/documents/components/document-preview-text.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/lib/utils/text-file-types';
 
 import { useTextPreview } from '../hooks/use-document-preview';
+import { PreviewPane } from './preview-pane';
 
 interface DocumentPreviewTextProps {
   url: string;
@@ -58,7 +59,7 @@ export function DocumentPreviewText({
   );
 
   return (
-    <div className="relative mx-auto w-full flex-1 overflow-x-auto overflow-y-auto p-6">
+    <PreviewPane>
       {isLoading && (
         <Text as="div" variant="muted" align="center" className="mt-4">
           {t('preview.loading')}
@@ -87,6 +88,6 @@ export function DocumentPreviewText({
             </pre>
           </div>
         ))}
-    </div>
+    </PreviewPane>
   );
 }
diff --git a/services/platform/app/features/documents/components/document-preview-xlsx.tsx b/services/platform/app/features/documents/components/document-preview-xlsx.tsx
index 25c50b77c..b803c9b93 100644
--- a/services/platform/app/features/documents/components/document-preview-xlsx.tsx
+++ b/services/platform/app/features/documents/components/document-preview-xlsx.tsx
@@ -5,6 +5,7 @@ import { useCallback } from 'react';
 import { useT } from '@/lib/i18n/client';
 
 import { useXlsxPreview } from '../hooks/use-document-preview';
+import { PreviewPane } from './preview-pane';
 
 interface DocumentPreviewXlsxProps {
   url: string;
@@ -22,7 +23,7 @@ export function DocumentPreviewXlsx({ url }: DocumentPreviewXlsxProps) {
   );
 
   return (
-    <div className="relative mx-auto w-full flex-1 overflow-x-auto overflow-y-auto p-6">
+    <PreviewPane>
       {isLoading && (
         <div className="mt-4 text-center text-gray-500">
           {t('preview.loading')}
@@ -39,6 +40,6 @@ export function DocumentPreviewXlsx({ url }: DocumentPreviewXlsxProps) {
           className="[&_td]:border-border [&_table]:bg-background text-foreground max-w-none [&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_th]:text-left [&_tr]:border-b"
         />
       )}
-    </div>
+    </PreviewPane>
   );
 }
diff --git a/services/platform/app/features/documents/components/document-preview.tsx b/services/platform/app/features/documents/components/document-preview.tsx
index 0c41eec35..8d0a019bf 100644
--- a/services/platform/app/features/documents/components/document-preview.tsx
+++ b/services/platform/app/features/documents/components/document-preview.tsx
@@ -57,6 +57,27 @@ const DocumentPreviewText = lazyComponent(
     loading: () => <PreviewSkeleton />,
   },
 );
+const DocumentPreviewImage = lazyComponent(
+  () =>
+    import('./document-preview-image').then((m) => ({
+      default: m.DocumentPreviewImage,
+    })),
+  {
+    loading: () => <PreviewSkeleton />,
+  },
+);
+
+const IMAGE_EXTENSIONS: ReadonlySet<string> = new Set([
+  'JPG',
+  'JPEG',
+  'PNG',
+  'GIF',
+  'WEBP',
+  'SVG',
+  'BMP',
+  'ICO',
+  'AVIF',
+]);
 
 export interface DocumentPreviewProps {
   url: string;
@@ -124,6 +145,10 @@ export function DocumentPreview({ url, fileName }: DocumentPreviewProps) {
     return <DocumentPreviewXlsx url={url} />;
   }
 
+  if (IMAGE_EXTENSIONS.has(extension)) {
+    return <DocumentPreviewImage url={url} fileName={fileName} />;
+  }
+
   if (isTextBasedFile(fileName || url)) {
     return <DocumentPreviewText url={url} fileName={fileName} />;
   }
diff --git a/services/platform/app/features/documents/components/document-row-actions.tsx b/services/platform/app/features/documents/components/document-row-actions.tsx
index 3577c2b8a..4c962e875 100644
--- a/services/platform/app/features/documents/components/document-row-actions.tsx
+++ b/services/platform/app/features/documents/components/document-row-actions.tsx
@@ -26,7 +26,7 @@ interface DocumentRowActionsProps {
   syncConfigId?: string;
   isDirectlySelected?: boolean;
   sourceMode?: StorageSourceMode;
-  teamId?: string | null;
+  teamIds?: string[];
   onFolderDeleted?: () => void;
 }
 
@@ -37,7 +37,7 @@ export function DocumentRowActions({
   syncConfigId,
   isDirectlySelected,
   sourceMode,
-  teamId,
+  teamIds,
   onFolderDeleted,
 }: DocumentRowActionsProps) {
   const { t: tDocuments } = useT('documents');
@@ -199,7 +199,7 @@ export function DocumentRowActions({
         onOpenChange={dialogs.setOpen.teamTags}
         documentId={documentId}
         documentName={name}
-        currentTeamId={teamId}
+        currentTeamIds={teamIds}
       />
     </>
   );
diff --git a/services/platform/app/features/documents/components/document-team-tags-dialog.tsx b/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
index b4bc5313b..71a64a26f 100644
--- a/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
@@ -1,18 +1,20 @@
 'use client';
 
-import { Users } from 'lucide-react';
-import { useState, useMemo } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { Settings, Users } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { Dialog } from '@/app/components/ui/dialog/dialog';
 import { EmptyState } from '@/app/components/ui/feedback/empty-state';
-import { Select } from '@/app/components/ui/forms/select';
-import { Stack } from '@/app/components/ui/layout/layout';
+import { Checkbox } from '@/app/components/ui/forms/checkbox';
 import { Button } from '@/app/components/ui/primitives/button';
 import { Text } from '@/app/components/ui/typography/text';
 import { useTeams } from '@/app/features/settings/teams/hooks/queries';
+import { useOrganizationId } from '@/app/hooks/use-organization-id';
 import { toast } from '@/app/hooks/use-toast';
 import { toId } from '@/convex/lib/type_cast_helpers';
 import { useT } from '@/lib/i18n/client';
+import { cn } from '@/lib/utils/cn';
 
 import { useUpdateDocument } from '../hooks/mutations';
 
@@ -21,11 +23,9 @@ interface DocumentTeamDialogProps {
   onOpenChange: (open: boolean) => void;
   documentId: string;
   documentName?: string | null;
-  currentTeamId?: string | null;
+  currentTeamIds?: string[];
 }
 
-const ORG_WIDE_VALUE = '__org_wide__';
-
 /**
  * Internal content component containing all hooks.
  * IMPORTANT: This component must only be rendered when the dialog is open.
@@ -37,46 +37,54 @@ function DocumentTeamDialogContent({
   onOpenChange,
   documentId,
   documentName,
-  currentTeamId,
+  currentTeamIds,
 }: DocumentTeamDialogProps) {
   const { t: tDocuments } = useT('documents');
   const { t: tCommon } = useT('common');
+  const navigate = useNavigate();
+  const organizationId = useOrganizationId();
 
-  const [selectedValue, setSelectedValue] = useState<string>(
-    () => currentTeamId ?? ORG_WIDE_VALUE,
+  const [selectedTeamIds, setSelectedTeamIds] = useState<Set<string>>(
+    () => new Set(currentTeamIds ?? []),
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const updateDocument = useUpdateDocument();
   const { teams, isLoading } = useTeams();
 
-  const teamOptions = useMemo(() => {
-    const items = [
-      { value: ORG_WIDE_VALUE, label: tDocuments('teamTags.orgWide') },
-    ];
-    if (teams) {
-      for (const team of teams) {
-        items.push({ value: team.id, label: team.name });
-      }
-    }
-    return items;
-  }, [teams, tDocuments]);
+  const hasTeams = teams && teams.length > 0;
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     if (!isSubmitting) {
       onOpenChange(false);
     }
-  };
+  }, [isSubmitting, onOpenChange]);
+
+  const isOrgWide = selectedTeamIds.size === 0;
+
+  const handleSelectOrgWide = useCallback(() => {
+    setSelectedTeamIds(new Set());
+  }, []);
 
-  const handleSubmit = async () => {
+  const handleToggleTeam = useCallback((teamId: string) => {
+    setSelectedTeamIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(teamId)) {
+        next.delete(teamId);
+      } else {
+        next.add(teamId);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
     setIsSubmitting(true);
 
     try {
-      const newTeamId = selectedValue === ORG_WIDE_VALUE ? null : selectedValue;
-
       await updateDocument.mutateAsync({
         documentId: toId<'documents'>(documentId),
-        teamId: newTeamId,
+        teamIds: [...selectedTeamIds],
       });
 
       toast({
@@ -94,12 +102,16 @@ function DocumentTeamDialogContent({
     } finally {
       setIsSubmitting(false);
     }
-  };
+  }, [documentId, selectedTeamIds, updateDocument, onOpenChange, tDocuments]);
 
   const hasChanges = useMemo(() => {
-    const currentValue = currentTeamId ?? ORG_WIDE_VALUE;
-    return currentValue !== selectedValue;
-  }, [currentTeamId, selectedValue]);
+    const currentSet = new Set(currentTeamIds ?? []);
+    if (currentSet.size !== selectedTeamIds.size) return true;
+    for (const id of currentSet) {
+      if (!selectedTeamIds.has(id)) return true;
+    }
+    return false;
+  }, [currentTeamIds, selectedTeamIds]);
 
   const displayName = useMemo(() => {
     if (!documentName) return '';
@@ -107,60 +119,126 @@ function DocumentTeamDialogContent({
     return parts[parts.length - 1] || documentName;
   }, [documentName]);
 
+  const handleGoToSettings = useCallback(() => {
+    if (!organizationId) return;
+    onOpenChange(false);
+    void navigate({
+      to: '/dashboard/$id/settings/teams',
+      params: { id: organizationId },
+    });
+  }, [organizationId, onOpenChange, navigate]);
+
   return (
     <Dialog
       open={open}
       onOpenChange={handleClose}
       title={tDocuments('teamTags.title')}
+      description={displayName || undefined}
+      className="gap-0 p-0!"
+      headerClassName="border-border border-b px-6 pt-5 pb-4"
+      footerClassName="px-6 pt-4 pb-5"
       footer={
-        <>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={handleClose}
-            disabled={isSubmitting}
-          >
-            {tCommon('actions.cancel')}
-          </Button>
-          <Button
-            type="button"
-            onClick={handleSubmit}
-            disabled={isSubmitting || !hasChanges}
-          >
-            {isSubmitting ? tCommon('actions.saving') : tCommon('actions.save')}
-          </Button>
-        </>
+        hasTeams ? (
+          <>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={handleClose}
+              disabled={isSubmitting}
+            >
+              {tCommon('actions.cancel')}
+            </Button>
+            <Button
+              type="button"
+              onClick={handleSubmit}
+              disabled={isSubmitting || !hasChanges}
+            >
+              {isSubmitting
+                ? tCommon('actions.saving')
+                : tCommon('actions.save')}
+            </Button>
+          </>
+        ) : undefined
       }
     >
-      <Stack gap={4} className="min-w-0">
-        {documentName && (
-          <Text variant="muted" className="wrap-break-word">
-            {tDocuments('teamTags.description', { name: displayName })}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <Text as="span" variant="muted">
+            {tCommon('actions.loading')}
           </Text>
-        )}
-        {isLoading ? (
-          <div className="flex items-center justify-center py-8">
-            <Text as="span" variant="muted">
-              {tCommon('actions.loading')}
-            </Text>
+        </div>
+      ) : !hasTeams ? (
+        <EmptyState
+          icon={Users}
+          title={tDocuments('teamTags.noTeamsTitle')}
+          description={tDocuments('teamTags.noTeamsDescription')}
+          action={
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={handleGoToSettings}
+            >
+              <Settings className="size-3.5" aria-hidden="true" />
+              {tDocuments('teamTags.goToSettings')}
+            </Button>
+          }
+          className="py-8"
+        />
+      ) : (
+        <div className="flex min-w-0 flex-col gap-1 px-2 pt-2 pb-4">
+          <div role="group" aria-label={tDocuments('teamTags.title')}>
+            <div className="flex flex-col gap-1">
+              <button
+                type="button"
+                onClick={handleSelectOrgWide}
+                disabled={isSubmitting}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md px-4 py-2.5 text-left transition-colors',
+                  isOrgWide ? 'bg-muted' : 'hover:bg-muted/50',
+                  isSubmitting && 'cursor-not-allowed opacity-50',
+                )}
+              >
+                <Checkbox
+                  checked={isOrgWide}
+                  onCheckedChange={handleSelectOrgWide}
+                  aria-label={tDocuments('teamTags.orgWide')}
+                  tabIndex={-1}
+                />
+                <Text as="span" className="text-sm select-none">
+                  {tDocuments('teamTags.orgWide')}
+                </Text>
+              </button>
+              {teams.map((team) => {
+                const isChecked = selectedTeamIds.has(team.id);
+                return (
+                  <button
+                    key={team.id}
+                    type="button"
+                    onClick={() => handleToggleTeam(team.id)}
+                    disabled={isSubmitting}
+                    className={cn(
+                      'flex w-full items-center gap-3 rounded-md px-4 py-2.5 text-left transition-colors',
+                      isChecked ? 'bg-muted' : 'hover:bg-muted/50',
+                      isSubmitting && 'cursor-not-allowed opacity-50',
+                    )}
+                  >
+                    <Checkbox
+                      checked={isChecked}
+                      onCheckedChange={() => handleToggleTeam(team.id)}
+                      aria-label={team.name}
+                      tabIndex={-1}
+                    />
+                    <Text as="span" className="text-sm select-none">
+                      {team.name}
+                    </Text>
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        ) : !teams || teams.length === 0 ? (
-          <EmptyState
-            icon={Users}
-            title={tDocuments('teamTags.noTeams')}
-            className="py-8"
-          />
-        ) : (
-          <Select
-            options={teamOptions}
-            value={selectedValue}
-            onValueChange={setSelectedValue}
-            label={tDocuments('teamTags.selectLabel')}
-          />
-        )}
-
-        <Text variant="caption">{tDocuments('teamTags.hint')}</Text>
-      </Stack>
+        </div>
+      )}
     </Dialog>
   );
 }
diff --git a/services/platform/app/features/documents/components/preview-pane.tsx b/services/platform/app/features/documents/components/preview-pane.tsx
new file mode 100644
index 000000000..98a6a16dc
--- /dev/null
+++ b/services/platform/app/features/documents/components/preview-pane.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils/cn';
+
+interface PreviewPaneProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function PreviewPane({ children, className }: PreviewPaneProps) {
+  return (
+    <div
+      className={cn(
+        'relative mx-auto w-full flex flex-1 flex-col overflow-x-auto overflow-y-auto p-6 bg-muted rounded-lg min-h-0',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
index 14079d8e3..499503f75 100644
--- a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
+++ b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
@@ -8,7 +8,6 @@ import type { DocumentItem } from '@/types/documents';
 
 import { CopyableTimestamp } from '@/app/components/ui/data-display/copyable-timestamp';
 import { DocumentIcon } from '@/app/components/ui/data-display/document-icon';
-import { Badge } from '@/app/components/ui/feedback/badge';
 import { Skeleton } from '@/app/components/ui/feedback/skeleton';
 import { HStack } from '@/app/components/ui/layout/layout';
 import { Text } from '@/app/components/ui/typography/text';
@@ -186,29 +185,30 @@ export function useDocumentsTableConfig({
               </Text>
             );
           }
-          const { teamId } = row.original;
-          if (!teamId) {
+          const teamIds = row.original.teamIds ?? [];
+          if (teamIds.length === 0) {
             return (
-              <Badge variant="outline" className="text-xs">
+              <Text as="span" variant="muted" className="text-sm">
                 {tDocuments('teamTags.orgWide')}
-              </Badge>
+              </Text>
             );
           }
           if (isLoadingTeams) {
             return <Skeleton className="h-5 w-20" />;
           }
-          const teamName = teamMap.get(teamId);
-          if (!teamName) {
-            return (
-              <Text as="span" variant="muted">
-                —
-              </Text>
-            );
-          }
+          const MAX_VISIBLE = 2;
+          const names = teamIds.map((id) => teamMap.get(id)).filter(Boolean);
+          const visible = names.slice(0, MAX_VISIBLE);
+          const remaining = names.length - MAX_VISIBLE;
           return (
-            <Badge variant="blue" className="text-xs">
-              {teamName}
-            </Badge>
+            <Text as="span" className="text-sm">
+              {visible.join(', ')}
+              {remaining > 0 && (
+                <span className="text-muted-foreground">
+                  {` +${remaining}`}
+                </span>
+              )}
+            </Text>
           );
         },
       },
@@ -265,7 +265,7 @@ export function useDocumentsTableConfig({
               syncConfigId={row.original.syncConfigId}
               isDirectlySelected={row.original.isDirectlySelected}
               sourceMode={row.original.sourceMode}
-              teamId={row.original.teamId}
+              teamIds={row.original.teamIds ?? []}
               onFolderDeleted={onFolderDeleted}
             />
           </HStack>
diff --git a/services/platform/convex/documents/get_accessible_document_ids.ts b/services/platform/convex/documents/get_accessible_document_ids.ts
index 2af141504..5b3249e68 100644
--- a/services/platform/convex/documents/get_accessible_document_ids.ts
+++ b/services/platform/convex/documents/get_accessible_document_ids.ts
@@ -1,13 +1,14 @@
 import type { QueryCtx } from '../_generated/server';
 
 import { getUserTeamIds } from '../lib/get_user_teams';
+import { hasTeamAccess } from '../lib/team_access';
 
 /**
  * Get all RAG-indexed document IDs accessible to a user within an organization.
  *
  * Resolves the user's team memberships internally, then filters documents:
- * - Org-wide documents (no teamId) are always included
- * - Team-scoped documents are included if the user belongs to that team
+ * - Org-wide documents (no teams) are always included
+ * - Team-scoped documents are included if the user belongs to at least one team
  *
  * Only returns documents with ragInfo.status === 'completed'.
  */
@@ -18,8 +19,8 @@ export async function getAccessibleDocumentIds(
     userId: string;
   },
 ): Promise<string[]> {
-  const teamIds = await getUserTeamIds(ctx, args.userId);
-  const teamSet = new Set([`org_${args.organizationId}`, ...teamIds]);
+  const userTeamIds = await getUserTeamIds(ctx, args.userId);
+  const teamSet = new Set([`org_${args.organizationId}`, ...userTeamIds]);
 
   const ids: string[] = [];
   const query = ctx.db
@@ -31,10 +32,7 @@ export async function getAccessibleDocumentIds(
   for await (const doc of query) {
     if (doc.ragInfo?.status !== 'completed') continue;
 
-    const isOrgWide = !doc.teamId;
-    const isInUserTeam = doc.teamId ? teamSet.has(doc.teamId) : false;
-
-    if (isOrgWide || isInUserTeam) {
+    if (hasTeamAccess(doc, teamSet)) {
       ids.push(doc._id);
     }
   }
@@ -55,8 +53,8 @@ export async function getAccessibleFileIds(
     userId: string;
   },
 ): Promise<string[]> {
-  const teamIds = await getUserTeamIds(ctx, args.userId);
-  const teamSet = new Set([`org_${args.organizationId}`, ...teamIds]);
+  const userTeamIds = await getUserTeamIds(ctx, args.userId);
+  const teamSet = new Set([`org_${args.organizationId}`, ...userTeamIds]);
 
   const ids: string[] = [];
   const query = ctx.db
@@ -69,10 +67,7 @@ export async function getAccessibleFileIds(
     if (doc.ragInfo?.status !== 'completed') continue;
     if (!doc.fileId) continue;
 
-    const isOrgWide = !doc.teamId;
-    const isInUserTeam = doc.teamId ? teamSet.has(doc.teamId) : false;
-
-    if (isOrgWide || isInUserTeam) {
+    if (hasTeamAccess(doc, teamSet)) {
       ids.push(doc.fileId);
     }
   }
diff --git a/services/platform/convex/documents/mutations.ts b/services/platform/convex/documents/mutations.ts
index 7b6ed52a3..a6580dd38 100644
--- a/services/platform/convex/documents/mutations.ts
+++ b/services/platform/convex/documents/mutations.ts
@@ -25,7 +25,7 @@ export const updateDocument = mutation({
     extension: v.optional(v.string()),
     sourceProvider: v.optional(sourceProviderValidator),
     externalItemId: v.optional(v.string()),
-    teamId: v.optional(v.union(v.string(), v.null())),
+    teamIds: v.optional(v.array(v.string())),
   },
   handler: async (ctx, args) => {
     const authUser = await authComponent.getAuthUser(ctx);
@@ -46,7 +46,7 @@ export const updateDocument = mutation({
 
     await updateDocumentHelper(ctx, {
       ...args,
-      teamId: args.teamId,
+      teamIds: args.teamIds,
       userId: String(authUser._id),
     });
   },
diff --git a/services/platform/convex/documents/team_fields.ts b/services/platform/convex/documents/team_fields.ts
index 02a4008ef..2dc1160e0 100644
--- a/services/platform/convex/documents/team_fields.ts
+++ b/services/platform/convex/documents/team_fields.ts
@@ -1,8 +1,10 @@
 /**
- * Helper to compute legacy teamTags from teamId.
+ * Helper to compute team storage fields from a list of team IDs.
  *
- * Used during the transition period to keep the deprecated teamTags field
- * in sync when writing documents via the new single-team model.
+ * Documents can belong to multiple teams. The schema stores:
+ * - teamId: the first team (for backward compatibility with single-team consumers)
+ * - teamTags: full list of team IDs the document belongs to
+ * - sharedWithTeamIds: deprecated, always undefined
  */
 
 export interface TeamFields {
@@ -12,13 +14,14 @@ export interface TeamFields {
 }
 
 /**
- * Compute all team fields from a single teamId.
+ * Compute all team fields from a list of team IDs.
  *
- * - undefined → org-wide (all fields undefined)
- * - 'sales' → { teamId: 'sales', teamTags: ['sales'], sharedWithTeamIds: undefined }
+ * - [] or undefined → org-wide (all fields undefined)
+ * - ['sales'] → { teamId: 'sales', teamTags: ['sales'] }
+ * - ['sales', 'support'] → { teamId: 'sales', teamTags: ['sales', 'support'] }
  */
-export function teamIdToFields(teamId: string | undefined): TeamFields {
-  if (!teamId) {
+export function teamIdsToFields(teamIds: string[] | undefined): TeamFields {
+  if (!teamIds || teamIds.length === 0) {
     return {
       teamId: undefined,
       teamTags: undefined,
@@ -27,8 +30,16 @@ export function teamIdToFields(teamId: string | undefined): TeamFields {
   }
 
   return {
-    teamId,
-    teamTags: [teamId],
+    teamId: teamIds[0],
+    teamTags: teamIds,
     sharedWithTeamIds: undefined,
   };
 }
+
+/**
+ * Compute all team fields from a single teamId.
+ * @deprecated Use teamIdsToFields instead.
+ */
+export function teamIdToFields(teamId: string | undefined): TeamFields {
+  return teamIdsToFields(teamId ? [teamId] : undefined);
+}
diff --git a/services/platform/convex/documents/transform_to_document_item.ts b/services/platform/convex/documents/transform_to_document_item.ts
index 54a964bfd..1097be69e 100644
--- a/services/platform/convex/documents/transform_to_document_item.ts
+++ b/services/platform/convex/documents/transform_to_document_item.ts
@@ -84,6 +84,7 @@ export function transformToDocumentItem(
     ragIndexedAt: document.ragInfo?.indexedAt,
     ragError: document.ragInfo?.error,
     teamId: document.teamId ?? null,
+    teamIds: document.teamTags ?? [],
     // Creator tracking
     createdBy: document.createdBy,
     createdByName,
diff --git a/services/platform/convex/documents/update_document.ts b/services/platform/convex/documents/update_document.ts
index dbbddaff4..a475ebc09 100644
--- a/services/platform/convex/documents/update_document.ts
+++ b/services/platform/convex/documents/update_document.ts
@@ -10,7 +10,7 @@ import type { MutationCtx } from '../_generated/server';
 import { isRecord } from '../../lib/utils/type-guards';
 import { getUserTeamIds } from '../lib/get_user_teams';
 import { extractExtension } from './extract_extension';
-import { teamIdToFields } from './team_fields';
+import { teamIdsToFields } from './team_fields';
 
 export async function updateDocument(
   ctx: MutationCtx,
@@ -24,7 +24,7 @@ export async function updateDocument(
     extension?: string;
     sourceProvider?: 'onedrive' | 'upload' | 'sharepoint';
     externalItemId?: string;
-    teamId?: string | null;
+    teamIds?: string[];
     userId?: string;
   },
 ): Promise<void> {
@@ -33,14 +33,14 @@ export async function updateDocument(
     throw new Error('Document not found');
   }
 
-  if (args.teamId !== undefined) {
-    const newTeamId = args.teamId ?? undefined;
-    if (newTeamId) {
-      if (!args.userId) {
-        throw new Error('userId is required when updating teamId');
-      }
-      const userTeamIds = await getUserTeamIds(ctx, args.userId);
-      if (!userTeamIds.includes(newTeamId)) {
+  if (args.teamIds !== undefined && args.teamIds.length > 0) {
+    if (!args.userId) {
+      throw new Error('userId is required when updating teamIds');
+    }
+    const userTeamIds = await getUserTeamIds(ctx, args.userId);
+    const userTeamSet = new Set(userTeamIds);
+    for (const id of args.teamIds) {
+      if (!userTeamSet.has(id)) {
         throw new Error(
           'Cannot assign document to a team you do not belong to',
         );
@@ -77,9 +77,10 @@ export async function updateDocument(
     Object.entries(updateData).filter(([, value]) => value !== undefined),
   );
 
-  if (args.teamId !== undefined) {
-    const newTeamId = args.teamId ?? undefined;
-    const teamFields = teamIdToFields(newTeamId);
+  if (args.teamIds !== undefined) {
+    const teamFields = teamIdsToFields(
+      args.teamIds.length > 0 ? args.teamIds : undefined,
+    );
     cleanUpdateData.teamId = teamFields.teamId;
     cleanUpdateData.teamTags = teamFields.teamTags;
     cleanUpdateData.sharedWithTeamIds = teamFields.sharedWithTeamIds;
diff --git a/services/platform/convex/documents/validators.ts b/services/platform/convex/documents/validators.ts
index 78074193a..18f5eb6da 100644
--- a/services/platform/convex/documents/validators.ts
+++ b/services/platform/convex/documents/validators.ts
@@ -66,6 +66,7 @@ export const documentItemValidator = v.object({
   ragIndexedAt: v.optional(v.number()),
   ragError: v.optional(v.string()),
   teamId: v.optional(v.union(v.string(), v.null())),
+  teamIds: v.optional(v.array(v.string())),
   createdBy: v.optional(v.string()),
   createdByName: v.optional(v.string()),
 });
diff --git a/services/platform/convex/lib/team_access.ts b/services/platform/convex/lib/team_access.ts
index b18899405..d49421177 100644
--- a/services/platform/convex/lib/team_access.ts
+++ b/services/platform/convex/lib/team_access.ts
@@ -1,31 +1,35 @@
 /**
- * Shared team access helper for single-team model.
+ * Shared team access helper for multi-team model.
  *
  * All team-scoped tables use:
- *   teamId: optional string (undefined/null = org-wide)
+ *   teamId: optional string — primary/first team (backward compat)
+ *   teamTags: optional string[] — full list of teams
  *
  * This helper is used by documents, custom agents, and future team-scoped modules.
  */
 
 interface TeamScopedResource {
   teamId?: string | null;
+  teamTags?: string[];
 }
 
 /**
  * Check if a user has access to a team-scoped resource.
  *
  * Access rules:
- * - Resource with no teamId (null/undefined) = org-wide, accessible to all members
- * - Resource with teamId = user must belong to that team
+ * - Resource with no teams (no teamId and no teamTags) = org-wide, accessible to all members
+ * - Resource with teams = user must belong to at least one of the resource's teams
  */
 export function hasTeamAccess(
   resource: TeamScopedResource,
   userTeamIds: string[] | Set<string>,
 ): boolean {
-  if (!resource.teamId) return true;
+  const resourceTeams =
+    resource.teamTags ?? (resource.teamId ? [resource.teamId] : []);
+  if (resourceTeams.length === 0) return true;
 
   const teamSet =
     userTeamIds instanceof Set ? userTeamIds : new Set(userTeamIds);
 
-  return teamSet.has(resource.teamId);
+  return resourceTeams.some((id) => teamSet.has(id));
 }
diff --git a/services/platform/messages/en.json b/services/platform/messages/en.json
index b58dcea01..5dd7006f6 100644
--- a/services/platform/messages/en.json
+++ b/services/platform/messages/en.json
@@ -2340,13 +2340,13 @@
       "createFailed": "Failed to create folder"
     },
     "teamTags": {
-      "title": "Assign document team",
-      "description": "Choose which team \"{name}\" belongs to",
+      "title": "Manage teams",
       "updated": "Document team updated",
       "updateFailed": "Failed to update document team",
-      "noTeams": "No teams available. Create teams in Settings to enable team-based access control.",
-      "selectLabel": "Team",
-      "hint": "Organization-wide documents are accessible to all members.",
+      "noTeamsTitle": "No teams yet",
+      "noTeamsDescription": "Create teams in Settings to control which groups can access this document.",
+      "goToSettings": "Go to settings",
+      "hint": "Documents without teams are accessible to all organization members.",
       "orgWide": "Organization-wide"
     },
     "deleteFile": {
@@ -2402,7 +2402,20 @@
       "downloading": "Downloading...",
       "download": "Download",
       "unknownError": "Unknown error",
-      "document": "Document"
+      "document": "Document",
+      "title": "Document preview",
+      "sidebar": {
+        "document": "Document",
+        "size": "Size",
+        "source": "Source",
+        "ragStatus": "RAG status",
+        "teams": "Teams",
+        "uploadedBy": "Uploaded by",
+        "modified": "Modified",
+        "sourceUpload": "Upload",
+        "sourceOnedrive": "OneDrive",
+        "sourceSharepoint": "SharePoint"
+      }
     },
     "upload": {
       "fromComputer": "From computer",
diff --git a/services/platform/types/documents.ts b/services/platform/types/documents.ts
index fc5ffd884..35b986923 100644
--- a/services/platform/types/documents.ts
+++ b/services/platform/types/documents.ts
@@ -24,6 +24,7 @@ export interface DocumentItem {
   /** Error message (for failed status) */
   ragError?: string;
   teamId?: string | null;
+  teamIds?: string[];
   /** User ID who created/uploaded this document */
   createdBy?: string;
   /** Display name of the user who created/uploaded this document */

From 9bfec381db12610a3f17b7ebff8ffb7c3feede31 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Wed, 11 Mar 2026 13:15:31 +0100
Subject: [PATCH 5/8] =?UTF-8?q?fix(platform):=20fix=20CI=20failures=20?=
 =?UTF-8?q?=E2=80=94=20type=20errors,=20knip,=20and=20test=20mock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add shared ZoomPanViewer component (needed by document-preview-image)
- Fix Text component: remove invalid size prop, use label-sm variant
- Fix HStack gap: use 2 instead of unsupported 1.5
- Fix Button variant: use secondary instead of invalid outline
- Fix DetailsSidebar: use teamIds array instead of teamId
- Fix mutation-hooks test: teamId → teamIds
- Rewrite document-preview-routing test mock with beforeAll resolution
---
 .../data-display/zoom-pan-viewer.stories.tsx  | 145 +++++++++++++
 .../ui/data-display/zoom-pan-viewer.test.tsx  | 191 ++++++++++++++++++
 .../ui/data-display/zoom-pan-viewer.tsx       | 166 +++++++++++++++
 .../document-preview-routing.test.tsx         |  43 ++--
 .../components/document-preview-dialog.tsx    |  30 +--
 .../hooks/__tests__/mutation-hooks.test.ts    |   8 +-
 services/platform/app/hooks/use-zoom-pan.ts   | 155 ++++++++++++++
 7 files changed, 702 insertions(+), 36 deletions(-)
 create mode 100644 services/platform/app/components/ui/data-display/zoom-pan-viewer.stories.tsx
 create mode 100644 services/platform/app/components/ui/data-display/zoom-pan-viewer.test.tsx
 create mode 100644 services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
 create mode 100644 services/platform/app/hooks/use-zoom-pan.ts

diff --git a/services/platform/app/components/ui/data-display/zoom-pan-viewer.stories.tsx b/services/platform/app/components/ui/data-display/zoom-pan-viewer.stories.tsx
new file mode 100644
index 000000000..a8ce4006b
--- /dev/null
+++ b/services/platform/app/components/ui/data-display/zoom-pan-viewer.stories.tsx
@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Text } from '../typography/text';
+import { ZoomPanViewer } from './zoom-pan-viewer';
+
+const SAMPLE_IMAGE =
+  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop';
+
+const meta: Meta<typeof ZoomPanViewer> = {
+  title: 'Data Display/ZoomPanViewer',
+  component: ZoomPanViewer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+An interactive image viewer with zoom, pan, and scroll-wheel support.
+
+## Usage
+\`\`\`tsx
+import { ZoomPanViewer } from '@/app/components/ui/data-display/zoom-pan-viewer';
+
+<ZoomPanViewer
+  src="/image.jpg"
+  alt="Description"
+  toolbarPosition="inline"
+/>
+\`\`\`
+
+## Features
+- Zoom in/out with buttons or scroll wheel (0.5x–3x)
+- Pan by dragging when zoomed in
+- Reset zoom button
+- Overlay or inline toolbar positioning
+- Optional header content alongside toolbar
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 600, height: 400 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    toolbarPosition: {
+      control: 'radio',
+      options: ['overlay', 'bottom', 'inline'],
+    },
+  },
+};
+
+// Storybook requires default export for meta
+// oxlint-disable-next-line no-default-export -- Storybook convention
+export default meta;
+type Story = StoryObj<typeof ZoomPanViewer>;
+
+export const Default: Story = {
+  args: {
+    src: SAMPLE_IMAGE,
+    alt: 'Mountain landscape',
+    toolbarPosition: 'overlay',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default overlay toolbar positioned at the top-right. Ideal for dialog/modal use cases.',
+      },
+    },
+  },
+};
+
+export const InlineToolbar: Story = {
+  args: {
+    src: SAMPLE_IMAGE,
+    alt: 'Mountain landscape',
+    toolbarPosition: 'inline',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Inline toolbar rendered above the image in normal document flow. Ideal for embedded previews.',
+      },
+    },
+  },
+};
+
+export const WithHeaderContent: Story = {
+  args: {
+    src: SAMPLE_IMAGE,
+    alt: 'Mountain landscape',
+    toolbarPosition: 'overlay',
+    headerContent: (
+      <Text as="span" truncate className="text-foreground/80 max-w-[60%]">
+        landscape-photo.jpg
+      </Text>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Overlay toolbar with header content (e.g. filename) rendered to the left of controls.',
+      },
+    },
+  },
+};
+
+export const BottomToolbar: Story = {
+  args: {
+    src: SAMPLE_IMAGE,
+    alt: 'Mountain landscape',
+    toolbarPosition: 'bottom',
+    imageClassName: 'rounded-xl border',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Floating pill toolbar at the bottom center, matching the PDF preview toolbar design.',
+      },
+    },
+  },
+};
+
+export const WithImageStyling: Story = {
+  args: {
+    src: SAMPLE_IMAGE,
+    alt: 'Styled image',
+    toolbarPosition: 'inline',
+    imageClassName: 'rounded-xl border',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom image styling with rounded corners and border.',
+      },
+    },
+  },
+};
diff --git a/services/platform/app/components/ui/data-display/zoom-pan-viewer.test.tsx b/services/platform/app/components/ui/data-display/zoom-pan-viewer.test.tsx
new file mode 100644
index 000000000..9fe3b926f
--- /dev/null
+++ b/services/platform/app/components/ui/data-display/zoom-pan-viewer.test.tsx
@@ -0,0 +1,191 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+
+import { ZoomPanViewer } from './zoom-pan-viewer';
+
+vi.mock('@/lib/i18n/client', () => ({
+  useT: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'imagePreview.zoomIn': 'Zoom in',
+        'imagePreview.zoomOut': 'Zoom out',
+        'imagePreview.resetZoom': 'Reset zoom',
+      };
+      return translations[key] ?? key;
+    },
+  }),
+}));
+
+afterEach(cleanup);
+
+describe('ZoomPanViewer', () => {
+  const defaultProps = {
+    src: 'https://example.com/image.jpg',
+    alt: 'Test image',
+  };
+
+  describe('rendering', () => {
+    it('renders an image with correct src and alt', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      const img = screen.getByRole('img');
+      expect(img).toHaveAttribute('src', defaultProps.src);
+      expect(img).toHaveAttribute('alt', defaultProps.alt);
+    });
+
+    it('renders zoom in, zoom out, and reset buttons', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      expect(
+        screen.getByRole('button', { name: 'Zoom in' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Zoom out' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: 'Reset zoom' }),
+      ).toBeInTheDocument();
+    });
+
+    it('shows 100% zoom by default', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+      expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+
+    it('applies imageClassName to the img element', () => {
+      render(
+        <ZoomPanViewer {...defaultProps} imageClassName="rounded-xl border" />,
+      );
+
+      const img = screen.getByRole('img');
+      expect(img.className).toContain('rounded-xl');
+      expect(img.className).toContain('border');
+    });
+
+    it('applies className to the container', () => {
+      const { container } = render(
+        <ZoomPanViewer {...defaultProps} className="custom-class" />,
+      );
+
+      expect(container.firstElementChild?.className).toContain('custom-class');
+    });
+
+    it('sets draggable to false on the image', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      const img = screen.getByRole('img');
+      expect(img).toHaveAttribute('draggable', 'false');
+    });
+  });
+
+  describe('toolbar positions', () => {
+    it('renders overlay toolbar by default', () => {
+      const { container } = render(<ZoomPanViewer {...defaultProps} />);
+
+      const toolbarWrapper = container.querySelector('.absolute.top-4');
+      expect(toolbarWrapper).toBeInTheDocument();
+    });
+
+    it('renders inline toolbar when toolbarPosition is inline', () => {
+      const { container } = render(
+        <ZoomPanViewer {...defaultProps} toolbarPosition="inline" />,
+      );
+
+      const inlineWrapper = container.querySelector('.justify-end.mb-2');
+      expect(inlineWrapper).toBeInTheDocument();
+    });
+
+    it('renders headerContent in overlay mode', () => {
+      render(
+        <ZoomPanViewer
+          {...defaultProps}
+          headerContent={<span data-testid="header">file.jpg</span>}
+        />,
+      );
+
+      expect(screen.getByTestId('header')).toBeInTheDocument();
+    });
+  });
+
+  describe('zoom controls', () => {
+    it('increments zoom on zoom in click', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      expect(screen.getByText('125%')).toBeInTheDocument();
+    });
+
+    it('decrements zoom on zoom out click', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      // First zoom in, then zoom out
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }));
+      expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+
+    it('resets zoom on reset click', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      expect(screen.getByText('150%')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Reset zoom' }));
+      expect(screen.getByText('100%')).toBeInTheDocument();
+    });
+
+    it('disables reset button when not zoomed', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      expect(screen.getByRole('button', { name: 'Reset zoom' })).toBeDisabled();
+    });
+
+    it('enables reset button when zoomed', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+      expect(
+        screen.getByRole('button', { name: 'Reset zoom' }),
+      ).not.toBeDisabled();
+    });
+  });
+
+  describe('callbacks', () => {
+    it('calls onLoad when image loads', () => {
+      const onLoad = vi.fn();
+      render(<ZoomPanViewer {...defaultProps} onLoad={onLoad} />);
+
+      fireEvent.load(screen.getByRole('img'));
+      expect(onLoad).toHaveBeenCalledOnce();
+    });
+
+    it('calls onError when image fails', () => {
+      const onError = vi.fn();
+      render(<ZoomPanViewer {...defaultProps} onError={onError} />);
+
+      fireEvent.error(screen.getByRole('img'));
+      expect(onError).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('image transform', () => {
+    it('applies scale transform to image', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      const img = screen.getByRole('img');
+      expect(img.style.transform).toContain('scale(1)');
+    });
+
+    it('updates transform when zoomed', () => {
+      render(<ZoomPanViewer {...defaultProps} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }));
+
+      const img = screen.getByRole('img');
+      expect(img.style.transform).toContain('scale(1.25)');
+    });
+  });
+});
diff --git a/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx b/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
new file mode 100644
index 000000000..c71c5551d
--- /dev/null
+++ b/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
+import { memo } from 'react';
+
+import { useZoomPan } from '@/app/hooks/use-zoom-pan';
+import { useT } from '@/lib/i18n/client';
+import { cn } from '@/lib/utils/cn';
+
+import { Text } from '../typography/text';
+
+interface ZoomPanViewerProps {
+  /** Image source URL */
+  src: string;
+  /** Alt text for the image */
+  alt: string;
+  /** Additional class for the outermost container */
+  className?: string;
+  /**
+   * Toolbar layout:
+   * - `'overlay'` positions absolutely on top-right (dialog use case)
+   * - `'bottom'` sticky bottom-center floating pill (document preview use case)
+   * - `'inline'` renders in normal flow above the image (embedded use case)
+   */
+  toolbarPosition?: 'overlay' | 'bottom' | 'inline';
+  /** Additional class for the toolbar wrapper */
+  toolbarClassName?: string;
+  /** Content rendered to the left of the toolbar in overlay mode (e.g. alt text label) */
+  headerContent?: React.ReactNode;
+  /** When this value changes, zoom/pan resets. Pass dialog open state or image src. */
+  resetTrigger?: unknown;
+  /** Additional class for the `<img>` element */
+  imageClassName?: string;
+  /** Called when the image finishes loading */
+  onLoad?: () => void;
+  /** Called when the image fails to load */
+  onError?: () => void;
+}
+
+export const ZoomPanViewer = memo(function ZoomPanViewer({
+  src,
+  alt,
+  className,
+  toolbarPosition = 'overlay',
+  toolbarClassName,
+  headerContent,
+  resetTrigger,
+  imageClassName,
+  onLoad,
+  onError,
+}: ZoomPanViewerProps) {
+  const { t } = useT('common');
+  const {
+    zoom,
+    isDragging,
+    containerRef,
+    zoomIn,
+    zoomOut,
+    reset,
+    pointerHandlers,
+    canZoomIn,
+    canZoomOut,
+    isZoomed,
+    transformStyle,
+  } = useZoomPan({ resetTrigger });
+
+  const isBottom = toolbarPosition === 'bottom';
+
+  const buttonClass = isBottom
+    ? 'grid size-8 place-items-center rounded-full transition hover:bg-white/10 disabled:opacity-35'
+    : 'text-foreground size-8 disabled:opacity-50';
+
+  const toolbar = (
+    <div
+      className={cn(
+        isBottom
+          ? 'bg-background text-foreground flex items-center gap-2 rounded-full px-4 py-2 shadow-xl ring-1 ring-white/10'
+          : 'bg-muted flex items-center gap-1 rounded-lg p-1',
+        toolbarClassName,
+      )}
+    >
+      <button
+        onClick={zoomOut}
+        disabled={!canZoomOut}
+        className={buttonClass}
+        aria-label={t('imagePreview.zoomOut')}
+      >
+        <ZoomOut className="size-4" />
+      </button>
+      <Text
+        as="span"
+        align="center"
+        className="min-w-[3rem] text-sm tabular-nums"
+      >
+        {Math.round(zoom * 100)}%
+      </Text>
+      <button
+        onClick={zoomIn}
+        disabled={!canZoomIn}
+        className={buttonClass}
+        aria-label={t('imagePreview.zoomIn')}
+      >
+        <ZoomIn className="size-4" />
+      </button>
+      <button
+        onClick={reset}
+        disabled={!isZoomed}
+        className={buttonClass}
+        aria-label={t('imagePreview.resetZoom')}
+      >
+        <RotateCcw className="size-4" />
+      </button>
+    </div>
+  );
+
+  const renderToolbar = () => {
+    switch (toolbarPosition) {
+      case 'overlay':
+        return (
+          <div className="absolute top-4 right-4 left-4 z-10 flex items-center justify-between">
+            {headerContent ?? <span />}
+            {toolbar}
+          </div>
+        );
+      case 'bottom':
+        return null;
+      case 'inline':
+        return <div className="mb-2 flex justify-end">{toolbar}</div>;
+    }
+  };
+
+  return (
+    <div className={cn('relative flex flex-1 flex-col min-h-0', className)}>
+      {renderToolbar()}
+
+      <div
+        ref={containerRef}
+        className={cn(
+          'flex flex-1 items-center justify-center overflow-hidden',
+          isZoomed ? 'cursor-grab' : 'cursor-default',
+          isDragging && 'cursor-grabbing',
+        )}
+        {...pointerHandlers}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={transformStyle}
+          className={cn(
+            'max-h-full max-w-full object-contain select-none',
+            imageClassName,
+          )}
+          draggable={false}
+          onLoad={onLoad}
+          onError={onError}
+        />
+      </div>
+
+      {isBottom && (
+        <div className="sticky bottom-4 z-50 flex w-full justify-center">
+          {toolbar}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
index 3f25a083f..2e252c0f4 100644
--- a/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
+++ b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import '@testing-library/jest-dom/vitest';
 import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach, describe, it, expect, vi } from 'vitest';
+import { afterEach, beforeAll, describe, it, expect, vi } from 'vitest';
 
 vi.mock('@/lib/i18n/client', () => ({
   useT: () => ({
@@ -55,76 +55,79 @@ vi.mock('../document-preview-text', () => ({
   ),
 }));
 
+// Track all promises from lazyComponent factories so we can resolve
+// them before running any tests.
+const lazyPromises: Promise<void>[] = [];
+
 vi.mock('@/lib/utils/lazy-component', () => ({
   lazyComponent: (factory: () => Promise<{ default: unknown }>) => {
-    let Component: React.ComponentType<Record<string, unknown>> | null = null;
-    void factory().then((m) => {
-      Component = m.default as React.ComponentType<Record<string, unknown>>;
+    let Resolved: React.ComponentType<Record<string, unknown>> | null = null;
+    const p = factory().then((m) => {
+      Resolved = m.default as React.ComponentType<Record<string, unknown>>;
     });
-    return (props: Record<string, unknown>) => {
-      if (!Component) return null;
-      return <Component {...props} />;
+    lazyPromises.push(p);
+    return function Lazy(props: Record<string, unknown>) {
+      if (!Resolved) return null;
+      return <Resolved {...props} />;
     };
   },
 }));
 
-// Flush microtasks so lazy components resolve
-async function flushMicrotasks() {
-  await new Promise((resolve) => setTimeout(resolve, 0));
-}
-
 import { DocumentPreview } from '../document-preview';
 
+// Resolve all lazy component factories before tests run.
+// Since vi.mock makes dynamic imports synchronous, these promises
+// resolve immediately in the microtask queue.
+beforeAll(async () => {
+  await Promise.all(lazyPromises);
+});
+
 afterEach(cleanup);
 
 describe('DocumentPreview routing', () => {
   it.each(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'avif'])(
     'routes .%s files to image preview',
-    async (ext) => {
+    (ext) => {
       render(
         <DocumentPreview
           url={`https://example.com/file.${ext}`}
           fileName={`photo.${ext}`}
         />,
       );
-      await flushMicrotasks();
 
       expect(screen.getByTestId('image-preview')).toBeInTheDocument();
     },
   );
 
-  it('routes .pdf files to PDF preview', async () => {
+  it('routes .pdf files to PDF preview', () => {
     render(
       <DocumentPreview
         url="https://example.com/doc.pdf"
         fileName="report.pdf"
       />,
     );
-    await flushMicrotasks();
 
     expect(screen.getByTestId('pdf-preview')).toBeInTheDocument();
   });
 
-  it('routes .docx files to DOCX preview', async () => {
+  it('routes .docx files to DOCX preview', () => {
     render(
       <DocumentPreview
         url="https://example.com/doc.docx"
         fileName="report.docx"
       />,
     );
-    await flushMicrotasks();
 
     expect(screen.getByTestId('docx-preview')).toBeInTheDocument();
   });
 
-  it('routes uppercase image extensions correctly', async () => {
+  it('routes uppercase image extensions correctly', () => {
     render(
       <DocumentPreview
         url="https://example.com/PHOTO.PNG"
         fileName="PHOTO.PNG"
       />,
     );
-    await flushMicrotasks();
 
     expect(screen.getByTestId('image-preview')).toBeInTheDocument();
   });
diff --git a/services/platform/app/features/documents/components/document-preview-dialog.tsx b/services/platform/app/features/documents/components/document-preview-dialog.tsx
index 2ca1cc938..33face5ec 100644
--- a/services/platform/app/features/documents/components/document-preview-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-preview-dialog.tsx
@@ -42,7 +42,7 @@ function SidebarRow({
 }) {
   return (
     <div className="flex flex-col gap-0.5">
-      <Text variant="muted" size="xs" weight="medium">
+      <Text variant="label-sm" className="text-muted-foreground">
         {label}
       </Text>
       <div className="text-foreground text-[13px] leading-snug">{children}</div>
@@ -56,13 +56,17 @@ function DetailsSidebar({ doc }: { doc: Document }) {
   const { locale } = useLocale();
   const { teams } = useTeams();
 
-  const teamName = useMemo(() => {
-    if (!doc.teamId || !teams) return undefined;
-    const team = teams.find(
-      (entry: { id: string; name: string }) => entry.id === doc.teamId,
-    );
-    return team?.name;
-  }, [doc.teamId, teams]);
+  const teamNames = useMemo(() => {
+    const ids = doc.teamIds ?? [];
+    if (ids.length === 0 || !teams) return [];
+    return ids
+      .map(
+        (id) =>
+          teams.find((entry: { id: string; name: string }) => entry.id === id)
+            ?.name,
+      )
+      .filter(Boolean);
+  }, [doc.teamIds, teams]);
 
   const sourceLabel = useMemo(() => {
     const labels: Record<string, string> = {
@@ -84,7 +88,7 @@ function DetailsSidebar({ doc }: { doc: Document }) {
       aria-label={t('preview.sidebar.document')}
     >
       <SidebarRow label={t('preview.sidebar.document')}>
-        <HStack gap={1.5} className="items-center">
+        <HStack gap={2} className="items-center">
           <DocumentIcon fileName={doc.name ?? ''} className="w-4" />
           <span className="truncate">{doc.name}</span>
         </HStack>
@@ -111,8 +115,10 @@ function DetailsSidebar({ doc }: { doc: Document }) {
 
       <Separator />
 
-      {teamName && (
-        <SidebarRow label={t('preview.sidebar.teams')}>{teamName}</SidebarRow>
+      {teamNames.length > 0 && (
+        <SidebarRow label={t('preview.sidebar.teams')}>
+          {teamNames.join(', ')}
+        </SidebarRow>
       )}
 
       {doc.createdByName && (
@@ -209,7 +215,7 @@ export function DocumentPreviewDialog({
           <ActionRow gap={2}>
             {doc?.url && (
               <Button
-                variant="outline"
+                variant="secondary"
                 size="sm"
                 onClick={handleDownload}
                 disabled={isDownloading}
diff --git a/services/platform/app/features/documents/hooks/__tests__/mutation-hooks.test.ts b/services/platform/app/features/documents/hooks/__tests__/mutation-hooks.test.ts
index 639f59379..ec6dd9b21 100644
--- a/services/platform/app/features/documents/hooks/__tests__/mutation-hooks.test.ts
+++ b/services/platform/app/features/documents/hooks/__tests__/mutation-hooks.test.ts
@@ -78,18 +78,18 @@ describe('useUpdateDocument', () => {
     expect(result).toHaveProperty('isPending');
   });
 
-  it('calls mutation with documentId and teamId', async () => {
+  it('calls mutation with documentId and teamIds', async () => {
     mockMutateAsync.mockResolvedValueOnce(undefined);
     const { mutateAsync: updateDocument } = useUpdateDocument();
 
     await updateDocument({
       documentId: toId<'documents'>('doc-123'),
-      teamId: 'team-1',
+      teamIds: ['team-1'],
     });
 
     expect(mockMutateAsync).toHaveBeenCalledWith({
       documentId: toId<'documents'>('doc-123'),
-      teamId: 'team-1',
+      teamIds: ['team-1'],
     });
   });
 
@@ -111,7 +111,7 @@ describe('useUpdateDocument', () => {
     await expect(
       updateDocument({
         documentId: toId<'documents'>('doc-789'),
-        teamId: 'team-1',
+        teamIds: ['team-1'],
       }),
     ).rejects.toThrow('Update failed');
   });
diff --git a/services/platform/app/hooks/use-zoom-pan.ts b/services/platform/app/hooks/use-zoom-pan.ts
new file mode 100644
index 000000000..24eb043f8
--- /dev/null
+++ b/services/platform/app/hooks/use-zoom-pan.ts
@@ -0,0 +1,155 @@
+'use client';
+
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const DEFAULT_MIN_ZOOM = 0.5;
+const DEFAULT_MAX_ZOOM = 3;
+const DEFAULT_ZOOM_STEP = 0.25;
+
+interface UseZoomPanOptions {
+  minZoom?: number;
+  maxZoom?: number;
+  zoomStep?: number;
+  /**
+   * When this value changes, zoom and pan reset to defaults.
+   * Pass dialog open state or image src to auto-reset between views.
+   */
+  resetTrigger?: unknown;
+}
+
+interface ZoomPanPointerHandlers {
+  onPointerDown: (e: React.PointerEvent) => void;
+  onPointerMove: (e: React.PointerEvent) => void;
+  onPointerUp: () => void;
+  onPointerCancel: () => void;
+}
+
+interface UseZoomPanReturn {
+  zoom: number;
+  pan: { x: number; y: number };
+  isDragging: boolean;
+  /** Attach to the scrollable/interactive container element */
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  reset: () => void;
+  pointerHandlers: ZoomPanPointerHandlers;
+  canZoomIn: boolean;
+  canZoomOut: boolean;
+  isZoomed: boolean;
+  /** Pre-computed CSS transform + transition for the zoomable element */
+  transformStyle: React.CSSProperties;
+}
+
+export function useZoomPan(options?: UseZoomPanOptions): UseZoomPanReturn {
+  const minZoom = options?.minZoom ?? DEFAULT_MIN_ZOOM;
+  const maxZoom = options?.maxZoom ?? DEFAULT_MAX_ZOOM;
+  const zoomStep = options?.zoomStep ?? DEFAULT_ZOOM_STEP;
+
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const dragStart = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const reset = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  // Reset when trigger changes
+  const resetTrigger = options?.resetTrigger;
+  useEffect(() => {
+    reset();
+  }, [resetTrigger, reset]);
+
+  const zoomInFn = useCallback(() => {
+    setZoom((prev) => Math.min(prev + zoomStep, maxZoom));
+  }, [zoomStep, maxZoom]);
+
+  const zoomOutFn = useCallback(() => {
+    setZoom((prev) => {
+      const next = Math.max(prev - zoomStep, minZoom);
+      if (next <= 1) setPan({ x: 0, y: 0 });
+      return next;
+    });
+  }, [zoomStep, minZoom]);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (zoom <= 1) return;
+      e.preventDefault();
+      setIsDragging(true);
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      panStart.current = { x: pan.x, y: pan.y };
+      if (e.target instanceof HTMLElement) {
+        e.target.setPointerCapture(e.pointerId);
+      }
+    },
+    [zoom, pan],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging) return;
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+      setPan({ x: panStart.current.x + dx, y: panStart.current.y + dy });
+    },
+    [isDragging],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Wheel zoom on the container
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      if (e.deltaY < 0) {
+        setZoom((prev) => Math.min(prev + zoomStep, maxZoom));
+      } else {
+        setZoom((prev) => {
+          const next = Math.max(prev - zoomStep, minZoom);
+          if (next <= 1) setPan({ x: 0, y: 0 });
+          return next;
+        });
+      }
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [zoomStep, minZoom, maxZoom]);
+
+  const transformStyle: React.CSSProperties = {
+    transform: `scale(${zoom}) translate(${pan.x / zoom}px, ${pan.y / zoom}px)`,
+    transformOrigin: 'center center',
+    transition: isDragging ? 'none' : 'transform 0.15s ease-out',
+  };
+
+  return {
+    zoom,
+    pan,
+    isDragging,
+    containerRef,
+    zoomIn: zoomInFn,
+    zoomOut: zoomOutFn,
+    reset,
+    pointerHandlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+    },
+    canZoomIn: zoom < maxZoom,
+    canZoomOut: zoom > minZoom,
+    isZoomed: zoom > 1,
+    transformStyle,
+  };
+}

From ce99e124abd999bd4caee91bfc6e60f24bb1cf5f Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Wed, 11 Mar 2026 13:19:43 +0100
Subject: [PATCH 6/8] fix(platform): address CodeRabbit review feedback

- Add type="button" to zoom control buttons in ZoomPanViewer
- Reset loading/error state in DocumentPreviewImage on URL change
- Use teamIds array for team filter in documents table
- Replace div role="group" with native fieldset in team tags dialog
- Add type predicate to filter(Boolean) for type safety
- Always show save/cancel footer in team tags dialog
- Add zoom translation keys to common.imagePreview namespace
---
 .../ui/data-display/zoom-pan-viewer.tsx       |  3 ++
 .../components/document-preview-image.tsx     |  7 ++-
 .../components/document-team-tags-dialog.tsx  | 43 +++++++++----------
 .../documents/components/documents-table.tsx  |  4 +-
 .../hooks/use-documents-table-config.tsx      |  4 +-
 services/platform/messages/en.json            |  5 +++
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx b/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
index c71c5551d..f3ab6eca3 100644
--- a/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
+++ b/services/platform/app/components/ui/data-display/zoom-pan-viewer.tsx
@@ -80,6 +80,7 @@ export const ZoomPanViewer = memo(function ZoomPanViewer({
       )}
     >
       <button
+        type="button"
         onClick={zoomOut}
         disabled={!canZoomOut}
         className={buttonClass}
@@ -95,6 +96,7 @@ export const ZoomPanViewer = memo(function ZoomPanViewer({
         {Math.round(zoom * 100)}%
       </Text>
       <button
+        type="button"
         onClick={zoomIn}
         disabled={!canZoomIn}
         className={buttonClass}
@@ -103,6 +105,7 @@ export const ZoomPanViewer = memo(function ZoomPanViewer({
         <ZoomIn className="size-4" />
       </button>
       <button
+        type="button"
         onClick={reset}
         disabled={!isZoomed}
         className={buttonClass}
diff --git a/services/platform/app/features/documents/components/document-preview-image.tsx b/services/platform/app/features/documents/components/document-preview-image.tsx
index 37a9cca18..54dde6b9d 100644
--- a/services/platform/app/features/documents/components/document-preview-image.tsx
+++ b/services/platform/app/features/documents/components/document-preview-image.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { ZoomPanViewer } from '@/app/components/ui/data-display/zoom-pan-viewer';
 import { Skeleton } from '@/app/components/ui/feedback/skeleton';
@@ -32,6 +32,11 @@ export function DocumentPreviewImage({
     setHasError(true);
   }, []);
 
+  useEffect(() => {
+    setIsLoading(true);
+    setHasError(false);
+  }, [url]);
+
   if (hasError) {
     return (
       <PreviewPane className="flex items-center justify-center">
diff --git a/services/platform/app/features/documents/components/document-team-tags-dialog.tsx b/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
index 71a64a26f..a1b29b06e 100644
--- a/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
+++ b/services/platform/app/features/documents/components/document-team-tags-dialog.tsx
@@ -138,27 +138,23 @@ function DocumentTeamDialogContent({
       headerClassName="border-border border-b px-6 pt-5 pb-4"
       footerClassName="px-6 pt-4 pb-5"
       footer={
-        hasTeams ? (
-          <>
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={handleClose}
-              disabled={isSubmitting}
-            >
-              {tCommon('actions.cancel')}
-            </Button>
-            <Button
-              type="button"
-              onClick={handleSubmit}
-              disabled={isSubmitting || !hasChanges}
-            >
-              {isSubmitting
-                ? tCommon('actions.saving')
-                : tCommon('actions.save')}
-            </Button>
-          </>
-        ) : undefined
+        <>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={handleClose}
+            disabled={isSubmitting}
+          >
+            {tCommon('actions.cancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSubmitting || !hasChanges}
+          >
+            {isSubmitting ? tCommon('actions.saving') : tCommon('actions.save')}
+          </Button>
+        </>
       }
     >
       {isLoading ? (
@@ -187,7 +183,8 @@ function DocumentTeamDialogContent({
         />
       ) : (
         <div className="flex min-w-0 flex-col gap-1 px-2 pt-2 pb-4">
-          <div role="group" aria-label={tDocuments('teamTags.title')}>
+          <fieldset className="m-0 border-none p-0">
+            <legend className="sr-only">{tDocuments('teamTags.title')}</legend>
             <div className="flex flex-col gap-1">
               <button
                 type="button"
@@ -236,7 +233,7 @@ function DocumentTeamDialogContent({
                 );
               })}
             </div>
-          </div>
+          </fieldset>
         </div>
       )}
     </Dialog>
diff --git a/services/platform/app/features/documents/components/documents-table.tsx b/services/platform/app/features/documents/components/documents-table.tsx
index 144f8152e..5ffac007e 100644
--- a/services/platform/app/features/documents/components/documents-table.tsx
+++ b/services/platform/app/features/documents/components/documents-table.tsx
@@ -191,8 +191,8 @@ export function DocumentsTable({
     }
     if (selectedTeamIds.length > 0) {
       const teamIdSet = new Set(selectedTeamIds);
-      filtered = filtered.filter(
-        (doc) => doc.teamId && teamIdSet.has(doc.teamId),
+      filtered = filtered.filter((doc) =>
+        doc.teamIds?.some((id) => teamIdSet.has(id)),
       );
     }
     if (debouncedQuery) {
diff --git a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
index 499503f75..f1c84531a 100644
--- a/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
+++ b/services/platform/app/features/documents/hooks/use-documents-table-config.tsx
@@ -197,7 +197,9 @@ export function useDocumentsTableConfig({
             return <Skeleton className="h-5 w-20" />;
           }
           const MAX_VISIBLE = 2;
-          const names = teamIds.map((id) => teamMap.get(id)).filter(Boolean);
+          const names = teamIds
+            .map((id) => teamMap.get(id))
+            .filter((name): name is string => Boolean(name));
           const visible = names.slice(0, MAX_VISIBLE);
           const remaining = names.length - MAX_VISIBLE;
           return (
diff --git a/services/platform/messages/en.json b/services/platform/messages/en.json
index 5dd7006f6..bd5777008 100644
--- a/services/platform/messages/en.json
+++ b/services/platform/messages/en.json
@@ -387,6 +387,11 @@
       "automationDeleteFailed": "Failed to delete automation",
       "automationDeactivateFailed": "Failed to deactivate automation",
       "automationPublishFailed": "Failed to publish automation"
+    },
+    "imagePreview": {
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out",
+      "resetZoom": "Reset zoom"
     }
   },
   "dialogs": {

From f51aee3e3c9a10f7c08a1a394004df36891c86cb Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Wed, 11 Mar 2026 13:29:24 +0100
Subject: [PATCH 7/8] ci: trigger CI


From 9bdd1ed578f5d38a1bc25a220403ee6ac54ea058 Mon Sep 17 00:00:00 2001
From: israel <israeliyanda5@gmail.com>
Date: Wed, 11 Mar 2026 14:10:22 +0100
Subject: [PATCH 8/8] fix(platform): fix test failures in document preview and
 team tags

Use vi.hoisted for lazyPromises to avoid temporal dead zone.
Use getByRole heading to avoid duplicate text match in team tags test.
---
 .../components/__tests__/document-preview-routing.test.tsx  | 6 ++++--
 .../components/__tests__/document-team-tags-dialog.test.tsx | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
index 2e252c0f4..6e5b47156 100644
--- a/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
+++ b/services/platform/app/features/documents/components/__tests__/document-preview-routing.test.tsx
@@ -56,8 +56,10 @@ vi.mock('../document-preview-text', () => ({
 }));
 
 // Track all promises from lazyComponent factories so we can resolve
-// them before running any tests.
-const lazyPromises: Promise<void>[] = [];
+// them before running any tests. vi.hoisted runs before vi.mock hoisting.
+const { lazyPromises } = vi.hoisted(() => ({
+  lazyPromises: [] as Promise<void>[],
+}));
 
 vi.mock('@/lib/utils/lazy-component', () => ({
   lazyComponent: (factory: () => Promise<{ default: unknown }>) => {
diff --git a/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx b/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
index ebf014bf3..ce273a668 100644
--- a/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
+++ b/services/platform/app/features/documents/components/__tests__/document-team-tags-dialog.test.tsx
@@ -83,7 +83,9 @@ describe('DocumentTeamTagsDialog', () => {
 
   it('renders the dialog title', () => {
     render(<DocumentTeamTagsDialog {...defaultProps} />);
-    expect(screen.getByText('documents.teamTags.title')).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: 'documents.teamTags.title' }),
+    ).toBeInTheDocument();
   });
 
   it('shows the document name as description', () => {