kandev/apps/web/components/task/session-tab.tsx

"use client";

import { useCallback, useEffect, useRef, useState } 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,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@kandev/ui/context-menu";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@kandev/ui/alert-dialog";
import { useAppStore } from "@/components/state-provider";
import {
  useSessionActions,
  isSessionStoppable as isStoppable,
  isSessionDeletable as isDeletable,
  isSessionResumable as isResumable,
} from "@/hooks/domains/session/use-session-actions";
import { shareableSessionStateClient } from "@/components/task/share/share-button";
import { ShareDialog } from "@/components/task/share/share-dialog";
import { HandoffContextMenuSub } from "@/components/task/handoff-profile-menu-items";
import { NewSessionDialog, type HandoffPreset } from "@/components/task/new-session-dialog";
import { usableConfigOptions } from "@/components/model-config-selector";
import type { TaskSessionState } from "@/lib/types/http";
import { isSessionActive } from "./session-sort";
import { resolveSessionTabTitle } from "./session-tab-title";
import { useTabMaximizeOnDoubleClick } from "./use-tab-maximize";

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 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({
      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, agentName, sessionNumber, sessionCount };
}

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 DeleteSessionDialog({
  open,
  onOpenChange,
  isPrimary,
  sessionCount,
  onConfirm,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  isPrimary: boolean;
  sessionCount: number;
  onConfirm: () => void;
}) {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete session?</AlertDialogTitle>
          <AlertDialogDescription asChild>
            <div>
              <p>This will permanently delete the conversation history with this session.</p>
              {isPrimary && sessionCount > 1 && (
                <p className="mt-2 font-medium">
                  This is the primary session. Another session will be set as primary.
                </p>
              )}
              {sessionCount === 1 && (
                <p className="mt-2 font-medium">This is the only session for this task.</p>
              )}
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel className="cursor-pointer">Cancel</AlertDialogCancel>
          <AlertDialogAction
            onClick={() => {
              onOpenChange(false);
              onConfirm();
            }}
            className="cursor-pointer bg-destructive text-destructive-foreground hover:bg-destructive/90"
          >
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

function SessionContextMenuItems({
  sessionState,
  isPrimary,
  canShare,
  taskId,
  sessionId,
  actions,
  onDelete,
  onShare,
  onHandoffProfile,
}: {
  sessionState: TaskSessionState | null;
  isPrimary: boolean;
  canShare: boolean;
  taskId: string | null;
  sessionId: string | undefined;
  actions: ReturnType<typeof useSessionTabActions>;
  onDelete: () => void;
  onShare: () => void;
  onHandoffProfile: (profileId: string) => void;
}) {
  return (
    <ContextMenuContent>
      <ContextMenuItem
        className="cursor-pointer"
        onSelect={actions.handleSetPrimary}
        disabled={isPrimary || !sessionState || !isStoppable(sessionState)}
      >
        Set as Primary
      </ContextMenuItem>
      <ContextMenuSeparator />
      {sessionState && isStoppable(sessionState) && (
        <ContextMenuItem className="cursor-pointer" onSelect={actions.handleStop}>
          Stop
        </ContextMenuItem>
      )}
      {sessionState && isResumable(sessionState) && (
        <ContextMenuItem className="cursor-pointer" onSelect={actions.handleResume}>
          Resume
        </ContextMenuItem>
      )}
      {sessionState && isDeletable(sessionState) && (
        <ContextMenuItem className="cursor-pointer text-destructive" onSelect={onDelete}>
          Delete
        </ContextMenuItem>
      )}
      {canShare && (
        <>
          <ContextMenuSeparator />
          <ContextMenuItem className="cursor-pointer" onSelect={onShare}>
            Share
          </ContextMenuItem>
        </>
      )}
      {taskId && sessionId && (
        <>
          <ContextMenuSeparator />
          <HandoffContextMenuSub taskId={taskId} onSelectProfile={onHandoffProfile} />
        </>
      )}
      <ContextMenuSeparator />
      <ContextMenuItem className="cursor-pointer" onSelect={actions.handleCloseOthers}>
        Close Others
      </ContextMenuItem>
    </ContextMenuContent>
  );
}

function SessionTabTriggerContent({
  props,
  sessionId,
  isPrimary,
  showMultiSessionBadges,
  sessionNumber,
  agentName,
  sessionState,
  isActive,
  showDeleteOnClose,
  onCloseTab,
}: {
  props: IDockviewPanelHeaderProps;
  sessionId: string | undefined;
  isPrimary: boolean;
  showMultiSessionBadges: boolean;
  sessionNumber: number | null;
  agentName: string | null;
  sessionState: TaskSessionState | null;
  isActive: boolean;
  showDeleteOnClose: boolean;
  onCloseTab: () => void;
}) {
  const tabContentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!showDeleteOnClose || !sessionId) return;
    const closeAction = tabContentRef.current?.querySelector(".dv-default-tab-action");
    if (!closeAction) return;
    closeAction.setAttribute("data-testid", `session-tab-close-${sessionId}`);
    return () => closeAction.removeAttribute("data-testid");
  }, [showDeleteOnClose, sessionId, isActive]); // isActive: re-run when tab activates so Dockview renders .dv-default-tab-action

  return (
    <div ref={tabContentRef} 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}
        closeActionOverride={showDeleteOnClose ? onCloseTab : undefined}
      />
    </div>
  );
}

/**
 * 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, agentName, sessionNumber, sessionCount } =
    useSessionTabState(sessionId);
  const actions = useSessionTabActions(sessionId, taskId, api, containerApi);
  const onDoubleClick = useTabMaximizeOnDoubleClick(api);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [shareOpen, setShareOpen] = useState(false);
  const [handoffOpen, setHandoffOpen] = useState(false);
  const [handoffPreset, setHandoffPreset] = useState<HandoffPreset | null>(null);
  const [isActive, setIsActive] = useState(api.isActive);
  const canShare = !!taskId && !!sessionId && shareableSessionStateClient(sessionState);
  const handleHandoffProfile = useCallback(
    (profileId: string) => {
      if (!sessionId) return;
      setHandoffPreset({ sourceSessionId: sessionId, targetProfileId: profileId });
      setHandoffOpen(true);
    },
    [sessionId],
  );

  useEffect(() => {
    const disposable = api.onDidActiveChange((e) => setIsActive(e.isActive));
    return () => disposable.dispose();
  }, [api]);

  useEffect(() => {
    if (tabTitle && api.title !== tabTitle) api.setTitle(tabTitle);
  }, [tabTitle, api]);

  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 handleCloseTab = useCallback(() => {
    setConfirmDelete(true);
  }, []);

  return (
    <>
      <ContextMenu>
        <ContextMenuTrigger
          className="flex h-full items-center cursor-pointer select-none"
          data-testid={sessionId ? `session-tab-${sessionId}` : undefined}
          onDoubleClick={onDoubleClick}
        >
          <SessionTabTriggerContent
            props={props}
            sessionId={sessionId}
            isPrimary={isPrimary}
            showMultiSessionBadges={showMultiSessionBadges}
            sessionNumber={sessionNumber}
            agentName={agentName}
            sessionState={sessionState}
            isActive={isActive}
            showDeleteOnClose={showDeleteOnClose}
            onCloseTab={handleCloseTab}
          />
        </ContextMenuTrigger>
        <SessionContextMenuItems
          sessionState={sessionState}
          isPrimary={isPrimary}
          canShare={canShare}
          taskId={taskId}
          sessionId={sessionId}
          actions={actions}
          onDelete={() => setConfirmDelete(true)}
          onShare={() => setShareOpen(true)}
          onHandoffProfile={handleHandoffProfile}
        />
      </ContextMenu>
      <DeleteSessionDialog
        open={confirmDelete}
        onOpenChange={setConfirmDelete}
        isPrimary={isPrimary}
        sessionCount={sessionCount}
        onConfirm={actions.handleDelete}
      />
      {taskId && sessionId && (
        <ShareDialog
          open={shareOpen}
          onOpenChange={setShareOpen}
          taskId={taskId}
          sessionId={sessionId}
        />
      )}
      {taskId && handoffPreset && (
        <NewSessionDialog
          open={handoffOpen}
          onOpenChange={(open) => {
            setHandoffOpen(open);
            if (!open) setHandoffPreset(null);
          }}
          taskId={taskId}
          groupId={api.group?.id}
          handoff={handoffPreset}
        />
      )}
    </>
  );
}