Function ThreadSelector

notfair-cmo/src/components/thread-selector.tsx:100–197

({
  projectSlug,
  agentSlug,
  sessions,
  activeSessionId,
}: Props)

}

export function ThreadSelector({
  projectSlug,
  agentSlug,
  sessions,
  activeSessionId,
}: Props) {
  const router = useRouter();
  const [pending, start] = useTransition();
  const active = sessions.find((s) => s.sessionId === activeSessionId);

  function go(sessionId: string) {
    if (sessionId === activeSessionId) return;
    start(() =>
      router.push(projectHref(projectSlug, `/agents/${agentSlug}/chat/${sessionId}`)),
    );
  }

  function newThread() {
    const id = crypto.randomUUID();
    start(() =>
      router.push(projectHref(projectSlug, `/agents/${agentSlug}/chat/${id}`)),
    );
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="min-w-[200px] justify-between"
          disabled={pending}
        >
          <span className="truncate text-left">
            {active ? displayTitle(active) : "Pick a thread"}
          </span>
          <ChevronsUpDown className="ml-2 size-3.5 shrink-0 text-muted-foreground" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-72">
        <DropdownMenuLabel className="text-xs text-muted-foreground">
          Threads ({sessions.length}) · from OpenClaw
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        {sessions.length === 0 && (
          <DropdownMenuItem disabled>No threads yet</DropdownMenuItem>
        )}
        {(() => {
          const groups = groupBySection(sessions);
          const present = SECTION_ORDER.filter((k) => (groups.get(k)?.length ?? 0) > 0);
          return present.map((key, idx) => {
            const rows = groups.get(key)!;
            return (
              <div key={key}>
                {idx > 0 && <DropdownMenuSeparator />}
                <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
                  {SECTION_TITLES[key]} ({rows.length})
                </DropdownMenuLabel>