kandev/apps/web/components/task-create-dialog-options.tsx

"use client";

import { useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useAppStore, useAppStoreApi } from "@/components/state-provider";
import { t } from "@/lib/i18n";
import { IconGitBranch, IconTerminal2 } from "@tabler/icons-react";
import { Badge } from "@kandev/ui/badge";
import { ScrollOnOverflow } from "@kandev/ui/scroll-on-overflow";
import type {
  LocalRepository,
  Repository,
  Branch,
  Executor,
  ExecutorProfile,
} from "@/lib/types/http";
import type { AgentProfileOption } from "@/lib/state/slices";
import { useAvailableAgents } from "@/hooks/domains/settings/use-available-agents";
import { useFeature } from "@/hooks/domains/features/use-feature";
import {
  isSelectableAgentProfile,
  refreshProfileCapabilities,
} from "@/lib/state/slices/settings/types";
import { formatUserHomePath, truncateRepoPath } from "@/lib/utils";
import { getExecutorIcon } from "@/lib/executor-icons";
import { AgentLogo } from "@/components/agent-logo";
import { getCapabilityWarning } from "@/lib/capability-warning";
import { buildBranchKeywords } from "./branch-picker-options";
import {
  ensureAgentProfileRecentUseLoaded,
  orderAgentProfilesByRecentUse,
} from "@/lib/agent-profile-recent-use";
import type { AgentProfileRecentUseContext } from "@/lib/types/http-agent-profile-recent-use";

type OptionItem = {
  value: string;
  label: string;
  renderLabel: () => React.ReactNode;
  renderTriggerLabel?: () => React.ReactNode;
  disabled?: boolean;
  disabledReason?: string;
};

export function useRepositoryOptions(
  repositories: Repository[],
  discoveredRepositories: LocalRepository[],
) {
  const repositoryOptions = useMemo(() => {
    const normalizeRepoPath = (path: string) => path.replace(/\\/g, "/").replace(/\/+$/g, "");
    const workspaceRepoPaths = new Set(
      repositories
        .map((repo: Repository) => repo.local_path)
        .filter(Boolean)
        .map((path: string) => normalizeRepoPath(path)),
    );
    const localRepoOptions = discoveredRepositories.filter(
      (repo: LocalRepository) => !workspaceRepoPaths.has(normalizeRepoPath(repo.path)),
    );
    return [
      ...repositories.map((repo: Repository) => ({
        value: repo.id,
        label: repo.name,
        renderLabel: () => (
          <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
            <span className="shrink-0">{repo.name}</span>
            {repo.local_path ? (
              <Badge
                variant="secondary"
                className="text-xs text-muted-foreground max-w-[140px] min-w-0 truncate ml-auto"
                title={formatUserHomePath(repo.local_path)}
              >
                {truncateRepoPath(repo.local_path, 24)}
              </Badge>
            ) : null}
          </span>
        ),
      })),
      ...localRepoOptions.map((repo: LocalRepository) => ({
        value: repo.path,
        label: truncateRepoPath(repo.path, 24),
        renderLabel: () => (
          <span
            className="flex min-w-0 flex-1 items-center overflow-hidden"
            title={formatUserHomePath(repo.path)}
          >
            <span className="truncate">{truncateRepoPath(repo.path, 28)}</span>
          </span>
        ),
      })),
    ];
  }, [repositories, discoveredRepositories]);

  const headerRepositoryOptions = useMemo(() => {
    return repositoryOptions.map((opt) => ({
      ...opt,
      renderLabel: () => <span className="truncate">{opt.label}</span>,
    }));
  }, [repositoryOptions]);

  return { repositoryOptions, headerRepositoryOptions };
}

export function useBranchOptions(branchOptionsRaw: Branch[]) {
  return useMemo(() => {
    return branchOptionsRaw.map((branchObj: Branch) => {
      const displayName =
        branchObj.type === "remote" && branchObj.remote
          ? `${branchObj.remote}/${branchObj.name}`
          : branchObj.name;
      // Keywords give the scorer extra surfaces to match against: the leaf
      // branch name, every path segment, and (for remotes) the remote name.
      const keywords = buildBranchKeywords(branchObj.name, branchObj.remote);
      return {
        value: displayName,
        label: displayName,
        keywords,
        renderLabel: () => (
          <span className="flex min-w-0 flex-1 items-center justify-between gap-2">
            <span className="flex min-w-0 items-center gap-1.5">
              <IconGitBranch className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
              <span className="truncate" title={displayName}>
                {displayName}
              </span>
            </span>
            <Badge variant="outline" className="text-xs">
              {branchObj.type === "local" ? "local" : branchObj.remote || "remote"}
            </Badge>
          </span>
        ),
      };
    });
  }, [branchOptionsRaw]);
}

export function useAgentProfileOptions(
  agentProfiles: AgentProfileOption[],
  context?: AgentProfileRecentUseContext,
): OptionItem[] {
  const { t } = useTranslation();
  // Keep capability discovery alive for every selector surface. The host
  // catalog supplies health status only; it never participates in model-ID
  // matching or selector eligibility.
  const availableAgents = useAvailableAgents();
  const dynamicRoutingEnabled = useFeature("dynamicAgentRouting");
  const storeApi = useAppStoreApi();
  const recentUseLoaded = useAppStore((state) => !context || state.agentProfileRecentUse.loaded);
  const recentProfileIds = useAppStore((state) =>
    context ? state.agentProfileRecentUse?.records[context]?.profileIds : undefined,
  );
  useEffect(() => {
    if (!context || recentUseLoaded) return;
    void ensureAgentProfileRecentUseLoaded(storeApi);
  }, [context, recentUseLoaded, storeApi]);
  return useMemo(() => {
    const profilesWithCapabilities = refreshProfileCapabilities(
      agentProfiles,
      availableAgents.items,
    );
    // Disabled profiles stay in the store (existing sessions keep their
    // labels) but are never offered as a choice for new work.
    const selectable = profilesWithCapabilities.filter((profile) =>
      isSelectableAgentProfile(profile, dynamicRoutingEnabled),
    );
    const orderedProfiles = context
      ? orderAgentProfilesByRecentUse(selectable, recentProfileIds)
      : selectable;
    return orderedProfiles.map((profile: AgentProfileOption) => {
      const parts = profile.label.split(" \u2022 ");
      const agentLabel = parts[0] ?? profile.label;
      const profileLabel = parts[1] ?? "";
      const isPassthrough = profile.cli_passthrough === true;
      const warning = getCapabilityWarning(profile.capability_status, profile.capability_error);
      const renderProfileLabel = () => (
        <span className="flex min-w-0 flex-1 flex-col gap-1">
          <span className="flex shrink-0 items-center justify-between gap-2">
            <span className="flex shrink-0 items-center gap-1.5">
              <AgentLogo agentName={profile.agent_name} className="shrink-0" />
              <span>{agentLabel}</span>
              {warning && (
                <warning.Icon className={`size-3.5 ${warning.color}`} title={warning.title} />
              )}
            </span>
            <span className="flex shrink-0 items-center gap-1.5">
              {isPassthrough && (
                <IconTerminal2
                  className="size-3.5 text-muted-foreground"
                  title={t("common:cliModeYourPromptWillBe")}
                />
              )}
              {profileLabel ? (
                <ScrollOnOverflow className="rounded-full border border-border px-2 py-0.5 text-xs">
                  {profileLabel}
                </ScrollOnOverflow>
              ) : null}
            </span>
          </span>
        </span>
      );
      return {
        value: profile.id,
        label: profile.label,
        disabled: undefined,
        disabledReason: undefined,
        renderLabel: renderProfileLabel,
        renderTriggerLabel: renderProfileLabel,
      };
    });
  }, [agentProfiles, availableAgents.items, context, dynamicRoutingEnabled, recentProfileIds, t]);
}

export function useExecutorOptions(executors: Executor[]): OptionItem[] {
  return useMemo(() => {
    return executors.map((executor: Executor) => {
      const Icon = getExecutorIcon(executor.type);
      return {
        value: executor.id,
        label: executor.name,
        renderLabel: () => (
          <span className="flex min-w-0 flex-1 items-center gap-2">
            <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
            <span className="truncate">{executor.name}</span>
          </span>
        ),
      };
    });
  }, [executors]);
}

export function useIsLocalExecutor(executors: Executor[], executorId: string): boolean {
  return useMemo(() => {
    const selected = executors.find((e: Executor) => e.id === executorId);
    return selected?.type === "local" || selected?.type === "local_pc";
  }, [executors, executorId]);
}

export function computeExecutorHint(
  executors: Executor[],
  executorId: string,
  repoCount: number,
): string | null {
  const selectedExecutor = executors.find((e: Executor) => e.id === executorId);
  if (selectedExecutor?.type === "worktree") {
    if (repoCount > 1) {
      return t("task:executorHintWorktreeMulti");
    }
    return t("task:executorHintWorktreeSingle");
  }
  if (selectedExecutor?.type === "local_docker" || selectedExecutor?.type === "remote_docker") {
    return t("task:executorHintDocker");
  }
  if (selectedExecutor?.type === "local" || selectedExecutor?.type === "local_pc")
    return t("task:executorHintLocal");
  return null;
}

export function useExecutorHint(
  executors: Executor[],
  executorId: string,
  repoCount: number,
): string | null {
  return useMemo(
    () => computeExecutorHint(executors, executorId, repoCount),
    [executors, executorId, repoCount],
  );
}

export type ExecutorProfileOptionItem = OptionItem & {
  executorType?: string;
  executorName?: string;
};

export type ExecutorProfileOptionsConfig = {
  /**
   * Returns a tooltip string when the given profile should render disabled.
   * Used by the kanban task-create dialog for repository-mode executor
   * capability gates.
   */
  disabledReasonFor?: (profile: ExecutorProfile) => string | null;
};

export function useExecutorProfileOptions(
  allProfiles: ExecutorProfile[],
  config?: ExecutorProfileOptionsConfig,
): ExecutorProfileOptionItem[] {
  const disabledReasonFor = config?.disabledReasonFor;
  return useMemo(() => {
    return allProfiles.map((profile) => {
      const Icon = getExecutorIcon(profile.executor_type ?? "local");
      const disabledReason = disabledReasonFor?.(profile) ?? null;
      return {
        value: profile.id,
        label: profile.name,
        executorType: profile.executor_type,
        executorName: profile.executor_name,
        disabled: !!disabledReason,
        disabledReason: disabledReason ?? undefined,
        renderLabel: () => (
          <span className="flex min-w-0 flex-1 items-center justify-between gap-2">
            <span className="flex min-w-0 items-center gap-1.5">
              <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
              <span className="truncate">{profile.name}</span>
            </span>
            {profile.executor_name && (
              <Badge variant="outline" className="text-xs">
                {profile.executor_name}
              </Badge>
            )}
          </span>
        ),
      };
    });
  }, [allProfiles, disabledReasonFor]);
}