fix web ui typecheck and enforce in ci

.github/workflows/ci.yml

@@ -85,6 +85,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Type-check web UI
+        run: pnpm run type-check:web
+
       - name: Build web UI
         run: pnpm run build:web
 

.github/workflows/desktop-package.yml

@@ -116,6 +116,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Type-check web UI
+        run: pnpm run type-check:web
+
       - name: Build desktop app
         run: ${{ matrix.platform.build_command }}
 

.github/workflows/nightly.yml

@@ -110,6 +110,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Type-check web UI
+        run: pnpm run type-check:web
+
       - name: Patch nightly version
         shell: bash
         env:

package.json

@@ -17,8 +17,9 @@
     "dev:web": "pnpm --dir src/web-ui dev",
     "prebuild": "pnpm run prebuild:web",
     "prebuild:web": "pnpm run copy-assets --silent && pnpm run generate-all --silent",
+    "type-check:web": "pnpm --dir src/web-ui run type-check",
     "build": "pnpm run build:web",
-    "build:web": "pnpm --dir src/web-ui build",
+    "build:web": "pnpm run type-check:web && pnpm --dir src/web-ui build",
     "build:mobile-web": "pnpm --dir src/mobile-web build",
     "preview": "pnpm --dir src/web-ui preview",
     "desktop:dev": "node scripts/dev.cjs desktop",

src/web-ui/src/app/components/NavPanel/MainNav.tsx

@@ -485,6 +485,8 @@ const MainNav: React.FC<MainNavProps> = ({
           const sectionDir    = getSectionDepartDir(section.id);
           const sectionDepartCls = sectionDir ? ` is-departing-${sectionDir}` : '';
 
+          const sectionSceneId = section.sceneId;
+
           return (
             <div key={section.id} className={`bitfun-nav-panel__section${sectionDepartCls}`}>
               {section.label && (
@@ -493,7 +495,7 @@ const MainNav: React.FC<MainNavProps> = ({
                   collapsible={isCollapsible}
                   isOpen={isSectionOpen}
                   onToggle={() => toggleSection(section.id)}
-                  onSceneOpen={section.sceneId ? () => openScene(section.sceneId) : undefined}
+                  onSceneOpen={sectionSceneId ? () => openScene(sectionSceneId) : undefined}
                   actions={section.id === 'workspace' ? (
                     <div className="bitfun-nav-panel__workspace-action-wrap">
                       <button

src/web-ui/src/app/components/NavPanel/components/NavItem.tsx

@@ -71,6 +71,7 @@ const NavItem: React.FC<NavItemProps> = ({
         .filter(Boolean)
         .join(' ')}
       onClick={onClick}
+      title={tooltipContent ?? displayLabel}
     >
       <span className="bitfun-nav-panel__item-icon" aria-hidden="true">
         <Icon size={15} />

src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx

@@ -4,7 +4,6 @@ import { Tooltip, Modal } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useSceneManager } from '../../../hooks/useSceneManager';
 import { useNavSceneStore } from '../../../stores/navSceneStore';
-import { useSceneStore } from '../../../stores/sceneStore';
 import { useToolbarModeContext } from '@/flow_chat/components/toolbar-mode/ToolbarModeContext';
 import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
 import { useNotification } from '@/shared/notification-system';

src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.tsx

@@ -15,6 +15,7 @@ import type { FlowChatState, Session } from '../../../../../flow_chat/types/flow
 import { useSceneStore } from '../../../../stores/sceneStore';
 import { useApp } from '../../../../hooks/useApp';
 import type { SceneTabId } from '../../../SceneBar/types';
+import type { SessionMode } from '../../../../stores/sessionModeStore';
 import { useWorkspaceContext } from '@/infrastructure/contexts/WorkspaceContext';
 import { createLogger } from '@/shared/utils/logger';
 import './SessionsSection.scss';

src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx

@@ -261,7 +261,6 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({ workspace, isActive, isSi
           workspaceId={workspace.id}
           workspacePath={workspace.rootPath}
           isActiveWorkspace={isActive}
-          showCreateActions={false}
         />
       </div>
 

src/web-ui/src/app/components/TitleBar/GlobalSearch.tsx

@@ -18,11 +18,7 @@ import { useI18n } from '@/infrastructure/i18n';
 import { useWorkspaceContext } from '../../../infrastructure/contexts/WorkspaceContext';
 import { useFileSearch } from '@/hooks';
 import type { FileSearchResult } from '../../../infrastructure/api/service-api/tauri-commands';
-import { createLogger } from '@/shared/utils/logger';
 import './GlobalSearch.scss';
-
-const log = createLogger('GlobalSearch');
-
 // Initial result count and load-more batch size
 const INITIAL_DISPLAY_COUNT = 50;
 const LOAD_MORE_COUNT = 50;

src/web-ui/src/app/components/TitleBar/TitleBar.tsx

@@ -16,12 +16,11 @@ import './TitleBar.scss';
 
 import { Button, WindowControls, Tooltip } from '@/component-library';
 import { WorkspaceManager } from '../../../tools/workspace';
-import { CurrentSessionTitle, useToolbarModeContext } from '../../../flow_chat';
+import { CurrentSessionTitle } from '../../../flow_chat';
 import { createConfigCenterTab } from '@/shared/utils/tabUtils';
 import { workspaceAPI } from '@/infrastructure/api';
 import { NewProjectDialog } from '../NewProjectDialog';
 import { AboutDialog } from '../AboutDialog';
-import { GlobalSearch } from './GlobalSearch';
 import { AgentOrb } from './AgentOrb';
 import NotificationButton from './NotificationButton';
 import { createLogger } from '@/shared/utils/logger';
@@ -65,8 +64,6 @@ const TitleBar: React.FC<TitleBarProps> = ({
     );
   }, []);
 
-  const { enableToolbarMode } = useToolbarModeContext();
-
   const lastMouseDownTimeRef = React.useRef<number>(0);
 
   const handleHeaderMouseDown = useCallback((e: React.MouseEvent) => {

src/web-ui/src/app/components/panels/BranchSelectModal.tsx

@@ -14,6 +14,11 @@ import './BranchSelectModal.scss';
 
 const log = createLogger('BranchSelectModal');
 
+type SelectableBranch = GitBranchType & {
+  isCurrent?: boolean;
+  hasWorktree?: boolean;
+};
+
 export interface BranchSelectResult {
   branch: string;
   isNew: boolean;
@@ -93,7 +98,7 @@ export const BranchSelectModal: React.FC<BranchSelectModalProps> = ({
     }
   };
 
-  const filteredBranches = useMemo(() => {
+  const filteredBranches = useMemo<SelectableBranch[]>(() => {
     let result = branches;
 
     if (searchTerm.trim()) {
@@ -103,8 +108,8 @@ export const BranchSelectModal: React.FC<BranchSelectModalProps> = ({
       );
     }
 
-    const availableBranches: GitBranchType[] = [];
-    const unavailableBranches: GitBranchType[] = [];
+    const availableBranches: SelectableBranch[] = [];
+    const unavailableBranches: SelectableBranch[] = [];
     const existingWorktreeSet = new Set(existingWorktreeBranches);
 
     result.forEach(branch => {
@@ -217,9 +222,7 @@ export const BranchSelectModal: React.FC<BranchSelectModalProps> = ({
                 )}
 
                 {filteredBranches.map((branch) => {
-                  // @ts-ignore
                   const isDisabled = branch.isCurrent || branch.hasWorktree;
-                  // @ts-ignore
                   const hasWorktree = branch.hasWorktree;
 
                   return (

src/web-ui/src/app/components/panels/FilesPanel.tsx

@@ -82,7 +82,6 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
     selectedFile,
     expandedFolders,
     loading,
-    silentRefreshing,
     error,
     loadFileTree,
     selectFile,
@@ -97,13 +96,12 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
     enableAutoWatch: true,
     enableLazyLoad: true
   });
-
   const handleTreeUpdate = useCallback((updatedTree: FileSystemNode[]) => {
     log.debug('File tree updated', { nodeCount: updatedTree.length });
     setFileTree(updatedTree);
   }, [setFileTree]);
 
-  const handleNodeExpandLazy = useCallback((path: string, expanded: boolean) => {
+  const handleNodeExpandLazy = useCallback((path: string) => {
     expandFolderLazy(path);
   }, [expandFolderLazy]);
 
@@ -682,4 +680,4 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
   );
 };
 
-export default FilesPanel;
+export default FilesPanel;

src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx

@@ -172,8 +172,6 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
     if (content?.type !== 'mermaid-editor') return null;
 
     const mermaidData = content.data || {};
-    const metadata = content.metadata || {};
-
     return {
       initialSourceCode: mermaidData.sourceCode || t('flexiblePanel.fallback.mermaidDefaultCode'),
       onSave: async (sourceCode: string) => {
@@ -514,7 +512,7 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
                   onDirtyStateChange(hasChanges);
                 }
               }}
-              onSave={(savedContent) => {
+              onSave={() => {
                 if (onDirtyStateChange) {
                   onDirtyStateChange(false);
                 }
@@ -793,4 +791,3 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
 FlexiblePanel.displayName = 'FlexiblePanel';
 
 export default FlexiblePanel;
-

src/web-ui/src/app/components/panels/base/types.ts

@@ -21,6 +21,9 @@ export type PanelContentType =
   | 'git-branch-history'
   | 'ai-session'
   | 'planner'
+  | 'ui-editor'
+  | 'ui-relation-graph'
+  | 'design-tokens'
   | 'task-detail'
   | 'plan-viewer'
   | 'terminal';
@@ -67,9 +70,8 @@ export interface TabbedFlexiblePanelRef {
 export interface PanelContentConfig {
   type: PanelContentType;
   displayName: string;
-  icon: React.ComponentType<{ size?: number }>;
+  icon: React.ComponentType<{ size?: string | number }>;
   supportsCopy: boolean;
   supportsDownload: boolean;
   showHeader: boolean;
 }
-

src/web-ui/src/app/components/panels/base/utils.ts

@@ -10,7 +10,6 @@ import {
   GitBranch, 
   Eye,
   Edit3,
-  Terminal as TerminalIcon,
   BookOpen,
   Settings,
   ClipboardList,
@@ -125,6 +124,22 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
     supportsDownload: false,
     showHeader: false
   },
+  'git-graph': {
+    type: 'git-graph',
+    displayName: 'Git Graph',
+    icon: GitBranch,
+    supportsCopy: false,
+    supportsDownload: false,
+    showHeader: false
+  },
+  'git-branch-history': {
+    type: 'git-branch-history',
+    displayName: 'Git Branch History',
+    icon: GitBranch,
+    supportsCopy: false,
+    supportsDownload: false,
+    showHeader: false
+  },
   'ai-session': {
     type: 'ai-session',
     displayName: 'AI Session',
@@ -180,6 +195,14 @@ export const PANEL_CONTENT_CONFIGS: Record<PanelContentType, PanelContentConfig>
     supportsCopy: false,
     supportsDownload: false,
     showHeader: false
+  },
+  'terminal': {
+    type: 'terminal',
+    displayName: 'Terminal',
+    icon: Code,
+    supportsCopy: false,
+    supportsDownload: false,
+    showHeader: false
   }
 };
 
@@ -282,4 +305,3 @@ export const generateFileName = (type: PanelContentType, title: string): string
       return `${baseName}.txt`;
   }
 };
-

src/web-ui/src/app/components/panels/content-canvas/ContentCanvas.tsx

@@ -3,19 +3,15 @@
  * Core component for the right panel, aggregating submodules.
  */
 
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { EditorArea } from './editor-area';
 import { AnchorZone } from './anchor-zone';
 import { MissionControl } from './mission-control';
 import { EmptyState } from './empty-state';
 import { useCanvasStore } from './stores';
 import { useTabLifecycle, useKeyboardShortcuts, usePanelTabCoordinator } from './hooks';
 import type { AnchorPosition } from './types';
-import { createLogger } from '@/shared/utils/logger';
 import './ContentCanvas.scss';
-
-const log = createLogger('ContentCanvas');
-
 export interface ContentCanvasProps {
   /** Workspace path */
   workspacePath?: string;
@@ -31,20 +27,17 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
   workspacePath,
   mode = 'agent',
   onInteraction,
-  onBeforeClose,
 }) => {
   // Store state
   const {
     primaryGroup,
-    secondaryGroup,
     layout,
     isMissionControlOpen,
     setAnchorPosition,
     setAnchorSize,
     closeMissionControl,
     openMissionControl,
   } = useCanvasStore();
-
   // Initialize hooks
   const { handleCloseWithDirtyCheck, handleCloseAllWithDirtyCheck } = useTabLifecycle({ mode });
   useKeyboardShortcuts({ enabled: true, handleCloseWithDirtyCheck });
@@ -137,7 +130,6 @@ export const ContentCanvas: React.FC<ContentCanvasProps> = ({
     </div>
   );
 };
-
 ContentCanvas.displayName = 'ContentCanvas';
 
 export default ContentCanvas;

src/web-ui/src/app/components/panels/content-canvas/anchor-zone/AnchorZone.tsx

@@ -35,7 +35,6 @@ export const AnchorZone: React.FC<AnchorZoneProps> = ({
   size,
   isMaximized = false,
   onSizeChange,
-  onPositionChange,
   onClose,
   onToggleMaximize,
   children,
@@ -97,10 +96,6 @@ export const AnchorZone: React.FC<AnchorZoneProps> = ({
   }, [isCollapsed]);
 
   // Toggle position
-  const togglePosition = useCallback(() => {
-    onPositionChange(isBottom ? 'right' : 'bottom');
-  }, [isBottom, onPositionChange]);
-
   return (
     <div
       ref={containerRef}

src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorArea.tsx

@@ -8,11 +8,7 @@ import type {
   DropPosition,
   PanelContent,
 } from '../types';
-import { createLogger } from '@/shared/utils/logger';
 import './EditorArea.scss';
-
-const log = createLogger('EditorArea');
-
 export interface EditorAreaProps {
   workspacePath?: string;
   onOpenMissionControl?: () => void;
@@ -49,6 +45,7 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
     reorderTab,
     handleDrop,
     setSplitRatio,
+    setSplitRatio2,
     setActiveGroup,
     updateTabContent,
     setTabDirty,
@@ -190,7 +187,6 @@ export const EditorArea: React.FC<EditorAreaProps> = ({
   }
 
   if (splitMode === 'grid') {
-    const setSplitRatio2 = (r: number) => useCanvasStore.setState((s) => ({ layout: { ...s.layout, splitRatio2: r } }));
     return (
       <div ref={containerRef} className="canvas-editor-area is-grid">
         <div ref={topRowRef} className="canvas-editor-area__top-row" style={{ flex: `0 0 calc(${splitRatio * 100}% - 2px)` }}>

src/web-ui/src/app/components/panels/content-canvas/editor-area/EditorGroup.tsx

@@ -15,7 +15,6 @@ import type {
   DropPosition,
   PanelContent,
   SplitMode,
-  CanvasTab,
 } from '../types';
 import './EditorGroup.scss';