BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(surface): drop the deprecated main-tab aliases and dead diagram surface

Browse Source 
MainTab/activeMainTab/setActiveMainTab/setMainTabGuard were deprecated
mirrors of the surface names — every call site now uses
activeSurface/setActiveSurface/setSurfaceGuard directly and the aliases
are gone, including the persisted mirror field.

The 'diagram' surface had no way to open it (navigateToDiagram had no
callers except a .drawio attachment click that navigated to a surface
nothing rendered); the surface, DiagramView, and its store plumbing are
removed, and a .drawio attachment now opens in the file panel.

?tab= deep links map to the matching context-panel surface instead of
setting a main-area surface nothing renders, and a persisted non-chat
surface can no longer rehydrate into a blank main area.
This commit is contained in:
Bohdan Triapitsyn
2026-08-24 16:21:05 +03:00
parent 8b7d7803de
commit 4da7604d7d
28 changed files with 151 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatContainer.tsx
+2 -2
View File
@@ -1006,8 +1006,8 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
return;
}
const { activeMainTab } = useUIStore.getState();
if (activeMainTab !== 'chat' || hasBlockingChatOverlay()) {
const { activeSurface } = useUIStore.getState();
if (activeSurface !== 'chat' || hasBlockingChatOverlay()) {
return;
}
packages/ui/src/components/chat/FileAttachment.tsx
+5 -1
View File
@@ -2,6 +2,7 @@ import React, { useRef, memo } from 'react';
import { useInputStore } from '@/sync/input-store';
import type { AttachedFile } from '@/sync/session-ui-store';
import { useUIStore } from '@/stores/useUIStore';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
import { toast } from '@/components/ui';
import { cn } from '@/lib/utils';
import { openExternalUrl } from '@/lib/url';
@@ -833,7 +834,10 @@ export const MessageFilesDisplay = memo(({ files, onShowPopup, compact = false }
<button
type="button"
onClick={() => {
useUIStore.getState().navigateToDiagram(filePath);
const directory = useDirectoryStore.getState().currentDirectory;
if (directory) {
useUIStore.getState().openContextFile(directory, filePath);
}
}}
className={cn(
"flex items-center gap-2 p-2 rounded-lg border border-border/40 bg-muted/10 hover:bg-muted/20 transition-colors text-left cursor-pointer",
packages/ui/src/components/layout/Header.tsx
+7 -7
View File
@@ -434,7 +434,7 @@ export const Header: React.FC = () => {
const openContextOverview = useUIStore((state) => state.openContextOverview);
const openContextPlan = useUIStore((state) => state.openContextPlan);
const closeContextPanel = useUIStore((state) => state.closeContextPanel);
const activeMainTab = useUIStore((state) => state.activeMainTab);
const activeSurface = useUIStore((state) => state.activeSurface);
const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
@@ -612,7 +612,7 @@ export const Header: React.FC = () => {
}, [setWorkStatusOverlayOpen, setWorkStatusPanelEnabled, workStatusOverlayOpen, workStatusPanelEnabled, workStatusPanelFits]);
const showDesktopHeaderContextUsage = !isVSCode
&& !workStatusPanelVisible
&& activeMainTab === 'chat'
&& activeSurface === 'chat'
&& !!stableDesktopContextUsage
&& stableDesktopContextUsage.totalTokens > 0;
const desktopHeaderDisplayPercentage = stableDesktopContextUsage && stableDesktopContextUsage.contextLimit > 0
@@ -1153,8 +1153,8 @@ export const Header: React.FC = () => {
// Reset plan tab availability when session changes
React.useEffect(() => {
if (!planModeEnabled) {
if (useUIStore.getState().activeMainTab === 'plan') {
useUIStore.getState().setActiveMainTab('chat');
if (useUIStore.getState().activeSurface === 'plan') {
useUIStore.getState().setActiveSurface('chat');
}
return;
}
@@ -1167,8 +1167,8 @@ export const Header: React.FC = () => {
}
// If plan is not available but user is on plan tab, switch them back to chat
if (!planTabAvailable && useUIStore.getState().activeMainTab === 'plan') {
useUIStore.getState().setActiveMainTab('chat');
if (!planTabAvailable && useUIStore.getState().activeSurface === 'plan') {
useUIStore.getState().setActiveSurface('chat');
}
}, [
planModeEnabled,
@@ -1759,7 +1759,7 @@ export const Header: React.FC = () => {
className={cn(desktopHeaderIconButtonClass, 'mr-1')}
Icon={'picture-in-picture-2'}
/>
{activeMainTab === 'chat' && !isVSCode ? (
{activeSurface === 'chat' && !isVSCode ? (
<Tooltip>
<TooltipTrigger asChild>
<button
packages/ui/src/components/session/DirectoryExplorerDialog.tsx
+3 -3
View File
@@ -148,7 +148,7 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
const homeDirectory = useDirectoryStore((s) => s.homeDirectory);
const projects = useProjectsStore((s) => s.projects);
const addProject = useProjectsStore((s) => s.addProject);
const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
const setActiveSurface = useUIStore((s) => s.setActiveSurface);
const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
const openNewSessionDraft = useSessionUIStore((s) => s.openNewSessionDraft);
const gitIdentityProfiles = useGitIdentitiesStore((s) => s.profiles);
@@ -411,11 +411,11 @@ export const DirectoryExplorerDialog: React.FC<DirectoryExplorerDialogProps> = (
}, [onOpenChange]);
const openProjectDraft = React.useCallback((projectId: string, projectPath: string) => {
setActiveMainTab('chat');
setActiveSurface('chat');
if (isMobile) setSessionSwitcherOpen(false);
openNewSessionDraft({ selectedProjectId: projectId, directoryOverride: projectPath });
handleClose();
}, [handleClose, isMobile, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
}, [handleClose, isMobile, openNewSessionDraft, setActiveSurface, setSessionSwitcherOpen]);
const handleQuickAdd = React.useCallback((event: React.MouseEvent, path: string) => {
event.stopPropagation();
packages/ui/src/components/session/ScheduledTasksDialog.tsx
+2 -2
View File
@@ -370,7 +370,7 @@ export function ScheduledTasksDialog() {
setOpen(false);
if (isMobile) {
useFilesViewTabsStore.getState().setSelectedPath(selectedProject.path, task.loopFile, { allowOutsideRoot: true });
useUIStore.getState().setActiveMainTab('files');
useUIStore.getState().setActiveSurface('files');
return;
}
useUIStore.getState().openContextFile(selectedProject.path, task.loopFile);
@@ -397,7 +397,7 @@ export function ScheduledTasksDialog() {
// this surface (MainLayout closes surfaces on session selection).
const project = projects.find((entry) => entry.id === selectedProjectID);
useSessionUIStore.getState().setCurrentSession(sessionId, project?.path ?? null);
useUIStore.getState().setActiveMainTab('chat');
useUIStore.getState().setActiveSurface('chat');
}
} catch (error) {
toast.error(error instanceof Error ? error.message : t('sessions.scheduledTasks.dialog.toast.runFailed'));
packages/ui/src/components/session/SessionSidebar.tsx
+11 -11
View File
@@ -391,7 +391,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
const reorderProjects = useProjectsStore((state) => state.reorderProjects);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
const toggleHelpDialog = useUIStore((state) => state.toggleHelpDialog);
@@ -848,7 +848,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
sessionSearchQuery,
setSessionSearchQuery,
setIsSessionSearchOpen,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
setCurrentSession,
updateSessionTitle,
@@ -1698,7 +1698,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
alwaysShowActions={alwaysShowSidebarActions}
activeProjectId={activeProjectId}
setActiveProjectIdOnly={setActiveProjectIdOnly}
setActiveMainTab={setActiveMainTab}
setActiveSurface={setActiveSurface}
setSessionSwitcherOpen={setSessionSwitcherOpen}
openNewSessionDraft={openNewSessionDraftFromTree}
addSessionToFolder={addSessionToFolder}
@@ -1741,7 +1741,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
alwaysShowSidebarActions,
activeProjectId,
setActiveProjectIdOnly,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
openNewSessionDraftFromTree,
addSessionToFolder,
@@ -1763,12 +1763,12 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
const handleOpenNewSessionDraftFromHeader = React.useCallback(() => {
useUIStore.getState().closeMainSurfaces();
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
openNewSessionDraft();
}, [mobileVariant, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
}, [mobileVariant, openNewSessionDraft, setActiveSurface, setSessionSwitcherOpen]);
const renderChatsSection = React.useCallback((items: ActivityItem[]) => {
const chatsRoot = getChatsRootForHome(homeDirectory)
@@ -1850,12 +1850,12 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
setBulkDeleteConfirm,
});
const handleOpenMultiRunFromHeader = React.useCallback(() => {
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
openMultiRunLauncher();
}, [mobileVariant, openMultiRunLauncher, setActiveMainTab, setSessionSwitcherOpen]);
}, [mobileVariant, openMultiRunLauncher, setActiveSurface, setSessionSwitcherOpen]);
return (
// One shared tooltip provider for the whole sidebar: session tooltips open
@@ -1889,7 +1889,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
handleSessionSelect={stableHandleSessionSelect}
mobileVariant={mobileVariant}
openNewSessionDraft={openNewSessionDraft}
setActiveMainTab={setActiveMainTab}
setActiveSurface={setActiveSurface}
setSessionSwitcherOpen={setSessionSwitcherOpen}
sessionOwnerBySessionId={sessionOwnership.bySessionId}
/>
@@ -1959,7 +1959,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
alwaysShowActions={alwaysShowSidebarActions}
toggleProject={toggleProject}
setActiveProjectIdOnly={setActiveProjectIdOnly}
setActiveMainTab={setActiveMainTab}
setActiveSurface={setActiveSurface}
setSessionSwitcherOpen={setSessionSwitcherOpen}
openNewSessionDraft={openNewSessionDraftFromTree}
openNewWorktreeDialog={openNewWorktreeDialog}
@@ -2033,7 +2033,7 @@ const SessionSidebarComponent: React.FC<SessionSidebarProps> = ({
open={newWorktreeDialogOpen}
onOpenChange={setNewWorktreeDialogOpen}
onWorktreeCreated={(worktreePath, options) => {
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
packages/ui/src/components/session/SessionSwitcherDropdown.tsx
+3 -3
View File
@@ -71,14 +71,14 @@ type SwitcherContentProps = {
function SwitcherContent({ onSelect, variant, scopeProjectId }: SwitcherContentProps): React.ReactElement {
const items = useSwitcherItems(true, { scopeProjectId });
const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const { t } = useI18n();
const handleNewSession = React.useCallback(() => {
setActiveMainTab('chat');
setActiveSurface('chat');
onSelect();
openNewSessionDraft();
}, [onSelect, openNewSessionDraft, setActiveMainTab]);
}, [onSelect, openNewSessionDraft, setActiveSurface]);
const [expandedParents, setExpandedParents] = React.useState<Set<string>>(new Set());
const toggleParent = React.useCallback((sessionId: string) => {
packages/ui/src/components/session/project-context/useProjectTodoSend.ts
+3 -3
View File
@@ -44,13 +44,13 @@ export const useProjectTodoSend = (options: {
const sendMessage = useSessionUIStore((state) => state.sendMessage);
const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
const setPendingInputText = useInputStore((state) => state.setPendingInputText);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
const routeToChat = React.useCallback(() => {
setActiveMainTab('chat');
setActiveSurface('chat');
setSessionSwitcherOpen(false);
}, [setActiveMainTab, setSessionSwitcherOpen]);
}, [setActiveSurface, setSessionSwitcherOpen]);
const sendToCurrentSession = React.useCallback(
(todoText: string) => {
packages/ui/src/components/session/sidebar/SessionGroupSection.tsx
+6 -6
View File
@@ -14,7 +14,7 @@ import { Button } from '@/components/ui/button';
import { Icon } from "@/components/icon/Icon";
import { cn } from '@/lib/utils';
import { sessionEvents } from '@/lib/sessionEvents';
import type { MainTab } from '@/stores/useUIStore';
import type { WorkspaceSurface } from '@/stores/useUIStore';
import { SessionFolderItem } from '../SessionFolderItem';
import type { SortableDragHandleProps } from './sortableItems';
import { DroppableFolderWrapper, SessionFolderDndScope } from './sessionFolderDnd';
@@ -84,7 +84,7 @@ type Props = {
alwaysShowActions: boolean;
activeProjectId: string | null;
setActiveProjectIdOnly: (id: string) => void;
setActiveMainTab: (tab: MainTab) => void;
setActiveSurface: (tab: WorkspaceSurface) => void;
setSessionSwitcherOpen: (open: boolean) => void;
openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null; targetFolderId?: string; target?: 'chat' | 'project' }) => void;
addSessionToFolder: (scopeKey: string, folderId: string, sessionId: string) => void;
@@ -265,7 +265,7 @@ const areGroupPropsEqual = (prev: Props, next: Props): boolean => {
&& prev.alwaysShowActions === next.alwaysShowActions
&& prev.activeProjectId === next.activeProjectId
&& prev.setActiveProjectIdOnly === next.setActiveProjectIdOnly
&& prev.setActiveMainTab === next.setActiveMainTab
&& prev.setActiveSurface === next.setActiveSurface
&& prev.setSessionSwitcherOpen === next.setSessionSwitcherOpen
&& prev.openNewSessionDraft === next.openNewSessionDraft
&& prev.addSessionToFolder === next.addSessionToFolder
@@ -307,7 +307,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
alwaysShowActions,
activeProjectId,
setActiveProjectIdOnly,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
openNewSessionDraft,
addSessionToFolder,
@@ -880,7 +880,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
depth={0}
onNewSession={() => {
if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) setSessionSwitcherOpen(false);
openNewSessionDraft({
selectedProjectId: projectId,
@@ -1248,7 +1248,7 @@ function SessionGroupSectionBase(props: Props): React.ReactNode {
onClick={(event) => {
event.stopPropagation();
if (projectId && projectId !== activeProjectId) setActiveProjectIdOnly(projectId);
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) setSessionSwitcherOpen(false);
openNewSessionDraft({ selectedProjectId: projectId, directoryOverride: group.directory });
}}
packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
+4 -4
View File
@@ -16,7 +16,7 @@ import type { SortableDragHandleProps } from './sortableItems';
import { ProjectHeaderIdentity, SortableGroupItem, SortableProjectItem } from './sortableItems';
import { formatProjectLabel } from './utils';
import { useI18n } from '@/lib/i18n';
import type { MainTab } from '@/stores/useUIStore';
import type { WorkspaceSurface } from '@/stores/useUIStore';
import type { ProjectSortOrder } from '@/stores/useSessionDisplayStore';
import { streamPerfCount } from '@/stores/utils/streamDebug';
import { Icon } from '@/components/icon/Icon';
@@ -91,7 +91,7 @@ type Props = {
alwaysShowActions: boolean;
toggleProject: (id: string) => void;
setActiveProjectIdOnly: (id: string) => void;
setActiveMainTab: (tab: MainTab) => void;
setActiveSurface: (tab: WorkspaceSurface) => void;
setSessionSwitcherOpen: (open: boolean) => void;
openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
openNewWorktreeDialog: () => void;
@@ -362,7 +362,7 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
}}
onNewSession={() => {
if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
props.setActiveMainTab('chat');
props.setActiveSurface('chat');
if (props.mobileVariant) props.setSessionSwitcherOpen(false);
props.openNewSessionDraft({
selectedProjectId: projectKey,
@@ -371,7 +371,7 @@ function SidebarProjectsListComponent(props: Props): React.ReactNode {
}}
onNewWorktreeSession={() => {
if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
props.setActiveMainTab('chat');
props.setActiveSurface('chat');
props.openNewWorktreeDialog();
}}
onManageWorktrees={() => props.openWorktreesPage(projectKey)}
packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts
+5 -5
View File
@@ -2,7 +2,7 @@ import React from 'react';
import type { Session } from '@opencode-ai/sdk/v2';
import type { SessionGroup, SessionNode } from '../types';
import { normalizePath } from '../utils';
import type { MainTab } from '@/stores/useUIStore';
import type { WorkspaceSurface } from '@/stores/useUIStore';
import { useUIStore } from '@/stores/useUIStore';
import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -22,7 +22,7 @@ type Args = {
newSessionDraftOpen: boolean;
mobileVariant: boolean;
openNewSessionDraft: (options?: { selectedProjectId?: string | null; directoryOverride?: string | null }) => void;
setActiveMainTab: (tab: MainTab) => void;
setActiveSurface: (tab: WorkspaceSurface) => void;
setSessionSwitcherOpen: (open: boolean) => void;
};
@@ -101,7 +101,7 @@ export const useProjectSessionSelection = (args: Args): void => {
newSessionDraftOpen,
mobileVariant,
openNewSessionDraft,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
} = args;
@@ -205,7 +205,7 @@ export const useProjectSessionSelection = (args: Args): void => {
previousActiveProjectRef.current = activeProjectId;
if (selection.kind === 'open-draft') {
setActiveMainTab('chat');
setActiveSurface('chat');
if (mobileVariant) {
setSessionSwitcherOpen(false);
}
@@ -232,7 +232,7 @@ export const useProjectSessionSelection = (args: Args): void => {
openNewSessionDraft,
projectSections,
projectSessionMeta,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
setActiveSessionByProject,
]);
packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts
+3 -3
View File
@@ -3,7 +3,7 @@ import type { Session } from '@opencode-ai/sdk/v2';
import { toast } from '@/components/ui';
import { copyTextToClipboard } from '@/lib/clipboard';
import { useI18n } from '@/lib/i18n';
import type { MainTab } from '@/stores/useUIStore';
import type { WorkspaceSurface } from '@/stores/useUIStore';
import { useUIStore } from '@/stores/useUIStore';
import { streamPerfMark } from '@/stores/utils/streamDebug';
import { useSessionUIStore } from '@/sync/session-ui-store';
@@ -30,7 +30,7 @@ type Args = {
sessionSearchQuery: string;
setSessionSearchQuery: (value: string) => void;
setIsSessionSearchOpen: (open: boolean) => void;
setActiveMainTab: (tab: MainTab) => void;
setActiveSurface: (tab: WorkspaceSurface) => void;
setSessionSwitcherOpen: (open: boolean) => void;
setCurrentSession: (sessionId: string | null, directoryHint?: string | null) => void;
updateSessionTitle: (id: string, title: string) => Promise<void>;
@@ -79,7 +79,7 @@ export const useSessionActions = (args: Args) => {
};
if (args.mobileVariant) {
args.setActiveMainTab('chat');
args.setActiveSurface('chat');
args.setSessionSwitcherOpen(false);
}
packages/ui/src/components/ui/CommandPalette.tsx
+3 -3
View File
@@ -81,7 +81,7 @@ export const CommandPalette: React.FC = () => {
const isCommandPaletteOpen = useUIStore((s) => s.isCommandPaletteOpen);
const setCommandPaletteOpen = useUIStore((s) => s.setCommandPaletteOpen);
const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
const setActiveSurface = useUIStore((s) => s.setActiveSurface);
const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen);
const setSettingsPage = useUIStore((s) => s.setSettingsPage);
const setSessionSwitcherOpen = useUIStore((s) => s.setSessionSwitcherOpen);
@@ -170,7 +170,7 @@ export const CommandPalette: React.FC = () => {
shortcutId: 'new_chat',
searchText: t('commandPalette.item.newSession'),
onSelect: run(() => {
setActiveMainTab('chat');
setActiveSurface('chat');
setSessionSwitcherOpen(false);
openNewSessionDraft();
}),
@@ -263,7 +263,7 @@ export const CommandPalette: React.FC = () => {
t,
run,
isMobile,
setActiveMainTab,
setActiveSurface,
setSessionSwitcherOpen,
openNewSessionDraft,
toggleSidebar,
packages/ui/src/components/views/ArchiveView.tsx
+3 -3
View File
@@ -28,7 +28,7 @@ export function ArchiveView(): React.ReactNode {
const { t } = useI18n();
const open = useUIStore((state) => state.isArchivePageOpen);
const setOpen = useUIStore((state) => state.setArchivePageOpen);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
const unarchiveSession = useSessionUIStore((state) => state.unarchiveSession);
const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
@@ -86,9 +86,9 @@ export function ArchiveView(): React.ReactNode {
const openSession = React.useCallback((session: Session) => {
const directory = normalizePath(resolveGlobalSessionDirectory(session));
setCurrentSession(session.id, directory ?? undefined);
setActiveMainTab('chat');
setActiveSurface('chat');
setOpen(false);
}, [setActiveMainTab, setCurrentSession, setOpen]);
}, [setActiveSurface, setCurrentSession, setOpen]);
const restoreSession = React.useCallback((session: Session) => {
void unarchiveSession(session.id).then((success) => {
packages/ui/src/components/views/DiagramView.tsx
-102
View File
@@ -1,102 +0,0 @@
import React from 'react';
import { useUIStore } from '@/stores/useUIStore';
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { useI18n } from '@/lib/i18n';
import { DiagramEditor, type DiagramEditorHandle } from '@/components/diagram';
import { Icon } from '@/components/icon/Icon';
export function DiagramView() {
const { t } = useI18n();
const { files } = useRuntimeAPIs();
const [filePath, setFilePath] = React.useState<string | null>(null);
const [xml, setXml] = React.useState('');
const [loading, setLoading] = React.useState(true);
const editorRef = React.useRef<DiagramEditorHandle>(null);
const pendingDiagramFile = useUIStore((state) => state.pendingDiagramFile);
const loadFile = React.useCallback(async (path: string) => {
setLoading(true);
setFilePath(path);
try {
const result = await files?.readFile?.(path);
if (result) {
setXml(result.content);
}
} catch {
setXml('');
} finally {
setLoading(false);
}
}, [files]);
React.useEffect(() => {
if (!pendingDiagramFile) {
return;
}
const pending = useUIStore.getState().consumePendingDiagramFile();
if (pending) {
void loadFile(pending);
}
}, [loadFile, pendingDiagramFile]);
const saveDiagram = React.useCallback(async () => {
const newXml = editorRef.current?.getXml();
if (filePath && files?.writeFile && newXml && newXml !== xml) {
await files.writeFile(filePath, newXml);
setXml(newXml);
}
}, [filePath, files, xml]);
const fileName = filePath ? filePath.split('/').pop() || filePath : '';
if (!filePath) {
return (
<div className="flex h-full items-center justify-center p-3">
<div className="typography-ui text-muted-foreground">
{t('filesView.editor.pickFileFromTree')}
</div>
</div>
);
}
if (loading) {
return (
<div className="flex h-full items-center justify-center p-3">
<Icon name="loader-4" className="size-4 animate-spin" />
</div>
);
}
return (
<div className="flex h-full flex-col">
<div className="flex items-center gap-2 border-b border-border/30 px-3 py-1.5">
<Icon name="file" className="size-4 shrink-0 text-muted-foreground" />
<span className="typography-ui text-muted-foreground truncate flex-1">{fileName}</span>
<button
type="button"
onClick={() => void saveDiagram()}
className="size-6 flex items-center justify-center rounded-md text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
title={t('filesView.diagram.saveDiagram')}
>
<Icon name="save-3" className="size-4" />
</button>
<button
type="button"
onClick={() => useUIStore.getState().setActiveMainTab('chat')}
className="size-6 flex items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
title={t('filesView.diagram.closeDiagramView')}
>
<Icon name="close" className="size-4" />
</button>
</div>
<div className="flex-1 min-h-0">
<DiagramEditor
ref={editorRef}
xml={xml}
className="h-full"
/>
</div>
</div>
);
}
packages/ui/src/components/views/FilesView.tsx
+16 -16
View File
@@ -939,7 +939,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false);
const pendingSelectFileRef = React.useRef<FileNode | null>(null);
const pendingTabRef = React.useRef<import('@/stores/useUIStore').MainTab | null>(null);
const pendingTabRef = React.useRef<import('@/stores/useUIStore').WorkspaceSurface | null>(null);
const pendingClosePathRef = React.useRef<string | null>(null);
const skipDirtyOnceRef = React.useRef(false);
const copiedContentTimeoutRef = React.useRef<number | null>(null);
@@ -1029,7 +1029,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
const [isDragging, setIsDragging] = React.useState(false);
// Session/config for sending comments
const setMainTabGuard = useUIStore((state) => state.setMainTabGuard);
const setSurfaceGuard = useUIStore((state) => state.setSurfaceGuard);
const pendingFileNavigation = useUIStore((state) => state.pendingFileNavigation);
const setPendingFileNavigation = useUIStore((state) => state.setPendingFileNavigation);
const pendingFileFocusPath = useUIStore((state) => state.pendingFileFocusPath);
@@ -1098,10 +1098,10 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
React.useEffect(() => {
setLineSelection(null);
reset();
setMainTabGuard(null);
setSurfaceGuard(null);
setDraftContent('');
setIsSaving(false);
}, [selectedFile?.path, reset, setMainTabGuard]);
}, [selectedFile?.path, reset, setSurfaceGuard]);
React.useEffect(() => {
setCommentSelection(lineSelection);
@@ -1713,11 +1713,11 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
React.useEffect(() => {
if (!isDirty) {
setMainTabGuard(null);
setSurfaceGuard(null);
return;
}
const guard = (_nextTab: import('@/stores/useUIStore').MainTab) => {
const guard = (_nextTab: import('@/stores/useUIStore').WorkspaceSurface) => {
if (skipDirtyOnceRef.current) {
skipDirtyOnceRef.current = false;
return true;
@@ -1727,15 +1727,15 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
return false;
};
setMainTabGuard(guard);
setSurfaceGuard(guard);
return () => {
const currentGuard = useUIStore.getState().mainTabGuard;
const currentGuard = useUIStore.getState().surfaceGuard;
if (currentGuard === guard) {
setMainTabGuard(null);
setSurfaceGuard(null);
}
};
}, [isDirty, setMainTabGuard]);
}, [isDirty, setSurfaceGuard]);
React.useEffect(() => {
if (autoSaveEnabled) {
@@ -2180,10 +2180,10 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
}
if (nextTab) {
setMainTabGuard(null);
useUIStore.getState().setActiveMainTab(nextTab);
setSurfaceGuard(null);
useUIStore.getState().setActiveSurface(nextTab);
}
}, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setMainTabGuard, setSelectedPath]);
}, [displayedContent, handleSelectFile, isMobile, removeOpenPath, root, selectedFile?.path, setSurfaceGuard, setSelectedPath]);
const saveAndContinue = React.useCallback(async () => {
const nextFile = pendingSelectFileRef.current;
@@ -2234,10 +2234,10 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
}
if (nextTab) {
setMainTabGuard(null);
useUIStore.getState().setActiveMainTab(nextTab);
setSurfaceGuard(null);
useUIStore.getState().setActiveSurface(nextTab);
}
}, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setMainTabGuard, setSelectedPath]);
}, [handleSelectFile, isMobile, removeOpenPath, root, saveDraft, selectedFile?.path, setSurfaceGuard, setSelectedPath]);
const handleCloseFile = React.useCallback((path: string) => {
const isActive = selectedFile?.path === path;
packages/ui/src/components/views/PlanView.tsx
+3 -3
View File
@@ -168,7 +168,7 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null, projectPl
const activeProjectId = useProjectsStore((state) => state.activeProjectId);
const gitDirectories = useGitStore((state) => state.directories);
const effectiveDirectory = useEffectiveDirectory() ?? '';
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
const runtimeApis = useRuntimeAPIs();
const { isMobile } = useDeviceInfo();
@@ -579,10 +579,10 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null, projectPl
}, []);
const routeToChat = React.useCallback(() => {
setActiveMainTab('chat');
setActiveSurface('chat');
setSessionSwitcherOpen(false);
onNavigatedToChat?.();
}, [onNavigatedToChat, setActiveMainTab, setSessionSwitcherOpen]);
}, [onNavigatedToChat, setActiveSurface, setSessionSwitcherOpen]);
const handleConfirmPlanSend = React.useCallback(
async (execution: TodoSendExecution) => {
packages/ui/src/components/views/git/ConflictDialog.tsx
+3 -3
View File
@@ -41,7 +41,7 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
const setPendingInputText = useInputStore((state) => state.setPendingInputText);
const setPendingSyntheticParts = useInputStore((state) => state.setPendingSyntheticParts);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const [isLoading, setIsLoading] = React.useState(false);
const [conflictDetails, setConflictDetails] = React.useState<MergeConflictDetails | null>(null);
@@ -137,7 +137,7 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
{ text: context.payloadText, synthetic: true },
]);
setActiveMainTab('chat');
setActiveSurface('chat');
onClearState?.();
onOpenChange(false);
};
@@ -159,7 +159,7 @@ export const ConflictDialog: React.FC<ConflictDialogProps> = ({
],
});
// Navigate to chat tab so user sees the new session
setActiveMainTab('chat');
setActiveSurface('chat');
onClearState?.();
onOpenChange(false);
};
packages/ui/src/components/views/git/IntegrateCommitsSection.tsx
+4 -4
View File
@@ -65,7 +65,7 @@ export const IntegrateCommitsSection: React.FC<{
}) => {
const { t } = useI18n();
const currentSessionId = useSessionUIStore((s) => s.currentSessionId);
const setActiveMainTab = useUIStore((s) => s.setActiveMainTab);
const setActiveSurface = useUIStore((s) => s.setActiveSurface);
const [branchDropdownOpen, setBranchDropdownOpen] = React.useState(false);
const [branchSearch, setBranchSearch] = React.useState('');
const searchInputRef = React.useRef<HTMLInputElement>(null);
@@ -236,7 +236,7 @@ export const IntegrateCommitsSection: React.FC<{
],
});
// Navigate to chat tab so user sees the new session
setActiveMainTab('chat');
setActiveSurface('chat');
return;
}
@@ -251,8 +251,8 @@ export const IntegrateCommitsSection: React.FC<{
{ text: context.instructionsText, synthetic: true },
{ text: context.payloadText, synthetic: true },
]);
setActiveMainTab('chat');
}, [currentSessionId, setActiveMainTab, buildConflictContext, openNewSessionDraft, setPendingInputText, setPendingSyntheticParts, t]);
setActiveSurface('chat');
}, [currentSessionId, setActiveSurface, buildConflictContext, openNewSessionDraft, setPendingInputText, setPendingSyntheticParts, t]);
const handleMove = React.useCallback(async () => {
if (ui.kind !== 'ready') return;
packages/ui/src/components/views/git/PullRequestSection.tsx
+7 -7
View File
@@ -327,7 +327,7 @@ export const PullRequestSection: React.FC<{
const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
const setSettingsPage = useUIStore((state) => state.setSettingsPage);
const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
const setActiveSurface = useUIStore((state) => state.setActiveSurface);
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
const newSessionDraftOpen = useSessionUIStore((state) => Boolean(state.newSessionDraft?.open));
const { isMobile, hasTouchInput, screenWidth } = useDeviceInfo();
@@ -986,14 +986,14 @@ export const PullRequestSection: React.FC<{
text: '',
});
}
setActiveMainTab('chat');
setActiveSurface('chat');
} catch (e) {
const message = e instanceof Error ? e.message : String(e);
toast.error(t('gitView.pr.toast.loadChecksFailed'), { description: message });
} finally {
setIsAttachingChecks(false);
}
}, [directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveMainTab, status?.repo, t]);
}, [directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveSurface, status?.repo, t]);
const sendCommentsToChat = React.useCallback(async () => {
if (!github?.prContext) {
@@ -1021,14 +1021,14 @@ export const PullRequestSection: React.FC<{
for (const comment of timelineComments) {
attachCommentDraft(target, comment);
}
setActiveMainTab('chat');
setActiveSurface('chat');
} catch (e) {
const message = e instanceof Error ? e.message : String(e);
toast.error(t('gitView.pr.toast.loadPrCommentsFailed'), { description: message });
} finally {
setIsAttachingComments(false);
}
}, [attachCommentDraft, directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveMainTab, status?.repo, t, timelineComments]);
}, [attachCommentDraft, directory, ensurePrContext, github, pr, resolveDraftTarget, setActiveSurface, status?.repo, t, timelineComments]);
const sendSingleCommentToChat = React.useCallback(async (comment: TimelineCommentItem) => {
const target = resolveDraftTarget();
@@ -1037,8 +1037,8 @@ export const PullRequestSection: React.FC<{
}
attachCommentDraft(target, comment);
setActiveMainTab('chat');
}, [attachCommentDraft, resolveDraftTarget, setActiveMainTab]);
setActiveSurface('chat');
}, [attachCommentDraft, resolveDraftTarget, setActiveSurface]);
const refresh = React.useCallback(async (options?: { force?: boolean; onlyExistingPr?: boolean; silent?: boolean; markInitialResolved?: boolean }) => {
await refreshPrStatus(prStatusKey, options);