Function ApiKeysSection

web/src/app/profile/components/api-keys-section.tsx:50–372

()

}

export function ApiKeysSection() {
  const { toast } = useToast()
  const queryClient = useQueryClient()

  const {
    data: tokensData,
    isLoading: loadingTokens,
    error: tokensError,
    refetch: refetchTokens,
    isFetching: fetchingTokens,
  } = useQuery({
    queryKey: ['personal-access-tokens'],
    queryFn: fetchTokens,
  })

  // Filter tokens to only show PATs (not CLI sessions)
  const tokens = (tokensData?.tokens ?? []).filter(
    (token) => token.type === 'pat',
  )

  const [createTokenOpen, setCreateTokenOpen] = useState(false)
  const [tokenName, setTokenName] = useState('')
  const [expiresInDays, setExpiresInDays] = useState(365)
  const [newTokenValue, setNewTokenValue] = useState('')
  const [showTokenValue, setShowTokenValue] = useState(false)
  const [copiedTokenId, setCopiedTokenId] = useState<string | null>(null)
  const [revokeDialogOpen, setRevokeDialogOpen] = useState(false)
  const [tokenToRevoke, setTokenToRevoke] = useState<string | null>(null)

  const createTokenMutation = useMutation({
    mutationFn: async ({
      name,
      expiresInDays,
    }: {
      name?: string
      expiresInDays: number
    }) => {
      const res = await fetch('/api/api-keys', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, expiresInDays }),
      })
      if (!res.ok) {
        const errorText = await res.text()
        throw new Error(errorText)
      }
      return res.json()
    },
    onSuccess: async (data) => {
      await queryClient.invalidateQueries({
        queryKey: ['personal-access-tokens'],
      })
      setNewTokenValue(data.token)
      setShowTokenValue(true)
      toast({ title: 'API Key created' })
    },
    onError: (e: any) => {
      toast({