agent-ecosystem/src/renderer/store/CLAUDE.md

Store (Zustand)

State management with slices pattern for domain organization.

Structure

• index.ts - Store creation, combines all slices
• types.ts - AppState type definition
• slices/ - Individual domain slices
• utils/ - Store utilities (paneHelpers.ts, pathResolution.ts)

Slices (12 total)

Slice	Purpose
projectSlice	Projects list, selectedProjectId
repositorySlice	Repository grouping, worktrees
sessionSlice	Sessions list, pagination, selectedSessionId
sessionDetailSlice	Session detail, chunks, metrics
subagentSlice	Subagent data, selectedSubagentId
conversationSlice	Messages, conversation metadata
tabSlice	Tabs list, activeTabId, tab ordering
tabUISlice	Per-tab UI state (expansions, scroll)
paneSlice	Pane layout, split views
uiSlice	UI flags (sidebar visible, etc.)
notificationSlice	Notifications, unreadCount
configSlice	App config, triggers

Slice Pattern

Each slice follows:

data: T[]
selectedId: string | null
loading: boolean
error: string | null

Key Pattern: Per-Tab UI Isolation

tabUISlice maintains independent UI state per tab using tabId:

• expandedAIGroupIds, expandedDisplayItemIds, expandedSubagentTraceIds
• Ensures expanding a group in tab A doesn't affect tab B

Store Initialization

Call initializeNotificationListeners() once in App.tsx useEffect:

• Subscribes to file change events
• Auto-refreshes sessions on new files
• Updates session detail on content change
• Uses refreshSessionInPlace to prevent flickering

Adding a Slice

1. Create slices/{domain}Slice.ts
2. Export create{Domain}Slice function
3. Add to store composition in index.ts
4. Update AppState type in types.ts