Carlos Florêncio
478 lines
16 KiB
TypeScript
478 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useState,
|
|
type KeyboardEvent as ReactKeyboardEvent,
|
|
type PointerEvent as ReactPointerEvent,
|
|
} from "react";
|
|
import { DockviewDefaultTab, type IDockviewPanelHeaderProps } from "dockview-react";
|
|
import { IconStar } from "@tabler/icons-react";
|
|
import { AgentLogo } from "@/components/agent-logo";
|
|
import { GridSpinner } from "@/components/grid-spinner";
|
|
import { ContextMenu, ContextMenuTrigger } from "@kandev/ui/context-menu";
|
|
import { useAppStore, useAppStoreApi } from "@/components/state-provider";
|
|
import { useToast } from "@/components/toast-provider";
|
|
import { renameSession } from "@/lib/api/domains/session-api";
|
|
import {
|
|
useSessionActions,
|
|
isSessionDeletable as isDeletable,
|
|
} from "@/hooks/domains/session/use-session-actions";
|
|
import { shareableSessionStateClient } from "@/components/task/share/share-button";
|
|
import type { HandoffPreset } from "@/components/task/new-session-dialog";
|
|
import { usableConfigOptions } from "@/components/model-config-selector";
|
|
import { SessionContextMenuItems, SessionTabDialogs } from "./session-tab-menu";
|
|
import type { TaskSessionState } from "@/lib/types/http";
|
|
import {
|
|
markSessionTabUserActivationIntent,
|
|
shouldMarkSessionTabUserActivationIntent,
|
|
} from "./session-tab-activation-intent";
|
|
import { isSessionActive } from "./session-sort";
|
|
import { resolveSessionTabTitle } from "./session-tab-title";
|
|
import { TabRenameInput } from "./tab-rename-input";
|
|
import { useTabMaximizeOnDoubleClick } from "./use-tab-maximize";
|
|
import { SessionTabCloseAction } from "./session-tab-close-action";
|
|
import { useSessionTabDelete } from "./use-session-tab-delete";
|
|
|
|
function useSessionTabState(sessionId: string | undefined) {
|
|
const isPrimary = useAppStore((state) => {
|
|
const activeTaskId = state.tasks.activeTaskId;
|
|
if (!activeTaskId || !sessionId) return false;
|
|
const task = state.kanban.tasks.find((t: { id: string }) => t.id === activeTaskId);
|
|
if (task?.primarySessionId) return task.primarySessionId === sessionId;
|
|
return state.taskSessions.items[sessionId]?.is_primary === true;
|
|
});
|
|
const sessionState = useAppStore((state) => {
|
|
if (!sessionId) return null;
|
|
return state.taskSessions.items[sessionId]?.state ?? null;
|
|
}) as TaskSessionState | null;
|
|
const taskId = useAppStore((state) => state.tasks.activeTaskId);
|
|
const sessionName = useAppStore((state) => {
|
|
if (!sessionId) return null;
|
|
return state.taskSessions.items[sessionId]?.name ?? null;
|
|
});
|
|
const tabTitle = useAppStore((state) => {
|
|
if (!sessionId) return null;
|
|
const session = state.taskSessions.items[sessionId];
|
|
const sessionModels = state.sessionModels.bySessionId[sessionId];
|
|
const activeModelId = state.activeModel.bySessionId[sessionId] || null;
|
|
const agentLabel = (() => {
|
|
if (!session?.agent_profile_id) return null;
|
|
const profile = state.agentProfiles.items.find(
|
|
(p: { id: string }) => p.id === session.agent_profile_id,
|
|
);
|
|
if (!profile) return null;
|
|
const parts = profile.label.split(" \u2022 ");
|
|
return parts[1] || parts[0] || profile.label;
|
|
})();
|
|
const snapshotModel =
|
|
typeof session?.agent_profile_snapshot?.model === "string"
|
|
? session.agent_profile_snapshot.model
|
|
: null;
|
|
return resolveSessionTabTitle({
|
|
customName: session?.name ?? null,
|
|
agentLabel,
|
|
activeModelId,
|
|
currentModelId: sessionModels?.currentModelId || null,
|
|
snapshotModel,
|
|
modelOptions:
|
|
sessionModels?.models.map((model) => ({
|
|
id: model.modelId,
|
|
name: model.name,
|
|
description: model.description,
|
|
usageMultiplier: model.usageMultiplier,
|
|
})) ?? [],
|
|
configOptions: usableConfigOptions(sessionModels?.configOptions),
|
|
});
|
|
});
|
|
const agentName = useAppStore((state) => {
|
|
if (!sessionId) return null;
|
|
const session = state.taskSessions.items[sessionId];
|
|
if (!session?.agent_profile_id) return null;
|
|
return (
|
|
state.agentProfiles.items.find((p: { id: string }) => p.id === session.agent_profile_id)
|
|
?.agent_name ?? null
|
|
);
|
|
});
|
|
const sessionNumber = useAppStore((state) => {
|
|
if (!sessionId) return null;
|
|
const activeTaskId = state.tasks.activeTaskId;
|
|
const sessions = activeTaskId ? state.taskSessionsByTask.itemsByTaskId[activeTaskId] : null;
|
|
if (!sessions) return null;
|
|
// Sort chronologically (oldest first) so indexes are stable regardless of
|
|
// which session is primary or the backend's default DESC ordering.
|
|
const sorted = [...sessions].sort(
|
|
(a: { started_at: string }, b: { started_at: string }) =>
|
|
new Date(a.started_at).getTime() - new Date(b.started_at).getTime(),
|
|
);
|
|
const idx = sorted.findIndex((s: { id: string }) => s.id === sessionId);
|
|
return idx >= 0 ? idx + 1 : null;
|
|
});
|
|
const sessionCount = useAppStore((state) => {
|
|
const activeTaskId = state.tasks.activeTaskId;
|
|
if (!activeTaskId) return 0;
|
|
return state.taskSessionsByTask.itemsByTaskId[activeTaskId]?.length ?? 0;
|
|
});
|
|
return {
|
|
isPrimary,
|
|
sessionState,
|
|
taskId,
|
|
tabTitle,
|
|
sessionName,
|
|
agentName,
|
|
sessionNumber,
|
|
sessionCount,
|
|
};
|
|
}
|
|
|
|
/** Mirrors the backend's maxSessionNameLength so the optimistic store update
|
|
* matches what the rename broadcast will echo back. */
|
|
const MAX_SESSION_NAME_LENGTH = 120;
|
|
|
|
/** Commit a session tab rename: persist via WS and optimistically update the store. */
|
|
function useSessionRenameCommitter(
|
|
sessionId: string | undefined,
|
|
taskId: string | null,
|
|
currentName: string | null,
|
|
onDone: () => void,
|
|
) {
|
|
const appStoreApi = useAppStoreApi();
|
|
const { toast } = useToast();
|
|
return useCallback(
|
|
async (next: string) => {
|
|
onDone();
|
|
if (!sessionId || !taskId) return;
|
|
const normalized = next.trim().slice(0, MAX_SESSION_NAME_LENGTH);
|
|
if ((currentName ?? "") === normalized) return;
|
|
try {
|
|
await renameSession(sessionId, normalized);
|
|
const existing = appStoreApi.getState().taskSessions.items[sessionId];
|
|
if (existing) {
|
|
appStoreApi
|
|
.getState()
|
|
.upsertTaskSessionFromEvent(taskId, { ...existing, name: normalized });
|
|
}
|
|
} catch (error) {
|
|
console.error("rename session:", error);
|
|
toast({
|
|
title: "Rename failed",
|
|
description: error instanceof Error ? error.message : "Unknown error",
|
|
variant: "error",
|
|
});
|
|
}
|
|
},
|
|
[sessionId, taskId, currentName, appStoreApi, onDone, toast],
|
|
);
|
|
}
|
|
|
|
function useSessionTabActions(
|
|
sessionId: string | undefined,
|
|
taskId: string | null,
|
|
api: IDockviewPanelHeaderProps["api"],
|
|
containerApi: IDockviewPanelHeaderProps["containerApi"],
|
|
) {
|
|
const onDeleted = useCallback(() => {
|
|
const panel = containerApi.getPanel(api.id);
|
|
if (panel) containerApi.removePanel(panel);
|
|
}, [api.id, containerApi]);
|
|
const {
|
|
setPrimary: handleSetPrimary,
|
|
stop: handleStop,
|
|
resume: handleResume,
|
|
remove: handleDelete,
|
|
} = useSessionActions({ sessionId, taskId, onDeleted });
|
|
const handleCloseOthers = useCallback(() => {
|
|
const toClose = api.group.panels.filter((p) => p.id !== api.id);
|
|
for (const panel of toClose) containerApi.removePanel(panel);
|
|
}, [api, containerApi]);
|
|
return { handleSetPrimary, handleStop, handleResume, handleDelete, handleCloseOthers };
|
|
}
|
|
|
|
function useSessionTabUserActivationIntent(
|
|
sessionId: string | undefined,
|
|
activeSessionId: string | null,
|
|
isActive: boolean,
|
|
) {
|
|
const markUserActivationIntent = useCallback(
|
|
(target: EventTarget | null) => {
|
|
if (
|
|
!shouldMarkSessionTabUserActivationIntent({ sessionId, activeSessionId, isActive, target })
|
|
)
|
|
return;
|
|
markSessionTabUserActivationIntent(sessionId);
|
|
},
|
|
[activeSessionId, isActive, sessionId],
|
|
);
|
|
const handlePointerDownCapture = useCallback(
|
|
(event: ReactPointerEvent) => {
|
|
if (event.button === 0) markUserActivationIntent(event.target);
|
|
},
|
|
[markUserActivationIntent],
|
|
);
|
|
const handleKeyDownCapture = useCallback(
|
|
(event: ReactKeyboardEvent) => {
|
|
if (event.key === "Enter" || event.key === " ") markUserActivationIntent(event.target);
|
|
},
|
|
[markUserActivationIntent],
|
|
);
|
|
return { handlePointerDownCapture, handleKeyDownCapture };
|
|
}
|
|
|
|
function useDockviewTabActiveState(api: IDockviewPanelHeaderProps["api"]) {
|
|
const [isActive, setIsActive] = useState(api.isActive);
|
|
useEffect(() => {
|
|
const disposable = api.onDidActiveChange((e) => setIsActive(e.isActive));
|
|
return () => disposable.dispose();
|
|
}, [api]);
|
|
return isActive;
|
|
}
|
|
|
|
function SessionTabTriggerContent({
|
|
props,
|
|
sessionId,
|
|
isPrimary,
|
|
showMultiSessionBadges,
|
|
sessionNumber,
|
|
agentName,
|
|
sessionState,
|
|
isActive,
|
|
showDeleteOnClose,
|
|
isDeleting,
|
|
onCloseTab,
|
|
}: {
|
|
props: IDockviewPanelHeaderProps;
|
|
sessionId: string | undefined;
|
|
isPrimary: boolean;
|
|
showMultiSessionBadges: boolean;
|
|
sessionNumber: number | null;
|
|
agentName: string | null;
|
|
sessionState: TaskSessionState | null;
|
|
isActive: boolean;
|
|
showDeleteOnClose: boolean;
|
|
isDeleting: boolean;
|
|
onCloseTab: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center">
|
|
{isPrimary && showMultiSessionBadges && (
|
|
<IconStar className="h-3 w-3 fill-foreground/50 stroke-0 shrink-0 ml-2" />
|
|
)}
|
|
{sessionNumber != null && showMultiSessionBadges && (
|
|
<span className="ml-1.5 text-[11px] font-medium leading-none text-muted-foreground bg-foreground/10 rounded px-1.5 py-0.5">
|
|
{sessionNumber}
|
|
</span>
|
|
)}
|
|
{agentName &&
|
|
(isSessionActive(sessionState) ? (
|
|
<GridSpinner
|
|
className={`ml-1.5 shrink-0 text-[14px] text-muted-foreground${isActive ? "" : " opacity-50"}`}
|
|
/>
|
|
) : (
|
|
<AgentLogo
|
|
agentName={agentName}
|
|
size={14}
|
|
className={`ml-1.5 shrink-0${isActive ? "" : " opacity-50"}`}
|
|
/>
|
|
))}
|
|
<DockviewDefaultTab {...props} hideClose />
|
|
{showDeleteOnClose && (
|
|
<SessionTabCloseAction sessionId={sessionId} isDeleting={isDeleting} onClose={onCloseTab} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Bundles the open/close state for the tab's dialogs and inline rename. */
|
|
function useSessionTabDialogState(sessionId: string | undefined) {
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
const [isRenaming, setIsRenaming] = useState(false);
|
|
const [shareOpen, setShareOpen] = useState(false);
|
|
const [handoffOpen, setHandoffOpen] = useState(false);
|
|
const [handoffPreset, setHandoffPreset] = useState<HandoffPreset | null>(null);
|
|
const handleHandoffProfile = useCallback(
|
|
(profileId: string) => {
|
|
if (!sessionId) return;
|
|
setHandoffPreset({ sourceSessionId: sessionId, targetProfileId: profileId });
|
|
setHandoffOpen(true);
|
|
},
|
|
[sessionId],
|
|
);
|
|
return {
|
|
confirmDelete,
|
|
setConfirmDelete,
|
|
isRenaming,
|
|
setIsRenaming,
|
|
shareOpen,
|
|
setShareOpen,
|
|
handoffOpen,
|
|
setHandoffOpen,
|
|
handoffPreset,
|
|
setHandoffPreset,
|
|
handleHandoffProfile,
|
|
};
|
|
}
|
|
|
|
/** Tab body: inline rename input while renaming, normal trigger content otherwise. */
|
|
function SessionTabBody({
|
|
props,
|
|
isRenaming,
|
|
renameInitial,
|
|
renameSeqBadge,
|
|
onCommitRename,
|
|
onCancelRename,
|
|
...contentProps
|
|
}: {
|
|
props: IDockviewPanelHeaderProps;
|
|
isRenaming: boolean;
|
|
renameInitial: string;
|
|
renameSeqBadge: number | null;
|
|
onCommitRename: (next: string) => void;
|
|
onCancelRename: () => void;
|
|
sessionId: string | undefined;
|
|
isPrimary: boolean;
|
|
showMultiSessionBadges: boolean;
|
|
sessionNumber: number | null;
|
|
agentName: string | null;
|
|
sessionState: TaskSessionState | null;
|
|
isActive: boolean;
|
|
showDeleteOnClose: boolean;
|
|
isDeleting: boolean;
|
|
onCloseTab: () => void;
|
|
}) {
|
|
if (isRenaming) {
|
|
return (
|
|
<TabRenameInput
|
|
initial={renameInitial}
|
|
seqBadge={renameSeqBadge}
|
|
onCommit={onCommitRename}
|
|
onCancel={onCancelRename}
|
|
testId="session-tab-rename-input"
|
|
maxLength={MAX_SESSION_NAME_LENGTH}
|
|
/>
|
|
);
|
|
}
|
|
return <SessionTabTriggerContent props={props} {...contentProps} />;
|
|
}
|
|
|
|
/** Keeps the Dockview panel title synchronized when Dockview restores a stale title. */
|
|
function useSessionTabTitleSync(api: IDockviewPanelHeaderProps["api"], tabTitle: string | null) {
|
|
useEffect(() => {
|
|
const syncTitle = () => {
|
|
if (tabTitle && api.title !== tabTitle) api.setTitle(tabTitle);
|
|
};
|
|
syncTitle();
|
|
const disposable = api.onDidTitleChange(syncTitle);
|
|
return () => disposable.dispose();
|
|
}, [tabTitle, api]);
|
|
}
|
|
|
|
/**
|
|
* Custom dockview tab for session panels.
|
|
* Shows agent logo, index badge, and star for primary; right-click for lifecycle actions.
|
|
*/
|
|
export function SessionTab(props: IDockviewPanelHeaderProps) {
|
|
const { api, containerApi } = props;
|
|
const sessionId = api.id.startsWith("session:") ? api.id.slice("session:".length) : undefined;
|
|
const {
|
|
isPrimary,
|
|
sessionState,
|
|
taskId,
|
|
tabTitle,
|
|
sessionName,
|
|
agentName,
|
|
sessionNumber,
|
|
sessionCount,
|
|
} = useSessionTabState(sessionId);
|
|
const actions = useSessionTabActions(sessionId, taskId, api, containerApi);
|
|
const onDoubleClick = useTabMaximizeOnDoubleClick(api);
|
|
const dialogs = useSessionTabDialogState(sessionId);
|
|
const handleCommitRename = useSessionRenameCommitter(sessionId, taskId, sessionName, () =>
|
|
dialogs.setIsRenaming(false),
|
|
);
|
|
const isActive = useDockviewTabActiveState(api);
|
|
const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
|
|
const canShare = !!taskId && !!sessionId && shareableSessionStateClient(sessionState);
|
|
|
|
useSessionTabTitleSync(api, tabTitle);
|
|
|
|
const showMultiSessionBadges = sessionCount > 1;
|
|
// Multi-session tab close means delete, not hide-only. Running/starting sessions are
|
|
// not deletable, so we omit the X rather than reviving hide-only close behavior.
|
|
const showDeleteOnClose = showMultiSessionBadges && !!sessionState && isDeletable(sessionState);
|
|
const { setConfirmDelete, setIsRenaming, setShareOpen } = dialogs;
|
|
const {
|
|
handleCloseTab,
|
|
handleDeleteDialogOpenChange,
|
|
handleConfirmDelete,
|
|
handleMenuDelete,
|
|
isDeletingFromTab,
|
|
} = useSessionTabDelete(setConfirmDelete, actions.handleDelete);
|
|
const { handlePointerDownCapture, handleKeyDownCapture } = useSessionTabUserActivationIntent(
|
|
sessionId,
|
|
activeSessionId,
|
|
isActive,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<ContextMenu>
|
|
<ContextMenuTrigger
|
|
className="flex h-full items-center cursor-pointer select-none"
|
|
data-testid={sessionId ? `session-tab-${sessionId}` : undefined}
|
|
onPointerDownCapture={handlePointerDownCapture}
|
|
onKeyDownCapture={handleKeyDownCapture}
|
|
onDoubleClick={onDoubleClick}
|
|
>
|
|
<SessionTabBody
|
|
props={props}
|
|
isRenaming={dialogs.isRenaming}
|
|
renameInitial={sessionName || tabTitle || ""}
|
|
renameSeqBadge={showMultiSessionBadges ? sessionNumber : null}
|
|
onCommitRename={handleCommitRename}
|
|
onCancelRename={() => setIsRenaming(false)}
|
|
sessionId={sessionId}
|
|
isPrimary={isPrimary}
|
|
showMultiSessionBadges={showMultiSessionBadges}
|
|
sessionNumber={sessionNumber}
|
|
agentName={agentName}
|
|
sessionState={sessionState}
|
|
isActive={isActive}
|
|
showDeleteOnClose={showDeleteOnClose}
|
|
isDeleting={isDeletingFromTab}
|
|
onCloseTab={handleCloseTab}
|
|
/>
|
|
</ContextMenuTrigger>
|
|
<SessionContextMenuItems
|
|
sessionState={sessionState}
|
|
isPrimary={isPrimary}
|
|
canShare={canShare}
|
|
taskId={taskId}
|
|
sessionId={sessionId}
|
|
actions={actions}
|
|
onDelete={handleMenuDelete}
|
|
onShare={() => setShareOpen(true)}
|
|
onHandoffProfile={dialogs.handleHandoffProfile}
|
|
onStartRename={() => setIsRenaming(true)}
|
|
/>
|
|
</ContextMenu>
|
|
<SessionTabDialogs
|
|
confirmDelete={dialogs.confirmDelete}
|
|
setConfirmDelete={handleDeleteDialogOpenChange}
|
|
isPrimary={isPrimary}
|
|
sessionCount={sessionCount}
|
|
onConfirmDelete={handleConfirmDelete}
|
|
taskId={taskId}
|
|
sessionId={sessionId}
|
|
shareOpen={dialogs.shareOpen}
|
|
setShareOpen={setShareOpen}
|
|
handoffOpen={dialogs.handoffOpen}
|
|
setHandoffOpen={dialogs.setHandoffOpen}
|
|
handoffPreset={dialogs.handoffPreset}
|
|
setHandoffPreset={dialogs.setHandoffPreset}
|
|
groupId={api.group?.id}
|
|
/>
|
|
</>
|
|
);
|
|
}
|