Merge remote-tracking branch 'origin/main' into feature/task-quadrant-view

- Add expand button in header to open FullScreenModal
- Add numbered circles (1-4) to quadrant headers
- Add expanded prop to show full content without line-clamp
- Reorder grid layout: Q1 top-left, Q2 top-right, Q3 bottom-left, Q4 bottom-right
- Remove axis labels for cleaner design

.github/workflows/style.yml

@@ -106,9 +106,8 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         working-directory: ./web
         run: |
-          pnpm run lint:ci
-        # pnpm run lint:report
-        # continue-on-error: true
+          pnpm run lint:report
+        continue-on-error: true
 
       # - name: Annotate Code
       #   if: steps.changed-files.outputs.any_changed == 'true' && github.event_name == 'pull_request'
@@ -127,6 +126,11 @@ jobs:
         working-directory: ./web
         run: pnpm run knip
 
+      - name: Web build check
+        if: steps.changed-files.outputs.any_changed == 'true'
+        working-directory: ./web
+        run: pnpm run build
+
   superlinter:
     name: SuperLinter
     runs-on: ubuntu-latest

.github/workflows/web-tests.yml

@@ -366,48 +366,3 @@ jobs:
           path: web/coverage
           retention-days: 30
           if-no-files-found: error
-
-  web-build:
-    name: Web Build
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./web
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-        with:
-          persist-credentials: false
-
-      - name: Check changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v47
-        with:
-          files: |
-            web/**
-            .github/workflows/web-tests.yml
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          package_json_file: web/package.json
-          run_install: false
-
-      - name: Setup NodeJS
-        uses: actions/setup-node@v6
-        if: steps.changed-files.outputs.any_changed == 'true'
-        with:
-          node-version: 24
-          cache: pnpm
-          cache-dependency-path: ./web/pnpm-lock.yaml
-
-      - name: Web dependencies
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm install --frozen-lockfile
-
-      - name: Web build check
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm run build

web/__mocks__/zustand.ts

@@ -1,56 +0,0 @@
-import type * as ZustandExportedTypes from 'zustand'
-import { act } from '@testing-library/react'
-
-export * from 'zustand'
-
-const { create: actualCreate, createStore: actualCreateStore }
-  // eslint-disable-next-line antfu/no-top-level-await
-  = await vi.importActual<typeof ZustandExportedTypes>('zustand')
-
-export const storeResetFns = new Set<() => void>()
-
-const createUncurried = <T>(
-  stateCreator: ZustandExportedTypes.StateCreator<T>,
-) => {
-  const store = actualCreate(stateCreator)
-  const initialState = store.getInitialState()
-  storeResetFns.add(() => {
-    store.setState(initialState, true)
-  })
-  return store
-}
-
-export const create = (<T>(
-  stateCreator: ZustandExportedTypes.StateCreator<T>,
-) => {
-  return typeof stateCreator === 'function'
-    ? createUncurried(stateCreator)
-    : createUncurried
-}) as typeof ZustandExportedTypes.create
-
-const createStoreUncurried = <T>(
-  stateCreator: ZustandExportedTypes.StateCreator<T>,
-) => {
-  const store = actualCreateStore(stateCreator)
-  const initialState = store.getInitialState()
-  storeResetFns.add(() => {
-    store.setState(initialState, true)
-  })
-  return store
-}
-
-export const createStore = (<T>(
-  stateCreator: ZustandExportedTypes.StateCreator<T>,
-) => {
-  return typeof stateCreator === 'function'
-    ? createStoreUncurried(stateCreator)
-    : createStoreUncurried
-}) as typeof ZustandExportedTypes.createStore
-
-afterEach(() => {
-  act(() => {
-    storeResetFns.forEach((resetFn) => {
-      resetFn()
-    })
-  })
-})

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -18,7 +18,6 @@ import { useStore } from '@/app/components/app/store'
 import { PipelineFill, PipelineLine } from '@/app/components/base/icons/src/vender/pipeline'
 import Loading from '@/app/components/base/loading'
 import ExtraInfo from '@/app/components/datasets/extra-info'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { useAppContext } from '@/context/app-context'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -26,7 +25,6 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -42,7 +40,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const pathname = usePathname()
   const hideSideBar = pathname.endsWith('documents/create') || pathname.endsWith('documents/create-from-pipeline')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
-  const workflowCanvasMaximize = storage.getBoolean(STORAGE_KEYS.WORKFLOW.CANVAS_MAXIMIZE, false)
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
   const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
   const { eventEmitter } = useEventEmitterContextContext()
 

web/app/components/app-sidebar/index.tsx

@@ -5,11 +5,9 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 import Divider from '../base/divider'
 import { getKeyboardKeyCodeBySystem } from '../workflow/utils'
 import AppInfo from './app-info'
@@ -55,7 +53,7 @@ const AppDetailNav = ({
   const pathname = usePathname()
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
-  const workflowCanvasMaximize = storage.getBoolean(STORAGE_KEYS.WORKFLOW.CANVAS_MAXIMIZE, false)
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
   const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
   const { eventEmitter } = useEventEmitterContextContext()
 
@@ -66,7 +64,7 @@ const AppDetailNav = ({
 
   useEffect(() => {
     if (appSidebarExpand) {
-      storage.set(STORAGE_KEYS.APP.DETAIL_COLLAPSE, appSidebarExpand)
+      localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
       setAppSidebarExpand(appSidebarExpand)
     }
   }, [appSidebarExpand, setAppSidebarExpand])

web/app/components/app/app-access-control/access-control.spec.tsx

@@ -3,7 +3,9 @@ import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import useAccessControlStore from '@/context/access-control-store'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
+import { defaultSystemFeatures } from '@/types/feature'
 import Toast from '../../base/toast'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
@@ -103,6 +105,22 @@ const memberSubject: Subject = {
   accountData: baseMember,
 } as Subject
 
+const resetAccessControlStore = () => {
+  useAccessControlStore.setState({
+    appId: '',
+    specificGroups: [],
+    specificMembers: [],
+    currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+    selectedGroupsForBreadcrumb: [],
+  })
+}
+
+const resetGlobalStore = () => {
+  useGlobalPublicStore.setState({
+    systemFeatures: defaultSystemFeatures,
+  })
+}
+
 beforeAll(() => {
   class MockIntersectionObserver {
     observe = vi.fn(() => undefined)
@@ -114,6 +132,9 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
+  vi.clearAllMocks()
+  resetAccessControlStore()
+  resetGlobalStore()
   mockMutateAsync.mockResolvedValue(undefined)
   mockUseUpdateAccessMode.mockReturnValue({
     isPending: false,

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -189,7 +189,6 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                 }
               </div>
             ))}
-            {isFetchingNextPage && <Loading />}
           </div>
         </>
       )}

web/app/components/apps/app-card-skeleton.tsx

@@ -21,15 +21,15 @@ export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps)
         >
           <SkeletonContainer className="h-full">
             <SkeletonRow>
-              <SkeletonRectangle className="h-10 w-10 animate-pulse rounded-lg" />
+              <SkeletonRectangle className="h-10 w-10 rounded-lg" />
               <div className="flex flex-1 flex-col gap-1">
-                <SkeletonRectangle className="h-4 w-2/3 animate-pulse" />
-                <SkeletonRectangle className="h-3 w-1/3 animate-pulse" />
+                <SkeletonRectangle className="h-4 w-2/3" />
+                <SkeletonRectangle className="h-3 w-1/3" />
               </div>
             </SkeletonRow>
             <div className="mt-4 flex flex-col gap-2">
-              <SkeletonRectangle className="h-3 w-full animate-pulse" />
-              <SkeletonRectangle className="h-3 w-4/5 animate-pulse" />
+              <SkeletonRectangle className="h-3 w-full" />
+              <SkeletonRectangle className="h-3 w-4/5" />
             </div>
           </SkeletonContainer>
         </div>

web/app/components/apps/list.tsx

@@ -248,9 +248,6 @@ const List = () => {
             // No apps - show empty state
             return <Empty />
           })()}
-          {isFetchingNextPage && (
-            <AppCardSkeleton count={3} />
-          )}
         </div>
 
         {isCurrentWorkspaceEditor && (

web/app/components/base/loading/index.tsx

@@ -1,25 +1,21 @@
 'use client'
 
+import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/utils/classnames'
+
 import './style.css'
 
 type ILoadingProps = {
   type?: 'area' | 'app'
-  className?: string
 }
-
-const Loading = (props?: ILoadingProps) => {
-  const { type = 'area', className } = props || {}
+const Loading = (
+  { type = 'area' }: ILoadingProps = { type: 'area' },
+) => {
   const { t } = useTranslation()
 
   return (
     <div
-      className={cn(
-        'flex w-full items-center justify-center',
-        type === 'app' && 'h-full',
-        className,
-      )}
+      className={`flex w-full items-center justify-center ${type === 'app' ? 'h-full' : ''}`}
       role="status"
       aria-live="polite"
       aria-label={t('loading', { ns: 'appApi' })}
@@ -41,5 +37,4 @@ const Loading = (props?: ILoadingProps) => {
     </div>
   )
 }
-
 export default Loading

web/app/components/base/markdown-blocks/code-block.tsx

@@ -16,6 +16,7 @@ import { Theme } from '@/types/app'
 import SVGRenderer from '../svg-gallery' // Assumes svg-gallery.tsx is in /base directory
 
 const Flowchart = dynamic(() => import('@/app/components/base/mermaid'), { ssr: false })
+const QuadrantMatrix = dynamic(() => import('@/app/components/base/quadrant-matrix'), { ssr: false })
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -40,6 +41,7 @@ const capitalizationLanguageNameMap: Record<string, string> = {
   latex: 'Latex',
   svg: 'SVG',
   abc: 'ABC',
+  quadrant: 'Quadrant',
 }
 const getCorrectCapitalizationLanguageName = (language: string) => {
   if (!language)
@@ -409,6 +411,12 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
             <MarkdownMusic children={content} />
           </ErrorBoundary>
         )
+      case 'quadrant':
+        return (
+          <ErrorBoundary>
+            <QuadrantMatrix content={content} />
+          </ErrorBoundary>
+        )
       default:
         return (
           <SyntaxHighlighter

web/app/components/base/quadrant-matrix/index.tsx

@@ -0,0 +1,153 @@
+'use client'
+import type { FC } from 'react'
+import type { QuadrantData } from './types'
+import { RiExpandDiagonalLine } from '@remixicon/react'
+import { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ActionButton from '@/app/components/base/action-button'
+import FullScreenModal from '@/app/components/base/fullscreen-modal'
+import QuadrantCard from './quadrant-card'
+import { isValidQuadrantData, QUADRANT_CONFIGS } from './types'
+
+type QuadrantMatrixProps = {
+  content: string
+}
+
+const QuadrantMatrix: FC<QuadrantMatrixProps> = ({ content }) => {
+  const { t } = useTranslation()
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const parsedData = useMemo<QuadrantData | null>(() => {
+    try {
+      const trimmed = content.trim()
+      const data = JSON.parse(trimmed)
+
+      if (!isValidQuadrantData(data))
+        return null
+
+      return data
+    }
+    catch {
+      return null
+    }
+  }, [content])
+
+  const handleExpand = useCallback(() => {
+    setIsExpanded(true)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setIsExpanded(false)
+  }, [])
+
+  if (!parsedData) {
+    return (
+      <div className="flex items-center justify-center rounded-xl bg-components-panel-bg-blur p-8">
+        <div className="text-center text-text-secondary">
+          <div className="system-md-semibold mb-2">{t('quadrantMatrix.invalidData', { ns: 'app' })}</div>
+          <div className="text-sm text-text-tertiary">
+            {t('quadrantMatrix.invalidDataDesc', { ns: 'app' })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const totalTasks
+    = parsedData.q1.length
+      + parsedData.q2.length
+      + parsedData.q3.length
+      + parsedData.q4.length
+
+  // Shared grid content component
+  const renderGrid = (expanded: boolean) => (
+    <div className="grid grid-cols-2 gap-3">
+      {/* Row 1: Q1 (Do First), Q2 (Schedule) */}
+      <QuadrantCard
+        config={QUADRANT_CONFIGS.q1}
+        tasks={parsedData.q1}
+        expanded={expanded}
+      />
+      <QuadrantCard
+        config={QUADRANT_CONFIGS.q2}
+        tasks={parsedData.q2}
+        expanded={expanded}
+      />
+
+      {/* Row 2: Q3 (Delegate), Q4 (Don't Do) */}
+      <QuadrantCard
+        config={QUADRANT_CONFIGS.q3}
+        tasks={parsedData.q3}
+        expanded={expanded}
+      />
+      <QuadrantCard
+        config={QUADRANT_CONFIGS.q4}
+        tasks={parsedData.q4}
+        expanded={expanded}
+      />
+    </div>
+  )
+
+  return (
+    <>
+      <div className="w-full overflow-hidden rounded-xl bg-components-panel-bg-blur p-4">
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between">
+          <div>
+            <div className="system-md-semibold text-text-primary">
+              {t('quadrantMatrix.title', { ns: 'app' })}
+            </div>
+            <div className="text-xs text-text-tertiary">
+              {t('quadrantMatrix.taskCount', { ns: 'app', count: totalTasks })}
+            </div>
+          </div>
+          {/* Legend + Expand Button */}
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 text-[11px] text-text-quaternary">
+              <span>{t('quadrantMatrix.legend.importance', { ns: 'app' })}</span>
+              <span>{t('quadrantMatrix.legend.urgency', { ns: 'app' })}</span>
+            </div>
+            <ActionButton onClick={handleExpand}>
+              <RiExpandDiagonalLine className="h-4 w-4" />
+            </ActionButton>
+          </div>
+        </div>
+
+        {/* 2x2 Grid */}
+        {renderGrid(false)}
+      </div>
+
+      {/* Fullscreen Modal */}
+      <FullScreenModal
+        open={isExpanded}
+        onClose={handleClose}
+        closable
+      >
+        <div className="flex h-full flex-col p-6">
+          {/* Modal Header */}
+          <div className="mb-6 flex items-center justify-between">
+            <div>
+              <div className="text-xl font-semibold text-text-primary">
+                {t('quadrantMatrix.title', { ns: 'app' })}
+              </div>
+              <div className="text-sm text-text-tertiary">
+                {t('quadrantMatrix.taskCount', { ns: 'app', count: totalTasks })}
+              </div>
+            </div>
+            <div className="flex items-center gap-3 text-sm text-text-quaternary">
+              <span>{t('quadrantMatrix.legend.importance', { ns: 'app' })}</span>
+              <span>{t('quadrantMatrix.legend.urgency', { ns: 'app' })}</span>
+            </div>
+          </div>
+
+          {/* Expanded Grid */}
+          <div className="min-h-0 flex-1">
+            {renderGrid(true)}
+          </div>
+        </div>
+      </FullScreenModal>
+    </>
+  )
+}
+
+export default QuadrantMatrix

web/app/components/base/quadrant-matrix/quadrant-card.tsx

@@ -0,0 +1,102 @@
+'use client'
+import type { FC } from 'react'
+import type { QuadrantConfig, Task } from './types'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+import TaskItem from './task-item'
+
+type QuadrantCardProps = {
+  config: QuadrantConfig
+  tasks: Task[]
+  expanded?: boolean
+  maxDisplay?: number
+}
+
+const QuadrantCard: FC<QuadrantCardProps> = ({
+  config,
+  tasks,
+  expanded = false,
+  maxDisplay = 3,
+}) => {
+  const { t } = useTranslation()
+  const { number, titleKey, subtitleKey, bgClass, borderClass, titleClass } = config
+  const displayLimit = expanded ? Infinity : maxDisplay
+  const displayTasks = tasks.slice(0, displayLimit)
+  const remainingCount = Math.max(0, tasks.length - displayLimit)
+
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 flex-col rounded-xl border p-3',
+        bgClass,
+        borderClass,
+        expanded ? 'min-h-[280px]' : 'min-h-[200px]',
+      )}
+    >
+      {/* Header with numbered circle */}
+      <div className="mb-2 shrink-0">
+        <div className="flex items-center gap-2">
+          {/* Numbered circle */}
+          <span className={cn(
+            'flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold',
+            borderClass,
+            titleClass,
+          )}
+          >
+            {number}
+          </span>
+          <span className={cn('system-sm-semibold', titleClass)}>{t(titleKey, { ns: 'app' })}</span>
+          {tasks.length > 0 && (
+            <span className="bg-components-badge-bg-gray rounded-full px-1.5 py-0.5 text-[10px] font-medium text-text-tertiary">
+              {tasks.length}
+            </span>
+          )}
+        </div>
+        <div className="text-[11px] text-text-tertiary">{t(subtitleKey, { ns: 'app' })}</div>
+      </div>
+
+      {/* Task List */}
+      <div className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2',
+        expanded && 'overflow-y-auto',
+      )}
+      >
+        {displayTasks.length > 0
+          ? (
+              displayTasks.map((task) => {
+                const taskKey = [
+                  task.name,
+                  task.deadline ?? 'no-deadline',
+                  task.importance_score,
+                  task.urgency_score,
+                  task.description ?? '',
+                  task.action_advice ?? '',
+                ].join('|')
+
+                return (
+                  <TaskItem
+                    key={taskKey}
+                    task={task}
+                    expanded={expanded}
+                  />
+                )
+              })
+            )
+          : (
+              <div className="flex flex-1 items-center justify-center text-xs text-text-quaternary">
+                {t('quadrantMatrix.noTasks', { ns: 'app' })}
+              </div>
+            )}
+      </div>
+
+      {/* More indicator (only in non-expanded mode) */}
+      {!expanded && remainingCount > 0 && (
+        <div className="mt-2 shrink-0 text-center text-[11px] text-text-tertiary">
+          {t('quadrantMatrix.more', { ns: 'app', count: remainingCount })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default QuadrantCard

web/app/components/base/quadrant-matrix/task-item.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import type { Task } from './types'
+import { RiCalendarLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/utils/classnames'
+
+type TaskItemProps = {
+  task: Task
+  expanded?: boolean
+  showScores?: boolean
+}
+
+const TaskItem: FC<TaskItemProps> = ({ task, expanded = false, showScores = true }) => {
+  const { t } = useTranslation()
+  const { name, description, deadline, importance_score, urgency_score, action_advice } = task
+
+  return (
+    <div className="group min-w-0 rounded-lg bg-components-panel-bg p-2.5 shadow-xs transition-all hover:shadow-sm">
+      {/* Header: Task Name + Scores */}
+      <div className="flex items-start justify-between gap-2">
+        <div
+          className={cn(
+            'system-sm-medium min-w-0 flex-1 text-text-primary',
+            !expanded && 'truncate',
+          )}
+          title={name}
+        >
+          {name}
+        </div>
+        {showScores && (
+          <div className="flex shrink-0 items-center gap-1 text-[10px] font-medium">
+            <span className="text-text-accent">
+              I:
+              {importance_score}
+            </span>
+            <span className="text-text-warning">
+              U:
+              {urgency_score}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Description */}
+      {description && (
+        <div className={cn(
+          'mt-1 text-xs text-text-tertiary',
+          !expanded && 'line-clamp-2',
+        )}
+        >
+          {description}
+        </div>
+      )}
+
+      {/* Deadline Badge */}
+      {deadline && (
+        <div className="mt-1.5">
+          <span className="bg-components-badge-bg-gray inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-text-tertiary">
+            <RiCalendarLine className="h-3 w-3" />
+            <span>
+              {t('quadrantMatrix.deadline', { ns: 'app' })}
+              {' '}
+              {deadline}
+            </span>
+          </span>
+        </div>
+      )}
+
+      {/* Action Advice */}
+      {action_advice && (
+        <div className="mt-2 border-t border-divider-subtle pt-2">
+          <p
+            className={cn(
+              'text-xs italic text-text-quaternary',
+              !expanded && 'line-clamp-2',
+            )}
+            title={!expanded ? action_advice : undefined}
+          >
+            {action_advice}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TaskItem

web/app/components/base/quadrant-matrix/types.ts

@@ -0,0 +1,92 @@
+/**
+ * Type definitions for Eisenhower Matrix (Task Quadrant) visualization
+ */
+import type { I18nKeysWithPrefix } from '@/types/i18n'
+
+export type Task = {
+  name: string
+  description?: string
+  deadline?: string // YYYY-MM-DD format
+  importance_score: number // 0-100, based on goal alignment and long-term value
+  urgency_score: number // 0-100, based on deadline pressure and delay penalty
+  action_advice?: string // Suggested action for this task
+}
+
+export type QuadrantData = {
+  q1: Task[] // Urgent & Important - Do First
+  q2: Task[] // Not Urgent & Important - Schedule
+  q3: Task[] // Urgent & Not Important - Delegate
+  q4: Task[] // Not Urgent & Not Important - Don't Do
+}
+
+type QuadrantKeyBase = I18nKeysWithPrefix<'app', 'quadrantMatrix.q'>
+type QuadrantTitleKey = Extract<QuadrantKeyBase, `${string}.title`>
+type QuadrantSubtitleKey = Extract<QuadrantKeyBase, `${string}.subtitle`>
+
+export type QuadrantConfig = {
+  key: 'q1' | 'q2' | 'q3' | 'q4'
+  number: number
+  titleKey: QuadrantTitleKey // i18n key for title
+  subtitleKey: QuadrantSubtitleKey // i18n key for subtitle
+  bgClass: string
+  borderClass: string
+  titleClass: string
+}
+
+// Layout based on Eisenhower Matrix:
+// Q1 (Do First) - top-left, Q2 (Schedule) - top-right
+// Q3 (Delegate) - bottom-left, Q4 (Don't Do) - bottom-right
+export const QUADRANT_CONFIGS: Record<string, QuadrantConfig> = {
+  q1: {
+    key: 'q1',
+    number: 1,
+    titleKey: 'quadrantMatrix.q1.title',
+    subtitleKey: 'quadrantMatrix.q1.subtitle',
+    bgClass: 'bg-state-destructive-hover',
+    borderClass: 'border-state-destructive-border',
+    titleClass: 'text-text-destructive',
+  },
+  q2: {
+    key: 'q2',
+    number: 2,
+    titleKey: 'quadrantMatrix.q2.title',
+    subtitleKey: 'quadrantMatrix.q2.subtitle',
+    bgClass: 'bg-state-accent-hover',
+    borderClass: 'border-state-accent-border',
+    titleClass: 'text-text-accent',
+  },
+  q3: {
+    key: 'q3',
+    number: 3,
+    titleKey: 'quadrantMatrix.q3.title',
+    subtitleKey: 'quadrantMatrix.q3.subtitle',
+    bgClass: 'bg-state-warning-hover',
+    borderClass: 'border-state-warning-border',
+    titleClass: 'text-text-warning',
+  },
+  q4: {
+    key: 'q4',
+    number: 4,
+    titleKey: 'quadrantMatrix.q4.title',
+    subtitleKey: 'quadrantMatrix.q4.subtitle',
+    bgClass: 'bg-components-panel-on-panel-item-bg',
+    borderClass: 'border-divider-regular',
+    titleClass: 'text-text-tertiary',
+  },
+}
+
+/**
+ * Validates if the data structure matches QuadrantData interface
+ */
+export function isValidQuadrantData(data: unknown): data is QuadrantData {
+  if (typeof data !== 'object' || data === null)
+    return false
+
+  const d = data as Record<string, unknown>
+  return (
+    Array.isArray(d.q1)
+    && Array.isArray(d.q2)
+    && Array.isArray(d.q3)
+    && Array.isArray(d.q4)
+  )
+}

web/app/components/datasets/list/datasets.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Loading from '@/app/components/base/loading'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetList, useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import DatasetCard from './dataset-card'
@@ -26,7 +25,6 @@ const Datasets = ({
     fetchNextPage,
     hasNextPage,
     isFetching,
-    isFetchingNextPage,
   } = useDatasetList({
     initialPage: 1,
     tag_ids: tags,
@@ -62,7 +60,6 @@ const Datasets = ({
         {datasetList?.pages.map(({ data: datasets }) => datasets.map(dataset => (
           <DatasetCard key={dataset.id} dataset={dataset} onSuccess={invalidDatasetList} />),
         ))}
-        {isFetchingNextPage && <Loading />}
         <div ref={anchorRef} className="h-0" />
       </nav>
     </>

web/app/components/header/app-nav/index.tsx

@@ -33,7 +33,6 @@ const AppNav = () => {
     data: appsData,
     fetchNextPage,
     hasNextPage,
-    isFetchingNextPage,
     refetch,
   } = useInfiniteAppList({
     page: 1,
@@ -112,7 +111,6 @@ const AppNav = () => {
         createText={t('menus.newApp', { ns: 'common' })}
         onCreate={openModal}
         onLoadMore={handleLoadMore}
-        isLoadingMore={isFetchingNextPage}
       />
       <CreateAppModal
         show={showNewAppDialog}

web/app/components/header/dataset-nav/index.tsx

@@ -23,7 +23,6 @@ const DatasetNav = () => {
     data: datasetList,
     fetchNextPage,
     hasNextPage,
-    isFetchingNextPage,
   } = useDatasetList({
     initialPage: 1,
     limit: 30,
@@ -94,7 +93,6 @@ const DatasetNav = () => {
       createText={t('menus.newDataset', { ns: 'common' })}
       onCreate={() => router.push(createRoute)}
       onLoadMore={handleLoadMore}
-      isLoadingMore={isFetchingNextPage}
     />
   )
 }

web/app/components/header/header-wrapper.tsx

@@ -2,10 +2,8 @@
 import { usePathname } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 import s from './index.module.css'
 
 type HeaderWrapperProps = {
@@ -20,7 +18,7 @@ const HeaderWrapper = ({
   // Check if the current path is a workflow canvas & fullscreen
   const inWorkflowCanvas = pathname.endsWith('/workflow')
   const isPipelineCanvas = pathname.endsWith('/pipeline')
-  const workflowCanvasMaximize = storage.getBoolean(STORAGE_KEYS.WORKFLOW.CANVAS_MAXIMIZE, false)
+  const workflowCanvasMaximize = localStorage.getItem('workflow-canvas-maximize') === 'true'
   const [hideHeader, setHideHeader] = useState(workflowCanvasMaximize)
   const { eventEmitter } = useEventEmitterContextContext()
 

web/app/components/header/nav/index.tsx

@@ -30,7 +30,6 @@ const Nav = ({
   createText,
   onCreate,
   onLoadMore,
-  isLoadingMore,
   isApp,
 }: INavProps) => {
   const setAppDetail = useAppStore(state => state.setAppDetail)
@@ -82,7 +81,6 @@ const Nav = ({
               createText={createText}
               onCreate={onCreate}
               onLoadMore={onLoadMore}
-              isLoadingMore={isLoadingMore}
             />
           </>
         )

web/app/components/header/nav/nav-selector/index.tsx

@@ -14,7 +14,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
 
@@ -35,10 +34,9 @@ export type INavSelectorProps = {
   isApp?: boolean
   onCreate: (state: string) => void
   onLoadMore?: () => void
-  isLoadingMore?: boolean
 }
 
-const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore, isLoadingMore }: INavSelectorProps) => {
+const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore }: INavSelectorProps) => {
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor } = useAppContext()
@@ -108,11 +106,6 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                   </MenuItem>
                 ))
               }
-              {isLoadingMore && (
-                <div className="flex justify-center py-2">
-                  <Loading />
-                </div>
-              )}
             </div>
             {!isApp && isCurrentWorkspaceEditor && (
               <MenuItem as="div" className="w-full p-1">

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -19,7 +19,6 @@ const ListWrapper = ({
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     isLoading,
-    isFetchingNextPage,
     page,
   } = useMarketplaceData()
 
@@ -54,11 +53,6 @@ const ListWrapper = ({
           />
         )
       }
-      {
-        isFetchingNextPage && (
-          <Loading className="my-3" />
-        )
-      }
     </div>
   )
 }

web/app/components/plugins/marketplace/state.ts

@@ -33,7 +33,7 @@ export function useMarketplaceData() {
   }, [isSearchMode, searchPluginText, activePluginType, filterPluginTags, sort])
 
   const pluginsQuery = useMarketplacePlugins(queryParams)
-  const { hasNextPage, fetchNextPage, isFetching, isFetchingNextPage } = pluginsQuery
+  const { hasNextPage, fetchNextPage, isFetching } = pluginsQuery
 
   const handlePageChange = useCallback(() => {
     if (hasNextPage && !isFetching)
@@ -50,6 +50,5 @@ export function useMarketplaceData() {
     pluginsTotal: pluginsQuery.data?.pages[0]?.total,
     page: pluginsQuery.data?.pages.length || 1,
     isLoading: collectionsQuery.isLoading || pluginsQuery.isLoading,
-    isFetchingNextPage,
   }
 }

web/app/components/plugins/plugin-page/filter-management/index.spec.tsx

@@ -144,6 +144,17 @@ describe('constant.ts - Type Definitions', () => {
 
 // ==================== store.ts Tests ====================
 describe('store.ts - Zustand Store', () => {
+  beforeEach(() => {
+    // Reset store to initial state
+    const { setState } = useStore
+    setState({
+      tagList: [],
+      categoryList: [],
+      showTagManagementModal: false,
+      showCategoryManagementModal: false,
+    })
+  })
+
   describe('Initial State', () => {
     it('should have empty tagList initially', () => {
       const { result } = renderHook(() => useStore(state => state.tagList))

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -5,11 +5,11 @@ import { useDebounceFn } from 'ahooks'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Loading from '@/app/components/base/loading'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import Loading from '../../base/loading'
 import { PluginSource } from '../types'
 import { usePluginPageContext } from './context'
 import Empty from './empty'
@@ -107,17 +107,12 @@ const PluginsPanel = () => {
                   <div className="w-full">
                     <List pluginList={filteredList || []} />
                   </div>
-                  {!isLastPage && (
-                    <div className="flex justify-center py-4">
-                      {isFetching
-                        ? <Loading className="size-8" />
-                        : (
-                            <Button onClick={loadNextPage}>
-                              {t('common.loadMore', { ns: 'workflow' })}
-                            </Button>
-                          )}
-                    </div>
+                  {!isLastPage && !isFetching && (
+                    <Button onClick={loadNextPage}>
+                      {t('common.loadMore', { ns: 'workflow' })}
+                    </Button>
                   )}
+                  {isFetching && <div className="system-md-semibold text-text-secondary">{t('detail.loading', { ns: 'appLog' })}</div>}
                 </div>
               )
             : (

web/app/components/plugins/readme-panel/index.spec.tsx

@@ -134,6 +134,13 @@ describe('BUILTIN_TOOLS_ARRAY', () => {
 // Store Tests
 // ================================
 describe('useReadmePanelStore', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset store state before each test
+    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
+    setCurrentPluginDetail()
+  })
+
   describe('Initial State', () => {
     it('should have undefined currentPluginDetail initially', () => {
       const { currentPluginDetail } = useReadmePanelStore.getState()
@@ -221,6 +228,13 @@ describe('useReadmePanelStore', () => {
 // ReadmeEntrance Component Tests
 // ================================
 describe('ReadmeEntrance', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset store state
+    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
+    setCurrentPluginDetail()
+  })
+
   // ================================
   // Rendering Tests
   // ================================
@@ -403,6 +417,11 @@ describe('ReadmeEntrance', () => {
 // ================================
 describe('ReadmePanel', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset store state
+    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
+    setCurrentPluginDetail()
+    // Reset mock
     mockUsePluginReadme.mockReturnValue({
       data: null,
       isLoading: false,

web/app/components/workflow/hooks/use-workflow-interactions.ts

@@ -5,9 +5,7 @@ import {
   useCallback,
 } from 'react'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import { storage } from '@/utils/storage'
 import {
   CUSTOM_NODE,
   NODE_LAYOUT_HORIZONTAL_PADDING,
@@ -344,7 +342,7 @@ export const useWorkflowCanvasMaximize = () => {
       return
 
     setMaximizeCanvas(!maximizeCanvas)
-    storage.set(STORAGE_KEYS.WORKFLOW.CANVAS_MAXIMIZE, !maximizeCanvas)
+    localStorage.setItem('workflow-canvas-maximize', String(!maximizeCanvas))
     eventEmitter?.emit({
       type: 'workflow-canvas-maximize',
       payload: !maximizeCanvas,

web/app/components/workflow/nodes/_base/components/editor/wrap.tsx

@@ -26,12 +26,12 @@ const Wrap = ({
   isExpand,
   children,
 }: Props) => {
-  const nodePanelWidth = useStore(state => state.nodePanelWidth)
+  const panelWidth = useStore(state => state.panelWidth)
   const wrapStyle = (() => {
     if (isExpand) {
       return {
         ...style,
-        width: nodePanelWidth - 1,
+        width: panelWidth - 1,
       }
     }
     return style

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -59,14 +59,12 @@ import {
   hasRetryNode,
   isSupportCustomRunForm,
 } from '@/app/components/workflow/utils'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { useModalContext } from '@/context/modal-context'
 import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { FlowType } from '@/types/common'
 import { canFindTool } from '@/utils'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 import { useResizePanel } from '../../hooks/use-resize-panel'
 import BeforeRunForm from '../before-run-form'
 import PanelWrap from '../before-run-form/panel-wrap'
@@ -139,7 +137,7 @@ const BasePanel: FC<BasePanelProps> = ({
     const newValue = Math.max(400, Math.min(width, maxNodePanelWidth))
 
     if (source === 'user')
-      storage.set(STORAGE_KEYS.WORKFLOW.NODE_PANEL_WIDTH, newValue)
+      localStorage.setItem('workflow-node-panel-width', `${newValue}`)
 
     setNodePanelWidth(newValue)
   }, [maxNodePanelWidth, setNodePanelWidth])

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -18,9 +18,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
 import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
 import { useStore } from '@/app/components/workflow/store'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 import {
   useWorkflowInteractions,
 } from '../../hooks'
@@ -58,7 +56,7 @@ const DebugAndPreview = () => {
   const setPanelWidth = useStore(s => s.setPreviewPanelWidth)
   const handleResize = useCallback((width: number, source: 'user' | 'system' = 'user') => {
     if (source === 'user')
-      storage.set(STORAGE_KEYS.WORKFLOW.PREVIEW_PANEL_WIDTH, width)
+      localStorage.setItem('debug-and-preview-panel-width', `${width}`)
     setPanelWidth(width)
   }, [setPanelWidth])
   const maxPanelWidth = useMemo(() => {

web/app/components/workflow/store/workflow/layout-slice.ts

@@ -1,12 +1,11 @@
 import type { StateCreator } from 'zustand'
-import { STORAGE_KEYS } from '@/config/storage-keys'
-import { storage } from '@/utils/storage'
 
 export type LayoutSliceShape = {
   workflowCanvasWidth?: number
   workflowCanvasHeight?: number
   setWorkflowCanvasWidth: (width: number) => void
   setWorkflowCanvasHeight: (height: number) => void
+  // rightPanelWidth - otherPanelWidth = nodePanelWidth
   rightPanelWidth?: number
   setRightPanelWidth: (width: number) => void
   nodePanelWidth: number
@@ -15,11 +14,11 @@ export type LayoutSliceShape = {
   setPreviewPanelWidth: (width: number) => void
   otherPanelWidth: number
   setOtherPanelWidth: (width: number) => void
-  bottomPanelWidth: number
+  bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
   setBottomPanelWidth: (width: number) => void
   bottomPanelHeight: number
   setBottomPanelHeight: (height: number) => void
-  variableInspectPanelHeight: number
+  variableInspectPanelHeight: number // min-height = 120px; default-height = 320px;
   setVariableInspectPanelHeight: (height: number) => void
   maximizeCanvas: boolean
   setMaximizeCanvas: (maximize: boolean) => void
@@ -32,9 +31,9 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
   setWorkflowCanvasHeight: height => set(() => ({ workflowCanvasHeight: height })),
   rightPanelWidth: undefined,
   setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })),
-  nodePanelWidth: storage.getNumber(STORAGE_KEYS.WORKFLOW.NODE_PANEL_WIDTH, 420),
+  nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400,
   setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })),
-  previewPanelWidth: storage.getNumber(STORAGE_KEYS.WORKFLOW.PREVIEW_PANEL_WIDTH, 400),
+  previewPanelWidth: localStorage.getItem('debug-and-preview-panel-width') ? Number.parseFloat(localStorage.getItem('debug-and-preview-panel-width')!) : 400,
   setPreviewPanelWidth: width => set(() => ({ previewPanelWidth: width })),
   otherPanelWidth: 400,
   setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
@@ -42,8 +41,8 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
   setBottomPanelWidth: width => set(() => ({ bottomPanelWidth: width })),
   bottomPanelHeight: 324,
   setBottomPanelHeight: height => set(() => ({ bottomPanelHeight: height })),
-  variableInspectPanelHeight: storage.getNumber(STORAGE_KEYS.WORKFLOW.VARIABLE_INSPECT_PANEL_HEIGHT, 320),
+  variableInspectPanelHeight: localStorage.getItem('workflow-variable-inpsect-panel-height') ? Number.parseFloat(localStorage.getItem('workflow-variable-inpsect-panel-height')!) : 320,
   setVariableInspectPanelHeight: height => set(() => ({ variableInspectPanelHeight: height })),
-  maximizeCanvas: storage.getBoolean(STORAGE_KEYS.WORKFLOW.CANVAS_MAXIMIZE, false),
+  maximizeCanvas: localStorage.getItem('workflow-canvas-maximize') === 'true',
   setMaximizeCanvas: maximize => set(() => ({ maximizeCanvas: maximize })),
 })

web/app/components/workflow/store/workflow/panel-slice.ts

@@ -1,6 +1,7 @@
 import type { StateCreator } from 'zustand'
 
 export type PanelSliceShape = {
+  panelWidth: number
   showFeaturesPanel: boolean
   setShowFeaturesPanel: (showFeaturesPanel: boolean) => void
   showWorkflowVersionHistoryPanel: boolean
@@ -26,6 +27,7 @@ export type PanelSliceShape = {
 }
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
+  panelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420,
   showFeaturesPanel: false,
   setShowFeaturesPanel: showFeaturesPanel => set(() => ({ showFeaturesPanel })),
   showWorkflowVersionHistoryPanel: false,

web/app/components/workflow/store/workflow/workflow-slice.ts

@@ -5,8 +5,6 @@ import type {
   WorkflowRunningData,
 } from '@/app/components/workflow/types'
 import type { FileUploadConfigResponse } from '@/models/common'
-import { STORAGE_KEYS } from '@/config/storage-keys'
-import { storage } from '@/utils/storage'
 
 type PreviewRunningData = WorkflowRunningData & {
   resultTabActive?: boolean
@@ -65,10 +63,10 @@ export const createWorkflowSlice: StateCreator<WorkflowSliceShape> = set => ({
   setSelection: selection => set(() => ({ selection })),
   bundleNodeSize: null,
   setBundleNodeSize: bundleNodeSize => set(() => ({ bundleNodeSize })),
-  controlMode: storage.get<'pointer' | 'hand'>(STORAGE_KEYS.WORKFLOW.OPERATION_MODE) === 'pointer' ? 'pointer' : 'hand',
+  controlMode: localStorage.getItem('workflow-operation-mode') === 'pointer' ? 'pointer' : 'hand',
   setControlMode: (controlMode) => {
     set(() => ({ controlMode }))
-    storage.set(STORAGE_KEYS.WORKFLOW.OPERATION_MODE, controlMode)
+    localStorage.setItem('workflow-operation-mode', controlMode)
   },
   mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 },
   setMousePosition: mousePosition => set(() => ({ mousePosition })),

web/app/components/workflow/variable-inspect/index.tsx

@@ -4,9 +4,7 @@ import {
   useCallback,
   useMemo,
 } from 'react'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { cn } from '@/utils/classnames'
-import { storage } from '@/utils/storage'
 import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
 import { useStore } from '../store'
 import Panel from './panel'
@@ -23,8 +21,8 @@ const VariableInspectPanel: FC = () => {
     return workflowCanvasHeight - 60
   }, [workflowCanvasHeight])
 
-  const handleResize = useCallback((_width: number, height: number) => {
-    storage.set(STORAGE_KEYS.WORKFLOW.VARIABLE_INSPECT_PANEL_HEIGHT, height)
+  const handleResize = useCallback((width: number, height: number) => {
+    localStorage.setItem('workflow-variable-inpsect-panel-height', `${height}`)
     setVariableInspectPanelHeight(height)
   }, [setVariableInspectPanelHeight])
 

web/config/index.ts

@@ -1,6 +1,5 @@
 import type { ModelParameterRule } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { InputVarType } from '@/app/components/workflow/types'
-import { STORAGE_KEYS } from '@/config/storage-keys'
 import { PromptRole } from '@/models/debug'
 import { PipelineInputVarType } from '@/models/pipeline'
 import { AgentStrategy } from '@/types/app'
@@ -180,7 +179,7 @@ export const CSRF_COOKIE_NAME = () => {
   return isSecure ? '__Host-csrf_token' : 'csrf_token'
 }
 export const CSRF_HEADER_NAME = 'X-CSRF-Token'
-export const ACCESS_TOKEN_LOCAL_STORAGE_NAME = STORAGE_KEYS.AUTH.ACCESS_TOKEN
+export const ACCESS_TOKEN_LOCAL_STORAGE_NAME = 'access_token'
 export const PASSPORT_LOCAL_STORAGE_NAME = (appCode: string) => `passport-${appCode}`
 export const PASSPORT_HEADER_NAME = 'X-App-Passport'
 
@@ -230,7 +229,7 @@ export const VAR_ITEM_TEMPLATE_IN_PIPELINE = {
 
 export const appDefaultIconBackground = '#D5F5F6'
 
-export const NEED_REFRESH_APP_LIST_KEY = STORAGE_KEYS.APP.NEED_REFRESH_LIST
+export const NEED_REFRESH_APP_LIST_KEY = 'needRefreshAppList'
 
 export const DATASET_DEFAULT = {
   top_k: 4,

web/config/storage-keys.ts

@@ -1,35 +0,0 @@
-export const STORAGE_KEYS = {
-  WORKFLOW: {
-    NODE_PANEL_WIDTH: 'workflow-node-panel-width',
-    PREVIEW_PANEL_WIDTH: 'debug-and-preview-panel-width',
-    VARIABLE_INSPECT_PANEL_HEIGHT: 'workflow-variable-inspect-panel-height',
-    CANVAS_MAXIMIZE: 'workflow-canvas-maximize',
-    OPERATION_MODE: 'workflow-operation-mode',
-  },
-  APP: {
-    SIDEBAR_COLLAPSE: 'webappSidebarCollapse',
-    NEED_REFRESH_LIST: 'needRefreshAppList',
-    DETAIL_COLLAPSE: 'app-detail-collapse-or-expand',
-  },
-  CONVERSATION: {
-    ID_INFO: 'conversationIdInfo',
-  },
-  AUTH: {
-    ACCESS_TOKEN: 'access_token',
-    REFRESH_LOCK: 'is_other_tab_refreshing',
-    LAST_REFRESH_TIME: 'last_refresh_time',
-  },
-  EDUCATION: {
-    VERIFYING: 'educationVerifying',
-    REVERIFY_PREV_EXPIRE_AT: 'education-reverify-prev-expire-at',
-    REVERIFY_HAS_NOTICED: 'education-reverify-has-noticed',
-    EXPIRED_HAS_NOTICED: 'education-expired-has-noticed',
-  },
-  CONFIG: {
-    AUTO_GEN_MODEL: 'auto-gen-model',
-    DEBUG_MODELS: 'app-debug-with-single-or-multiple-models',
-    SETUP_STATUS: 'setup_status',
-  },
-} as const
-
-export type StorageKeys = typeof STORAGE_KEYS

web/eslint.config.mjs

@@ -9,15 +9,30 @@ import difyI18n from './eslint-rules/index.js'
 export default antfu(
   {
     react: {
-      reactCompiler: true,
       overrides: {
         'react/no-context-provider': 'off',
         'react/no-forward-ref': 'off',
         'react/no-use-context': 'off',
+        'react/prefer-namespace-import': 'error',
 
+        // React Compiler rules
+        // Set to warn for gradual adoption
+        'react-hooks/config': 'warn',
+        'react-hooks/error-boundaries': 'warn',
+        'react-hooks/component-hook-factories': 'warn',
+        'react-hooks/gating': 'warn',
+        'react-hooks/globals': 'warn',
+        'react-hooks/immutability': 'warn',
+        'react-hooks/preserve-manual-memoization': 'warn',
+        'react-hooks/purity': 'warn',
+        'react-hooks/refs': 'warn',
         // prefer react-hooks-extra/no-direct-set-state-in-use-effect
         'react-hooks/set-state-in-effect': 'off',
-        'react-hooks-extra/no-direct-set-state-in-use-effect': 'error',
+        'react-hooks/set-state-in-render': 'warn',
+        'react-hooks/static-components': 'warn',
+        'react-hooks/unsupported-syntax': 'warn',
+        'react-hooks/use-memo': 'warn',
+        'react-hooks/incompatible-library': 'warn',
       },
     },
     nextjs: true,
@@ -25,7 +40,7 @@ export default antfu(
     typescript: {
       overrides: {
         'ts/consistent-type-definitions': ['error', 'type'],
-        'ts/no-explicit-any': 'error',
+        'ts/no-explicit-any': 'warn',
       },
     },
     test: {
@@ -39,45 +54,6 @@ export default antfu(
       },
     },
   },
-  {
-    rules: {
-      'node/prefer-global/process': 'off',
-      'no-restricted-globals': [
-        'error',
-        {
-          name: 'localStorage',
-          message: 'Use @/utils/storage instead. Direct localStorage access causes SSR issues.',
-        },
-        {
-          name: 'sessionStorage',
-          message: 'Use @/utils/storage instead. Direct sessionStorage access causes SSR issues.',
-        },
-      ],
-      'no-restricted-properties': [
-        'error',
-        {
-          object: 'window',
-          property: 'localStorage',
-          message: 'Use @/utils/storage instead.',
-        },
-        {
-          object: 'window',
-          property: 'sessionStorage',
-          message: 'Use @/utils/storage instead.',
-        },
-        {
-          object: 'globalThis',
-          property: 'localStorage',
-          message: 'Use @/utils/storage instead.',
-        },
-        {
-          object: 'globalThis',
-          property: 'sessionStorage',
-          message: 'Use @/utils/storage instead.',
-        },
-      ],
-    },
-  },
   {
     files: ['**/*.ts', '**/*.tsx'],
     settings: {
@@ -86,6 +62,32 @@ export default antfu(
       },
     },
   },
+  // downgrade some rules from error to warn for gradual adoption
+  // we should fix these in following pull requests
+  {
+    // @keep-sorted
+    rules: {
+      'next/inline-script-id': 'warn',
+      'no-console': 'warn',
+      'no-irregular-whitespace': 'warn',
+      'node/prefer-global/buffer': 'warn',
+      'node/prefer-global/process': 'warn',
+      'react/no-create-ref': 'warn',
+      'react/no-missing-key': 'warn',
+      'react/no-nested-component-definitions': 'warn',
+      'regexp/no-dupe-disjunctions': 'warn',
+      'regexp/no-super-linear-backtracking': 'warn',
+      'regexp/no-unused-capturing-group': 'warn',
+      'regexp/no-useless-assertions': 'warn',
+      'regexp/no-useless-quantifier': 'warn',
+      'style/multiline-ternary': 'warn',
+      'test/no-identical-title': 'warn',
+      'test/prefer-hooks-in-order': 'warn',
+      'ts/no-empty-object-type': 'warn',
+      'unicorn/prefer-number-properties': 'warn',
+      'unused-imports/no-unused-vars': 'warn',
+    },
+  },
   storybook.configs['flat/recommended'],
   ...pluginQuery.configs['flat/recommended'],
   // sonar
@@ -176,19 +178,19 @@ export default antfu(
     },
   },
   // dify i18n namespace migration
-  // {
-  //   files: ['**/*.ts', '**/*.tsx'],
-  //   ignores: ['eslint-rules/**', 'i18n/**', 'i18n-config/**'],
-  //   plugins: {
-  //     'dify-i18n': difyI18n,
-  //   },
-  //   rules: {
-  //     // 'dify-i18n/no-as-any-in-t': ['error', { mode: 'all' }],
-  //     'dify-i18n/no-as-any-in-t': 'error',
-  //     // 'dify-i18n/no-legacy-namespace-prefix': 'error',
-  //     // 'dify-i18n/require-ns-option': 'error',
-  //   },
-  // },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    ignores: ['eslint-rules/**', 'i18n/**', 'i18n-config/**'],
+    plugins: {
+      'dify-i18n': difyI18n,
+    },
+    rules: {
+      // 'dify-i18n/no-as-any-in-t': ['error', { mode: 'all' }],
+      'dify-i18n/no-as-any-in-t': 'error',
+      // 'dify-i18n/no-legacy-namespace-prefix': 'error',
+      // 'dify-i18n/require-ns-option': 'error',
+    },
+  },
   // i18n JSON validation rules
   {
     files: ['i18n/**/*.json'],

web/i18n/en-US/app.json

@@ -196,6 +196,24 @@
   "publishApp.notSet": "Not set",
   "publishApp.notSetDesc": "Currently nobody can access the web app. Please set permissions.",
   "publishApp.title": "Who can access web app",
+  "quadrantMatrix.deadline": "DDL:",
+  "quadrantMatrix.invalidData": "Invalid Quadrant Data",
+  "quadrantMatrix.invalidDataDesc": "Expected JSON format with q1, q2, q3, q4 arrays",
+  "quadrantMatrix.legend.importance": "I = Importance",
+  "quadrantMatrix.legend.urgency": "U = Urgency",
+  "quadrantMatrix.more": "+{{count}} more",
+  "quadrantMatrix.noTasks": "No tasks",
+  "quadrantMatrix.q1.subtitle": "Urgent & Important",
+  "quadrantMatrix.q1.title": "Do First",
+  "quadrantMatrix.q2.subtitle": "Important & Not Urgent",
+  "quadrantMatrix.q2.title": "Schedule",
+  "quadrantMatrix.q3.subtitle": "Urgent & Not Important",
+  "quadrantMatrix.q3.title": "Delegate",
+  "quadrantMatrix.q4.subtitle": "Not Urgent & Not Important",
+  "quadrantMatrix.q4.title": "Don't Do",
+  "quadrantMatrix.taskCount_one": "{{count}} task prioritized",
+  "quadrantMatrix.taskCount_other": "{{count}} tasks prioritized",
+  "quadrantMatrix.title": "Eisenhower Matrix",
   "removeOriginal": "Delete the original app",
   "roadmap": "See our roadmap",
   "showMyCreatedAppsOnly": "Created by me",

web/i18n/zh-Hans/app.json

@@ -196,6 +196,24 @@
   "publishApp.notSet": "未设置",
   "publishApp.notSetDesc": "当前任何人都无法访问 Web 应用。请设置访问权限。",
   "publishApp.title": "谁可以访问 web 应用",
+  "quadrantMatrix.deadline": "截止:",
+  "quadrantMatrix.invalidData": "无效的象限数据",
+  "quadrantMatrix.invalidDataDesc": "需要包含 q1, q2, q3, q4 数组的 JSON 格式",
+  "quadrantMatrix.legend.importance": "I = 重要性",
+  "quadrantMatrix.legend.urgency": "U = 紧急性",
+  "quadrantMatrix.more": "+{{count}} 更多",
+  "quadrantMatrix.noTasks": "暂无任务",
+  "quadrantMatrix.q1.subtitle": "紧急且重要",
+  "quadrantMatrix.q1.title": "立即执行",
+  "quadrantMatrix.q2.subtitle": "重要但不紧急",
+  "quadrantMatrix.q2.title": "计划安排",
+  "quadrantMatrix.q3.subtitle": "紧急但不重要",
+  "quadrantMatrix.q3.title": "委派他人",
+  "quadrantMatrix.q4.subtitle": "不紧急也不重要",
+  "quadrantMatrix.q4.title": "不要做",
+  "quadrantMatrix.taskCount_one": "{{count}} 个任务已排序",
+  "quadrantMatrix.taskCount_other": "{{count}} 个任务已排序",
+  "quadrantMatrix.title": "艾森豪威尔矩阵",
   "removeOriginal": "删除原应用",
   "roadmap": "产品路线图",
   "showMyCreatedAppsOnly": "我创建的",

web/package.json

@@ -28,7 +28,6 @@
     "build:docker": "next build && node scripts/optimize-standalone.js",
     "start": "node ./scripts/copy-and-start.mjs",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache",
-    "lint:ci": "pnpm lint --concurrency 3",
     "lint:fix": "pnpm lint --fix",
     "lint:quiet": "pnpm lint --quiet",
     "lint:complexity": "pnpm lint --rule 'complexity: [error, {max: 15}]' --quiet",

web/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es2022",
+    "target": "es2015",
     "jsx": "preserve",
     "lib": [
       "dom",

web/utils/storage.ts

@@ -1,107 +0,0 @@
-/* eslint-disable no-restricted-globals */
-import { isClient } from './client'
-
-type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }
-
-let _isAvailable: boolean | null = null
-
-function isLocalStorageAvailable(): boolean {
-  if (_isAvailable !== null)
-    return _isAvailable
-
-  if (!isClient) {
-    _isAvailable = false
-    return false
-  }
-
-  try {
-    const testKey = '__storage_test__'
-    localStorage.setItem(testKey, 'test')
-    localStorage.removeItem(testKey)
-    _isAvailable = true
-    return true
-  }
-  catch {
-    _isAvailable = false
-    return false
-  }
-}
-
-function get<T extends JsonValue>(key: string, defaultValue?: T): T | null {
-  if (!isLocalStorageAvailable())
-    return defaultValue ?? null
-
-  try {
-    const item = localStorage.getItem(key)
-    if (item === null)
-      return defaultValue ?? null
-
-    try {
-      return JSON.parse(item) as T
-    }
-    catch {
-      return item as T
-    }
-  }
-  catch {
-    return defaultValue ?? null
-  }
-}
-
-function set<T extends JsonValue>(key: string, value: T): void {
-  if (!isLocalStorageAvailable())
-    return
-
-  try {
-    const stringValue = typeof value === 'string' ? value : JSON.stringify(value)
-    localStorage.setItem(key, stringValue)
-  }
-  catch {
-    // Silent fail - localStorage may be full or disabled
-  }
-}
-
-function remove(key: string): void {
-  if (!isLocalStorageAvailable())
-    return
-
-  try {
-    localStorage.removeItem(key)
-  }
-  catch {
-    // Silent fail
-  }
-}
-
-function getNumber(key: string): number | null
-function getNumber(key: string, defaultValue: number): number
-function getNumber(key: string, defaultValue?: number): number | null {
-  const value = get<string | number>(key)
-  if (value === null)
-    return defaultValue ?? null
-
-  const parsed = typeof value === 'number' ? value : Number.parseFloat(value as string)
-  return Number.isNaN(parsed) ? (defaultValue ?? null) : parsed
-}
-
-function getBoolean(key: string): boolean | null
-function getBoolean(key: string, defaultValue: boolean): boolean
-function getBoolean(key: string, defaultValue?: boolean): boolean | null {
-  const value = get<string | boolean>(key)
-  if (value === null)
-    return defaultValue ?? null
-
-  if (typeof value === 'boolean')
-    return value
-
-  return value === 'true'
-}
-
-export const storage = {
-  get,
-  set,
-  remove,
-  getNumber,
-  getBoolean,
-  isAvailable: isLocalStorageAvailable,
-}

web/vitest.setup.ts

@@ -85,10 +85,6 @@ afterEach(() => {
 // mock next/image to avoid width/height requirements for data URLs
 vi.mock('next/image')
 
-// mock zustand - auto-resets all stores after each test
-// Based on official Zustand testing guide: https://zustand.docs.pmnd.rs/guides/testing
-vi.mock('zustand')
-
 // mock react-i18next
 vi.mock('react-i18next', async () => {
   const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next')