feat(ui): logs, kb, emcn (#2207)

* feat(kb): emcn alignment; sidebar: popover primary; settings-modal: expand

* feat: EMCN breadcrumb; improvement(KB): UI

* fix: hydration error

* improvement(KB): UI

* feat: emcn modal sizing, KB tags; refactor: deleted old sidebar

* feat(logs): UI

* fix: add documents modal name

* feat: logs, emcn, cursorrules; refactor: logs

* feat: dashboard

* feat: notifications; improvement: logs details

* fixed random rectangle on canvas

* fixed the name of the file to align

* fix build

---------

Co-authored-by: waleed <walif6@gmail.com>

.cursor/rules/emcn-components.mdc

@@ -0,0 +1,45 @@
+---
+description: EMCN component library patterns with CVA
+globs: ["apps/sim/components/emcn/**"]
+---
+
+# EMCN Component Guidelines
+
+## When to Use CVA vs Direct Styles
+
+**Use CVA (class-variance-authority) when:**
+- 2+ visual variants (primary, secondary, outline)
+- Multiple sizes or state variations
+- Example: Button with variants
+
+**Use direct className when:**
+- Single consistent style
+- No variations needed
+- Example: Label with one style
+
+## Patterns
+
+**With CVA:**
+```tsx
+const buttonVariants = cva('base-classes', {
+  variants: { 
+    variant: { default: '...', primary: '...' },
+    size: { sm: '...', md: '...' }
+  }
+})
+export { Button, buttonVariants }
+```
+
+**Without CVA:**
+```tsx
+function Label({ className, ...props }) {
+  return <Primitive className={cn('single-style-classes', className)} {...props} />
+}
+```
+
+## Rules
+- Use Radix UI primitives for accessibility
+- Export component and variants (if using CVA)
+- TSDoc with usage examples
+- Consistent tokens: `font-medium`, `text-[12px]`, `rounded-[4px]`
+- Always use `transition-colors` for hover states

.cursor/rules/global.mdc

@@ -0,0 +1,20 @@
+---
+description: Global coding standards that apply to all files
+alwaysApply: true
+---
+
+# Global Standards
+
+You are a professional software engineer. All code must follow best practices: accurate, readable, clean, and efficient.
+
+## Logging
+Use `logger.info`, `logger.warn`, `logger.error` instead of `console.log`.
+
+## Comments
+Use TSDoc for documentation. No `====` separators. No non-TSDoc comments.
+
+## Styling
+Never update global styles. Keep all styling local to components.
+
+## Package Manager
+Use `bun` and `bunx`, not `npm` and `npx`.

.cursor/rules/sim-architecture.mdc

@@ -0,0 +1,67 @@
+---
+description: Core architecture principles for the Sim app
+globs: ["apps/sim/**"]
+---
+
+# Sim App Architecture
+
+## Core Principles
+1. **Single Responsibility**: Each component, hook, store has one clear purpose
+2. **Composition Over Complexity**: Break down complex logic into smaller pieces
+3. **Type Safety First**: TypeScript interfaces for all props, state, return types
+4. **Predictable State**: Zustand for global state, useState for UI-only concerns
+5. **Performance by Default**: useMemo, useCallback, refs appropriately
+
+## File Organization
+
+```
+feature/
+├── components/        # Feature components
+│   └── sub-feature/   # Sub-feature with own components
+├── hooks/             # Custom hooks
+└── feature.tsx        # Main component
+```
+
+## Naming Conventions
+- **Components**: PascalCase (`WorkflowList`, `TriggerPanel`)
+- **Hooks**: camelCase with `use` prefix (`useWorkflowOperations`)
+- **Files**: kebab-case matching export (`workflow-list.tsx`)
+- **Stores**: kebab-case in stores/ (`sidebar/store.ts`)
+- **Constants**: SCREAMING_SNAKE_CASE
+- **Interfaces**: PascalCase with suffix (`WorkflowListProps`)
+
+## State Management
+
+**useState**: UI-only concerns (dropdown open, hover, form inputs)
+**Zustand**: Shared state, persistence, global app state
+**useRef**: DOM refs, avoiding dependency issues, mutable non-reactive values
+
+## Component Extraction
+
+**Extract to separate file when:**
+- Complex (50+ lines)
+- Used across 2+ files
+- Has own state/logic
+
+**Keep inline when:**
+- Simple (< 10 lines)
+- Used in only 1 file
+- Purely presentational
+
+**Never import utilities from another component file.** Extract shared helpers to `lib/` or `utils/`.
+
+## Utils Files
+
+**Never create a `utils.ts` file for a single consumer.** Inline the logic directly in the consuming component.
+
+**Create `utils.ts` when:**
+- 2+ files import the same helper
+
+**Prefer existing sources of truth:**
+- Before duplicating logic, check if a centralized helper already exists (e.g., `lib/logs/get-trigger-options.ts`)
+- Import from the source of truth rather than creating wrapper functions
+
+**Location hierarchy:**
+- `lib/` — App-wide utilities (auth, billing, core)
+- `feature/utils.ts` — Feature-scoped utilities (used by 2+ components in the feature)
+- Inline — Single-use helpers (define directly in the component)

.cursor/rules/sim-components.mdc

@@ -0,0 +1,64 @@
+---
+description: Component patterns and structure for React components
+globs: ["apps/sim/**/*.tsx"]
+---
+
+# Component Patterns
+
+## Structure Order
+```typescript
+'use client' // Only if using hooks
+
+// 1. Imports (external → internal → relative)
+// 2. Constants at module level
+const CONFIG = { SPACING: 8 } as const
+
+// 3. Props interface with TSDoc
+interface ComponentProps {
+  /** Description */
+  requiredProp: string
+  optionalProp?: boolean
+}
+
+// 4. Component with TSDoc
+export function Component({ requiredProp, optionalProp = false }: ComponentProps) {
+  // a. Refs
+  // b. External hooks (useParams, useRouter)
+  // c. Store hooks
+  // d. Custom hooks
+  // e. Local state
+  // f. useMemo computations
+  // g. useCallback handlers
+  // h. useEffect
+  // i. Return JSX
+}
+```
+
+## Rules
+1. Add `'use client'` when using React hooks
+2. Always define props interface
+3. TSDoc on component: description, @param, @returns
+4. Extract constants with `as const`
+5. Use Tailwind only, no inline styles
+6. Semantic HTML (`aside`, `nav`, `article`)
+7. Include ARIA attributes where appropriate
+8. Optional chain callbacks: `onAction?.(id)`
+
+## Factory Pattern with Caching
+
+When generating components for a specific signature (e.g., icons):
+
+```typescript
+const cache = new Map<string, React.ComponentType<{ className?: string }>>()
+
+function getColorIcon(color: string) {
+  if (cache.has(color)) return cache.get(color)!
+  
+  const Icon = ({ className }: { className?: string }) => (
+    <div className={cn(className, 'rounded-[3px]')} style={{ backgroundColor: color, width: 10, height: 10 }} />
+  )
+  Icon.displayName = `ColorIcon(${color})`
+  cache.set(color, Icon)
+  return Icon
+}
+```

.cursor/rules/sim-hooks.mdc

@@ -0,0 +1,68 @@
+---
+description: Custom hook patterns and best practices
+globs: ["apps/sim/**/use-*.ts", "apps/sim/**/hooks/**/*.ts"]
+---
+
+# Hook Patterns
+
+## Structure
+```typescript
+import { createLogger } from '@/lib/logs/console/logger'
+
+const logger = createLogger('useFeatureName')
+
+interface UseFeatureProps {
+  id: string
+  onSuccess?: (result: Result) => void
+}
+
+/**
+ * Hook description.
+ * @param props - Configuration
+ * @returns State and operations
+ */
+export function useFeature({ id, onSuccess }: UseFeatureProps) {
+  // 1. Refs for stable dependencies
+  const idRef = useRef(id)
+  const onSuccessRef = useRef(onSuccess)
+
+  // 2. State
+  const [data, setData] = useState<Data | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  // 3. Sync refs
+  useEffect(() => {
+    idRef.current = id
+    onSuccessRef.current = onSuccess
+  }, [id, onSuccess])
+
+  // 4. Operations with useCallback
+  const fetchData = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const result = await fetch(`/api/${idRef.current}`).then(r => r.json())
+      setData(result)
+      onSuccessRef.current?.(result)
+    } catch (err) {
+      setError(err as Error)
+      logger.error('Failed', { error: err })
+    } finally {
+      setIsLoading(false)
+    }
+  }, []) // Empty deps - using refs
+
+  // 5. Return grouped by state/operations
+  return { data, isLoading, error, fetchData }
+}
+```
+
+## Rules
+1. Single responsibility per hook
+2. Props interface required
+3. TSDoc required
+4. Use logger, not console.log
+5. Refs for stable callback dependencies
+6. Wrap returned functions in useCallback
+7. Always try/catch async operations
+8. Track loading/error states

.cursor/rules/sim-imports.mdc

@@ -0,0 +1,37 @@
+---
+description: Import patterns for the Sim application
+globs: ["apps/sim/**/*.ts", "apps/sim/**/*.tsx"]
+---
+
+# Import Patterns
+
+## EMCN Components
+Import from `@/components/emcn`, never from subpaths like `@/components/emcn/components/modal/modal`.
+
+**Exception**: CSS imports use actual file paths: `import '@/components/emcn/components/code/code.css'`
+
+## Feature Components
+Import from central folder indexes, not specific subfolders:
+```typescript
+// ✅ Correct
+import { Dashboard, Sidebar } from '@/app/workspace/[workspaceId]/logs/components'
+
+// ❌ Wrong
+import { Dashboard } from '@/app/workspace/[workspaceId]/logs/components/dashboard'
+```
+
+## Internal vs External
+- **Cross-feature**: Absolute paths through central index
+- **Within feature**: Relative paths (`./components/...`, `../utils`)
+
+## Import Order
+1. React/core libraries
+2. External libraries
+3. UI components (`@/components/emcn`, `@/components/ui`)
+4. Utilities (`@/lib/...`)
+5. Feature imports from indexes
+6. Relative imports
+7. CSS imports
+
+## Types
+Use `type` keyword: `import type { WorkflowLog } from '...'`

.cursor/rules/sim-stores.mdc

@@ -0,0 +1,57 @@
+---
+description: Zustand store patterns
+globs: ["apps/sim/**/store.ts", "apps/sim/**/stores/**/*.ts"]
+---
+
+# Zustand Store Patterns
+
+## Structure
+```typescript
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface FeatureState {
+  // State
+  items: Item[]
+  activeId: string | null
+  
+  // Actions
+  setItems: (items: Item[]) => void
+  addItem: (item: Item) => void
+  clearState: () => void
+}
+
+const createInitialState = () => ({
+  items: [],
+  activeId: null,
+})
+
+export const useFeatureStore = create<FeatureState>()(
+  persist(
+    (set) => ({
+      ...createInitialState(),
+
+      setItems: (items) => set({ items }),
+
+      addItem: (item) => set((state) => ({
+        items: [...state.items, item],
+      })),
+
+      clearState: () => set(createInitialState()),
+    }),
+    {
+      name: 'feature-state',
+      partialize: (state) => ({ items: state.items }),
+    }
+  )
+)
+```
+
+## Rules
+1. Interface includes state and actions
+2. Extract config to module constants
+3. TSDoc on store
+4. Only persist what's needed
+5. Immutable updates only - never mutate
+6. Use `set((state) => ...)` when depending on previous state
+7. Provide clear/reset actions

.cursor/rules/sim-styling.mdc

@@ -0,0 +1,47 @@
+---
+description: Tailwind CSS and styling conventions
+globs: ["apps/sim/**/*.tsx", "apps/sim/**/*.css"]
+---
+
+# Styling Rules
+
+## Tailwind
+1. **No inline styles** - Use Tailwind classes exclusively
+2. **No duplicate dark classes** - Don't add `dark:` when value matches light mode
+3. **Exact values** - Use design system values (`text-[14px]`, `h-[25px]`)
+4. **Prefer px** - Use `px-[4px]` over `px-1`
+5. **Transitions** - Add `transition-colors` for interactive states
+
+## Conditional Classes
+```typescript
+import { cn } from '@/lib/utils'
+
+<div className={cn(
+  'base-classes',
+  isActive && 'active-classes',
+  disabled ? 'opacity-60' : 'hover:bg-accent'
+)} />
+```
+
+## CSS Variables for Dynamic Styles
+```typescript
+// In store setter
+setSidebarWidth: (width) => {
+  set({ sidebarWidth: width })
+  document.documentElement.style.setProperty('--sidebar-width', `${width}px`)
+}
+
+// In component
+<aside style={{ width: 'var(--sidebar-width)' }} />
+```
+
+## Anti-Patterns
+```typescript
+// ❌ Bad
+<div style={{ width: 200 }}>
+<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+
+// ✅ Good
+<div className='w-[200px]'>
+<div className='text-[var(--text-primary)]'>
+```

.cursor/rules/sim-typescript.mdc

@@ -0,0 +1,24 @@
+---
+description: TypeScript conventions and type safety
+globs: ["apps/sim/**/*.ts", "apps/sim/**/*.tsx"]
+---
+
+# TypeScript Rules
+
+1. **No `any`** - Use proper types or `unknown` with type guards
+2. **Props interface** - Always define, even for simple components
+3. **Callback types** - Full signature with params and return type
+4. **Generics** - Use for reusable components/hooks
+5. **Const assertions** - `as const` for constant objects/arrays
+6. **Ref types** - Explicit: `useRef<HTMLDivElement>(null)`
+
+## Anti-Patterns
+```typescript
+// ❌ Bad
+const handleClick = (e: any) => {}
+useEffect(() => { doSomething(prop) }, []) // Missing dep
+
+// ✅ Good  
+const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {}
+useEffect(() => { doSomething(prop) }, [prop])
+```