feat(sqlite-preview): add truncation notice when row limit is reached

Display a notice at the bottom of SQLite table preview when data
is truncated due to PREVIEW_ROW_LIMIT (1000 rows), informing users
that additional rows are not displayed.

web/app/components/workflow/skill/viewer/sqlite-file-preview/data-table.tsx

@@ -11,6 +11,7 @@ type DataTableProps = {
   columns: string[]
   values: SQLiteValue[][]
   scrollRef: RefObject<HTMLDivElement | null>
+  isTruncated?: boolean
 }
 
 const MAX_CELL_LENGTH = 120
@@ -28,10 +29,10 @@ const formatValue = (value: SQLiteValue, t: TFunction<'workflow'>): string => {
 const truncateValue = (value: string): string => {
   if (value.length <= MAX_CELL_LENGTH)
     return value
-  return `${value.slice(0, MAX_CELL_LENGTH)}...`
+  return `${value.slice(0, MAX_CELL_LENGTH)}…`
 }
 
-const DataTable: FC<DataTableProps> = ({ columns, values, scrollRef }) => {
+const DataTable: FC<DataTableProps> = ({ columns, values, scrollRef, isTruncated = false }) => {
   const { t } = useTranslation('workflow')
   const keyColumnIndex = useMemo(() => {
     const candidates = new Set(['id', 'rowid', 'uuid'])
@@ -106,6 +107,20 @@ const DataTable: FC<DataTableProps> = ({ columns, values, scrollRef }) => {
           </tr>
         )}
       </tbody>
+      {isTruncated && (
+        <tfoot>
+          <tr>
+            <td
+              colSpan={columns.length}
+              className="border-b border-l border-r border-divider-subtle bg-background-section-burn px-2 py-1.5 text-center first:rounded-bl-lg last:rounded-br-lg"
+            >
+              <span className="system-xs-regular text-text-tertiary">
+                {t('skillSidebar.sqlitePreview.rowsTruncated', { limit: values.length })}
+              </span>
+            </td>
+          </tr>
+        </tfoot>
+      )}
     </table>
   )
 }

web/app/components/workflow/skill/viewer/sqlite-file-preview/index.tsx

@@ -4,6 +4,7 @@ import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import { useSQLiteDatabase } from '../../hooks/use-sqlite-database'
+import { PREVIEW_ROW_LIMIT } from './constants'
 import TablePanel from './table-panel'
 import TableSelector from './table-selector'
 import { useSQLiteTable } from './use-sqlite-table'
@@ -28,6 +29,7 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
     return tables[0]
   }, [selectedTableId, tables])
   const tableState = useSQLiteTable({ selectedTable, queryTable })
+  const isTruncated = tableState.data !== null && tableState.data.values.length >= PREVIEW_ROW_LIMIT
 
   if (!downloadUrl) {
     return (
@@ -82,6 +84,7 @@ const SQLiteFilePreview: FC<SQLiteFilePreviewProps> = ({
         isLoading={tableState.isLoading}
         error={tableState.error}
         scrollRef={tableScrollRef}
+        isTruncated={isTruncated}
       />
     </div>
   )

web/app/components/workflow/skill/viewer/sqlite-file-preview/table-panel.tsx

@@ -10,6 +10,7 @@ type TablePanelProps = {
   isLoading: boolean
   error: Error | null
   scrollRef: RefObject<HTMLDivElement | null>
+  isTruncated?: boolean
 }
 
 const TablePanel: FC<TablePanelProps> = ({
@@ -17,6 +18,7 @@ const TablePanel: FC<TablePanelProps> = ({
   isLoading,
   error,
   scrollRef,
+  isTruncated = false,
 }) => {
   const { t } = useTranslation('workflow')
 
@@ -45,6 +47,7 @@ const TablePanel: FC<TablePanelProps> = ({
                   columns={data.columns}
                   values={data.values}
                   scrollRef={scrollRef}
+                  isTruncated={isTruncated}
                 />
               )
             : (