Files
openchamber/packages/ui/src/stores/useUIStore.ts
T
Bohdan Triapitsyn 6d4f070d91 feat: user-customizable draft welcome starters
Let users curate the draft welcome chips: pin existing commands and skills
as starters, remove them, and drag to reorder — all inline on the draft
screen via a '+' picker dialog and per-chip remove, with no separate
settings UI.

A starter references a command or skill; its scope is inherited from the
item (user-scope -> global, project-scope -> per-project). Global starters
persist to settings.json (useUIStore + client/server sanitizers); project
starters persist to the project config alongside worktree setup commands.
The two scopes form ordered namespaces shown global-first then project,
reorderable only within each group.

The six built-in Session magic-prompt commands are the default global set
and stay available in the picker for re-pinning if removed; they keep their
bespoke icons, while user commands/skills fall back to the Commands/Skills
section icons. Chip labels are normalized (/simplify-code -> 'Simplify
code'). Missing commands/skills are skipped rather than shown broken.

Drag-to-reorder works on desktop and mobile: rectSortingStrategy for the
wrapping multi-row layout, CSS.Translate (no scale) so the lifted chip
doesn't stretch, and MouseSensor + long-press TouchSensor so taps still
submit and swipes still scroll. The '+' picker is a searchable dialog on
every surface.
2026-05-30 02:04:32 +03:00

2174 lines
76 KiB
TypeScript

import { create } from 'zustand';
import { devtools, persist, createJSONStorage } from 'zustand/middleware';
import type { SidebarSection } from '@/constants/sidebar';
import { getSafeStorage } from './utils/safeStorage';
import { SEMANTIC_TYPOGRAPHY, getTypographyVariable, type SemanticTypographyKey } from '@/lib/typography';
import type { ShortcutCombo } from '@/lib/shortcuts';
import type { DraftStarterRef } from '@/lib/draftStarters';
import { DEFAULT_MONO_FONT, DEFAULT_UI_FONT, type MonoFontOption, type UiFontOption } from '@/lib/fontOptions';
import { getStoredMobileKeyboardMode, type MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
export type MainTab = 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files' | 'context';
export type RightSidebarTab = 'git' | 'files' | 'context';
export type ContextPanelMode = 'diff' | 'file' | 'context' | 'plan' | 'chat' | 'preview' | 'browser';
export type MermaidRenderingMode = 'svg' | 'ascii';
export type UserMessageRenderingMode = 'markdown' | 'plain';
export type ChatRenderMode = 'sorted' | 'live';
export type ActivityRenderMode = 'collapsed' | 'summary';
export type SessionRetentionAction = 'archive' | 'delete';
export type TimeFormatPreference = 'auto' | '12h' | '24h';
export type WeekStartPreference = 'auto' | 'sunday' | 'monday';
type ContextPanelTab = {
id: string;
mode: ContextPanelMode;
targetPath: string | null;
dedupeKey: string;
label: string | null;
readOnly: boolean;
stagedDiff: boolean;
touchedAt: number;
};
type ContextPanelTabDescriptor = {
mode: ContextPanelMode;
targetPath?: string | null;
dedupeKey?: string | null;
label?: string | null;
readOnly?: boolean;
stagedDiff?: boolean;
};
type ContextPanelDirectoryState = {
isOpen: boolean;
expanded: boolean;
tabs: ContextPanelTab[];
activeTabId: string | null;
width: number;
touchedAt: number;
};
type PendingFileNavigation = {
path: string;
line: number;
column: number;
};
export type MainTabGuard = (nextTab: MainTab) => boolean;
export type EventStreamStatus =
| 'idle'
| 'connecting'
| 'connected'
| 'reconnecting'
| 'paused'
| 'offline'
| 'error';
const LEGACY_DEFAULT_NOTIFICATION_TEMPLATES = {
completion: { title: '{agent_name} is ready', message: '{last_message}' },
error: { title: 'Tool error', message: '{last_message}' },
question: { title: '{agent_name} needs input', message: '{last_message}' },
subtask: { title: 'Subtask complete', message: '{last_message}' },
} as const;
const EMPTY_NOTIFICATION_TEMPLATES = {
completion: { title: '', message: '' },
error: { title: '', message: '' },
question: { title: '', message: '' },
subtask: { title: '', message: '' },
} as const;
const isSameTemplateValue = (
a: { title: string; message: string } | undefined,
b: { title: string; message: string }
) => {
if (!a) return false;
return a.title === b.title && a.message === b.message;
};
const isLegacyDefaultTemplates = (value: unknown): boolean => {
if (!value || typeof value !== 'object') {
return false;
}
const candidate = value as Record<string, { title: string; message: string } | undefined>;
return (
isSameTemplateValue(candidate.completion, LEGACY_DEFAULT_NOTIFICATION_TEMPLATES.completion)
&& isSameTemplateValue(candidate.error, LEGACY_DEFAULT_NOTIFICATION_TEMPLATES.error)
&& isSameTemplateValue(candidate.question, LEGACY_DEFAULT_NOTIFICATION_TEMPLATES.question)
&& isSameTemplateValue(candidate.subtask, LEGACY_DEFAULT_NOTIFICATION_TEMPLATES.subtask)
);
};
const CONTEXT_PANEL_DEFAULT_WIDTH = 380;
const CONTEXT_PANEL_MIN_WIDTH = 380;
const CONTEXT_PANEL_MAX_WIDTH = 1400;
const CONTEXT_PANEL_MAX_TABS = 12;
const CONTEXT_PANEL_MAX_LABEL_LENGTH = 120;
const LEFT_SIDEBAR_MIN_WIDTH = 280;
const RIGHT_SIDEBAR_MIN_WIDTH = 360;
const normalizeDirectoryPath = (value: string): string => {
if (!value) return '';
const raw = value.replace(/\\/g, '/');
const hadUncPrefix = raw.startsWith('//');
let normalized = raw.replace(/\/+$/g, '');
normalized = normalized.replace(/\/+/g, '/');
if (hadUncPrefix && !normalized.startsWith('//')) {
normalized = `/${normalized}`;
}
if (normalized === '') {
return raw.startsWith('/') ? '/' : '';
}
return normalized;
};
const clampContextPanelWidth = (width: number): number => {
if (!Number.isFinite(width)) {
return CONTEXT_PANEL_DEFAULT_WIDTH;
}
return Math.min(CONTEXT_PANEL_MAX_WIDTH, Math.max(CONTEXT_PANEL_MIN_WIDTH, Math.round(width)));
};
const normalizeContextTargetPath = (value: string | null | undefined): string | null => {
if (typeof value !== 'string') {
return null;
}
const trimmed = value.trim();
if (!trimmed) {
return null;
}
return trimmed.replace(/\\/g, '/');
};
const normalizeContextTabLabel = (value: string | null | undefined): string | null => {
if (typeof value !== 'string') {
return null;
}
const trimmed = value.trim();
if (!trimmed) {
return null;
}
return trimmed.length > CONTEXT_PANEL_MAX_LABEL_LENGTH
? trimmed.slice(0, CONTEXT_PANEL_MAX_LABEL_LENGTH)
: trimmed;
};
const buildDefaultContextPanelTabDedupeKey = (mode: ContextPanelMode, targetPath: string | null): string => {
if (mode === 'file') {
return targetPath || mode;
}
if (mode === 'preview') {
return targetPath || mode;
}
return mode;
};
const normalizeContextPanelTabDedupeKey = (
mode: ContextPanelMode,
targetPath: string | null,
dedupeKey: string | null | undefined,
): string => {
if (typeof dedupeKey === 'string') {
const trimmed = dedupeKey.trim();
if (trimmed) {
return trimmed;
}
}
return buildDefaultContextPanelTabDedupeKey(mode, targetPath);
};
const buildContextPanelTabID = (mode: ContextPanelMode, dedupeKey: string): string => {
return dedupeKey === mode ? mode : `${mode}:${dedupeKey}`;
};
const createContextPanelTab = (descriptor: ContextPanelTabDescriptor): ContextPanelTab => {
const normalizedTargetPath = normalizeContextTargetPath(descriptor.targetPath);
const dedupeKey = normalizeContextPanelTabDedupeKey(
descriptor.mode,
normalizedTargetPath,
descriptor.dedupeKey,
);
return {
id: buildContextPanelTabID(descriptor.mode, dedupeKey),
mode: descriptor.mode,
targetPath: normalizedTargetPath,
dedupeKey,
label: normalizeContextTabLabel(descriptor.label),
readOnly: descriptor.readOnly === true,
stagedDiff: descriptor.stagedDiff === true,
touchedAt: Date.now(),
};
};
const clampContextPanelTabs = (tabs: ContextPanelTab[], maxTabs: number, activeTabId: string | null): ContextPanelTab[] => {
if (tabs.length <= maxTabs) {
return tabs;
}
const tabsByTouch = [...tabs].sort((a, b) => a.touchedAt - b.touchedAt);
const removable = tabsByTouch.filter((tab) => tab.id !== activeTabId);
const removeCount = tabs.length - maxTabs;
if (removeCount <= 0 || removable.length === 0) {
return tabs.slice(-maxTabs);
}
const removeSet = new Set(removable.slice(0, removeCount).map((tab) => tab.id));
return tabs.filter((tab) => !removeSet.has(tab.id));
};
const sanitizeContextPanelTabs = (tabs: unknown): ContextPanelTab[] => {
if (!Array.isArray(tabs)) {
return [];
}
const result: ContextPanelTab[] = [];
const seen = new Set<string>();
for (const entry of tabs) {
if (!entry || typeof entry !== 'object') {
continue;
}
const candidate = entry as {
mode?: unknown;
targetPath?: unknown;
dedupeKey?: unknown;
label?: unknown;
readOnly?: unknown;
stagedDiff?: unknown;
touchedAt?: unknown;
};
if (candidate.mode !== 'diff' && candidate.mode !== 'file' && candidate.mode !== 'context' && candidate.mode !== 'plan' && candidate.mode !== 'chat' && candidate.mode !== 'preview' && candidate.mode !== 'browser') {
continue;
}
const targetPath = normalizeContextTargetPath(typeof candidate.targetPath === 'string' ? candidate.targetPath : null);
const dedupeKey = normalizeContextPanelTabDedupeKey(
candidate.mode,
targetPath,
typeof candidate.dedupeKey === 'string' ? candidate.dedupeKey : null,
);
const id = buildContextPanelTabID(candidate.mode, dedupeKey);
if (!id || seen.has(id)) {
continue;
}
seen.add(id);
result.push({
id,
mode: candidate.mode,
targetPath,
dedupeKey,
label: normalizeContextTabLabel(typeof candidate.label === 'string' ? candidate.label : null),
readOnly: candidate.readOnly === true,
stagedDiff: candidate.stagedDiff === true,
touchedAt: typeof candidate.touchedAt === 'number' && Number.isFinite(candidate.touchedAt)
? candidate.touchedAt
: Date.now(),
});
}
return result;
};
const resolveActiveContextPanelTabID = (tabs: ContextPanelTab[], activeTabId: string | null): string | null => {
if (activeTabId && tabs.some((tab) => tab.id === activeTabId)) {
return activeTabId;
}
if (tabs.length === 0) {
return null;
}
return tabs[tabs.length - 1].id;
};
const touchContextPanelState = (prev?: ContextPanelDirectoryState): ContextPanelDirectoryState => {
if (prev) {
const tabs = sanitizeContextPanelTabs(prev.tabs);
const activeTabId = resolveActiveContextPanelTabID(tabs, prev.activeTabId);
return {
...prev,
tabs,
activeTabId,
touchedAt: Date.now(),
};
}
return {
isOpen: false,
expanded: false,
tabs: [],
activeTabId: null,
width: CONTEXT_PANEL_DEFAULT_WIDTH,
touchedAt: Date.now(),
};
};
const upsertContextPanelTab = (
current: ContextPanelDirectoryState,
descriptor: ContextPanelTabDescriptor,
): ContextPanelDirectoryState => {
const nextTab = createContextPanelTab(descriptor);
const existingIndex = current.tabs.findIndex((tab) => tab.id === nextTab.id);
const tabs = existingIndex === -1
? [...current.tabs, nextTab]
: current.tabs.map((tab, index) => (index === existingIndex
? {
...tab,
mode: nextTab.mode,
targetPath: nextTab.targetPath || tab.targetPath,
dedupeKey: nextTab.dedupeKey,
label: nextTab.label,
stagedDiff: nextTab.stagedDiff,
touchedAt: Date.now(),
}
: tab));
const activeTabId = nextTab.id;
const clampedTabs = clampContextPanelTabs(tabs, CONTEXT_PANEL_MAX_TABS, activeTabId);
return {
...current,
isOpen: true,
tabs: clampedTabs,
activeTabId: resolveActiveContextPanelTabID(clampedTabs, activeTabId),
touchedAt: Date.now(),
};
};
const closeContextPanelTab = (
current: ContextPanelDirectoryState,
tabID: string,
): ContextPanelDirectoryState => {
const nextTabs = current.tabs.filter((tab) => tab.id !== tabID);
const nextActiveTabId = current.activeTabId === tabID
? (nextTabs[nextTabs.length - 1]?.id ?? null)
: resolveActiveContextPanelTabID(nextTabs, current.activeTabId);
return {
...current,
tabs: nextTabs,
activeTabId: nextActiveTabId,
isOpen: nextTabs.length > 0 ? current.isOpen : false,
touchedAt: Date.now(),
};
};
const reorderContextPanelTabs = (
current: ContextPanelDirectoryState,
activeTabID: string,
overTabID: string,
): ContextPanelDirectoryState => {
if (activeTabID === overTabID) {
return current;
}
const fromIndex = current.tabs.findIndex((tab) => tab.id === activeTabID);
const toIndex = current.tabs.findIndex((tab) => tab.id === overTabID);
if (fromIndex === -1 || toIndex === -1) {
return current;
}
const tabs = [...current.tabs];
const [moved] = tabs.splice(fromIndex, 1);
if (!moved) {
return current;
}
tabs.splice(toIndex, 0, moved);
return {
...current,
tabs,
touchedAt: Date.now(),
};
};
const setContextPanelTabTargetPath = (
current: ContextPanelDirectoryState,
tabID: string,
targetPath: string,
): ContextPanelDirectoryState => ({
...current,
tabs: current.tabs.map((tab) =>
tab.id === tabID ? { ...tab, targetPath } : tab,
),
});
const sanitizeContextPanelByDirectory = (
value: unknown,
): Record<string, ContextPanelDirectoryState> => {
if (!value || typeof value !== 'object') {
return {};
}
const source = value as Record<string, unknown>;
const next: Record<string, ContextPanelDirectoryState> = {};
for (const [rawDirectory, rawState] of Object.entries(source)) {
const directory = normalizeDirectoryPath(rawDirectory);
if (!directory || !rawState || typeof rawState !== 'object') {
continue;
}
const candidate = rawState as {
isOpen?: unknown;
expanded?: unknown;
tabs?: unknown;
activeTabId?: unknown;
width?: unknown;
touchedAt?: unknown;
mode?: unknown;
targetPath?: unknown;
dedupeKey?: unknown;
label?: unknown;
};
let tabs = sanitizeContextPanelTabs(candidate.tabs);
let activeTabId = typeof candidate.activeTabId === 'string' ? candidate.activeTabId : null;
if (tabs.length === 0 && (candidate.mode === 'diff' || candidate.mode === 'file' || candidate.mode === 'context' || candidate.mode === 'plan' || candidate.mode === 'chat')) {
tabs = [createContextPanelTab({
mode: candidate.mode,
targetPath: typeof candidate.targetPath === 'string' ? candidate.targetPath : null,
dedupeKey: typeof candidate.dedupeKey === 'string' ? candidate.dedupeKey : null,
label: typeof candidate.label === 'string' ? candidate.label : null,
})];
activeTabId = tabs[0]?.id ?? null;
}
const resolvedActiveTabId = resolveActiveContextPanelTabID(tabs, activeTabId);
const clampedTabs = clampContextPanelTabs(tabs, CONTEXT_PANEL_MAX_TABS, resolvedActiveTabId);
next[directory] = {
isOpen: candidate.isOpen === true,
expanded: candidate.expanded === true,
tabs: clampedTabs,
activeTabId: resolveActiveContextPanelTabID(clampedTabs, resolvedActiveTabId),
width: clampContextPanelWidth(typeof candidate.width === 'number' ? candidate.width : CONTEXT_PANEL_DEFAULT_WIDTH),
touchedAt: typeof candidate.touchedAt === 'number' && Number.isFinite(candidate.touchedAt)
? candidate.touchedAt
: Date.now(),
};
}
return next;
};
const clampContextPanelRoots = (
byDirectory: Record<string, ContextPanelDirectoryState>,
maxRoots: number
): Record<string, ContextPanelDirectoryState> => {
const entries = Object.entries(byDirectory);
if (entries.length <= maxRoots) {
return byDirectory;
}
entries.sort((a, b) => (b[1]?.touchedAt ?? 0) - (a[1]?.touchedAt ?? 0));
const next: Record<string, ContextPanelDirectoryState> = {};
for (const [directory, state] of entries.slice(0, maxRoots)) {
next[directory] = state;
}
return next;
};
interface UIStore {
theme: 'light' | 'dark' | 'system';
isMultiRunLauncherOpen: boolean;
multiRunLauncherPrefillPrompt: string;
isSidebarOpen: boolean;
sidebarWidth: number;
hasManuallyResizedLeftSidebar: boolean;
isRightSidebarOpen: boolean;
rightSidebarWidth: number;
hasManuallyResizedRightSidebar: boolean;
rightSidebarTab: RightSidebarTab;
contextPanelByDirectory: Record<string, ContextPanelDirectoryState>;
isBottomTerminalOpen: boolean;
isBottomTerminalExpanded: boolean;
bottomTerminalHeight: number;
hasManuallyResizedBottomTerminal: boolean;
notesPanelHeight: number;
todoPanelHeight: number;
isSessionSwitcherOpen: boolean;
isSessionDropdownOpen: boolean;
activeMainTab: MainTab;
mainTabGuard: MainTabGuard | null;
sidebarOpenBeforeFullscreenTab: boolean | null;
pendingDiffFile: string | null;
pendingDiffStaged: boolean;
pendingFileNavigation: PendingFileNavigation | null;
pendingFileFocusPath: string | null;
isMobile: boolean;
isCommandPaletteOpen: boolean;
isHelpDialogOpen: boolean;
isAboutDialogOpen: boolean;
isOpenCodeStatusDialogOpen: boolean;
openCodeStatusText: string;
isSessionCreateDialogOpen: boolean;
isScheduledTasksDialogOpen: boolean;
isSettingsDialogOpen: boolean;
isModelSelectorOpen: boolean;
sidebarSection: SidebarSection;
// Settings IA (new shell)
settingsPage: string;
settingsHasOpenedOnce: boolean;
settingsProjectsSelectedId: string | null;
settingsRemoteInstancesSelectedId: string | null;
eventStreamStatus: EventStreamStatus;
eventStreamHint: string | null;
showReasoningTraces: boolean;
collapsibleThinkingBlocks: boolean;
groupReasoningBlocks: boolean;
chatRenderMode: ChatRenderMode;
activityRenderMode: ActivityRenderMode;
showDeletionDialog: boolean;
autoDeleteEnabled: boolean;
autoDeleteAfterDays: number;
sessionRetentionAction: SessionRetentionAction;
autoDeleteLastRunAt: number | null;
messageLimit: number;
fontSize: number;
// Global draft welcome starters; null = unset (use the default built-in set).
globalDraftStarters: DraftStarterRef[] | null;
terminalFontSize: number;
uiFont: UiFontOption;
monoFont: MonoFontOption;
padding: number;
cornerRadius: number;
inputBarOffset: number;
mobileKeyboardMode: MobileKeyboardMode;
favoriteModels: Array<{ providerID: string; modelID: string }>;
hiddenModels: Array<{ providerID: string; modelID: string }>;
collapsedModelProviders: string[];
recentModels: Array<{ providerID: string; modelID: string }>;
recentAgents: string[];
recentEfforts: Record<string, string[]>;
diffLayoutPreference: 'dynamic' | 'inline' | 'side-by-side';
diffFileLayout: Record<string, 'inline' | 'side-by-side'>;
diffWrapLines: boolean;
diffViewMode: 'single' | 'stacked';
gitChangesViewMode: 'flat' | 'tree';
isTimelineDialogOpen: boolean;
isImagePreviewOpen: boolean;
nativeNotificationsEnabled: boolean;
notificationMode: 'always' | 'hidden-only';
notifyOnSubtasks: boolean;
// Event toggles (which events trigger notifications)
notifyOnCompletion: boolean;
notifyOnError: boolean;
notifyOnQuestion: boolean;
// Per-event notification templates
notificationTemplates: {
completion: { title: string; message: string };
error: { title: string; message: string };
question: { title: string; message: string };
subtask: { title: string; message: string };
};
// Summarization settings
summarizeLastMessage: boolean;
summaryThreshold: number; // chars — messages longer than this get summarized
summaryLength: number; // chars — target length for summary
maxLastMessageLength: number; // chars — truncate {last_message} when summarization is off
showTerminalQuickKeysOnDesktop: boolean;
persistChatDraft: boolean;
showOpenCodeUpdateNotifications: boolean;
inputSpellcheckEnabled: boolean;
wideChatLayoutEnabled: boolean;
showToolFileIcons: boolean;
showExpandedBashTools: boolean;
showExpandedEditTools: boolean;
timeFormatPreference: TimeFormatPreference;
weekStartPreference: WeekStartPreference;
mermaidRenderingMode: MermaidRenderingMode;
userMessageRenderingMode: UserMessageRenderingMode;
stickyUserHeader: boolean;
showSplitAssistantMessageActions: boolean;
showMobileSessionStatusBar: boolean;
isMobileSessionStatusBarCollapsed: boolean;
isExpandedInput: boolean;
reportUsage: boolean;
shortcutOverrides: Record<string, ShortcutCombo>;
setTheme: (theme: 'light' | 'dark' | 'system') => void;
toggleSidebar: () => void;
setSidebarOpen: (open: boolean) => void;
setSidebarWidth: (width: number) => void;
toggleRightSidebar: () => void;
setRightSidebarOpen: (open: boolean) => void;
setRightSidebarWidth: (width: number) => void;
setRightSidebarTab: (tab: RightSidebarTab) => void;
openContextPanelTab: (directory: string, tab: ContextPanelTabDescriptor) => void;
openContextDiff: (directory: string, filePath: string, staged?: boolean) => void;
openContextFile: (directory: string, filePath: string) => void;
openContextFileAtLine: (directory: string, filePath: string, line: number, column?: number) => void;
openContextOverview: (directory: string) => void;
openContextPlan: (directory: string) => void;
openContextPreview: (directory: string, url: string) => void;
openContextBrowser: (directory: string, url?: string) => void;
setContextPanelTabTargetPath: (directory: string, tabID: string, targetPath: string) => void;
setActiveContextPanelTab: (directory: string, tabID: string) => void;
reorderContextPanelTabs: (directory: string, activeTabID: string, overTabID: string) => void;
closeContextPanelTab: (directory: string, tabID: string) => void;
closeContextPanel: (directory: string) => void;
toggleContextPanelExpanded: (directory: string) => void;
setContextPanelWidth: (directory: string, width: number) => void;
toggleBottomTerminal: () => void;
setBottomTerminalOpen: (open: boolean) => void;
setBottomTerminalExpanded: (expanded: boolean) => void;
setBottomTerminalHeight: (height: number) => void;
setNotesPanelHeight: (height: number) => void;
setTodoPanelHeight: (height: number) => void;
setSessionSwitcherOpen: (open: boolean) => void;
setSessionDropdownOpen: (open: boolean) => void;
setActiveMainTab: (tab: MainTab) => void;
setMainTabGuard: (guard: MainTabGuard | null) => void;
setPendingDiffFile: (filePath: string | null, staged?: boolean) => void;
setPendingFileNavigation: (navigation: PendingFileNavigation | null) => void;
setPendingFileFocusPath: (path: string | null) => void;
navigateToDiff: (filePath: string, staged?: boolean) => void;
consumePendingDiffFile: () => string | null;
setIsMobile: (isMobile: boolean) => void;
toggleCommandPalette: () => void;
setCommandPaletteOpen: (open: boolean) => void;
toggleHelpDialog: () => void;
setHelpDialogOpen: (open: boolean) => void;
setAboutDialogOpen: (open: boolean) => void;
setOpenCodeStatusDialogOpen: (open: boolean) => void;
setOpenCodeStatusText: (text: string) => void;
setSessionCreateDialogOpen: (open: boolean) => void;
setScheduledTasksDialogOpen: (open: boolean) => void;
setSettingsDialogOpen: (open: boolean) => void;
setModelSelectorOpen: (open: boolean) => void;
applyTheme: () => void;
setSidebarSection: (section: SidebarSection) => void;
setSettingsPage: (slug: string) => void;
setSettingsProjectsSelectedId: (projectId: string | null) => void;
setSettingsRemoteInstancesSelectedId: (instanceId: string | null) => void;
setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
setShowReasoningTraces: (value: boolean) => void;
setCollapsibleThinkingBlocks: (value: boolean) => void;
setChatRenderMode: (value: ChatRenderMode) => void;
setActivityRenderMode: (value: ActivityRenderMode) => void;
setShowDeletionDialog: (value: boolean) => void;
setAutoDeleteEnabled: (value: boolean) => void;
setAutoDeleteAfterDays: (days: number) => void;
setSessionRetentionAction: (value: SessionRetentionAction) => void;
setAutoDeleteLastRunAt: (timestamp: number | null) => void;
setMessageLimit: (value: number) => void;
setFontSize: (size: number) => void;
setGlobalDraftStarters: (refs: DraftStarterRef[]) => void;
setTerminalFontSize: (size: number) => void;
setUiFont: (font: UiFontOption) => void;
setMonoFont: (font: MonoFontOption) => void;
setPadding: (size: number) => void;
setCornerRadius: (radius: number) => void;
setInputBarOffset: (offset: number) => void;
setMobileKeyboardMode: (mode: MobileKeyboardMode) => void;
applyTypography: () => void;
applyPadding: () => void;
updateProportionalSidebarWidths: () => void;
toggleFavoriteModel: (providerID: string, modelID: string) => void;
reorderFavoriteModel: (
activeProviderID: string,
activeModelID: string,
overProviderID: string,
overModelID: string,
) => void;
toggleHiddenModel: (providerID: string, modelID: string) => void;
isHiddenModel: (providerID: string, modelID: string) => boolean;
hideAllModels: (providerID: string, modelIDs: string[]) => void;
showAllModels: (providerID: string) => void;
toggleModelProviderCollapsed: (providerID: string) => void;
setModelProvidersCollapsed: (providerIDs: string[], collapsed: boolean) => void;
isFavoriteModel: (providerID: string, modelID: string) => boolean;
addRecentModel: (providerID: string, modelID: string) => void;
addRecentAgent: (agentName: string) => void;
addRecentEffort: (providerID: string, modelID: string, variant: string | undefined) => void;
setDiffLayoutPreference: (mode: 'dynamic' | 'inline' | 'side-by-side') => void;
setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
setDiffWrapLines: (wrap: boolean) => void;
setDiffViewMode: (mode: 'single' | 'stacked') => void;
setGitChangesViewMode: (mode: 'flat' | 'tree') => void;
setMultiRunLauncherOpen: (open: boolean) => void;
setTimelineDialogOpen: (open: boolean) => void;
setImagePreviewOpen: (open: boolean) => void;
setNativeNotificationsEnabled: (value: boolean) => void;
setNotificationMode: (mode: 'always' | 'hidden-only') => void;
setShowTerminalQuickKeysOnDesktop: (value: boolean) => void;
setNotifyOnSubtasks: (value: boolean) => void;
setNotifyOnCompletion: (value: boolean) => void;
setNotifyOnError: (value: boolean) => void;
setNotifyOnQuestion: (value: boolean) => void;
setNotificationTemplates: (templates: UIStore['notificationTemplates']) => void;
setSummarizeLastMessage: (value: boolean) => void;
setSummaryThreshold: (value: number) => void;
setSummaryLength: (value: number) => void;
setMaxLastMessageLength: (value: number) => void;
setPersistChatDraft: (value: boolean) => void;
setShowOpenCodeUpdateNotifications: (value: boolean) => void;
setInputSpellcheckEnabled: (value: boolean) => void;
setWideChatLayoutEnabled: (value: boolean) => void;
setShowToolFileIcons: (value: boolean) => void;
setShowExpandedBashTools: (value: boolean) => void;
setShowExpandedEditTools: (value: boolean) => void;
setTimeFormatPreference: (value: TimeFormatPreference) => void;
setWeekStartPreference: (value: WeekStartPreference) => void;
setMermaidRenderingMode: (value: MermaidRenderingMode) => void;
setUserMessageRenderingMode: (value: UserMessageRenderingMode) => void;
setStickyUserHeader: (value: boolean) => void;
setShowSplitAssistantMessageActions: (value: boolean) => void;
setShowMobileSessionStatusBar: (value: boolean) => void;
setIsMobileSessionStatusBarCollapsed: (value: boolean) => void;
viewPagerPage: 'left' | 'center' | 'right';
setViewPagerPage: (page: 'left' | 'center' | 'right') => void;
toggleExpandedInput: () => void;
setExpandedInput: (value: boolean) => void;
openMultiRunLauncher: () => void;
openMultiRunLauncherWithPrompt: (prompt: string) => void;
setReportUsage: (value: boolean) => void;
setShortcutOverride: (actionId: string, combo: ShortcutCombo) => void;
clearShortcutOverride: (actionId: string) => void;
resetAllShortcutOverrides: () => void;
}
export const useUIStore = create<UIStore>()(
devtools(
persist(
(set, get) => ({
theme: 'system',
isMultiRunLauncherOpen: false,
multiRunLauncherPrefillPrompt: '',
isSidebarOpen: true,
sidebarWidth: LEFT_SIDEBAR_MIN_WIDTH,
hasManuallyResizedLeftSidebar: false,
isRightSidebarOpen: false,
rightSidebarWidth: RIGHT_SIDEBAR_MIN_WIDTH,
hasManuallyResizedRightSidebar: false,
rightSidebarTab: 'git',
contextPanelByDirectory: {},
isBottomTerminalOpen: false,
isBottomTerminalExpanded: false,
bottomTerminalHeight: 300,
hasManuallyResizedBottomTerminal: false,
notesPanelHeight: 112,
todoPanelHeight: 259,
isSessionSwitcherOpen: false,
isSessionDropdownOpen: false,
activeMainTab: 'chat',
mainTabGuard: null,
sidebarOpenBeforeFullscreenTab: null,
pendingDiffFile: null,
pendingDiffStaged: false,
pendingFileNavigation: null,
pendingFileFocusPath: null,
isMobile: false,
isCommandPaletteOpen: false,
isHelpDialogOpen: false,
isAboutDialogOpen: false,
isOpenCodeStatusDialogOpen: false,
openCodeStatusText: '',
isSessionCreateDialogOpen: false,
isScheduledTasksDialogOpen: false,
isSettingsDialogOpen: false,
isModelSelectorOpen: false,
sidebarSection: 'sessions',
settingsPage: 'home',
settingsHasOpenedOnce: false,
settingsProjectsSelectedId: null,
settingsRemoteInstancesSelectedId: null,
eventStreamStatus: 'idle',
eventStreamHint: null,
showReasoningTraces: true,
collapsibleThinkingBlocks: true,
groupReasoningBlocks: true,
chatRenderMode: 'live',
activityRenderMode: 'summary',
showDeletionDialog: true,
autoDeleteEnabled: false,
autoDeleteAfterDays: 30,
sessionRetentionAction: 'archive',
autoDeleteLastRunAt: null,
messageLimit: 200,
fontSize: 100,
globalDraftStarters: null,
terminalFontSize: 13,
uiFont: DEFAULT_UI_FONT,
monoFont: DEFAULT_MONO_FONT,
padding: 100,
cornerRadius: 18,
inputBarOffset: 0,
mobileKeyboardMode: getStoredMobileKeyboardMode(),
favoriteModels: [],
hiddenModels: [],
collapsedModelProviders: [],
recentModels: [],
recentAgents: [],
recentEfforts: {},
diffLayoutPreference: 'inline',
diffFileLayout: {},
diffWrapLines: false,
diffViewMode: 'stacked',
gitChangesViewMode: 'flat',
isTimelineDialogOpen: false,
isImagePreviewOpen: false,
nativeNotificationsEnabled: false,
notificationMode: 'hidden-only',
notifyOnSubtasks: true,
// Event toggles (which events trigger notifications)
notifyOnCompletion: true,
notifyOnError: true,
notifyOnQuestion: true,
notificationTemplates: {
completion: { ...EMPTY_NOTIFICATION_TEMPLATES.completion },
error: { ...EMPTY_NOTIFICATION_TEMPLATES.error },
question: { ...EMPTY_NOTIFICATION_TEMPLATES.question },
subtask: { ...EMPTY_NOTIFICATION_TEMPLATES.subtask },
},
// Summarization settings
summarizeLastMessage: false,
summaryThreshold: 200,
summaryLength: 100,
maxLastMessageLength: 250,
showTerminalQuickKeysOnDesktop: false,
persistChatDraft: true,
showOpenCodeUpdateNotifications: true,
inputSpellcheckEnabled: false,
wideChatLayoutEnabled: false,
showToolFileIcons: true,
showExpandedBashTools: false,
showExpandedEditTools: false,
timeFormatPreference: 'auto',
weekStartPreference: 'auto',
mermaidRenderingMode: 'svg',
userMessageRenderingMode: 'markdown',
stickyUserHeader: true,
showSplitAssistantMessageActions: false,
showMobileSessionStatusBar: false,
isMobileSessionStatusBarCollapsed: false,
isExpandedInput: false,
reportUsage: true,
shortcutOverrides: {},
setTheme: (theme) => {
set({ theme });
get().applyTheme();
},
toggleSidebar: () => {
set((state) => {
const newOpen = !state.isSidebarOpen;
if (newOpen && !state.hasManuallyResizedLeftSidebar) {
return {
isSidebarOpen: newOpen,
sidebarWidth: LEFT_SIDEBAR_MIN_WIDTH,
};
}
return { isSidebarOpen: newOpen };
});
},
setSidebarOpen: (open) => {
set((state) => {
if (state.isSidebarOpen === open) {
if (!open) {
return state;
}
if (!state.hasManuallyResizedLeftSidebar && state.sidebarWidth !== LEFT_SIDEBAR_MIN_WIDTH) {
return {
isSidebarOpen: open,
sidebarWidth: LEFT_SIDEBAR_MIN_WIDTH,
};
}
return state;
}
if (open && !state.hasManuallyResizedLeftSidebar) {
return {
isSidebarOpen: open,
sidebarWidth: LEFT_SIDEBAR_MIN_WIDTH,
};
}
return { isSidebarOpen: open };
});
},
setSidebarWidth: (width) => {
set({ sidebarWidth: width, hasManuallyResizedLeftSidebar: true });
},
toggleRightSidebar: () => {
set((state) => {
const newOpen = !state.isRightSidebarOpen;
if (newOpen && !state.hasManuallyResizedRightSidebar) {
return {
isRightSidebarOpen: newOpen,
rightSidebarWidth: RIGHT_SIDEBAR_MIN_WIDTH,
};
}
return { isRightSidebarOpen: newOpen };
});
},
setRightSidebarOpen: (open) => {
set((state) => {
if (state.isRightSidebarOpen === open) {
if (!open) {
return state;
}
if (!state.hasManuallyResizedRightSidebar && state.rightSidebarWidth !== RIGHT_SIDEBAR_MIN_WIDTH) {
return {
isRightSidebarOpen: open,
rightSidebarWidth: RIGHT_SIDEBAR_MIN_WIDTH,
};
}
return state;
}
if (open && !state.hasManuallyResizedRightSidebar) {
return {
isRightSidebarOpen: open,
rightSidebarWidth: RIGHT_SIDEBAR_MIN_WIDTH,
};
}
return { isRightSidebarOpen: open };
});
},
setRightSidebarWidth: (width) => {
set({ rightSidebarWidth: width, hasManuallyResizedRightSidebar: true });
},
setRightSidebarTab: (tab) => {
set({ rightSidebarTab: tab });
},
openContextPanelTab: (directory, tab) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: upsertContextPanelTab(current, tab),
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
openContextDiff: (directory, filePath, staged = false) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedFilePath = (filePath || '').trim();
if (!normalizedDirectory || !normalizedFilePath) {
return;
}
get().openContextPanelTab(normalizedDirectory, {
mode: 'diff',
targetPath: normalizedFilePath,
dedupeKey: staged ? 'staged' : null,
stagedDiff: staged,
});
},
openContextFile: (directory, filePath) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedFilePath = normalizeContextTargetPath(filePath);
if (!normalizedDirectory || !normalizedFilePath) {
return;
}
get().openContextPanelTab(normalizedDirectory, { mode: 'file', targetPath: normalizedFilePath });
get().setPendingFileFocusPath(normalizedFilePath);
get().setPendingFileNavigation(null);
},
openContextFileAtLine: (directory, filePath, line, column) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedFilePath = normalizeContextTargetPath(filePath);
const normalizedLine = Number.isFinite(line) ? Math.max(1, Math.trunc(line)) : 1;
const normalizedColumn = Number.isFinite(column) ? Math.max(1, Math.trunc(column as number)) : 1;
if (!normalizedDirectory || !normalizedFilePath) {
return;
}
get().openContextPanelTab(normalizedDirectory, { mode: 'file', targetPath: normalizedFilePath });
get().setPendingFileFocusPath(null);
get().setPendingFileNavigation({
path: normalizedFilePath,
line: normalizedLine,
column: normalizedColumn,
});
},
openContextOverview: (directory) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
get().openContextPanelTab(normalizedDirectory, { mode: 'context' });
},
openContextPlan: (directory) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
get().openContextPanelTab(normalizedDirectory, { mode: 'plan' });
},
openContextPreview: (directory, url) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedUrl = (url || '').trim();
if (!normalizedDirectory || !normalizedUrl) {
return;
}
let label: string | null = null;
try {
const parsed = new URL(normalizedUrl);
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
label = parsed.host || parsed.hostname || 'Preview';
}
} catch {
// ignore invalid URL
}
get().openContextPanelTab(normalizedDirectory, {
mode: 'preview',
targetPath: normalizedUrl,
dedupeKey: normalizedUrl,
label,
});
},
openContextBrowser: (directory, url = '') => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) return;
const targetUrl = typeof url === 'string' && url.trim().length > 0 ? url.trim() : '';
get().openContextPanelTab(normalizedDirectory, {
mode: 'browser',
targetPath: targetUrl,
dedupeKey: 'desktop-browser',
label: 'Browser',
});
},
setContextPanelTabTargetPath: (directory, tabID, targetPath) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedTabID = (tabID || '').trim();
if (!normalizedDirectory || !normalizedTabID) return;
set((state) => {
const current = state.contextPanelByDirectory[normalizedDirectory];
if (!current) return state;
return {
contextPanelByDirectory: {
...state.contextPanelByDirectory,
[normalizedDirectory]: setContextPanelTabTargetPath(current, normalizedTabID, targetPath),
},
};
});
},
setActiveContextPanelTab: (directory, tabID) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedTabID = (tabID || '').trim();
if (!normalizedDirectory || !normalizedTabID) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
if (!current.tabs.some((tab) => tab.id === normalizedTabID)) {
return state;
}
if (current.activeTabId === normalizedTabID && current.isOpen) {
return state;
}
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: {
...current,
isOpen: true,
activeTabId: normalizedTabID,
touchedAt: Date.now(),
tabs: current.tabs.map((tab) => (tab.id === normalizedTabID
? { ...tab, touchedAt: Date.now() }
: tab)),
},
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
reorderContextPanelTabs: (directory, activeTabID, overTabID) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedActiveTabID = (activeTabID || '').trim();
const normalizedOverTabID = (overTabID || '').trim();
if (!normalizedDirectory || !normalizedActiveTabID || !normalizedOverTabID) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
if (!current.tabs.some((tab) => tab.id === normalizedActiveTabID) || !current.tabs.some((tab) => tab.id === normalizedOverTabID)) {
return state;
}
const next = reorderContextPanelTabs(current, normalizedActiveTabID, normalizedOverTabID);
if (next.tabs === current.tabs) {
return state;
}
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: next,
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
closeContextPanelTab: (directory, tabID) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
const normalizedTabID = (tabID || '').trim();
if (!normalizedDirectory || !normalizedTabID) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
if (!current.tabs.some((tab) => tab.id === normalizedTabID)) {
return state;
}
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: closeContextPanelTab(current, normalizedTabID),
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
closeContextPanel: (directory) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
if (!prev || !prev.isOpen) {
return state;
}
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: {
...touchContextPanelState(prev),
isOpen: false,
},
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
toggleContextPanelExpanded: (directory) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: {
...current,
expanded: !current.expanded,
},
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
setContextPanelWidth: (directory, width) => {
const normalizedDirectory = normalizeDirectoryPath((directory || '').trim());
if (!normalizedDirectory) {
return;
}
set((state) => {
const prev = state.contextPanelByDirectory[normalizedDirectory];
const current = touchContextPanelState(prev);
const byDirectory = {
...state.contextPanelByDirectory,
[normalizedDirectory]: {
...current,
width: clampContextPanelWidth(width),
},
};
return { contextPanelByDirectory: clampContextPanelRoots(byDirectory, 20) };
});
},
toggleBottomTerminal: () => {
set((state) => {
const newOpen = !state.isBottomTerminalOpen;
if (newOpen && typeof window !== 'undefined') {
const proportionalHeight = Math.floor(window.innerHeight * 0.32);
return {
isBottomTerminalOpen: newOpen,
bottomTerminalHeight: proportionalHeight,
hasManuallyResizedBottomTerminal: false,
};
}
return { isBottomTerminalOpen: newOpen };
});
},
setBottomTerminalOpen: (open) => {
set((state) => {
if (state.isBottomTerminalOpen === open) {
if (!open) {
return state;
}
if (!state.hasManuallyResizedBottomTerminal && typeof window !== 'undefined') {
const proportionalHeight = Math.floor(window.innerHeight * 0.32);
if (state.bottomTerminalHeight === proportionalHeight && state.hasManuallyResizedBottomTerminal === false) {
return state;
}
return {
isBottomTerminalOpen: open,
bottomTerminalHeight: proportionalHeight,
hasManuallyResizedBottomTerminal: false,
};
}
return state;
}
if (open && typeof window !== 'undefined') {
const proportionalHeight = Math.floor(window.innerHeight * 0.32);
return {
isBottomTerminalOpen: open,
bottomTerminalHeight: proportionalHeight,
hasManuallyResizedBottomTerminal: false,
};
}
return { isBottomTerminalOpen: open };
});
},
setBottomTerminalExpanded: (expanded) => {
set({ isBottomTerminalExpanded: expanded });
},
setBottomTerminalHeight: (height) => {
set({ bottomTerminalHeight: height, hasManuallyResizedBottomTerminal: true });
},
setNotesPanelHeight: (height) => {
set({ notesPanelHeight: height });
},
setTodoPanelHeight: (height) => {
set({ todoPanelHeight: height });
},
setSessionSwitcherOpen: (open) => {
if (get().isSessionSwitcherOpen === open) {
return;
}
set({ isSessionSwitcherOpen: open });
},
setSessionDropdownOpen: (open) => {
if (get().isSessionDropdownOpen === open) {
return;
}
set({ isSessionDropdownOpen: open });
},
setMainTabGuard: (guard) => {
if (get().mainTabGuard === guard) {
return;
}
set({ mainTabGuard: guard });
},
setActiveMainTab: (tab) => {
const guard = get().mainTabGuard;
if (guard && !guard(tab)) {
return;
}
set({ activeMainTab: tab });
},
setPendingDiffFile: (filePath, staged = false) => {
set({ pendingDiffFile: filePath, pendingDiffStaged: filePath ? staged : false });
},
setPendingFileNavigation: (navigation) => {
set({ pendingFileNavigation: navigation });
},
setPendingFileFocusPath: (path) => {
set({ pendingFileFocusPath: path });
},
navigateToDiff: (filePath, staged = false) => {
const guard = get().mainTabGuard;
if (guard && !guard('diff')) {
return;
}
set({ pendingDiffFile: filePath, pendingDiffStaged: staged, activeMainTab: 'diff' });
},
consumePendingDiffFile: () => {
const { pendingDiffFile } = get();
if (pendingDiffFile) {
set({ pendingDiffFile: null, pendingDiffStaged: false });
}
return pendingDiffFile;
},
setIsMobile: (isMobile) => {
set({ isMobile });
},
toggleCommandPalette: () => {
set((state) => ({ isCommandPaletteOpen: !state.isCommandPaletteOpen }));
},
setCommandPaletteOpen: (open) => {
set({ isCommandPaletteOpen: open });
},
toggleHelpDialog: () => {
set((state) => ({ isHelpDialogOpen: !state.isHelpDialogOpen }));
},
setHelpDialogOpen: (open) => {
set({ isHelpDialogOpen: open });
},
setAboutDialogOpen: (open) => {
set({ isAboutDialogOpen: open });
},
setOpenCodeStatusDialogOpen: (open) => {
set({ isOpenCodeStatusDialogOpen: open });
},
setOpenCodeStatusText: (text) => {
set({ openCodeStatusText: text });
},
setSessionCreateDialogOpen: (open) => {
set({ isSessionCreateDialogOpen: open });
},
setScheduledTasksDialogOpen: (open) => {
set({ isScheduledTasksDialogOpen: open });
},
setSettingsDialogOpen: (open) => {
set((state) => {
if (!open) {
return { isSettingsDialogOpen: false };
}
if (state.settingsHasOpenedOnce) {
return { isSettingsDialogOpen: true };
}
return { isSettingsDialogOpen: true, settingsHasOpenedOnce: true };
});
},
setModelSelectorOpen: (open) => {
set({ isModelSelectorOpen: open });
},
setSidebarSection: (section) => {
set({ sidebarSection: section });
},
setSettingsPage: (slug) => {
set({ settingsPage: slug });
},
setSettingsProjectsSelectedId: (projectId) => {
set({ settingsProjectsSelectedId: projectId });
},
setSettingsRemoteInstancesSelectedId: (instanceId) => {
set({ settingsRemoteInstancesSelectedId: instanceId });
},
setEventStreamStatus: (status, hint) => {
set({
eventStreamStatus: status,
eventStreamHint: hint ?? null,
});
},
setShowReasoningTraces: (value) => {
set({ showReasoningTraces: value });
},
setCollapsibleThinkingBlocks: (value) => {
set({ collapsibleThinkingBlocks: value });
},
setChatRenderMode: (value) => {
set({ chatRenderMode: value });
},
setActivityRenderMode: (value) => {
set({ activityRenderMode: value });
},
setShowDeletionDialog: (value) => {
set({ showDeletionDialog: value });
},
setAutoDeleteEnabled: (value) => {
set({ autoDeleteEnabled: value });
},
setAutoDeleteAfterDays: (days) => {
const clampedDays = Math.max(1, Math.min(365, days));
set({ autoDeleteAfterDays: clampedDays });
},
setSessionRetentionAction: (value) => {
set({ sessionRetentionAction: value });
},
setAutoDeleteLastRunAt: (timestamp) => {
set({ autoDeleteLastRunAt: timestamp });
},
setMessageLimit: (value) => {
const clamped = Math.max(10, Math.min(500, Math.round(value)));
set({ messageLimit: clamped });
},
setFontSize: (size) => {
// Clamp between 50% and 200%
const clampedSize = Math.max(50, Math.min(200, size));
set({ fontSize: clampedSize });
get().applyTypography();
},
setGlobalDraftStarters: (refs) => {
set({ globalDraftStarters: refs });
},
setTerminalFontSize: (size) => {
const rounded = Math.round(size);
const clamped = Math.max(9, Math.min(52, rounded));
set({ terminalFontSize: clamped });
},
setUiFont: (font) => {
set({ uiFont: font });
},
setMonoFont: (font) => {
set({ monoFont: font });
},
setPadding: (size) => {
// Clamp between 50% and 200%
const clampedSize = Math.max(50, Math.min(200, size));
set({ padding: clampedSize });
get().applyPadding();
},
setCornerRadius: (radius) => {
set({ cornerRadius: radius });
},
applyTypography: () => {
const { fontSize } = get();
const root = document.documentElement;
// 100 = default (1.0x), 50 = half size (0.5x), 200 = double (2.0x)
const scale = fontSize / 100;
const entries = Object.entries(SEMANTIC_TYPOGRAPHY) as Array<[SemanticTypographyKey, string]>;
// Default must be SEMANTIC_TYPOGRAPHY (from CSS). Remove overrides.
if (scale === 1) {
for (const [key] of entries) {
root.style.removeProperty(getTypographyVariable(key));
}
return;
}
for (const [key, baseValue] of entries) {
const numericValue = parseFloat(baseValue);
if (!Number.isFinite(numericValue)) {
continue;
}
root.style.setProperty(getTypographyVariable(key), `${numericValue * scale}rem`);
}
},
applyPadding: () => {
const { padding } = get();
const root = document.documentElement;
const scale = padding / 100;
if (scale === 1) {
root.style.removeProperty('--padding-scale');
root.style.removeProperty('--line-height-tight');
root.style.removeProperty('--line-height-normal');
root.style.removeProperty('--line-height-relaxed');
root.style.removeProperty('--line-height-loose');
return;
}
// Apply padding as a percentage scale with non-linear scaling
// Use square root for more natural scaling at extremes
const adjustedScale = Math.sqrt(scale);
// Set the CSS custom property that all spacing tokens reference
root.style.setProperty('--padding-scale', adjustedScale.toString());
// Dampened line-height scaling at extremes
const lineHeightScale = 1 + (scale - 1) * 0.15;
root.style.setProperty('--line-height-tight', (1.25 * lineHeightScale).toFixed(3));
root.style.setProperty('--line-height-normal', (1.5 * lineHeightScale).toFixed(3));
root.style.setProperty('--line-height-relaxed', (1.625 * lineHeightScale).toFixed(3));
root.style.setProperty('--line-height-loose', (2 * lineHeightScale).toFixed(3));
},
setDiffLayoutPreference: (mode) => {
set({ diffLayoutPreference: mode });
},
setDiffFileLayout: (filePath, mode) => {
set((state) => ({
diffFileLayout: {
...state.diffFileLayout,
[filePath]: mode,
},
}));
},
setDiffWrapLines: (wrap) => {
set({ diffWrapLines: wrap });
},
setDiffViewMode: (mode) => {
set({ diffViewMode: mode });
},
setGitChangesViewMode: (mode) => {
set({ gitChangesViewMode: mode });
},
setInputBarOffset: (offset) => {
set({ inputBarOffset: offset });
},
setMobileKeyboardMode: (mode) => {
set((state) => state.mobileKeyboardMode === mode ? state : { mobileKeyboardMode: mode });
},
toggleFavoriteModel: (providerID, modelID) => {
set((state) => {
const exists = state.favoriteModels.some(
(fav) => fav.providerID === providerID && fav.modelID === modelID
);
if (exists) {
// Remove from favorites
return {
favoriteModels: state.favoriteModels.filter(
(fav) => !(fav.providerID === providerID && fav.modelID === modelID)
),
};
} else {
// Add to favorites (newest first)
return {
favoriteModels: [{ providerID, modelID }, ...state.favoriteModels],
};
}
});
},
reorderFavoriteModel: (activeProviderID, activeModelID, overProviderID, overModelID) => {
set((state) => {
const oldIndex = state.favoriteModels.findIndex(
(fav) => fav.providerID === activeProviderID && fav.modelID === activeModelID
);
const newIndex = state.favoriteModels.findIndex(
(fav) => fav.providerID === overProviderID && fav.modelID === overModelID
);
if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) {
return state;
}
const nextFavorites = state.favoriteModels.slice();
const [moved] = nextFavorites.splice(oldIndex, 1);
if (!moved) {
return state;
}
nextFavorites.splice(newIndex, 0, moved);
return { favoriteModels: nextFavorites };
});
},
toggleHiddenModel: (providerID, modelID) => {
set((state) => {
const exists = state.hiddenModels.some(
(item) => item.providerID === providerID && item.modelID === modelID
);
if (exists) {
return {
hiddenModels: state.hiddenModels.filter(
(item) => !(item.providerID === providerID && item.modelID === modelID)
),
};
}
return {
hiddenModels: [{ providerID, modelID }, ...state.hiddenModels],
};
});
},
isHiddenModel: (providerID, modelID) => {
const { hiddenModels } = get();
return hiddenModels.some(
(item) => item.providerID === providerID && item.modelID === modelID
);
},
hideAllModels: (providerID, modelIDs) => {
set((state) => {
const current = state.hiddenModels.filter((item) => item.providerID !== providerID);
const additions = modelIDs
.filter((modelID) => typeof modelID === 'string' && modelID.length > 0)
.map((modelID) => ({ providerID, modelID }));
return { hiddenModels: [...additions, ...current] };
});
},
showAllModels: (providerID) => {
set((state) => ({
hiddenModels: state.hiddenModels.filter((item) => item.providerID !== providerID),
}));
},
toggleModelProviderCollapsed: (providerID) => {
const normalizedProviderID = typeof providerID === 'string' ? providerID.trim() : '';
if (!normalizedProviderID) {
return;
}
set((state) => {
const isCollapsed = state.collapsedModelProviders.includes(normalizedProviderID);
if (isCollapsed) {
return {
collapsedModelProviders: state.collapsedModelProviders.filter((id) => id !== normalizedProviderID),
};
}
return {
collapsedModelProviders: [...state.collapsedModelProviders, normalizedProviderID],
};
});
},
setModelProvidersCollapsed: (providerIDs, collapsed) => {
const normalizedProviderIDs = Array.from(new Set(
providerIDs
.filter((providerID): providerID is string => typeof providerID === 'string')
.map((providerID) => providerID.trim())
.filter(Boolean)
));
if (normalizedProviderIDs.length === 0) {
return;
}
set((state) => {
const scopedProviderIDs = new Set(normalizedProviderIDs);
const untouchedProviders = state.collapsedModelProviders.filter((providerID) => !scopedProviderIDs.has(providerID));
return {
collapsedModelProviders: collapsed
? [...untouchedProviders, ...normalizedProviderIDs]
: untouchedProviders,
};
});
},
isFavoriteModel: (providerID, modelID) => {
const { favoriteModels } = get();
return favoriteModels.some(
(fav) => fav.providerID === providerID && fav.modelID === modelID
);
},
addRecentModel: (providerID, modelID) => {
set((state) => {
// Remove existing instance if any
const filtered = state.recentModels.filter(
(m) => !(m.providerID === providerID && m.modelID === modelID)
);
// Add to front, limit to 5
return {
recentModels: [{ providerID, modelID }, ...filtered].slice(0, 5),
};
});
},
addRecentAgent: (agentName) => {
const normalized = typeof agentName === 'string' ? agentName.trim() : '';
if (!normalized) {
return;
}
set((state) => {
if (state.recentAgents.includes(normalized)) {
return state;
}
const filtered = state.recentAgents;
return {
recentAgents: [normalized, ...filtered].slice(0, 5),
};
});
},
addRecentEffort: (providerID, modelID, variant) => {
const provider = typeof providerID === 'string' ? providerID.trim() : '';
const model = typeof modelID === 'string' ? modelID.trim() : '';
if (!provider || !model) {
return;
}
const key = `${provider}/${model}`;
const normalizedVariant = typeof variant === 'string' && variant.trim().length > 0 ? variant.trim() : 'default';
set((state) => {
const current = state.recentEfforts[key] ?? [];
if (current.includes(normalizedVariant)) {
return state;
}
const filtered = current;
return {
recentEfforts: {
...state.recentEfforts,
[key]: [normalizedVariant, ...filtered].slice(0, 5),
},
};
});
},
updateProportionalSidebarWidths: () => {
if (typeof window === 'undefined') {
return;
}
set((state) => {
const updates: Partial<UIStore> = {};
if (state.isBottomTerminalOpen && !state.hasManuallyResizedBottomTerminal) {
updates.bottomTerminalHeight = Math.floor(window.innerHeight * 0.32);
}
return updates;
});
},
applyTheme: () => {
const { theme } = get();
const root = document.documentElement;
root.classList.remove('light', 'dark');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
root.classList.add(systemTheme);
} else {
root.classList.add(theme);
}
},
setMultiRunLauncherOpen: (open) => {
set((state) => ({
isMultiRunLauncherOpen: open,
multiRunLauncherPrefillPrompt: open ? state.multiRunLauncherPrefillPrompt : '',
}));
},
openMultiRunLauncher: () => {
set({
isMultiRunLauncherOpen: true,
multiRunLauncherPrefillPrompt: '',
isSessionSwitcherOpen: false,
});
},
openMultiRunLauncherWithPrompt: (prompt) => {
set({
isMultiRunLauncherOpen: true,
multiRunLauncherPrefillPrompt: prompt,
isSessionSwitcherOpen: false,
});
},
setTimelineDialogOpen: (open) => {
set({ isTimelineDialogOpen: open });
},
setImagePreviewOpen: (open) => {
set({ isImagePreviewOpen: open });
},
setNativeNotificationsEnabled: (value) => {
set({ nativeNotificationsEnabled: value });
},
setNotificationMode: (mode) => {
set({ notificationMode: mode });
},
setShowTerminalQuickKeysOnDesktop: (value) => {
set({ showTerminalQuickKeysOnDesktop: value });
},
setNotifyOnSubtasks: (value) => {
set({ notifyOnSubtasks: value });
},
setNotifyOnCompletion: (value) => { set({ notifyOnCompletion: value }); },
setNotifyOnError: (value) => { set({ notifyOnError: value }); },
setNotifyOnQuestion: (value) => { set({ notifyOnQuestion: value }); },
setNotificationTemplates: (templates) => { set({ notificationTemplates: templates }); },
setSummarizeLastMessage: (value) => { set({ summarizeLastMessage: value }); },
setSummaryThreshold: (value) => { set({ summaryThreshold: value }); },
setSummaryLength: (value) => { set({ summaryLength: value }); },
setMaxLastMessageLength: (value) => { set({ maxLastMessageLength: value }); },
setPersistChatDraft: (value) => {
set({ persistChatDraft: value });
},
setShowOpenCodeUpdateNotifications: (value) => {
set({ showOpenCodeUpdateNotifications: value });
},
setInputSpellcheckEnabled: (value) => {
set({ inputSpellcheckEnabled: value });
},
setWideChatLayoutEnabled: (value) => {
set({ wideChatLayoutEnabled: value });
},
setShowToolFileIcons: (value) => {
set({ showToolFileIcons: value });
},
setShowExpandedBashTools: (value) => {
set({ showExpandedBashTools: value });
},
setShowExpandedEditTools: (value) => {
set({ showExpandedEditTools: value });
},
setTimeFormatPreference: (value) => {
set({ timeFormatPreference: value });
},
setWeekStartPreference: (value) => {
set({ weekStartPreference: value });
},
setMermaidRenderingMode: (value) => {
set({ mermaidRenderingMode: value });
},
setUserMessageRenderingMode: (value) => {
set({ userMessageRenderingMode: value });
},
setStickyUserHeader: (value) => {
set({ stickyUserHeader: value });
},
setShowSplitAssistantMessageActions: (value) => {
set({ showSplitAssistantMessageActions: value });
},
setShowMobileSessionStatusBar: (value) => {
set({ showMobileSessionStatusBar: value });
},
setIsMobileSessionStatusBarCollapsed: (value) => {
set({ isMobileSessionStatusBarCollapsed: value });
},
setReportUsage: (value) => {
set({ reportUsage: value });
},
viewPagerPage: 'center',
setViewPagerPage: (page: 'left' | 'center' | 'right') => {
set({ viewPagerPage: page });
if (page === 'left') {
set({ isSessionSwitcherOpen: true, isRightSidebarOpen: false });
} else if (page === 'right') {
set({ isRightSidebarOpen: true, isSessionSwitcherOpen: false });
} else {
set({ isSessionSwitcherOpen: false, isRightSidebarOpen: false });
}
},
setShortcutOverride: (actionId, combo) => {
set((state) => ({
shortcutOverrides: {
...state.shortcutOverrides,
[actionId]: combo,
},
}));
},
clearShortcutOverride: (actionId) => {
set((state) => {
const rest = { ...state.shortcutOverrides };
delete rest[actionId];
return { shortcutOverrides: rest };
});
},
resetAllShortcutOverrides: () => {
set({ shortcutOverrides: {} });
},
toggleExpandedInput: () => {
set((state) => ({ isExpandedInput: !state.isExpandedInput }));
},
setExpandedInput: (value) => {
set({ isExpandedInput: value });
},
}),
{
name: 'ui-store',
storage: createJSONStorage(() => getSafeStorage()),
version: 9,
migrate: (persistedState, version) => {
if (!persistedState || typeof persistedState !== 'object') {
return persistedState;
}
const state = persistedState as Record<string, unknown>;
// v8 -> v9: initialize notes/todo panel height fields
if (version < 9) {
if (typeof state.notesPanelHeight !== 'number' || !Number.isFinite(state.notesPanelHeight)) {
state.notesPanelHeight = 112;
}
if (typeof state.todoPanelHeight !== 'number' || !Number.isFinite(state.todoPanelHeight)) {
state.todoPanelHeight = 259;
}
}
// v0 -> v1: reset legacy notification templates
if (version < 1) {
if (isLegacyDefaultTemplates(state.notificationTemplates)) {
state.notificationTemplates = {
completion: { ...EMPTY_NOTIFICATION_TEMPLATES.completion },
error: { ...EMPTY_NOTIFICATION_TEMPLATES.error },
question: { ...EMPTY_NOTIFICATION_TEMPLATES.question },
subtask: { ...EMPTY_NOTIFICATION_TEMPLATES.subtask },
};
}
}
// v2 -> v3: collapse 3 memory-limit fields into single messageLimit.
// Pick the best user-customised value (prefer historical, fall back to active).
// Discard old defaults (90/120/180) — they become the new single default (200).
if (version < 3) {
const OLD_DEFAULTS = new Set([90, 120, 180, 220]);
const hist = state.memoryLimitHistorical as number | undefined;
const active = state.memoryLimitActiveSession as number | undefined;
// If user had a non-default custom value, keep it as the new messageLimit.
if (typeof hist === 'number' && !OLD_DEFAULTS.has(hist)) {
state.messageLimit = hist;
} else if (typeof active === 'number' && !OLD_DEFAULTS.has(active)) {
state.messageLimit = active;
}
// Otherwise leave undefined → Zustand uses the initial default (200).
delete state.memoryLimitHistorical;
delete state.memoryLimitViewport;
delete state.memoryLimitActiveSession;
}
if (
typeof state.rightSidebarTab !== 'string'
|| (state.rightSidebarTab !== 'git' && state.rightSidebarTab !== 'files' && state.rightSidebarTab !== 'context')
) {
state.rightSidebarTab = 'git';
}
state.contextPanelByDirectory = sanitizeContextPanelByDirectory(state.contextPanelByDirectory);
if (version < 5) {
if (!state.shortcutOverrides || typeof state.shortcutOverrides !== 'object') {
state.shortcutOverrides = {};
} else {
const overrides = state.shortcutOverrides as Record<string, unknown>;
const cleaned: Record<string, string> = {};
for (const [key, value] of Object.entries(overrides)) {
if (typeof key === 'string' && typeof value === 'string') {
cleaned[key] = value;
}
}
state.shortcutOverrides = cleaned;
}
}
if (version < 6) {
state.contextPanelByDirectory = sanitizeContextPanelByDirectory(state.contextPanelByDirectory);
}
if (version < 7) {
state.contextPanelByDirectory = sanitizeContextPanelByDirectory(state.contextPanelByDirectory);
}
if (version < 8) {
if (state.gitChangesViewMode !== 'flat' && state.gitChangesViewMode !== 'tree') {
state.gitChangesViewMode = 'flat';
}
}
return state;
},
partialize: (state) => ({
theme: state.theme,
isSidebarOpen: state.isSidebarOpen,
sidebarWidth: state.sidebarWidth,
isRightSidebarOpen: state.isRightSidebarOpen,
rightSidebarWidth: state.rightSidebarWidth,
rightSidebarTab: state.rightSidebarTab,
contextPanelByDirectory: state.contextPanelByDirectory,
isBottomTerminalOpen: state.isBottomTerminalOpen,
isBottomTerminalExpanded: state.isBottomTerminalExpanded,
bottomTerminalHeight: state.bottomTerminalHeight,
notesPanelHeight: state.notesPanelHeight,
todoPanelHeight: state.todoPanelHeight,
isSessionSwitcherOpen: state.isSessionSwitcherOpen,
activeMainTab: state.activeMainTab,
sidebarSection: state.sidebarSection,
settingsPage: state.settingsPage,
settingsHasOpenedOnce: state.settingsHasOpenedOnce,
settingsProjectsSelectedId: state.settingsProjectsSelectedId,
settingsRemoteInstancesSelectedId: state.settingsRemoteInstancesSelectedId,
isSessionCreateDialogOpen: state.isSessionCreateDialogOpen,
// Note: isSettingsDialogOpen intentionally NOT persisted
showReasoningTraces: state.showReasoningTraces,
collapsibleThinkingBlocks: state.collapsibleThinkingBlocks,
chatRenderMode: state.chatRenderMode,
activityRenderMode: state.activityRenderMode,
showDeletionDialog: state.showDeletionDialog,
autoDeleteEnabled: state.autoDeleteEnabled,
autoDeleteAfterDays: state.autoDeleteAfterDays,
sessionRetentionAction: state.sessionRetentionAction,
autoDeleteLastRunAt: state.autoDeleteLastRunAt,
messageLimit: state.messageLimit,
fontSize: state.fontSize,
globalDraftStarters: state.globalDraftStarters,
terminalFontSize: state.terminalFontSize,
uiFont: state.uiFont,
monoFont: state.monoFont,
padding: state.padding,
cornerRadius: state.cornerRadius,
favoriteModels: state.favoriteModels,
hiddenModels: state.hiddenModels,
collapsedModelProviders: state.collapsedModelProviders,
recentModels: state.recentModels,
recentAgents: state.recentAgents,
recentEfforts: state.recentEfforts,
diffLayoutPreference: state.diffLayoutPreference,
diffWrapLines: state.diffWrapLines,
diffViewMode: state.diffViewMode,
gitChangesViewMode: state.gitChangesViewMode,
nativeNotificationsEnabled: state.nativeNotificationsEnabled,
notificationMode: state.notificationMode,
showTerminalQuickKeysOnDesktop: state.showTerminalQuickKeysOnDesktop,
notifyOnSubtasks: state.notifyOnSubtasks,
notifyOnCompletion: state.notifyOnCompletion,
notifyOnError: state.notifyOnError,
notifyOnQuestion: state.notifyOnQuestion,
notificationTemplates: state.notificationTemplates,
summarizeLastMessage: state.summarizeLastMessage,
summaryThreshold: state.summaryThreshold,
summaryLength: state.summaryLength,
maxLastMessageLength: state.maxLastMessageLength,
persistChatDraft: state.persistChatDraft,
showOpenCodeUpdateNotifications: state.showOpenCodeUpdateNotifications,
inputSpellcheckEnabled: state.inputSpellcheckEnabled,
wideChatLayoutEnabled: state.wideChatLayoutEnabled,
showToolFileIcons: state.showToolFileIcons,
showExpandedBashTools: state.showExpandedBashTools,
showExpandedEditTools: state.showExpandedEditTools,
timeFormatPreference: state.timeFormatPreference,
weekStartPreference: state.weekStartPreference,
mermaidRenderingMode: state.mermaidRenderingMode,
userMessageRenderingMode: state.userMessageRenderingMode,
stickyUserHeader: state.stickyUserHeader,
showSplitAssistantMessageActions: state.showSplitAssistantMessageActions,
showMobileSessionStatusBar: state.showMobileSessionStatusBar,
isMobileSessionStatusBarCollapsed: state.isMobileSessionStatusBarCollapsed,
shortcutOverrides: state.shortcutOverrides,
})
}
),
{
name: 'ui-store'
}
)
);